Revenir à l’activité précédente.

1ère étape : Ouvrir un nouveau projet thimble

Ouvrir le projet thimble suivant et cliquer sur remixer :

https://thimbleprojects.org/icnboissy/433634/

Observer les trois fichiers qu’il contient. Il y a un fichier index.html et un fichier style.css, comme précédemment, mais on y trouve en plus un fichier appelé script.js. Il s’agit d’un code, écrit en langage javascript et qui est exécuté par le navigateur.

Identifier dans le fichier index.html la ligne :

<script src="script.js"></script>

Il s’agit de la ligne qui dit au navigateur de charger le fichier script.js. On repérera également la ligne :

<script>src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"</script>

Il s’agit d’un autre fichier javascript, qui contient une bibliothèque appelée p5.js. Cette bibliothèque définit de nouveaux objets et de nouvelles fonctions qui permettent notamment d’afficher et de modifier des image, ou d’interagir avec la souris.

2ème étape : Découverte du code

Essayer le programme. Normalement, quand vous cliquer sur l’image, celle-ci disparaît.

Regarder maintenant le contenu du fichier script.js. En javascript, les lignes qui commencent par par // ne sont pas exécutée. Ce sont des commentaires. Ils sont utilisés pour documenter le code. Prenez le temps de la lire.

Repérer la fonction draw() et à l’intérieur la portion de code qui est exécutée lorsque l’on ne clique pas sur la souris :

if (!mouseIsPressed){
    // ce code est executé si on ne clique pas 
    // avec la souris.
    image(img,0,0);    
  }

Repérer également la portion de code qui est exécutée lorsqu’on clique à la souris :

else {
    // ce code est exécuté si on clique avec 
    // la souris
    effacer();    
  }

Pour comprendre comment cela fonctionne, essayer de commenter les ligne image(img,0,0); ou effacer(); pour voir ce que cela change.

Essayer maintenant de faire en sorte que l’image n’apparaisse que lorsque l’on clique avec la souris et disparaisse lorsqu’on relâche le bouton.

Remettre le code comme initialement et passer à l’étape suivante.

3ème étape : Position et taille de l’image

Modifier l’affichage de l’image, par exemple avec :

image(img,mouseX,mouseY,width/5,width/5);

Quel est l’effet de cette modification ?

4ème étape : Modifier la couleur de l’image

Remettre l’affichage de l’image comme initialement avec

image(img,0,0);

Puis remplacer la fonction effacer() par la fonction changerComposantes().

Tester pour voir ce que fait cette fonction.

Chercher dans le fichier script.js le code de la fonction changerComposante(). Essayer de comprendre comment cela fonctionne.

Modifier la fonction changerComposante() de manière à ce que l’image devienne verte, puis jaune.

5ème étape : Essayer d’autre fonctions

On peut essayer maintenant d’autres fonctions. Par exemple :

• inverser()
• posteriser()
• luminosite()
• torche()
• pointillisme()

Choisir une fonction et essayer de comprendre comment elle fonctionne en regardant le code. Ne pas hésiter à faire des essais et à le modifier.

Revenir à l’activité précédente.

1ère étape : Créer un compte sur Mozilla Thimble

Thimble est un éditeur de code en ligne permettant de réaliser des pages web à l’aide des langages HTML, CSS et le JavaScript. Cet éditeur est un projet de la Fondation Mozilla, à l’origine du navigateur Firefox.

Attention : Pour fonctionner Thimble a besoin d’utiliser des cookies. Au lycée il faut donc modifier les règles de conservation de l’historique dans l’onglet Vie privée des paramètres de Firefox, ou utiliser le navigateur Chrome.

Demander au professeur une adresse mail à utiliser avec Thimble et créer un compte sur le site :

https://thimble.mozilla.org/fr/

2ème étape : Apprendre les bases des langages HTML et CSS avec Mozilla

Suivre ce tutoriel, qui s’appuie sur les guides en ligne développés par la fondation Mozilla :

https://thimbleprojects.org/icnboissy/394657

3ème étape : Créer une page pour vos peintures

Modifier la page web réalisée avec Thimble :

1. Cliquer sur , puis sur Envoyer un fichier… et téléverser :
   • le GIF animé que vous avez fait avec GIMP ;
   • l’image de la peinture que vous avez choisie sur images.nga.gov ;
   • l’image de la peinture que vous avez modifiée avec GIMP (après détourage, insertion d’un fond et modification des couleurs).
2. Insérer les trois images dans votre pages à l’aide de la balise <img>. Si la licence l’exige, donner l’origine des images utilisées.
3. Insérer une courte description de l’image (par exemple issue de l’encyclopédie en ligne Wikipedia).
4. Rajouter tous les liens hypertextes pertinents. Notamment, faire en sorte que lorsque l’on clique sur l’image originale on arrive sur le site images.nga.gov.

4ème étape : Adapter le style de la page

1. 1. Choisir, à l’aide du site paletton.com, un jeu de couleurs adapté aux couleurs de la peinture que vous avez choisie.
   2. Modifier le fichier style.css en utilisant les codes couleur choisis avec le site (les codes hexadécimaux des couleurs apparaissent au survol de la souris, mais pour les utiliser dans le fichier css, il faut rajouter un ‘#’ devant).
   3. Choisir sur fonts.google.com une ou plusieurs polices de caractère adaptées à votre page web, en cliquant sur .
   4. Utiliser les polices de caractère choisie sur votre page à l’aide de commandes du type :

      • <link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">

        insérées dans le fichier index.html

      • et

        font-family: 'Macondo', cursive; 

        insérées dans le fichier style.css.

   5. Effectuer toutes les modifications des fichiers html et css que vous jugez pertinentes.

À la fin votre page doit ressemblez à celle-là :

https://thimbleprojects.org/icnboissy/400129/

Puis passer à l’activité suivante.