Blog Blog

Entrées avec Type d'atelier Programmation .

Collaboration et art dans le numérique !

Hollywood nous voilà !

 

Semaine 3, programmation d’une scénette.

 

Cette semaine les enfants vont pouvoir laisser s’exprimer le Spielberg qui sommeille en eux. L’exercice du jour, réaliser une petite scénette à l’aide de l’application sur tablette Scratch Jr.

Scratch est un langage de programmation visuel, créé en 2003 par Mitchel Resnick, dans le but d’initier les plus jeunes à la programmation.

Avant de laisser libre cours à leur imagination, établissons quelques règles :

  • 3 personnages maximum

  • Les personnages présents dans la scène doivent tous effectuer au moins une action

  • Pour les plus grands, faire interagir les personnages

  • Choisir un thème précis et s’y tenir

Ces règles sont vitales ! L’expérience nous a montré qu’il faut imposer ces limites pour ne pas se retrouver avec des empilements de personnages inactifs et des vaches de l’espace à la plage …

Le cadre est posé, place à la réflexion, le choix du thème et des personnages !

L’application disposant d’une librairie de personnages et d’arrière-plans assez fournie, les enfants commencent à enfreindre les règles … les voyous ! :)

Les premières vaches de l’espace en bord de mer commencent à apparaître ! C’est le moment de recadrer tout cela !

Une fois leur imagination canalisée, les thèmes commencent à devenir plus intéressants, un basketteur qui met un panier, un footballeur qui met un but, un astronaute qui prend une fusée pour quitter une planète …

Place à l’animation et au code !

Après 45 bonnes minutes d'essais en tous genres, les personnages prennent vie, j'aperçois des fusées qui décollent, des ballons au fond des filets et des vaches de l’espace … en fusée ! Ouf ! La règle n’est pas enfreinte ! :)

Projection privée pour finir la séance ! Les enfants présentent leur chef d’oeuvre, tout le monde s’est amusé à découvrir le travail des autres.

 

La semaine prochaine, atelier de création 3D !

L'application éducative parfaite existe-t-elle ? (ou "Ce qui intéresse les enfants")

Quand il s'agit de trouver une application à la fois éducative et intéressante pour les enfants, ce n'est pas la chose la plus évidente.

Pour avoir utilisé une bonne dizaine d'applications (sur tablettes Android) avec des élèves de la Grande Section jusqu'au CM2, on se rend compte que, parfois, ce qui nous intéresse nous, n'est pas ce qui les intéressent eux !

Mais alors, comment choisir l'application « qui frappe les esprits » ?

Et bien il y en a bien une, qui pour ma part, les a tous marqués.

« The Foos » est l'application qui m'a toujours été la plus demandée, même si cela faisait déjà deux séances complètes que nous l'utilisions, et que les enfants l’avaient aussi installée d’eux-mêmes à la maison. (et c'est assez rare pour être souligné !)

 

Dans ce cas-là, qu'est-ce qui fait que cette application marche mieux que les autres ?

D'un point de vue éducatif, elle est dans la moyenne : de l'algorithmique, de l'introduction à la programmation (boucles, procédures….), une difficulté très progressive, elle est donc bien équilibrée.

Un point négatif cependant, à mon humble avis :

On peut réussir le niveau, sans respecter toutes les étapes « logiquement souhaitée », et à cela on pourrait ajouter le fait que, d'un point de vue ergonomique, on ne recommence pas du début après chaque « exécution ». (Donc si l'on veut juste tester notre suite d'actions, une fois terminée, il faut cliquer sur un bouton pour recommencer du début, et effacer la suite d'action, ce qui est contre-productif à mon sens.)

Certes, il y a le système « d’étoiles » (1, 2 ou 3 étoiles selon la réussite), mais cela reste un système un peu trop « ouvert », et qui ne les incite pas à faire de leur mieux de suite.

D'un point de vue ludique, et bien c'est là qu’elle marque un point :

Beaucoup de niveaux (environ 130), graphismes/3D « avancés », très colorée, des personnages amusants, des changements de décor tous les 20 niveaux environ, des changements de personnages principaux une fois un chapitre clôturé avec un « thème » bien différent...

 

A titre de comparaison, il est vrai que je préfère « Lightbot » du point de vue éducatif, mais du côté ludique, celui-ci est assez « mou/trop sobre ».

On peut aussi se rabattre sur « Bit by Bit », qui est à mon gout, la passerelle entre ces deux applications.

 

La « recette du succès » serait donc une application éducative, mais pas trop, et surtout, très "récréative".

 

Existe-t-il donc une application « parfaite » ?

Je dirais que non, déjà tout dépend de ce que vous voulez leur faire apprendre, et puis, toute application a son point fort, « The Foos » est peut-être la mieux placée « ludiquement », mais ce n'est pas la plus simple à gérer (pour l’enseignant), ni celle qui apporte le plus de connaissances.

Si un jour je trouve « l'Application » avec un grand A, je vous ferai signe, mais en attendant, je dois continuer mon exploration !

 

(Pour information, malheureusement, cette application était gratuite jusqu'à fin septembre 2016, et dorénavant, la version estampillée « 2 » est maintenant payante…)

 

 

Premiers pas avec Unity3D

Unity3D, qu'est-ce que c'est ? à quoi ça sert ?

C'est une plateforme de développement et un moteur, pour faire des jeux, des films, de la réalité virtuelle ou augmentée. Mmmm... dis comme ça, ça parait compliqué !

 

Alors regardez https://unity.com/fr/madewith pour voir quelques images ou animations !

(Moi j'aime particulièrement le joli jeu de Monument Valley II https://unity.com/fr/madewith/monument-valley-2 et les animations autour des Nouveaux Héros par ex https://youtu.be/9qjp7i7zjSY...)

Ca serait la plateforme à l'origine de la moitié des nouveaux jeux mobiles : https://unity.com/fr/solutions/mobile

Alors vous avez peut-être déjà vu le logo au lancement d'un jeu... 

 

OK, mais moi je peux faire quoi avec ?

Evidemment, l'idée n'est pas de faire directement un jeu que tout le monde va télécharger ;)

Et l'intérêt, c'est qu'il existe beaucoup de ressources pour commencer... et pour continuer ! En particulier avec l'Asset Store, une "boutique" de ressources.

Donc, on commence par quoi ?

Déjà, on doit installer les outils... 

Vérifier qu'on remplit les pré-requis :

  • avoir un ordinateur sous Windows, Mac OS ou Ubuntu, avec un minimum de capacités : voir détails en haut de la page https://unity3d.com/get-unity/download
  • avoir un peu de temps, l'installation est assez longue...

Puis, étape par étape :

1. Télécharger et installer "Unity Hub"

  • aller sur https://unity3d.com/get-unity/download et cliquer sur "Download Unity Hub"
  • lancer l'installation du "Unity Hub Setup" téléchargé, accepter les conditions et suivre les instructions
  • ouvrir Unity Hub une fois installé
  • activer une licence comme demandé (de type Unity Personal, en confirmant que vous n'utilisez pas Unity de manière professionnelle) et revenir à l'accueil (flèche en haut à gauche)

 

2. Installer une version d'Unity

  • dans Unity Hub, aller sur "Installs" à gauche, et cliquer sur "Add" à droite
  • choisir une version "2019.4.x (LTS)" et cliquer sur "Next" (peu importe la valeur de x, prendre la plus grande)
  • sélectionner "Visual Studio" et "WebGL Build Support" (uniquement), cliquer sur "Next", accepter les conditions et suivre les instructions

Le Unity Hub permet de gérer plusieurs versions de Unity sur le même ordinateur.

3. Créer (ou se connecter à) un compte Unity ID

  • aller dans le menu "Account" en haut à droite du Unity Hub (silhouette) et cliquer sur "Sign in"
  • se connecter ou créer un compte

La partie installation est faite ! Vous voulez commencer à utiliser Unity ? Alors vous pouvez soit suivre le point 4 ci-dessous, soit chercher des tutos en ligne, soit attendre d'être au stage pour qu'on le fasse ensemble !

4. Installer et explorer un jeu 2D

  • aller dans "Projects" à gauche et cliquer sur "New" à droite
  • choisir "2D", donner un nom au projet ("MonJeuDePlateforme" par ex) et cliquer sur "Create"
  • une fois Unity ouvert, cliquer sur l'onglet "Asset Store" et chercher "Platformer Microgame"
  • cliquer sur "Platformer Microgame" puis "Download', puis "Import" (2x)
  • si un message "Warning" apparaît, faire "Install/Upgrade" comme demandé
  • quand une petite fenêtre "Import Unity Package" s'ouvre, cliquer encore une fois "import"
  • si un message vous le demande, faire "Reload", puis revenir sur l'onglet "Scene"
  • cliquer sur le bouton "Play" en haut et tester le jeu (déplacer le personnage avec les flèches, sauter avec espace), arrêter le jeu en rappuyant sur le bouton Play
  • cliquer sur "Tutorials / Show tutorials" pour faire apparaitre un tutoriel en anglais qui guide pas à pas dans le "modding" du jeu... ou venir au stage pour le faire ensemble !

Et pour finir cette introduction, une BONNE NOUVELLE ! Unity avait mis leurs cours Premium en accès gratuit pendant le confinement, ils viennent d'annoncer que cet accès reste désormais gratuit ! https://learn.unity.com/

https://www.facebook.com/unity3d/posts/10157811173906773

Pour aller plus loin : s'inscrire au stage des 15-16-17/07/2020 !

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 !

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 !

 

— 5 Articles par la page
Affichage des résultats 1 - 5 parmi 23.

Derniers blogs Derniers blogs

Collaboration et art dans le numérique !

Hollywood nous voilà ! &nbsp; Semaine 3, programmation d’une scénette. &nbsp; Cette semaine les enfants vont pouvoir laisser s’exprimer le Spielberg qui sommeille en eux. L’exercice du... Lire la suiteÀ proposCollaboration et art dans le numérique ! »

L'application éducative parfaite existe-t-elle ? (ou "Ce qui intéresse les enfants")

Quand il s'agit de trouver une application à la fois éducative et intéressante pour les enfants, ce n'est pas la chose la plus évidente. Pour avoir utilisé une bonne dizaine d'applications (sur tablettes Android) avec des élèves de la Grande Section jusqu'au CM2, on se rend compte que, parfois, ce qui nous intéresse nous, n'est pas ce qui les intéressent eux ! Lire la suiteÀ proposL'application éducative parfaite existe-t-elle ? (ou "Ce qui intéresse les enfants") »

Premiers pas avec Unity3D

Installation et premier jeu avec Unity3D Lire la suiteÀ proposPremiers pas avec Unity3D »

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 »

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 »
— 5 Articles par la page
Affichage des résultats 1 - 5 parmi 23.