2020-2021/SNT/02_Image_Numerique/index.rst

Image Numérique
###############

:date: 2020-11-03
:modified: 2021-01-05
:authors: Benjamin Bertrand
:tags: Python, Image
:category: SNT
:summary: Image numérique avec les SNT

Étape 1: Stockage d'une image et résolution
===========================================

On commence par poser une question générale: Comment est stockée une image numérique? On s'attend à ce que la notion de pixel et éventuellement de bit (0 ou 1) ressorte.

On peut alors expliquer ce que l'image est découpée en un rectangle de pixels et on introduit la notion de résolution d'une image. On peut montrer aux élèves le zoom sur une image pour voir ces pixels. On distribue des images en noir et blanc en gros pixels pour calculer la résolution. 

On dépose la même image sur le réseau mais avec différentes qualités. Comparaison des rendus.

À partir de la résolution, on calcule le nombre de pixels et on en profite pour parler des préfixes des tailles (Méga, kilo ...) mais sans complexifier (encore) avec la distinction entre puissances de 10 et de 2.


Puis on élargie la recherche sur la résolution à travers la recherche des résolutions disponibles sur les vidéos youtube, sur leur écran de téléphone, les photos qu'ils peuvent prendre... Certaines résolutions pourront avoir des noms énigmatiques (4K, 240p...) qu'il faudra explorer.

Cours: définitions pixel, résolution. Quelques résolutions à connaître.

.. image:: ./1B_pixels_definition.pdf
    :height: 200px
    :alt: Définition de définition et pixels


Étape 2: Décrire les pixels d'une image
=======================================

On rappelle que l'ordinateur ne comprend que 0 ou 1, des bits. On demande aux élèves de décrire avec des bits les images en noir et blanc, quitte à leur faire créer leur image à eux. Pour ensuite échanger avec leurs camarades pour qu'il reconstruisent l'image initiale.

On continue sur l'ordinateur en écrivant avec notepad++ des fichiers BMP P1 puis en les ouvrants avec GIMP.

Se pose ensuite la question des niveaux de gris. Idem avec notepad++ et les BMP P2. Ici il est intéressant d'évoquer les puissances de 2 pour parler de la profondeur de gris.

Enfin, on recommence avec la couleur et BMP P3.

Cours: Notion de bit, d'octet. Images NB

.. image:: ./2B_bits_images.pdf
    :height: 200px
    :alt: Image bitmap et noir et blanc

Cours: image gris et couleurs

.. image:: ./2B_gris_couleurs.pdf
    :height: 200px
    :alt: Image bitmap en gris et couleurs

Étape 3: Les couleurs des images
================================

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..!)

Images de travail (clic droit - enregistrer l'image sous)

.. 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

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  <./page_css/page_avec_css.html>`_
- `Code css  <./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
========================

`Images à télécharger pour la séance <./img_meta.zip>`_

Avec l'image 4, je raconte qu'elle a été prise il y a 30min et que c'était trop bien! Ce qui est impossible! On explique comment on peut vérifier l'information à partir des métadonnées avec Gimp ou un autre logiciel. C'est l'occasion de reparlé des métadonnées vues en début de séquence.

Les élèves doivent alors placer sur une frise chronologique les photos, trouver les appareils photos utilisés pour les prendre puis ils pourront utiliser `coordonnees-gps.fr <coordonnees-gps.fr>`_ pour déterminer d'où elles ont été prises.

On explique comme modifier les métadonnées. Les élèves à partir des images téléchargées doivent modifier les métadonnées pour qu'on croit à une histoire qu'ils racontent.

.. image:: ./3B_couleur_metadonnees.pdf
    :height: 200px
    :alt: Bilan sur les couleurs et les métadonnées


Étape 5: Métiers le l'image numérique
=====================================

Préparation d'un exposé de 2-3 minutes sur les métiers liés à l'image numérique. Les élèves préparent une page web sur un métier choisi. Ils devront ensuite faire une présentation orale pour présenter le métier.

Informations sur le métier:

- Description des activités du métier
- Études à réaliser (avec éventuellement des noms d'écoles)
- Les qualités
- Le salaire
- Liens vers les sources d'informations

Idées de métiers:

- Infographiste/graphiste
- Animateur 2D/2D
- Desinger UX/UI
- Photographe
- Monteur vidéo
- Ingénieur en traitement d'images
- Directeur artistique
- Illustrateur

Tous les élèves préparent une page web. Seuls quelqu'un passent à l'oral pour la présentation.

Pour la page web, les deux fichiers suivant doivent être enregistré dans le même répertoire puis modifiés pour décrire le métier.

- `Code html (clique droit - enregistrer le lien sous) <./page_css/page_avec_css.html>`_
- `Code css (clique droit - enregistrer le lien sous) <./page_css/style.css>`_

Évaluation (/10) + 5 si vous passez à l'oral:

- 5pts sur la description du métier
- 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