Qu'allez-vous devoir faire ? 2, le retour
Remarque : vous allez trouver ici des choses notées en indice ou en exposant
Il suffit d'utiliser la balise <sub> et </sub>. Par exemple avec CO2 le 2 est ici entouré d'une balise sub de type inline puisqu'on ne passe pas à la ligne.
Et si on utilise la balise <sup> et </sup>, ça peut donner x3.
Site dont Vous êtes le Héros
- Nécessite d'avoir suivi et compris les activités Web 1 à 4.
- Intègre des notions de Javascript pour rendre le site interactif lors des questions
Ce projet consiste à créer un site d'un dizaine de pages à la présentation homogène. Il consistera en une succession de choix menant à des pages différentes en fonction des choix du joueur.
Vous allez avoir besoin d'intégrer quelques connaissances de base sur le Javascript. Les voilà :
Comment faire pour tester les réponses des joueurs ?
Et bien, pour leur permettre de rentrer des données textuelles, nous allons utiliser une nouvelle balise HTML : la balise input.
La balise span va servir à la fois de lien et de bouton déclencheur pour le script javascript. On a besoin également de l'identifier précisément pour que javascript puisse détecter qu'on clique dessus.
<p><input id="question1" type="text" /><a id="go" href="projet2/direction1.html">GO!</a></p>
Cette ligne de code donne:
On peut donc faire écrire quelque chose. Mais comment récupérer la réponse ? Là, c'est plus compliqué. Vous allez devoir utiliser autre chose que HTML et CSS. Nous allons rajouter une petite touche de Javascript à votre projet.
Pour cela, vous allez devoir rajouter dans votre HTML une balise qui donnera l'adresse de votre fichier .js, js pour javascript. Il faudra la rajouter juste avant la balise body de fin
A quoi sert le id ? A identifier de façon unique la case réponse input. L'utilisation de class permet de créer des groupes de balises mais pas d'en identifier une à coup sur.
...
<script src="js_projet_1.js"></script>
</body>
Il restera à créer ce fichier dans Notepad++ (n'oubliez de préciser le bon langage et l'encodage UTF-8)
Si vous voulez détecter qu'on clique sur le lien, voilà ce qu'il faudra taper dans le .js :
window.addEventListener("load", Demarrage); // attends le chargement complet de la page pour lancer Demarrage
function Demarrage () {
// c'est la fonction qui se lance dès la page chargée : récupération d'objet HTML...
// On explique de lancer la fonction cliqueBouton lorsqu'on clique sur l'entité dont l'id est "go"
document.getElementById("go").addEventListener("click", cliqueBouton) ;
}
// Fonction cliqueBouton dont la condition de déclenchement est donnée juste au dessus.
function cliqueBouton() {
alert("Bonjour");
}
On avance : on détecte la volonté d'utiliser le lien.
Comment lire la réponse de l'utilisateur dans le input d'identifiant question_1 ? En Javascript, il suffit d'utiliser l'attribut .value sur l'objet voulu, à savoir la balise identifiée.
window.addEventListener("load", Demarrage); // attends le chargement complet de la page pour lancer Demarrage
function Demarrage () {
// c'est la fonction qui se lance dès la page chargée : récupération d'objet HTML...
// On explique de lancer la fonction cliqueBouton lorsqu'on clique sur l'entité dont l'id est "go"
document.getElementById("go").addEventListener("click", cliqueBouton) ;
}
// Fonction cliqueBouton dont la condition de déclenchement est donnée juste au dessus.
function cliqueBouton() {
var contenu = document.getElementById('question_1').value;
alert(contenu);
}
Il reste à voir comment gérer les tests logiques if, else if et else en Javascript. Sur l'exemple ci-desous, la réponse attendue est 42.
function cliqueBouton() {
var contenu = document.getElementById('question_1').value;
if (contenu === "42") {
alert("Gagné !");
} else {
alert("Perdu !");
}
}
On affiche gagné ou perdu en fonction de l'input, c'est que ça marche. Il reste à parvenir à modifier la valeur de l'attribut href du lien identifié par id="go".
function cliqueBouton() {
var contenu = document.getElementById('question_1').value;
if (contenu === "42") {
document.getElementById('go').href="projet2/page_un.html";
} else {
document.getElementById('go').href="projet2/page_deux.html";
}
}
Voilà : on accéde à l'attribut href de l'élément identifié par "go" en utilisant .href et on donne la valeur qu'on veut pour désigner la page voulue.
Le résultat en image :
Quelle est la réponse à la Grande Question sur la vie, l'univers et le reste ?
Map interactive
Nécessite d'avoir suivi et compris les activités Web 1 à 4. Axé sur l'activité 4 (images).
A titre d'exemple, voici une carte de France avec les nouvelles régions. Elle a été réalisée par Amélie A. et Madéline H. :
On notera la présence du nom de la région lorsqu'on passe au dessus et de la présence d'un lien vers la page Wikipédia de la région.
Tuto GIF
- Nécessite d'avoir suivi et compris les activités Web 1 à 4.
- Intégre un temps important de recherche et synthèse d'informations.
Beaucoup de choses sont possibles :
- Création via l'utilisation d'un outil en ligne externe
- Création via l'utilisation d'un logiciel de dessin
- Création via l'utilisation d'un logiciel de vidéo
- Principe de l'image GIF animé
- ..
Tuto GIMP
- Nécessite d'avoir suivi et compris les activités Web 1 à 4.
- Intégre un temps important de recherche et synthèse d'informations.
- Permettra de découvrir GIMP, un logiciel de traitement d'images.
On pourrait partir sur :
- Le redimensionnement d'image
- La création d'une couche transparente alpha et sa sauvegarde
- Les effets
- La gestion des couleurs
- ...
Tuto Alpha PIL
- Nécessite d'avoir suivi et compris les activités Web 1 à 4.
- Intégre un temps important de recherche et synthèse d'informations sur PIL.
Tuto Graphes Excel
- Nécessite d'avoir suivi et compris les activités Web 1 à 4.
- Intégre un temps important de recherche et synthèse d'informations sur Excel.
Détection de formes simples
- Nécessite d'avoir suivi et compris les activités Python 4(PIL) et 7(logique).
- Permettra un peu plus tard d'analyser des images issues d'une caméra USB.
A la fin, on pourra arriver à ça avec les bonnes bibliothèques :
Mais nous commencerons par reconnaitre des disques et des carrés. Ce sera déjà bien !
Jeu du Pendu
- Nécessite d'avoir suivi et compris les activités Python 6 (interface) et 7(logique).
- Vous allez tenter de transformer votre code console en mode interface graphique.
La tâche est assez ardue, c'est pourquoi le mini-projet est accompagné d'un ensemble de mini-tâches à réaliser et à assembler.
Le visuel final avec un executable à tester en cliquant dessus (enfin, si votre système windows est compatible). En effet,il ne s'agit pas d'un fichier .py mais bien d'un .exe créé à partir du fichier Python.
La vision des couleurs pour un Daltonien
- Nécessite d'avoir suivi et compris les activités Python 4(PIL) et 7(logique).
- Intégre une partie de recherche sur la façon dont les couleurs sont percues par les Daltoniens.
Table de Vigenère
- Nécessite d'avoir suivi et compris l'activité Python 7 (logique).
- Intégre une partie de recherche sur la cryptologie.
Il s'agit d'une méthode de cryptographie aujourd'hui facilement cassable à l'aide de la puissance de calcul des ordinateurs modernes. Il s'agit d'une sorte de ROT13 amélioré : on décale d'un nombre de lettre différent à chaque lettre. Une clé (un code de caractère) permet de définir l'alternance des rotations de lettres.
Créer des tableaux HTML avec Python
Nécessite d'avoir suivi et compris l'activité Internet 4 (Plus de HTML) et l'activité Python 7 (logique) et 8(Fichiers).
Créer des tableaux HTML avec Excel
- Nécessite d'avoir suivi et compris l'activité Internet 4 (Plus de HTML).
- Intégre une part d'utilisation des test logiques et des strings avec EXCEL.
- Vous pourrez faire un tuto sur la concaténation dans EXCEL une fois l'activité terminée
Imaginions qu'on désire créer un tableau intégrant les données suivantes sur les planètes :
- Nom
- Distance planète-Soleil (UA)
- Température au sol (°C)
- Rayon (km)
- Masse (kg)
- Pression (Pa)
- % de CO2
- % de O2
- % de N2
- % de H2
- % de He
- Autres
- Nom
On vous demande de pouvoir rentrer les données récoltées par vos soins dans un fichier EXCEL.
Il faudra ensuite utiliser la fonction CONCATENER d'EXCEL pour parvenir à construire automatiquement le code HTML de la table.
Vers le codage HTML d'un tableau : TABLEAUX
Comment concatener Hello, World et ! sous EXCEL pour obtenir Hello World!, c'est simple : il faut utiliser la fonction CONCATENER(...).
La cellule contient :
Cryptographie dans les images
On peut cryptrer un texte à l'aide du ROT-13, à l'aide de la table de Vigenère. Mais bon, ce sont de vielles méthodes qui aujourd'hui n'ont plus d'utilité car on sait les décrypter sans avoir besoin de la clé. Du moins, les cryptoanalystes savent le faire. On peut alors tenter de crypter les données d'une autre façon :
On prend une première image quelconque. Cette image est composée de pixels possèdent trois valeurs par pixels : RGB.
Nous allons modifier l'image en modifiant légérement les valeurs des intensités RGB, juste assez peu pour qu'on ne puisse pas remarquer à l'oeil nu que l'image a été modifiée. Comment ?
L'UNICODE associe un nombre unique à chaque caractère. Imaginons qu'on désire encoder un caractère dont l'unicode est 756 : Ꝗ
Nous pouvons récupérer les valeurs RGB du premier pixel. Par exemple : R = 100, G = 150 et B = 200.
Pour coder le 7 de la centaine de 756, on rajoute 7 à la valeur initiale de R : on passe à 100+7=107 sur ce pixel.
Pour coder le 5 de la dizaine de 756, on rajoute 5 à la valeur initiale de G : on passe à 150+5 = 155 sur ce pixel.
Pour coder le 6 de l'unité de 756, on rajoute 6 à la valeur initiale de B : on passe à 200+6 = 206 sur ce pixel.
Si on regarde les couleurs obtenues :
Avant :
Après :
Alors, quel message se cache dans cette image, sachant que l'image de base se trouve quelques paragraphes plus haut ?
A partir de là, vous pouvez faire passer tranquillement avec quelqu'un s'il possède l'image de base.
Attention : utilisez du png ou du bmp mais pas de jpeg : la compression du jpeg va légérement modifier les valeurs des pixels, assez pour perdre le message.
Remarque 2 : certaines images png, possèdent une couche alpha de transparence. Les pixels possèdent alors 4 valeurs d'intensité : Rouge, Green, Blue et Alpha.
nbr_couches = len(image_1.getbands()) # Permet de connaitre le nombre de couches
if nbr_couches == 3:
r,g,b = image_1.getpixel((x,y)) image_1 étant un objet-image de Pillow
if nbr_couches == 4:
r,g,b,a = image_1.getpixel((x,y)) image_1 étant un objet-image de Pillow
Si vous voulez créer des images encodées pour vérifier votre codage, voilà une interface qui le permet :
Gros projet : il faut commencer par savoir lire le premier pixel de deux images. Ensuite décoder le premier caractère en retrouvant le code. Puis englober toute l'image.
Attention, il va falloir gérer les intensités dépassant 255... Comment faire ? Ne vous en souciez pas pour l'instant, c'est un détail qu'il faudra gérer une fois le premier jet réussi.