Traitement d’image !

cm 2019-05 ICN triangle de Maxwell

On veut finir enfin cette création numérique, à l’aide du document ci-dessous (travaux rendus en première sur MBN, travail terminé ensemble en seconde)


TP : traitement d’image pixel par pixel avec PIL/pillow

On part de cette image, à enregistrer dans le dossier de travail sous ‘Taormine.jpg’.

Taormine

Tester ce code :

import PIL.Image as Image
im = Image.open('taormine.jpg')
print("Image chargée")

largeur,hauteur=im.size
pix = im.load()

#N&B
print("Début du traitement N&B")
for y in range(hauteur):
    for x in range(largeur):
        (r,v,b)=pix[x,y]
        moyenne=(r+v+b)//3
        pix[x,y]=(moyenne,moyenne,moyenne)
im.save('N&B.jpg')
print("Image N&B enregistrée")
print("Fin du traitement N&B")

Convaincu.e ?

Reste à obtenir toutes celles-là ! Et d’autres ?

Le tableau en seconde ICN 2GT9 :

Pour vendredi … 7 juin, dernier cours :’-( , venir avec un « selfie » sur fond vert flash ou une couleur improbable unie.

Le but est de réaliser un « fake selfie » :

 

Triangle de Maxwell – en python ?

Comme l’a dit le physicien américain Richard Feynman « C’est parce que la vitesse de la lumière est supérieure à celle du son que certains ont l’air brillants avant d’avoir l’air cons » !

cm 2019-05 ICN triangle de Maxwell

On va essayer… il nous faut la bibliothèque PIL ou pillow qui crée, modifie et enregistre des images … cliquer sur « lire la suite »…

Lire la suite

Triangle de Maxwell

On veut réaliser une création numérique : un beau « triangle de Maxwell »

cm 2019-05 ICN triangle de Maxwell

Qu’est-ce que c’est ?

Mais d’abord, quelques notions commentées :

Et une réalisation sous geogebra pour obtenir ceci :

cm 2019-05-02 ICN 2GT9 Triangle Maxwell

Prochaine étape : le réaliser en python ! A suivre…

TP noté – html – css – dernier jet avec un menu

Cette semaine essayons d’intégrer un menu et plusieurs pages à notre site web :

Ça se passe dans une balise nav à mettre par exemple au début du body dans laquelle on met :

<ul>
	<li><a href="epagneul.html">Epagneul</a></li>
	<li><a href="moi.html">Moi</a></li>
	<li><a href="... .html">Mathonomie ICN Seconde</a></li>
</ul>

Il suffit ensuite de copie la page epagneul.html et l’appeler moi.html pour que ce menu fonctionne. Changer le contenu de la page moi.html !

Enfin, pour que ce menu soit mis en forme, ça se passe dans… le css !

Par exemple :

nav
{
  position: fixed;
  top: 10px;
  left: 5px;
  width: 98%;
}

nav a, a:visited, a:focus, a:active
{
  text-decoration: none;
  color: black;
}

nav a:hover
{
  text-decoration: none;
  color: #bb0000;
}
nav ul
{
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  display: flex;
  justify-content: space-around;
  background-color: lightgrey;
  box-shadow: 5px 5px 15px black;
}

La semaine dernière, j’ai affiné les notes provisoires, on continue cette semaine !

Rendez-vous le … 3 mai !

Suite et fin du TP noté – html – css

La semaine dernière, j’ai mis des notes provisoires, on continue cette semaine !

Rappel : on dispose dans le dossier « classes/classe de 2GT9/Cours/ICN » d’un dossier « icn-tp-html-css-epagneul ». Vous l’avez copié dans votre dossier « classes/classe de 2GT9/Devoir/(Vous) ».

TP : modifier les fichiers

  • epagneul.html
  • /styles/epagneul.css

Pour que la page « epagneul.html » ressemble au modèle « modele.png » contenue dans le dossier.

Les textes sont à copier/coller depuis le fichier « textes.txt ».

Pour y arriver, rechercher sur internet les attributs css possibles et demander l’aide du professeur.

Vous pouvez travailler à deux sur le même poste.

Bon courage !

TP noté – html – css

On dispose dans le dossier « classes/classe de 2GT9/Cours/ICN » d’un dossier « icn-tp-html-css-epagneul ».

Le copier dans votre dossier « classes/classe de 2GT9/Devoir/(Vous) ».

Modifier les fichiers

  • epagneul.html
  • /styles/epagneul.css

Pour que la page « epagneul.html » ressemble au modèle « modele.png » contenue dans le dossier.

Les textes sont à copier/coller depuis le fichier « textes.txt ».

Pour y arriver, rechercher sur internet les attributs css possibles et demander l’aide du professeur.

J’ai mis des notes provisoires, on continue la semaine prochaine.

Vous pouvez travailler à deux sur le même poste.

Bon courage !

Mettre en forme – le css

La semaine dernière, nous avions appris les bases du langage html pour gérer le contenu des pages web dans des balises.

Cette semaine, on réinvestit et on précise la mise en forme dans une feuille de style à l’aide du langage css.

Cette présentation est basée sur ces sites d’élèves de terminale ISN 2016/2017, merci à eux !

Liens au lycée :

En dehors du lycée :

On a créé un dossier contenant :

  • une page index.html
  • des sous dossiers images (qui contient les images insérées dans les pages html du site), pages et css
  • dans lesquels on a crée
    • une deuxième page page2.html dans le sous-dossier pages
    • une feuille de style style.css dans le sous-dossier css

Cette feuille de style a été liée à nos pages dans l’entête.

On a changé la couleur du texte, le fond de l’image.

La semaine prochaine, TP noté pour réaliser une page dont on donnera une capture d’écran.

Première page en html – TP noté

1) On observe des pages web, comme celle-ci, en observant leur « code source » à l’aide d’un « Ctrl-U ».

2) Cours : une page html (HyperText Markup Language) a une structure de base qui ressemble à celle-ci :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

C’est un langage de balises.

3) Lire le tutoriel de Mozilla sur les balises en cliquant ici

4) Créer une page web, à l’aide d’un éditeur de texte. Je suggère Notepad++ sous Windows.

Copier la structure de base

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

et enregistrer sous « index.html » par exemple dans son dossier « devoirs » dans le dossier « classe » sur le réseau du lycée. Dans type de fichier, choisir évidemment HyperText Markup Language File .html !

Modifier le « Titre de la page » dans la balise

<title>Titre de la page</title>

et observer le changement en ouvrant cette page dans un navigateur. On préférera Mozilla Firefox à Internet Explorer !

5) Agrémenter cette page web, à l’aide de l’éditeur de texte Notepad++.

On utilisera le tutoriel de Mozilla sur les balises (cliquer ici) pour

  1. Rajouter des paragraphes et du texte à l’intérieur des paragraphes en le mettant en forme avec des passages en gras, en italique
  2. Rajouter un lien pointant vers cette page (celle que vous êtes en train de lire)
  3. Rajouter une image
  4. Rajouter une liste non ordonnée

6) Fin des tests ! Le TP lui même :

  1. Créer une page film.html dans le dossier « devoirs » dans le dossier « classe » sur le réseau du lycée.
  2. Capturer ou enregistrer une des images du film Imitation Game vu en janvier dernier. La sauvegarder en .png dans le même dossier que film.html sous image.png
  3. Ajouter cette image dans un paragraphe dans votre page film.html
  4. Expliquer ce que vous avez aimé dans une liste non ordonnée
  5. Mettre en forme !