Des plans de leçon amusants et faciles en programmation - vizwik

1. Des plans de leçon amusants et
faciles en programmation
Martine Paquet
Enseignante et Technopédagogue
www.martinepaquet.com

2. Menu
● Introduction (15 min)
● Exemples de plans de leçons (15 min)
● Démonstration d’une classe (10 min)
● Inscription Vizwik (10 min)
● Si temps: Explorer les tutoriels (10 min)

3. Créer des applications est difficile!

5. Qu’est-ce que Vizwik?
1. Outil de développement de web apps
2. Plateforme pour publier des apps
3. Réseau social
4. Plateforme d’enseignement
a. Élèves
b. Classes
c. Leçons
d. Rapports d’activités

6. Qu’est-ce que Vizwik?
Communauté
publique &
Classes
Élèves & Enseignants
Apps & Modèles Projets
App KITs

7. Pourquoi Vizwik?
1. Créer des apps est pertinent et amusant
pour les jeunes
2. Les apps sont des projets
3. Publier les projets (apps)
4. Partager socialement
5. Sécurité sur le web
6. Seulement besoin de Chrome (pas de
logiciels requis)
7. Suit le mouvement “maker”

8. Interface de l’utilisateur de Vizwik

9. Cycle de vie d’une app dans Vizwik
Modèle Projet App
Créer Publier
Partager Copier

10. Comment faire une app dans Vizwik
1. Interface de l’utilisateur
a. Vues
b. Éléments
c. Interaction
2. Définir le comportement
a. Scripts
b. Opérateurs
c. Langage
d. Evénements
3. Connecter aux données
a. Données
b. Types de données

11. Structure d’une Application
DB
Le visuel de l’app Ce que l’app fait Ce que l’app emmagasine
Vue Script Donnée
App
Web
Tap
event
get/set

12. Vue - Interface de l’utilisateur
● Une vue à la fois peut être affichée
● Naviguer parmi les vues (pages)
● Les vues ont des propriétés
Éditeur de la VuePanneau
des
éléments
Glisser et
déposer pour
créer
Modifier les
propriétés
Alignement
automatiqueÉtoile bleue:
première vue
Sélectionner
pour déplacer
et modifier la
taille

13. Script - le code
C’est le code:
● Contient des entrées et
une sortie
● L’opération a une entrée
et une sortie
● Les entrées sont liées aux
sorties
● Les liens contiennent des
données
● Les Scripts peuvent
appeler d’autres Scripts.
● Attacher les Scripts aux
éléments de la Vue (ex:
bouton)
Panneau des
éléments
Éditeur de Script
Input
(Entrée)
Output
(Sortie)
Lien
Opération
Glisser et
déposer pour
créer

14. Données - emmagasiner l’information
● Les données sont lues et écrites dans
l’application
● Entreposer de l’information dans l’
application de Vizwik
Glisser et
déposer pour
créer
Panneau
des
éléments
L’accès aux données peut être
privé à chaque utilisateur ou
partagé avec les autres
utilisateurs.

15. Média - sons et images
● Télécharger des images ou des sons
● Peuvent être utilisés dans la vue, le script
ou les données
● Glisser et déposer les images
Panneau
des
éléments
Glisser et
déposer pour
créer

16. Plusieurs combinaisons d’
apprentissage
1. Niveau d’apprentissage
2. Cours d’Informatique
3. Pensée informatique

17. Niveaux d’apprentissage

18. Théorie en Informatique

19. Pensée informatique
Abstractions
Reconnaitre des patrons
Décompositions
Algorithmes
Généralisations
Résolutions de problèmes
Raisonnement abstrait et logique

20. Plans de leçons ● Par projet
● Action
● Assembler les
parties
● Personnaliser
● Sécurité
● Analyses
graphiques
● But
● Tâches et étapes
● Support d’images
et de vidéos

21. Leçons
Apprendre en faisant une app mobile

22. Cycle de vie d’une leçon
Élève
Modèle
Projet
App
publiée
Leçon
Enseignant
1
2
3

23. Comment utiliser Vizwik
Plans de leçon
(1 à 3 cours)
Plan de leçon
(1 semaine)
Plan de leçon
(1 mois)
Club
après-classe
?
?

24. Plan de leçon - Jour 1 - Tous
9 Tutoriels
● Habiletés base
● Boutons
● Evénements
● Scripts
● Console
● Partager
● Flux de données
● Opérations
● Média
● “Get/Set values”

25. Plan de leçon - Jour 2 - Tous
Kit Hello Kitty
● Modèles
● Événements
● Script
● Flux de données
● Publier
● Audio

26. Plan de leçon - Jour 2 - Tous
App de leur choix
● Doit faire leur
propre app
● Appliquer les leçons
apprises dans les
tutoriels
● Choisir un sujet d’
intérêt

27. Plan de leçon - Jour 3 - Tous
Kit Carte d’affaire
● Liens
● URL
● Appel téléphonique
● Réseaux sociaux
● Agencement
● Conception
● Vue principale
● Bouton invisible

28. Plan de leçon - Jour 4 - Calculs
Kit Tip Calculator
● Groupes de
boutons
● Champs de texte
● Conditions
● Interrupteurs
● Calculs Math
● Appeler Script

29. Plan de leçon - Jour 4 - Art et dessin
Kit Dessin Canvas
● Graphiques
● Points
● Rectangles
● Couleurs
● Variables

30. Plan de leçon - Jour 4 - Histoire
Kit de vote
● Base de
données
● Graphiques
● Boucles
● Réseau
● UX Design

31. Plan de leçon - Jour 4 - Géographie
Kit Créer un lieu
● Cartes
● Événements
● GPS
● Longitude
● Latitude
● Agrandir
● Notation

32. Plan de leçon - Jour 4 - Nutrition
Kit Liste de tâches
● Pied de page
● Titre
● Liste
● Tables des
données
● Bibliothèque

33. Plan de leçon - Jour 4 - Math
Kit de calcul
● “GetSet values”
● Champs
● Mathématiques
● Expressions

34. Plan de leçon - Jour 5 - Tous
App de choix
● Apprendre à faire ta
propre app
● Titres
● Menus
● Graphiques

35. Plan de leçon - Semaine 2 Jeux
Kit Random Racer
● Nombres
aléatoires
● Animation
● “Sprites”
● Chronomètres

36. Plan de leçon - Semaine 2 Jeux
Kit Bubble Popper
● Boutons images
● “Set Image”
● Boucles
● Conditions
● Niveaux

37. Plan de leçon - Semaine 2
Micro Blog
● Table des
données
● “Set Image”
● Boucles
● Fonctions
● Formes

38. Exemple Classe de FI BBT 10
● Voir Plan de leçon
● Vidéo d’introduction
● 9 applications de base
● 3 leçons (applications intermédiaires):
tâches et étapes
● Carte profile et carte d’affaire
● Application de leur choix
● Jeux

39. Classe de FI BBT 10 - Tableau de
bord
85 leçons débutés
70 leçons complétées

40. Classe de FI BBT 10 - Élèves
Tous les élèves dans la classe

41. Classe de FI BBT 10 - Voir les
projets de chaque élève
A propos, ses applications, ses projets, ses
modèles, ses amis

42. Classe de FI BBT 10 - Voir les
applications d’un élève
Voir ses 9 applications

43. Classe de FI BBT 10 - Voir le temps
Voir le nombre d’heures passées dans les leçons, les
activités quotidiennes et le nombre de leçons complétées

44. Classe de FI BBT 10 - Les
applications qu’ils ont faites
Ils ont fait plusieurs applications. Et une chose dont je
suis fière, c’est qu’ils ont dépassé le maitre!

45. Classe de FI BBT 10 - Les modèles
que j’ai partagés avec eux
J’ai partagé avec eux plusieurs modèles pour leur
montrer comment faire.

46. Classe de PIF 9 - Les modèles que j’
ai partagés avec eux
J’ai partagé avec eux plusieurs
modèles pour leur montrer
comment faire: Chanson no 1 et
App Simple Plan. J’ai aussi inclus
un fil audio dans l’app pour
pratiquer leur français.
Voir Plan de leçon
Ils doivent inclure:
- Des images
- Une vidéo
- De l’audio (si possible)
- Des informations sur la
chanson et l’artiste (étiquettes)
- Explications de la chanson
(thèmes, émotions et
message)

47. Classe de PIF 10 - Les modèles que
j’ai partagés avec eux
J’ai partagé avec eux plusieurs
modèles pour leur montrer comment
faire.
Sur le thème de la technologie:
Ils devaient faire un graphique à
secteurs sur le temps qu’ils passent
en technologie. J’ai aussi inclus un fil
audio pour qu’ils puissent pratiquer
leur français.
Sur le thème du cinéma:
- Affiche du film
- Bande-annonce du film
- Informations sur le film
- Liens à des sites web

48. Aide et Ressources

49. Aide et Ressources
Schémas
Ressources
“How to”
Exemples
Modèle
Bulles d’aide
“Friday videos”

50. Démonstration d’une classe - 10 min
Groupe privé pour les élèves, leçons, modèles et
partager

51. Pour s’inscrire - 10 min
Navigateur Chrome => www.vizwik.com
Créer un compte comme un enseignant
Créer une classe
Écouter la vidéo d’introduction

52. Explorer les tutoriels - 10 min
Habiletés de base

53. Q&A + Sondage
Questions?

54. Animatrice: Martine Paquet
Enseignante secondaire 22 ans
Spécialités: Math, Français, Troubles d’apprentissage,
Technologie, Sciences
Directrice en Éducation: Agora Mobile Inc (1 an et demi) 2013-
2014
Ambassadrice Vizwik: www.martinepaquet.com
Passionnée des technologies en salle de classe
Enseignante: PIF 9, 10, Fila 9, 10, FI BBT10 ASD-E (2015-2016)
Ma vision: “Que les jeunes deviennent des penseurs et des
créateurs, tout en ayant du plaisir et en découvrant leurs
intérêts.”

55. facebook.com/MartinePaquetED
twitter.com/MartinePaquetED
plus.google.com/+MartinePaquetedtech
ca.linkedin.com/in/MartinePaquetED
martine.paquet72@gmail.com
Pour me contacter

56. Atlantic Education Summit -
Juillet 2016 #AESI2016

57. Partenaires