Blog Blog

Entrées avec Lieu Vallee de Ville .

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 !

Internet, le web: quelle différence?

Nos Graines 2 tech' neuboisiennes se sont mis en mode [web] pour 3 séances, à la découverte d'Internet et du web, des cookies et autres traces que nous laissons sur la toile.

Avec quelques surprises de se découvrir si présent! Comme quoi notre présence sur le web n'est pas que de notre fait.

La meilleure partie? Les cookies bien sûr, avec un goûter très à propos wink Ils ont d'ailleurs retenu l'essentiel: demandez leur ce qu'est un cookie "Un gâteau!", et on en trouve où? "Ben dans mon ventre!" Forcément cheeky!

Dernière séance aux couleurs de la chandeleur, nos Graines 2 tech' vous présentent leur page web au goût de crêpe, réalisée rapidement histoire de ne pas les laisser refroidir!

 

 

EUCodeWeek chez Graines2Tech

EU Code Week, c'est la semaine européenne du code informatique. Un évènement digne de nos Graines de Tech!

Plusieurs évènements ont eu lieu dans le Val de Villé à cette occasion, afin que les enfants puissent découvrir le code informatique.

A l'école de Neubois en classe de CE2/CM1, ou en atelier le samedi matin, les Graines de Tech ont pu s'initier au code dans leur univers préféré grâce à code.org! Au choix: la reine des neiges, starwars ou minecraft. Un choix difficile, je le reconnais :)

Nos charmantes têtes blondes ont pu s'initier à la gestion des déplacements, aux répétitions, aux conditions, et même aux évènements: un beau challenge, relevé avec brio!

Lors de nos ateliers, les Graines de Tech ont même pu repartir avec une petite récompense: un magnet au design très "app" :)

Vivement le prochain évènement!

Minecraft a la cote chez nos jeunes!Récompense pour nos Graines de Tech lors de l'atelier du samedi matin.

Applications pour moder sous Minetest

Bonjour à tous!

Après nos trois après-midi de stage "mod Minetest vacances", petit bilan des applications utilisées par les jeunes (8 à 11 ans) pour créer un mod sous Minetest.

Petite note rapide pour les non-initiés: Minetest est un clone de Minecraft, un jeu d'aventures/construction/collaboration à base de voxel (comme un pixel, mais en 3D). Un mod est une modification du jeu, un composant additionnel qui ajoute des fonctionnalités; pour Minetest, il s'agit souvent de nouveaux blocs ou d'outils, voire de nouvelles commandes dans le jeu.

D'ailleurs, il faut que je précise qu'en plus de créer un mod, ils ont aussi contribué à d'autres mods! Une fois lancé, on ne les arrête plus! wink Bien sûr, je suis parti avec un programme d'activités, et des idées pour le mod à créer. Et il se trouve que les jeunes aussi en avaient, des idées! Et parmi ces idées: des glaces et des maillots de bain. Et comme une demoiselle avait déjà réalisé un bloc de marchand de glace, et qu'il existe un mod permettant de changer de costume, il ne nous est resté qu'à les modifier pour y inclure nos idées.

Mais revenons à nos applications. Comme dit un peu plus haut, faire un mod, c'est souvent ajouter des blocs ou des outils. Et pour ajouter de nouveaux blocs ou outils, plusieurs étapes sont nécessaires: définir notre nouveau bloc, faire de belles images pour le jeu, donner au jeu l'ensemble des informations sur ce bloc, et vérifier que tout fonctionne comme on le souhaite. Il va donc nous falloir des applications pour réaliser ces différentes étapes.

Pour la définition d'un bloc, rien de trop évolué: un cerveau (ça aidelaugh) avec des idées et de quoi écrire (pour s'en souvenir, ça aide aussi). Nous, on a opté pour le tableau blanc, très pratique et réutilisable!

Pour faire des images, on utilise différentes applications, en fonction des affinités de chacun. Soit sur tablette avec une app de pixel-art (8-bit painter en l'occurence), et une clé USB pour ramener l'image sur le pc, soit directement sur pc avec The Gimp. Pour les blocs, le choix n'est pas vraiment important, mais pour faire des images d'outils, il faut une application qui gère la transparence. La méthode du pixel-art est généralement bien connue des jeunes, qui prennent en main rapidement ce type d'application, même The Gimp! Petite astuce pour faciliter la prise en main de The Gimp: masquer les outils superflus (Edition/Préférences/Boîte à outils), histoire que les jeunes ne se perdent pas dans le foisonnement d'outils disponibles! Généralement, je leur laisse deux outils de sélection (rectangle + contigue), la pipette, le déplacement, le remplissage, le crayon et la gomme. Et ils sont heureux avec ça.smiley

Donner au jeu l'ensemble des infos d'un bloc, et bien c'est coder! Pour faire simple, on utilise notepad++ ou un équivalent, rien de bien compliqué à utiliser. Comme c'est beaucoup de copier/coller pour éviter d'apprendre par coeur l'ensemble de l'API Minetest, un éditeur qui permette d'afficher deux fichiers en parallèle est bien pratique. Ne pas oublier la coloration syntaxique, qui facilite la compréhension du code (langage LUA pour le développement des mods dans Minetest).

Et pour vérifier que tout fonctionne bien, quoi de mieux que Minetest? cheeky Idéalement, on créé un monde à part, avec une carte toute petite et plate. On charge le mod, on lance le monde, et on vérifie que ce qu'on voulait faire fonctionne comme on voulait le faire: coups d'oeil -ou de z'yeux?- obligatoires sur le tableau blanc! Pas tout à fait du développement piloté par les tests, mais on s'en rapproche...

Et voilà!

Ah ben non, j'en ai oublié un! Histoire de ne pas oublier d'étape, on introduit aussi un outil méthodologique. Et comme on travaille à plusieurs sur le même mod, on va en profiter pour diviser le travail en plein de petites tâches. On sort donc les post-its, et on fait un petit tableau kanban. On n'oublie pas d'introduire la petite danse de la victoire une fois qu'on a posé un post-it, c'est important.

Autre outil, nous avons également un patron pour construire un bonhomme Minetest en papier, et qui permet d'expliquer comment passer d'une image 2D à l'habillage de cubes en 3D. Ce qui facilite la compréhension des images des skins! Parce que faire un maillot deux pièces, quand on a 8 ans, c'est quand même pas évident.heart

skin minetest

Voilà pour le petit tour d'horizon des applications utilisées pour réaliser des mods Minetest. Et vous, est-ce que vous développer des mods Minetest? Quels applications/outils utilisez-vous? N'hésitez pas à laisser un petit commentaire ou à poser vos questions!

A bientôt,

Laurent

Séance déconnectée: donnée, c'est donnée!

L'informatique sans ordinateur?!? Kécécé?surprise

Cette semaine, dans la classe de CM1/CM2 de Dieffenbach-au-Val, c'était découverte de la science informatique!

Alors pour faire une bonne séance d'informatique, il faut: des gobelets, des carrés de couleur, des balles de ping-pong, un tapis, et… et des participants! Et hop, c'est parti!

Laurent, contrôleur de liste triée!

Laurent, contrôleur de liste triée!

Durant ce voyage, nous sommes passés dans la vallée de la représentation avec la visite des chiffres, des lettres et des images, et un petit crochet par la compression! La visite s'est poursuivie par le tri, ou comment ranger sa chambre laugh (parents du monde entier, si vous m'écoutez!). Une fois passé le tri, on s'intéresse à la recherche, avec un détour par le mapping de données… Le mapping de données? Vous ne savez pas ce que c'est? Il faut vraiment que vous fassiez cette séance! Tins, quelques témoignages à chaud:

"Les enfants ont compris des choses plus vite que moi!"

"Le tapis de tri, c'était trop bien!"

"Ce que j'ai préféré, c'était quand j'ai trouvé le gobelet le plus léger!"

"Moi j'ai aimé le tour de magie, parce que j'ai trouvé comment ça marchait!" (et en plus elle l'a expliqué, trop fort!!)

Comment ça de la magie?? Mais non, c'est de la science! Allez, je vous donne le secret: en fait, c'est juste de l'informatique wink Venez, je vais vous raconter…

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

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 »

EUCodeWeek chez Graines2Tech

EUCodeWeek pour nos Graines de Tech: programmation avec code.org Lire la suiteÀ proposEUCodeWeek chez Graines2Tech »

Applications pour moder sous Minetest

Bonjour à tous! Après nos trois après-midi de stage "mod Minetest vacances", petit bilan des applications utilisées par les jeunes (8 à 11 ans) pour créer un mod sous Minetest. Petite... Lire la suiteÀ proposApplications pour moder sous Minetest »

Séance déconnectée: donnée, c'est donnée!

L'informatique sans ordinateur?!? Kécécé? Cette semaine, dans la classe de CM1/CM2 de Dieffenbach-au-Val, c'était découverte de la science informatique! Alors pour faire une bonne séance... Lire la suiteÀ proposSéance déconnectée: donnée, c'est donnée! »
— 5 Articles par la page
Affichage des résultats 1 - 5 parmi 12.