Blog Blog

Découverte HTML / CSS

Commençons par HTML, de quoi s'agit-il donc ?
Pour le voir, allez sur une page web, disons https://graines2tech.is4ri.com/blog
Faites un clic droit et "voir la source", ou Ctrl-U (rester appuyé sur une touche Ctrl et appuyer sur U une fois) : un nouvel onglet s'ouvre avec un texte apparemment incompréhensible !
Regardons ce texte de plus près : il commence par
<!DOCTYPE html> <html class="aui ltr" dir="ltr" lang="fr-FR"> <head> <title>Le blog - Graines2Tech</title>...
et si on va tout en bas de la page, on voit que ça finit par
</body> </html> 
Tiens, tiens, on voit donc "html" au moins 3 fois... 

On voit aussi des "<" et des ">" : en général, ça permet plutôt de comparer des nombres pour voir lequel est "plus petit que" ou "plus grand que", mais ici, pas de nombre !

En fait, ils vont par deux, comme des parenthèses, et renferment plus ou moins de texte : <head> par exemple, ou <title>, mais aussi </body> ou </html> où le texte renfermé commence par "/".
C'est ce qu'on appelle des "balises". Et elles vont aussi par 2 comme <title> et </title> qui entourent... le titre de la page web "Le blog - Graines2Tech". Et oui, "title" veut dire "titre" en anglais :)
Mais aussi <html (suivi d'autres textes) > et </html>
On voit que les balises de fin, </title> et </html>, commencent par "/".

Et à la fin de notre texte, on a vu qu'il y avait aussi </body>, donc il doit y avoir un <body> quelque part avant. Et "body" voulant dire "corps" en anglais, il y a des chances que <body> xxxxx </body> définisse... le corps de la page !

Vous vous rendez compte ? Vous savez comment créer un "corps" dans le monde du web ! Voire une tête avec <head> xxxx </head> ... Bien sûr, on parle de page web, ici :)
Allez sur https://codepen.io/pen/ et essayez votre nouveau pouvoir de création dans la partie HTML en recopiant le texte comme ci-dessous, et vous verrez dans la partie blanche votre "page web" prendre corps...


Notez-bien l'approche "poupées russes", c'est-à-dire que le titre (title) est à l'intérieur de la tête (head), et que la tête et le corps (body) sont à l'intérieur de la page html.

Ensuite, c'est comme pour toute langue, il faut apprendre le vocabulaire !
Regardez par exemple la liste donnée par https://htmlreference.io/

Et le css, alors, c'est pour quoi faire ?
Toujours sur codepen.io, écrivez le texte ci-dessous dans la partie CSS :

Voyez-vous la vie en bleu ? Vous pouvez modifier les 3 valeurs numériques entre 0 et 255.

Alors, pour continuer d'apprendre cette "langue" du web qu'est HTML, et sa langue soeur, le css, inscrivez-vous à un de nos stages ou ateliers sur ce thème !

En attendant, vous pouvez utiliser les cours de Khan Academy : https://fr.khanacademy.org/computing/computer-programming/html-css/intro-to-html/v/making-webpages-intro et https://fr.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics
N'oubliez pas de cliquer sur "Transcription" pour voir les textes des vidéos en français !

Alan Turing - Les machines pourraient-elles penser ?

Pour faire suite à l’article sur la cryptologie, je vous propose de nous pencher sur Alan Turing, mathématicien à la fois logicien, cryptographe, pionnier de l'informatique et de l'intelligence artificielle et qui aurait eu 108 ans le 23 juin 2020.

 Alan Turing

Alan Turing (1912-1954) 

 

Il est crédité d'avoir mené les décodeurs de Bletchley Park, quartier général des services de renseignement britannique lors de la Seconde Guerre mondiale, à casser une méthode de cryptage utilisée par les Nazis. Il a ainsi permis de décoder les messages radio cryptés par les machines Enigma de l'Allemagne nazie, grâce à l’utilisation de Bombes, machines qui testaient des clés de chiffrement. Cela fait de lui l'une des figures les plus distinguées de la guerre et nous pouvons le remercier pour la victoire des forces alliées.

 

Bombe

"Bombe"

 

Son histoire est racontée dans un livre dont a été tiré le film Imitation Game avec Benedict Cumberbatch, que je vous recommande ! 

Livre sur Alan Turing

Livre sur Alan Turing

 

Un documentaire très intéressant d’1 heure décrit également ses faits d’armes, accessible ici : https://www.dailymotion.com/video/x6xfm2u

 

En dehors du monde de l'informatique ou des mathématiques, bien que très influent et pouvant être considéré le père de toute la technologie informatique, Alan Turing est à peine connu. Pourtant, déjà dans les années 1930, alors qu'aucun ordinateur électronique numérique n'avait jamais été construit, il a montré les limites du calcul et a ainsi anticipé tout ce qui allait venir dans la révolution dite numérique.

Il a également jeté les bases de l'intelligence artificielle et son nom est associé au “test de Turing” : en octobre 1950, Alan Turing publie un article mémorable dans lequel il exploite la possibilité de créer des machines dotées d’une véritable intelligence. Il s’agit d’un texte fondateur et visionnaire. Il est confronté à cette question « les machines peuvent-elles penser ? » Cette difficulté d’interpréter « l’intelligence » le fait imaginer son test, rendu célèbre par le livre puis film 2001, L'odyssée de l'espace.

 

Test de Turing

Test de Turing

 

Pour aller plus loin : https://www.frenchweb.fr/petite-histoire-de-la-cryptographie-de-la-machine-enigma-a-lordinateur

Pour s’amuser : résoudre l’escape game sur Alan Turing proposé par un enseignant à ses élèves en cette période de confinement : https://view.genial.ly/5ea9729abcafac0d9fde3d20/game-breakout-alan-turing-escape-game

 

Affiche film Imitation game

Behind every code is an enigma...

 

Cryptologie : gardez le secret !

Mais c’est quoi la cryptologie ? C’est la somme de la cryptographie et de la cryptanalyse. Ah… frownaffiche cryptologie Cernay

Alors disons que vous cherchez un moyen de communiquer secrètement un message à un ami (par SMS par ex) sans que ce message puisse être compris par d'autres personnes (parents, profs,...). Comment faire ? Vous inventez un code...
Une fois que vous avez créé un code, il faut se demander :

  • est-il facile à apprendre et à utiliser?
  • est-il difficile à "casser" pour une personne extérieure qui ne connaîtrait pas ce code?

 

La cryptographie, c’est cette idée de brouiller un message pour que son contenu ne soit compréhensible que par son destinataire.
Et ça ne date pas d’aujourd’hui…
D’ailleurs, une méthode connu est le chiffrement de … César !
Vous pouvez utiliser sa méthode en imprimant et découpant 2 disques (voir le fichier fourni par La main à la pâte) et en les fixant ensemble par leur centre : en décalant un alphabet disons de 3 crans par rapport à l’autre A devient D, B devient E, etc et on décode un message en décalant du même nombre dans l’autre sens, et donc YHQL YLGL YLFL est un message codé pour… « VENI VIDI VICI » la célèbre maxime de Jules César (Je suis venu, j’ai vu, j’ai vaincu).

Caesar3


Amusez-vous à chiffrer / déchiffrer avec le code de César sur cette page : http://www.apprendre-en-ligne.net/crypto/cesar/index.html 

Alors, évidemment, quand on connait le code, c’est facile !
Mais si on ne le connaît pas ? Il faut le trouver ! Ca, c’est la cryptanalyse !
Avec la puissance des ordinateurs, le chiffrement de César et certains autres codes sont devenus faciles à décoder, il a fallu en définir des plus compliqués…

Mais comment peut-on décoder un message chiffré ?
Par exemple le message suivant :
ZRJ VDAARJ CLWJJRCK RK ERARMHRCK ZWIHRJ RK RULMP RC EHDWKJ. ZRJ EWJKWCBKWDCJ JDBWLZRJ
CR FRMNRCK RKHR TDCERRJ GMR JMH Z’MKWZWKR BDAAMCR.

participants en pleine cryptanalyseVous avez un jeu de Scrabble © (français) à la maison ?
Faites alors 2 tableaux avec :

  • Pour chaque lettre du Scrabble © combien de fois elle est présente
  • Pour chaque lettre du message combien de fois elle est présente

-> il y a de fortes chances pour que la lettre la plus fréquente dans le message soit la lettre qui “code” la lettre la plus fréquente dans le jeu de Scrabble © 
C’est la méthode utilisée par Al-Kindi au 9e siècle, l’analyse de la fréquence des lettres !

La fréquence des lettres du jeu de Scrabble © approche celle de la langue française (voir http://www.apprendre-en-ligne.net/crypto/stat/francais.html).
Il reste ensuite à utiliser ses connaissances des mots de 2 et 3 lettres en français pour trouver d’autres lettres codées, puis de continuer avec les tableaux de fréquence des lettres pour en trouver d’autres, etc

 

Si ce genre d’activités vous plait, allez sur https://epreuve.concours-alkindi.fr/ et “entrainement”, pour résoudre des énigmes de cryptographie !

 

Un jeu ScratchJr inspiré par Pâques

Ca y’est, le week-end de Pâques a touché à sa fin. Avez-vous organisé une chasse aux oeufs?

Cela reste un jeu que l’on aime tous : les petits aiment découvrir ces oeufs cachés par-ci, par-là, et n’en ont jamais assez trouvés ; les grands aiment voir le plaisir que les petits ont à découvrir ces cachettes plus ou moins compliquées à trouver…

Je vous propose de mettre en scène cette activité sous ScratchJr. Il s’agit de faire une variante Pascale d’un jeu que j’ai initialement décrit sous le nom des “étoiles cachées”. Télécharger le document "étoiles cachées".

Tout d’abord, si vous ne l’avez pas encore, vous pouvez l’installer sur tablette (recommandé) ou sur téléphone : https://play.google.com/store/apps/details?id=org.scratchjr.android ou https://apps.apple.com/us/app/scratchjr/id895485086 

 Une fois l’icône visible sur votre écran, lançons l’app !

Après avoir autorisé photos et audio, on nous pose la question “Où utilises-tu ScratchJr ?” 

“A la maison” pardi en ces temps de confinement…

Justement, on appuie ensuite sur la petite maison et nous voici sur l’écran “Mes projets”.

On appuie sur le [+] plusun icône qu’on va retrouver plusieurs fois, et nous voici dans notre projet.

Note : On peut renommer le projet en appuyant sur le coin jaune en haut à droite de l’écran.

On commence par choisir un décor en appuyant sur [décor] décor en haut de l’écran. Parmi la liste qui se présente, vous pouvez appuyer sur les décors l’un après l’autre, voir son nom en haut, et quand cela vous convient, appuyer sur la [coche] coche en haut à droite, ou rappuyer sur le décor choisi. Dans mon cas, j’ai choisi un décor “Printemps”.

On va retirer le chat en appuyant longuement dessus, soit dans la scène au milieu, soit sur l’étiquette le représentant à gauche : une croix sur fond rouge apparaît, il faut appuyer dessus. 

retirer un lutin

Nous allons maintenant ajouter des oeufs de Pâques : on ajoute des “lutins” (personnages, objets…) en appuyant sur le [+] de gauche. Une bonne liste de personnages et d’objets apparaît, mais… pas d’oeuf de Pâques ! Il va donc falloir jouer les artistes… Sans aucun lutin sélectionné, appuyez sur le pinceau pinceau en haut à droite.

Vous voilà avec une palette d’artiste !

En choisissant l’outil “rond” à gauche, on peut dessiner un oeuf :

ellipse

Puis en appuyant sur le pot de peinture à droite et une couleur en bas, on peut remplir notre oeuf de la couleur choisie.

Enfin on peut renommer notre oeuvre en “Oeuf” en haut de l’écran, et valider avec la coche en haut à droite.

oeuf

Notre oeuf fait désormais partie de la liste des lutins quand on appuie sur [+], on peut alors facilement en ajouter 4 autres, et les déplacer dans notre décor. En appuyant sur le pinceau qui apparaît sur l’étiquette de chaque oeuf à gauche de l’écran, on peut également changer de couleur.

5 oeufs

On peut changer la taille de nos oeufs à l’aide des blocs roses : en ayant sélectionné l’oeuf à modifier, on appuie sur le bloc rose avec une silhouette et on glisse les 3 blocs représentés ci-dessous dans la partie du bas de l’écran. A chaque appui sur le 1er bloc, l’oeuf grossit, avec le 2e bloc il diminue de taille, avec le dernier il revient à sa taille initiale.

gros oeuf

On peut aussi déplacer et faire tourner nos oeufs à l’aide des blocs bleus :

oeuf penché

Une fois nos 5 oeufs positionnés, nous allons pouvoir les cacher en mettant des lutins au-dessus, et d’autres lutins ailleurs dans le décor.

Toujours avec le [+] de la partie gauche, on peut ajouter des lutins existants, puis les agrandir ou les rétrécir avec des blocs roses, les déplacer et les tourner avec des blocs bleus.

Enfin, il reste à mettre quelques blocs de code pour chacun de ces lutins (pas pour les oeufs) : les blocs jaunes correspondent à l’apparition de tous les lutins au début du jeu (drapeau vert), et à la disparition des lutins touchés (doigt qui touche la silhouette). 

Astuce : après avoir assemblé les blocs de code pour un lutin, il suffit de les glisser sur les étiquettes des autres lutins pour copier ce code…

code

Avant de proposer à votre enfant de jouer, il suffit de mettre la scène en plein écran grâce à l’icône correspondante plein écran et d’appuyer sur le drapeau vert pour que tous les lutins cachent les oeufs. L’enfant pourra alors appuyer jusqu’à découvrir les 5 oeufs cachés !

jeu en plein écran

Vous pourrez ensuite lui montrer le derrière du décor pour qu’il déplace les oeufs, les lutins, change les lutins, le décor, dessine des nouveaux oeufs… et vous fasse jouer !

 

Pixel art pour tous les âges !

Le pixel art, c'est pour tous les âges !

 

Bon disons à partir de ~4 ans, avec l'aide des grands frères / grandes soeurs ou des parents pour commencer. Je le sais car on l'a fait au Vaisseau, lors de plusieurs ateliers Parents-Enfants fin 2019 :

L'intérêt, c'est de comprendre que les images à la télé ou sur les ordinateurs, en fait elles sont toutes faites de pixels (PICture ELements pour ceux qui sont à l'aise avec l'anglais)...
Donc prenez une photo et zoomez jusqu'à ce qu'on voit les carrés, et faites bien observer que chaque carré ne contient qu'une couleur :

L'autre intérêt, c'est que c'est une activité qui peut se décliner sous plein de formes différentes

  • version numérique sur téléphone, tablette, ordinateur (on va y revenir), 
  • mais aussi aussi activités manuelles avec au choix : des perles à repasser, des petites briques "mono-pic", des grilles papiers à colorier, des gommettes à coller, des notes adhésives... voire même des carrés de moquette ! Si, si, on a expérimenté au Vaisseau...

 

 

Quelques notes adhésives...

Un papillon en moquette...

 

Donc, en cette période de confinement, où on n’a pas toujours tout sous la main, je vous propose de commencer avec... du papier.
On peut approcher cette activité sous plusieurs angles.

Du plus facile au moins facile :

(*) Coloriage par numéro (ou autre symbole) :
Soit vous pouvez imprimer les grilles fournies ci-dessous, soit vous avez du papier quadrillé et vous préparez une grille à partir du modèle sur l'écran du téléphone ou de l'ordinateur.

enlightened Cliquer ici pour télécharger des Grilles à colorier

(**) Reproduction d’un modèle :
Attention, ce n’est pas si facile, les plus grands doivent donc aider les plus petits, le fonctionnement en binôme est en général une très bonne approche !
L’idée est d’apprendre à lire en utilisant la grille, c’est-à-dire ligne par ligne, en comptant le nombre de carrés sans couleur en début de ligne, puis le nombre de carrés dans la 1e couleur et les reproduire, puis le nombre de carrés dans la 2de couleur et les reproduire, etc.
On peut aussi vouloir dessiner une zone de couleur plutôt que ligne par ligne. C’est possible bien sûr, mais attention à ne pas se décaler !
La méthode ligne par ligne prépare aussi au niveau de difficulté suivant : le décodage.
Augmentez la difficulté en passant de dessins en 10x10 à des dessins 15x15 et plus.

enlightened Cliquer ici pour télécharger des Grilles à reproduire
 

(***) Décodage d’images :
Cette activité demande de la concentration et de l’attention, mais elle est très excitante puisqu’on découvre petit à petit une image, et qu’on essaye de deviner de quoi il s’agit…
Dans la suite logique de l’activité précédente, il s’agit de reporter sur une grille, ligne après ligne, les carrés de couleur indiqués dans le code par leur quantité et leur couleur.
Les grands pourront donc coder des images (pas très compliqué, juste un peu long à écrire ;) et les jeunes (ou autres grands !) pourront les décoder en les dessinant…

enlightened Cliquer ici pour télécharger des Grilles à décoder

 

Ensuite, vous pouvez proposer aux jeunes de passer aux outils numériques, présentés ci-dessous.
Je vous conseille de ne le faire que dans un 2e temps : l’apprentissage est plus complet avec l’approche sur papier (ou legos, perles,...) et en binôme car cela mêle une approche visuelle (le modèle, la grille), auditive (vous “dictez” les carrés à colorier) et kinesthésique (la manipulation du crayon, des legos, des perles…). Une fois cette appropriation faite, l’utilisation des outils numériques s’appuie dessus pour permettre de développer l’autonomie (l’enfant pourra peu à peu le faire tout seul), l’auto-contrôle (avec certaines apps, il pourra vérifier, voir ses erreurs et les corriger) et le suivi de sa progression (l’aider pour enregistrer ses réalisations pour qu’il voie par la suite qu’il fait des choses de plus en plus difficiles).

Il existe beaucoup d’outils numériques, en voici juste quelques-uns, n’hésitez pas à en proposer d’autres :
Coloriage par numéro

  • App : Sandbox Pixel Coloring https://play.google.com/store/apps/details?id=sandbox.art.sandbox
  • PC : https://www.agame.com/game/pixel-art-color-by-number mettre en “plein écran” (icone en bas à droite du dessin), mais même ainsi, plutôt compliqué à faire avec la souris pour les plus jeunes (à moins de l’utiliser comme un moyen amusant de contrôler la souris précisément, quelque soit l’âge !) ; plus de 150 dessins disponibles...
  • http://coloritbynumbers.com/online/animals Ce n’est pas du pixel art, mais il a l’intérêt de permettre de changer les symboles (points de couleurs, nombres, lettres, formes géométriques ; utiliser la roulette en haut à gauche), ce qui aide à aborder le codage de manière progressive ; seuls 3 dessins sont accessibles sans création de compte [gratuitement].

Reproduction ou décodage d’images

 

Pour aller plus loin

  • Coloriage au numéro en 3D avec par exemple https://play.google.com/store/apps/details?id=com.pixel.coloring.color.by.number (attention, présence de pubs : icône TV = regarder une pub pour accéder au modèle)
  • Animations avec piskelapp.com ou Pixel station : il s’agit de faire une copie de la 1e image et de la modifier un petit peu, puis de faire une copie de cette dernière et de la modifier un petit peu à son tour, etc C’est le principe du dessin animé.


Y’a-t-il du pixel art avancé pour les adultes?

Et bien, regardez cet exemple… de pixel art haute résolution…

Source : https://www.flickr.com/photos/rodrixap/10688437793, Nature par RodrixAP, CC BY 2.0

Vous pouvez en voir d’autres du même artiste : https://www.flickr.com/photos/rodrixap/albums/72157637154901153 

Donc si vous vous sentez créatif, vous pouvez commencer petit sur piskelapp, puis agrandir votre grille et votre imagination s’étend autour du dessin initial…

Partagez vos oeuvres !

Et si vous ne vous sentez pas (encore) créatif, le coloriage par numéro de pixel art (app Sandbox Pixel Coloring par exemple) est très relaxant...

 

Derniers blogs Derniers blogs

Découverte HTML / CSS

Commençons par HTML, de quoi s'agit-il donc ? Pour le voir, allez sur une page web, disons&nbsp; https://graines2tech.is4ri.com/blog Faites un clic droit et "voir la source", ou Ctrl-U (rester... Lire la suiteÀ proposDécouverte HTML / CSS »

Alan Turing - Les machines pourraient-elles penser ?

Une introduction à Alan Turing, son test et son importance en informatique et IA Lire la suiteÀ proposAlan Turing - Les machines pourraient-elles penser ? »

Cryptologie : gardez le secret !

cryptologie = cryptographie + cryptanalyse, mais encore ? Lire la suiteÀ proposCryptologie : gardez le secret ! »

Un jeu ScratchJr inspiré par Pâques

Une chasse aux oeufs de Pâqus avec ScratchJr Lire la suiteÀ proposUn jeu ScratchJr inspiré par Pâques »

Mettre la main à la pâte !

Vendredi 21 avril 2017 , nous avons organisé un atelier de deux heures à la Médiathèque de Marlenheim à destination des 9-13 ans, avec l’aide de Mme Anne-Laure Mendès, la directrice. Au... Lire la suiteÀ proposMettre la main à la pâte ! »