Share this project

Done

Share this project

Done
Amener les 8-12 ans au code à travers une web application et des petits monstres
Amener les 8-12 ans au code à travers une web application et des petits monstres
Amener les 8-12 ans au code à travers une web application et des petits monstres
62 backers pledged €3,215 to help bring this project to life.

About this project

creat.ur: code - découvrir l'HTML et le CSS en s'amusant project video thumbnail
Replay with sound
Play with
sound

creat.ur: code - découvrir l'HTML et le CSS en s'amusant

€3,215

62

Qu'est ce que « creat.ur: code » ?

« creat.ur: code » est une application web qui a pour objectif d'aider les 8-12 ans à la découverte des langages informatique (HTML et CSS). Elle présente un glossaire illustré des différentes composantes et syntaxes de ces langages, et une formation de découverte durant laquelle l'apprenant est amené à concevoir son petit site web.

Elle fonctionne comme une "companion-app", c'est à dire une fenêtre dans votre navigateur web (ou votre téléphone ou tablette), et vous assiste durant tout le long de la formation.

Cette formation est dynamisée par une mise en image de tous les concepts abstraits qui entourent les langages informatiques. Elle a ainsi l'avantage de ne pas être seulement textuelle, la rendant plus didactique que la plupart des formations existantes aujourd'hui.

Elle sera de plus disponible gratuitement et en open-source.

2H30, ce qu'il faut pour découvrir les bases du développement informatique.

Découvrir le développement informatique n'est pas quelque chose qui prend énormément de temps. 2h30 peut paraître court pour découvrir le code, mais cette durée est parfaite pour avoir une formation suffisamment dynamique et variée pour un enfant de 8 à 12 ans. Ces 2h30 sont découpées en trois temps: 

1 / Comprendre : des petits exercices pour comprendre les mécanismes de construction (par emboîtement, par parenté) et de syntaxe de ces langages.

Maquette physique du dispositif n°1
Maquette physique du dispositif n°1

2 / Construire : un exercice permettant à l'enfant de composer son premier site web. Cette étape amène l'apprenant à partir d'une page blanche pour arriver au site qu'il désire construire.

Exercice de composition lors des formations présentielles. Cet exercice fait parti des éléments à transposer sur la plateforme numérique.
Exercice de composition lors des formations présentielles. Cet exercice fait parti des éléments à transposer sur la plateforme numérique.

3 / Éditer : éléments permettant une composition du code plus simple, et une assimilation naturelle de l'écriture en cascade. Partir d'une page blanche est quelque chose de très anxiogène, qu'importe la tranche d'âge. Cette exercice permet un premier contact moins anxiogène avec du code.

Exercice d'écriture simplifiée, lui aussi à transposer sur la plateforme numérique.
Exercice d'écriture simplifiée, lui aussi à transposer sur la plateforme numérique.

Cette formation a été préalablement testée par plusieurs enfants de cette même tranche d'âge de manière physique à l'aide de jeux en bois prédécoupés. Cependant la construction d'un kit physique coûtait cher à produire, et le rendre virtuel sous la forme de cette "companion-app" permettra à cette formation d'être accessible au plus grand nombre. Accessible aux apprenants de part sa gratuité et accessible aux formateurs de par sa licence creative commons 3.

Formation de plusieurs enfants dans le cadre de mon diplôme
Formation de plusieurs enfants dans le cadre de mon diplôme

Outils graphique : Mettre en image des concepts abstraits

« Avec cette capacité qu’on a [en tant que graphiste] de transmettre de l’information, du plaisir, de l’émotion par les images, on peut éveiller le désir d’apprendre. » Vincent Perrottet

Les langages informatiques sont difficilement lisibles lorsque l'on débute, et peuvent s’apparenter à du charabia. À travers un travail éditorial graphique, on peut donc rendre le code plus accessible, en prenant compte de :

- La couleur : un code couleur permettant de simplifier la lisibilité du code, de hiérarchiser et de mémoriser les différentes composantes et strates d’une page.

- La typographie : une police de caractère apportant un autre degré de lecture, jouant sur ses formes et sa lisibilité. Un travail typographique est d'autant plus intéressant qu'un code se compose exclusivement de texte.

- La personnification des éléments composant un code (balise, variable, etc.): chacun d’entre eux interagissent les uns avec les autres. Illustrer ces rouages complexes à travers une mise en image, des allégories, une personnification, rendra la pratique du développement plus accessible à un jeune public.

Tous ces points sont souvent manquants dans les formations de découverte à la programmation, qui ne sont souvent que textuelles et sans appuis visuels. C’est pourtant là dessus qu’un graphisme au service de la pédagogie permettra d'alimenter chez l'enfant un désir d’apprendre.

Outils Open source : au service des apprentis et des enseignants

L’application « creat.ur: code » est totalement gratuite et sous licence creative commons 3. Elle est donc accessible à toute personne désirant découvrir le développement web, mais permet aussi aux enseignants et formateurs de s'approprier le contenu de la formation (images, typographie, plateforme) et la personnaliser.

L'ère numérique

« Pourquoi devriez vous vous soucier des langages de programmation ? Parce que si vous voulez comprendre la création informatique, c’est le fil à suivre - tout comme, si vous vouliez comprendre la technologie de 1880, les machines à vapeur auraient été le fil à suivre. » Paul Graham.

Les langages informatiques paraissent être du chinois pour un grand nombre d'entre nous. Pourtant, nous vivons dans une époque où nos échanges et nos créations passent par ces techniques de création. L'idée n'est pas de faire de nos enfants les "De Vinci" du numérique, mais de leur montrer que ces techniques sont accessibles et plus simples qu'elles n'y paraissent. Nous utilisons ces outils, comme le smartphone qui est dans notre poche, uniquement dans l'optique de consommer du contenu. Ces outils, qui sont d'ailleurs des millions de fois moins performants que nos ordinateurs qui envoyèrent l'Homme sur la Lune. Apprendre à développer, c'est passer du statut de simple consommateur à celui de potentiel créateur.

Tout le monde peut apprendre à coder

"Le code c'est pas fait pour moi", phrase récurante lorsqu'on interroge des personnes autour du développement. Pourtant, tout le monde peut apprendre à coder. Il suffit de savoir lire un peu d'anglais, d'écrire, et de savoir compter.

8 ans semble être l'âge minimum requis pour découvrir les joies de la création numérique par le code.

On n'apprend plus ces choses à l'école

Sauf que voilà, découvrir la programmation seul est une étape extrêmement sélective. Les formations existent pour une cible plus âgée, mais elles demandent énormément d'attention et de rigueur de la part des apprenants.

D'autre part, toutes les politiques autour du numérique dans l'éducation en France n'ont pas arrangé le statut du code face à ce jeune public. Certains d'entre vous ont peut-être vécu le "Plan informatique pour tous", l'époque de la programmation à l'école d'une tortue sur des TO7 et MO5, le langage LOGO etc. Cela a commencé en 1985, et aujourd'hui la programmation est présente comme option seulement en terminal scientifique, soit à l'âge de 17 ans. 

Le principal problème avec un plan national d'apprentissage du code, c'est la formation des enseignants. Et c'est justement dans cette optique que je travaille sur ce projet depuis maintenant quelques mois :  la création de support pédagogique à direction des enseignants, pédagogues et FabLab.

Premier exercice de composition lors des formations présentielles. Cet exercice fait parti des éléments à transposer sur la plateforme.
Premier exercice de composition lors des formations présentielles. Cet exercice fait parti des éléments à transposer sur la plateforme.

 Pourquoi l'HTML et le CSS?

éSimple, permissif, visuel : ces deux langages complémentaires offrent la possibilité d'être maitrisés rapidement. Ils sont, de plus, présents sur la majorité de ce qui compose les pages web. Pour finir, ils offrent la possibilité à l'apprenant de partager facilement via internet sa création une fois fini.

À quoi va servir votre contribution?

Votre contribution, qu’elle soit petite ou grande, aura une place importante dans l’aboutissement du projet. L’objectif principal est bien évidemment de pouvoir finaliser et mettre en ligne la web-application « creat.ur: code », afin que chacun d’entre nous puisse y avoir accès et puisse l’utiliser gratuitement. Les frais se répartissent alors en plusieurs points:

• Tout d’abord, le développement du site web. C’est avec un développeur professionnel que le projet se concrétisera. Ce sera la partie la plus coûteuse du projet, mais accorder de l’importance à une réalisation soignée concrétisera toutes les espérances fonctionnelles et pédagogiques de l'application.

• Ensuite, pour apporter une autre lecture du code, je voudrais collaborer avec un typographe, qui réalisera spécialement pour ce projet un travail typographique adapté. Cette typographie sera ensuite sous licence creative commons, ce qui permettra aux enseignants et formateurs de se servir de ce travail graphique comme appui.

• Pour finir, votre contribution permettra aussi de couvrir les divers frais rencontrés durant cette campagne. De la conception des diverses contreparties, à leur envoi en France métropolitaine, en passant par les charges de Kickstarter : tout est pris en compte pour éviter les mauvaises surprises, et mettre toutes les chances de notre côté.

Je vous tiendrai au courant sur Kickstarter de l’avancée du projet et des étapes de financement. 

Pour un suivi jour après jour des différentes étapes du projet, rejoignez-moi sur:

Snapchat : jb.dacquet

Twitter : @creat_ur_code

Facebook : facebook.com/creaturcode

Contact mail : creat.ur.code@gmail.com

Risks and challenges

Une bonne partie du travail a déjà été réalisé dans le cadre de mon projet de fin d’étude (parcours pédagogique, une grande partie de la conception graphique). Cela minimise le nombre restant d’épreuves à parcourir.

Aujourd'hui, le reste du projet comporte deux principaux défis à relever :

• Le premier étant que je ne suis pas développeur de web application et que, par conséquent, je suis dans l’obligation de faire appel à un développeur professionnel. Cela implique un coût qui représente plus de la moitié des contributions reçues sur Kickstarter. Par chance, étant graphiste, l’autre moitié des étapes de conception concernant l’animation et l’interface n’auront aucun coût de développement.

• Le second étant la difficulté de capter l’attention d’un enfant tout le long d’une formation d’initiation au code. C’est là que le travail de mise en scène et du jeu de doublage va permettre l’accomplissement de ce défi.

Learn about accountability on Kickstarter

Questions about this project? Check out the FAQ

Support this project

  1. Select this reward

    Pledge €5 or more About $5

    Merci! Votre nom apparaîtra sur le mur des contributeurs, présent sur le site internet

    Less
    Estimated delivery
    12 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  2. Select this reward

    Pledge €10 or more About $11

    • Une des cinq cartes postales sérigraphiées
    • Contrepartie précédente

    Less
    Estimated delivery
    Ships to Anywhere in the world
    17 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  3. Select this reward

    Pledge €15 or more About $16

    • Une des trois affiches sérigraphiées en partenariat avec le collectif Flûtiste (uniquement disponible sur le kickstarter)
    • Contreparties précédentes

    Less
    Estimated delivery
    Ships to Anywhere in the world
    5 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  4. Select this reward

    Pledge €25 or more About $27

    • Le lot de cinq cartes postales sérigraphiées
    • Des magnets aimantés des différentes balises HTML
    • Contreparties précédentes

    Less
    Estimated delivery
    Ships to Anywhere in the world
    12 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  5. Select this reward

    Pledge €35 or more About $38

    • Les trois affiches sérigraphiées en partenariat avec le collectif Flûtiste (uniquement disponible sur le kickstarter)
    • Contreparties précédentes

    Less
    Estimated delivery
    Ships to Anywhere in the world
    2 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  6. Select this reward

    Pledge €50 or more About $55

    • Un poster sérigraphié en partenariat avec le collectif Flûtiste
    • Accès à l’avance au projet (version bêta)
    • Contreparties précedentes

    Less
    Estimated delivery
    Ships to Anywhere in the world
    4 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  7. Select this reward

    Pledge €75 or more About $82

    • Mini fanzine de 32 pages créé en partenariat avec le collectif Flûtiste comportant :
    - Une édition physique du glossaire illustrant les différentes composantes du HTML et du CSS
    - Une bande-dessinée éducative mettant en scène la création d'une page web
    • Contreparties précédentes

    Less
    Estimated delivery
    Ships to Anywhere in the world
    3 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  8. Select this reward

    Pledge €100 or more About $110

    • Un sketchbook signé comportant croquis, planches de conception, storyboard et autres.
    • Envoyez-nous un dessin de monstre réalisé par votre enfant, et on l’intègre dans l’histoire, animé et doublé
    • Participez à la soirée de lancement avec toute l’équipe de développement
    • Contreparties précédentes

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 0 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  9. Select this reward

    Pledge €300 or more About $329

    • On vous site comme mécène
    • Vous recevrerez des éditions uniques de toutes les produtions citées dans les contreparties précédentes (cartes, poster, magnets, Fanzine) composées d’encres spéciales et dédicassées par toute l’équipe

    Less
    Estimated delivery
    Ships to Anywhere in the world
    Limited 2 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.

Funding period

- (34 days)