MON GUIDE DU PROJET 2017

JE M’APPELLE : MON ÉCOLE :

LE PROGRAMME CONNECTONS NOS ÉCOLES FÊTE SES 10 ANS !

3

PRÉSENTATION DU PROJET LES 5 PHASES DU PROJETLe Labo des Applis est le dixième projet du programme Connectons Nos Écoles au Cube. Il y a dix ans, les premiers participants apprenaient à réaliser des sites Internet.

Aujourd’hui en 2017, nous vous proposons de réaliser une application pour tablette tactile !

Pendant les six prochains mois, vous allez découvrir comment les professionnels créent des applications mobiles. En utilisant leurs méthodes de travail, vous allez rendre interactif les contenus réalisés en classe et donner vie à vos histoires.

Pour vous accompagner dans ce projet, l’équipe de PandaSuite rejoint l’équipe du Cube et vous suivra pas à pas. Cette start-up propose une plateforme en ligne facile à utiliser qui vous permettra de construire votre application sans aucune ligne de code !

Enfin, nous vous proposons d’imaginer une application sur la thématique de la nature : l’écologie, la biologie, l’environnement, le jardinage, le tri sélectif, l’observation des plantes, des animaux ou des insectes... Tout est possible ! Pour vous aider dans vos recherches, la Maison de la Nature de Meudon vous ouvre ses portes et met à disposition ses ressources.

DÉCOUvRiRDans cette étape, tu vas mener l’enquête sur les applications et leurs usages.

INTERPRÉTERD’après tes observations et celles de ta classe, tu vas définir ensemble l’axe et la thématique de l’application.

IMAGiNERImagine avec toute la classe le cahier des charges de votre application.

CONCEvOiR Dans cette phase, tu vas concevoir l’application de la classe avec WytePad et PandaSuite.

ExPÉRiMENTER ET PRÉsENTERL’ application est terminée, il est temps de la faire tester.

À TOi DE JOUER ! Dans ce guide, nous te proposons plusieurs activités :

À faire seul(e) À faire en petit groupe

À faire avec toute la classe

LE LABODEs

4

LES APPLiCATiONS DANS LA TABLETTE DE LA CLASsE

L’APPAREiL PHOTO L’iPad possède deux petites caméras : une au dessus de l’écran et une au dos de la tablette. L’application Appareil Photo va te permettre de prendre des photos mais aussi des vidéos.

PAPER BY 53Cette application propose de créer des carnets de croquis dans lesquels tu vas pouvoir dessiner, peindre, faire des schémas...

sKETCHBOOK PRO ExPREsSAvec Sketchbook Pro Express, tu pourras imaginer et dessiner l’univers graphique de ton application. Parfait pour réaliser les croquis de l’application de ta classe !

GOOGLE DRIvESur Google Drive, collecte et organise photos, textes et dessins créés sur la tablette.

sKiTCHSkitch permet de prendre des photos, de les annoter, d’y ajouter des flèches ou des schémas...

PAGESCette application permet de faire du traitement de texte.

PRODUCTIvITÉ

TWITTERL’application Twitter permet de communiquer avec Le Cube et avec les autres classes sur l’avancé du projet.

GMAiLChaque classe dispose d’une adresse mail. N’hésite pas à nous écrire entre deux séances.

COMMUNIQUER ET PARTAGER

PROTOTYPER SON APPLICATION WYTEPAD sCANCette application permet de prendre en photo les prototypes d’application dessinés sur les Wytepad pour créer des interactions entre les différents écrans que vous aurez imaginés.

PANDA vIEWERCette application permet d’avoir un aperçu en direct de l’application conçue avec PandaSuite.

5

LES APPLiCATiONS REsSOURCES DANS LA TABLETTE DE LA CLASsEPour manipuler, tester et s’en inspirer...

Avec quelques briques Birdlab Botanicula Peer Gynt

Groww Aniscience iPollute Plante by Tiny Bop

Prune Boum ! Mon ami Robotic Bleu de toiToca Nature

6

LES REsSOURCES DU PROJET

LA MAiSON DE LA NATURE

LE PETiT LEXiQUE DU CRÉATEUR D’APPLICATION PANDASUITEPandaSuite est un studio de conception d’applications

pour tablette tactile. Sur l’ordinateur de la classe tu pourras assembler textes, images vidéos et sons pour réaliser votre application. Avant de la publier, il est possible de la tester et l’améliorer grâce à l’application Panda Viewer. L’équipe de PandaSuite sera à l’écoute de la classe, pour vous aider et vous donner tous les conseils nécéssaires !https://pandasuite.com/fr

WYTEPAD

WytePad est une entreprise danoise qui a imaginé des ardoises blanches en forme de téléphone et de tablette tactile.

Grâce à ces ardoises, tu vas pouvoir dessiner et prototyper l’application finale. http://wytepad.com

La Maison de la nature, de Meudon gérée par Grand Paris Seine Ouest, est un lieu de sensibilisation à l’environnement. Expositions, conférences, ateliers jardinage ou scientifiques sont proposés toute l’année et un jardin pédagogique permet de découvrir le cycle annuel de la nature. 14, ruelle des Ménagères

92190 Meudon

Ce lexique a été conçu spécialement pour le projet. Il se trouve dans la bibliothèque iBooks de la tablette. A l’intérieur, tu y trouveras les définitions de certains termes techniques concernant la tablette tactile mais également du vocabulaire spécifique à la conception d’application. Tu en auras besoin pour répondre aux questions de la page 9.

©GPSO

7

iNiTiATION À TWITTERLEs COMPTEs TWiTTER DU PROJET :

#LABOAPPLIC’est le hashtag officiel du projet.N’oublie pas de le mentionner dans tes tweets !

@LECUBECNE C’est le compte de l’équipe du Cube. Tu peux nous poser des questions ou partager l’avancé du projet de ta classe.

@CNE_BOULOGNE Le compte de la classe de l’école Thiers de Boulogne-Billancourt.

@CNE_CHAViLLELe compte de la classe de l’école Ferdinand Buisson de Chaville.

@CNE_iSsY Le compte de la classe de l’école les Epinettes d’Issy-les-Moulineaux.

@CNE_MEUDONLe compte de la classe de l’école Maritain Renan de Meudon.

@CNE_AvRAY Le compte de la classe de l’école La Ronce de Ville d’Avray.

Maintenant que tu connais le projet, quels autres hashtags pourras-tu

utiliser sur Twitter ?

8

iNiTiATION À TWITTERAs-tu bien suivi l’initiation à Twitter ? C’est le moment de rédiger ton premier tweet de 140 caractères maximum !

9

LE PETiT LEXiQUE DU CRÉATEUR D’APPLiCATiONSAs-tu bien lu le Petit Lexique ? Voici donc le quizz :

2. Sur quels outils peut-on «scroller» : • sur un ordinateur • sur un ordinateur portable • sur une tabletteDessine les ci-dessous.

3. Comment appelle-t-on le fait de «cliquer» sur un appareil tactile?

4. J’ai fabriqué une application, avant qu’elle ne soit disponible au public. Je dois l’essayer moi même et proposer à des volontaires de le faire également, afin qu’ils me fassent des retours. Comment s’appelle cette phase ?

PAPYRUS TABLETTE PARCHEMiN

1. En français, que signifie le mot anglais «scroll» ? (Entoure la bonne réponse)

5. «UX» est une abréviation. Choisis la bonne réponse :- «Ustensile Extensible» - «User Experience»- «Ultime Excuse»

1. DÉCOUVRIR

Dans cette étape, tu vas mener l’enquête sur les

applications et leurs usages.

- LES DIFFÉRENTS TYPES D’APPLiCATiONS- ANALYsE D’APPLiCATiONS

DÉCOUVRIR 11le / /2017

LES DIFFÉRENTS TYPES D’APPLiCATiONSSur la tablette de ta classe, il y a plusieurs applications. En groupe, choisissez-en trois, observez les bien et décrivez ce qu’elles vous permettent de faire et pourquoi vous les aimez ou non.

le nom de l’appli : le nom de l’appli : le nom de l’appli :

APPLi N° 1 APPLi N° 2 APPLi N° 3

DÉCOUVRIR 12le / /2017

LES DIFFÉRENTS TYPES D’APPLiCATiONS Trie les applications selon leur thématique ou usage.

UTILITAIRE

HISTOIRE

CREATION

JEUX

PÉDAGOGIQUE / EDUCATIF

DOCUMENTAIRE

DÉCOUVRIR 13le / /2017

ANALYsE D’UNE APPLICATION Que trouve-t-on dans une application? Avec ta classe, choisissez deux applications et comparez les remplissant les «camemberts» de la page suivante selon le modèle ci-dessous. A vous de répérer les différents éléments contenus dans les applications sélectionnées !

IMAGE

SON

INTERACTiON / ANiMATiON

MODE D’EMPLOi

PÉDAGOGiE / iNFORMATiONs

Pour représenter des données ou des informations et les rendre simples à la compréhension, on peut les dessiner en utilisant des formes géométriques, des couleurs et une légende. Cela s’appelle une dataviz (datavisualisation) ou une visualisation des données.

Exemple:L’ application Aniscience

DÉCOUVRIR 14le / /2017

ANALYsE D’UNE APPLICATION (SUITE)

APP N°1 APP N°2

le nom de l’appli : le nom de l’appli :

2. INTERPRÉTER

Dans cette partie, tu vas faire un compte rendu de tes observations.

- DÉFiNiR L’AxE DU PROJET- LA MAiSON DE LA NATURE ET RECHERCHE DOCUMENTAIRE- UNE APPLICATION, POUR QUOI FAIRE?

INTERPRÉTER 16le / /2017

LE CAHIER DES CHARGES : L’AxE DU PROJETDe quel sujet souhaitez-vous parler dans votre application?

DÉCOUVRIR 17le / /2017

RECHERCHE DOCUMENTAIRE Voici quelques pages pour noter tes recherches documentaires.

DÉCOUVRIR 18le / /2017

RECHERCHE DOCUMENTAIRE Voici quelques pages pour noter tes recherches documentaires.

DÉCOUVRIR 19le / /2017

RECHERCHE DOCUMENTAIRE Voici quelques pages pour noter tes recherches documentaires.

INTERPRÉTER 20le / /2017

UNE APPLICATION, POUR QUOI FAIRE ?En reprenant les observations notées précédemment, rédigez la problématique de votre application.

Avec toute la classe, mettez votre travail en commun et rédigez une seule problématique.

NOUS CRÉONS UNE APPLICATION, POUR QUI ? NOUS CRÉONS UNE APPLICATION, POUR QUI ?

POUR FAIRE QUOI ? POUR FAIRE QUOI ?

PARCE QUE ? PARCE QUE ?

AVEC QUELLE FONCTIONNALITÉ DE LA TABLETTE ? AVEC QUELLE FONCTIONNALITÉ DE LA TABLETTE ?

3. IMAGINER- LE BRAiNsTORMING- CRÉER UN CAHIER DES CHARGESAvec ta classe, propose

les idées les plus folles pour inventer une

nouvelle application !

IMAGINER 22le .........../............./2017

LE BRAiNsTORMINGUn brainstorming permet de produire beaucoup d’idées en une seule fois. Ce terme anglais se compose de deux mots : «brain» le cerveau et «storm» la tempête. Un brainstorming est donc une “tempête de cerveaux”! Pour faire un brainstorming, on peut se réunir à plusieurs pour partager ses idées, même les plus folles, pour trouver une solution à un problème.Au premier abord, on pourrait croire qu’il s’agit d’une activité un peu farfelue, mais c’est en fait une technique précise qui nécessite de respecter quelques règles de base.

PAs DE JUGEMENTIl n’y a pas de mauvaise idée dans un brainstorming, il faut donc éviter de critiquer, même si l’on n’est pas d’accord.

REBONDiR sUR LEs iDÉEs DEs AUTREsLorsqu’un participant fait une proposition, pense « et » plutôt que « mais ».

FAiRE LE PLEiN D’iDÉEs !La meilleure façon de trouver une bonne idée est d’en accumuler un très grand nombre.

REsTER CONCENTRÉN’oublie pas pourquoi tu participes à un brainstorming et ne t’éloignes pas du sujet.

PARLER CHACUN sON TOURToutes les idées méritent d’être entendues. Attend qu’on te donne la parole pour t’exprimer.

ENCOURAGER LEs iDÉEs FOLLEsUn brainstorming est le moment idéal pour avoir des idées farfelues. Même si une proposition n’est pas réaliste, elle déclenchera peut-être une étincelle chez quelqu’un.

IMAGINER 23le .........../............./2017

BRAiNsTORMING Sur cette page, tu peux écrire et dessiner tes idées !

IMAGINER 24le .........../............./2017

LE CAHIER DES CHARGES Après avoir proposé plein d’idées lors du brainstorming, votez pour les meilleures. Ensuite vous allez réaliser le cahier des charges.

Le cahier des charges est un document qui résume tous les aspects de l’application. Il doit évoquer le contenu, l’aspect visuel, les fonctionnalités... Bref, tout ce qu’il ne faudra pas oublier au moment de la réalisation !

Avec la classe vous allez réaliser un cahier des charges en forme de plante. Regarde cet exemple de l’application Aniscience, chaque branche correspond à une catégorie, chaque branche plus petite donne une indication.

Musique

Aspect Graphique

FonctionsContenu

Musique douce(xylophone)

Son des animaux (oiseaux)

sous terre

la musaraigne

la taupe

le ver de terrele hanneton

le tétardle triton

dans la mare

Bruitages

Grandes illustrations

Peintures (gouache)

Découvrir les animaux et les plantes du jardin

Jouer avec la souris

Dessins enfantins

IMAGINER 25le .........../............./2017

CAHIER DES CHARGESSur cette page, dessine une plante dont chaque branche représente un aspect de l’application :

4. CONCEVOIR- LE CHEMiN DE FER AVEC WYTEPAD - PANDASUITE- BETÂ TEsT

Il est temps de passer à la conception de

l’application.

27EXPÉRIMENTER le .........../............./2017

LE CHEMiN DE FER AVEC WYTEPAD Le chemin de fer est la représentation graphique des différents écrans qui composent l’application. Il n’ a pas besoin d’être très joli ou très précis. C’est comme si on dessinait au brouillon avant de se lancer !Cela permet d’avoir une vue d’ensemble des éléments qu’il faudra créer mais aussi d’imaginer l’enchainement et l’interaction entre les différents écrans.

Dans cet exemple, cette application permet de découvrir les ingrédients nécéssaires pour faire pousser les fleurs du jardin.

Les zones rouges représentent les éléments sur lesquels on peut cliquer pour accéder à un nouvel écran. Les flèches rouges permettent de montrer de quel écran il s’agit.

Avec les ardoises et l’application Wytepad,

vous allez réaliser le chemin de fer de

l’application !

28EXPÉRIMENTER le .........../............./2017

LA PHAsE DE TEsT Il est temps de faire tester votre réalisation à une autre classe ! Photocopie cette page pour la distribuer à tes bêta-testeurs.

LE CONTENU EsT-iL iNTÉREssANT ?

POURQUOi ? POURQUOi PAs ?

ELLE EsT BELLE

ELLE EsT PRATiQUE

ELLE EsT iNTÉREssANTE ELLE EsT TROP COMPLiQUÉE

ELLE N’EsT PAs COMPLèTE

ELLE N’EsT PAs TRès BELLEELLE EsT AMUsANTE

L’APPLiCATiON EsT-ELLE FACiLE à UTiLisER ?

AS-TU PAssÉ UN BON MOMENT ?

EsT-CE QUE TU AiMERAis AvOiR L’APPLiCATiON CHEz TOi ? Entoure les réponses qui te semblent juste.

Colorie les barres pour indiquer ta satisfaction

5. PRÉSENTER- VOTRE APPLICATION SUR L’APPSTORE

- PRÉPARE LE sHOWTIME !Bravo ! C’est maintenant le moment de montrer votre travail à tout le

monde !

30PRÉSENTER le .........../............./2017

PRÉsENTER L’APPLICATION

LE NOM DE L’APPLICATION :

DESCRiPTION :

MOTS CLÉS : Dessine le logo de ton application

31PRÉSENTER le .........../............./2017

DES NOTES POUR LE sHOWTIMESur cette page, tu peux écrire et dessiner tes idées !

TON AViS SUR CE GUIDERéponds à ces quelques questions, puis détache délicatement la feuille pour la donner au Cube. Tes réponses sont très importantes ! Elles permettront d’améliorer ce guide pour les prochains projets.

As-TU EU AssEz DE PLACE POUR ÉCRiRE OU DEssiNER ?

LE GUiDE EsT-iL AssEz sOLiDE POUR TOUTE L’ANNÉE ?

As-TU EMMENÉ LE GUiDE à LA MAisON POUR LE MONTRER à TEs PARENTs?

Si TU As DEs REMARQUEs sUR LE GUiDE OU LE PROJET, TU PEUx LEs ÉCRiRE Ci-DEssOUs :

MON ÉCOLE :

JAMAis 1 OU 2 FOis sOUvENT

Colorie les barres pour indiquer ta satisfaction

Retrouve tous les détails du projet sur le site : lelabodesapplis.lecube.com

LE GUiDE DU PROJET Réalisé dans le cadre du programme Connectons Nos Écoles Twitter : @LeCubeCNE

LE CUBE Centre de Création Numérique20, cours Saint Vincent 92130 Issy-les-Moulineauxwww.lecube.com

Connectons Nos Écoles est un programme soutenu par Grand Paris Seine Ouest.

Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

Créé en 2001 à l’initiative de la Ville d’Issy-les-Moulineaux, Le Cube est un centre de création numérique de Grand Paris Seine Ouest. Il est géré et animé par l’association ART3000. Le Cube est membre des pôles de compétitivité Cap Digital et Systematic Paris-Région.Partenaires institutionnels : Ministère de la Culture et de la Communication, Région Ile-de-France, Département des Hauts-de-SeineÉcoles partenaires : Gobelins, école de l’image, Isart Digital, Strate, école de design, Les Arcades,Telecom, Ecole de Management, membre de l’Institut Mines-TelecomPartenaire traduction : Trad’OnlinePartenaires médias : Arte Actions Culturelles, L’œil, Kiblind, Paris Mômes, The Museum Channel, We Demain, Socialter, A Nous Paris, Télérama

Conception : Célia Poulot / Claire Bresson

LE LABODEs