Tutoriel de base avec modèle Enseignants-es: Utilisez ce tutoriel avec les élèves pour créer une application à partir d’un modèle -1h La FJFNB part en tournée et va donner un atelier aux élèves pour les aider à devenir de petits créateurs de la technologie et leur apprendre à programmer. Voici un tutoriel qui peut aider les élèves à apprendre une certaine base en programmation. L'atelier dure une heure. Voici les étapes du déroulement de l'atelier: 5 min: Introduction à Vizwik (Courte présentation) 5-10 min: S'enregistrer sur Vizwik et faire un tour du programme. 45 min: Accomplir les étapes du Tutoriel

1. Tutoriel de base avec modèle
(Enseignants-es: Utilisez ce tutoriel avec les élèves
pour créer une application à partir d’un modèle -1h)
Apprendre Créer Partager

2. Pour enseignants-es:
vizwik
1. Enseignants-es: Créer une classe
2. Enseignants-es: Copier un modèle
3. Enseignants-es: Partager un modèle

3. Pour les élèves
vizwik
1. Élèves: Créer un compte
2. Élèves: Copier le modèle “App FJFNB (Atelier)”
3. Ajouter des images dans Vizwik
4. Vue 1Accueil: Modifier les images et l’écran de fond
5. Vue 2Profil: Modifier les propriétés et informations
6. Vue 3Info: Modifier les informations
7. Table de données “Blog Articles” à modifier

4. Pour les élèves (suite)
8. Vue 5Outil: Ajouter un url à un bouton
9. Vue 5bVideo: Modifier la vidéo
10. Vue 5cTaxes et les Scripts
11. Comment partager votre application
12. Allez voir votre application sur le mobile
13. Vue 5dPourboires et créer le Script pour le pourboire
de 18%
vizwik

5. Points de surplus
vizwik
14. Vue 5aCarte et les Scripts 5a
15. Niveau avancé: Vue 5eDessiner et créer des Scripts

6. 1. Enseignants-es: Créer une classe
1
2
3
4
1. Cliquez sur le profil de l’utilisateur.
2. Entrez le nom de l’école.
3. Entrez un nom de classe et cliquez sur “créer”.
4. Donnez le code de la classe aux élèves.
vizwik

7. 2. Enseignants-es: Copier le
modèle “App FJFNB (Atelier)”
2
3
1. Ouvrez le panneau des applications (dans votre compte publique
Vizwik).
2. Cliquez sur “Nouveautés”.
3. Choisissez “App FJFNB (Atelier)” et cliquez dessus.
1
vizwik

8. 2. Enseignants-es: Copier le
modèle “App FJFNB (atelier)”
4
4. Cliquez sur “copier” pour ouvrir le projet copié.
vizwik

9. 3. Enseignants-es: Comment
partager un modèle dans la classe
1. Retournez dans la classe.
2. Cliquez sur la liste des projets.
3. Retrouver le modèle et cliquez sur le crayon qui est situé en haut à la
droite de l’application.
1
2
3
vizwik

10. 3. Enseignants-es: Comment
partager un modèle dans la classe
4. Vous pouvez modifier le titre de l’application.
5. Vous pouvez modifier la description si vous voulez.
6. Choisissez les catégories.
7. Partagez avec les membres de Vizwik et choisir “Tous” pour le modèle.
8. Cliquez “Partager” ou “Mise à jour”. C’est une mise à jour dans ce cas-ci, car ce n’est pas la
première fois que l’application a été partagée.
8
5
4
6
7
vizwik

11. 1. Élèves: Créer un compte
1. Cliquez sur FR
2. Cliquez sur “S’inscrire”
2
vizwik
1

12. 1. Élèves: Créer un compte
3. Les élèves doivent cliquer “Non” et poursuivre.
3
vizwik

13. 1. Élèves: Créer un compte
4. Il y a deux façons de s’inscrire pour les élèves: avec ou sans code de la
classe. Supposons que vous leur donnez un code de la classe, ils vont
répondre “Oui” à la question.
4
vizwik

14. 1. Élèves: Créer un compte
5. Remplir les cases ci-dessous et passez à l’étape suivante. Le courriel
est optionnel pour les élèves. Cependant, les élèves qui veulent
reconfigurer leur mot de passe plus tard devront fournir un courriel
afin de recevoir une notification.
5
vizwik

15. 2. Élèves: Copier le modèle
“App FJFNB (Atelier)”
1. Ouvrez le panneau des applications
2. Cliquez sur “Nouveautés”.
3. Choisissez “App FJFNB (Atelier)” et cliquez dessus.
*Note: Pour les enseignants-es c’est aussi dans ce panneau que vous verrez toutes les
applications partagées par vos élèves et que vous pourrez vérifier leur travail en ayant la capacité
de pouvoir ouvrir leurs projets. Seuls les enseignants-es auront ce pouvoir.
2
1
3
vizwik

16. 2. Élèves: Copier le modèle
“App FJFNB (atelier)”
4. Cliquez sur “copier” pour ouvrir le projet copié et pouvoir y apporter les
modifications nécessaires.
4
vizwik

17. 3. Ajouter des images dans
Vizwik: environ 2 images
1
vizwik
1. Cliquez sur “Média” dans le tableau des éléments
2. Cliquez sur “Images”
3. Cliquez sur le “+” pour ajouter des images ou juste glisser-déposer les
images de votre bureau dans Vizwik. Images de vous: profil,
couverture, autres
2
3

18. 4. Vue 1Accueil:
Personnaliser la Vue
1
4
3
2
vizwik
1. Sélectionnez l’élément de la Vue que vous voulez modifier.
2. Cliquez sur l’icône en forme de clé sur le coin droit de la Vue.
3. Modifiez les propriétés: l’image, les polices de caractères.
4. A répéter pour chaque élément sélectionné: image, étiquette, bouton, etc.

19. 5. Vue 2Profil: Modifier les
propriétés et informations
1
2
3
1. Modifiez la couverture.
2. Modifiez l’image de profil.
3. Modifiez l’étiquette.
vizwik

20. 5. Vue 2Profil: Modifier les
informations: Fb, Twitter,...
1
1. Sélectionnez l’image Facebook.
2. Ouvrez la clé de propriétés pour inscrire l’url et choisir le genre: Web.
3. Répétez les étapes 1 et 2. Pour Twitter, choisissez “Web”, pour le
téléphone, choisissez “#téléphone” et pour le courriel, choisissez
“Courriel”.
2
3
vizwik

21. 6. Vue 3Info: Modifier
l’information de l’étiquette
3
1 2
1. Sélectionnez l’étiquette (en rouge sur la photo).
2. Double-cliquez dans l’étiquette pour sélectionner le texte.
3. Effacez et remplacez le texte de votre biographie. Vous pouvez le
taper dans un document word et le copier ici.
vizwik

22. 7. Modifier la Table des données
“Blog Articles”
1. Modifiez les titres, le texte de l’article et la description.
2. A partir du tableau des éléments, glissez les images dans la colonne
“Icon”.
2
1
vizwik

23. 8. Vue 5Outil: Ajouter un url
à un bouton
1
vizwik
1. Ouvrez le Script “4a go to blog” et effacez le lien url blog.vizwik.com
pour le remplacer par votre url.
2. Sélectionnez le bouton “Blog” et vérifiez si le Script est bien attaché au
bouton en cliquant sur l’icône clé et Scripts.
2

24. 10. Vue 5bVideo: Modifier la vidéo
1. Sélectionnez la vidéo et ouvrez l’icône clé.
2. Entrez le “id” de la vidéo. Le “id” de la vidéo se retrouve à la fin du url
après youtube.
1
2
vizwik

25. 11. Vue 5cTaxes et les Scripts
vizwik
Regardez comment on a créé cette Vue et les Scripts qui s’y rattachent.
Tout le travail a été fait pour toi, mais il faut que tu essaies de comprendre
comment on a pu faire ce calcul. Les couleurs correspondent aux éléments
de la Vue qui ont été glissés dans le Script.

26. 12. Hey les élèves! Comment partager
votre application
2
1. Clique sur l’application en bas.
2. Une fenêtre s’ouvre. Modifie le titre de ton application.
3. Modifie la description de ton application.
4. Choisis les catégories.
5. Partage avec les membres de Vizwik et choisir “Aucun” pour le modèle.
6. Clique “Partager”.
6
5
4
1
3
vizwik

27. 13. Allez voir votre application
sur le mobile!
1. Allez sur m.vizwik.com sur votre téléphone, ipod ou tablette (avec
Google Chrome).
vizwik
2. Sur le menu à gauche, vous verrez vos projets, vos applications, vos
abonnements et les applications publiques dans le réseau. Vous
pouvez tester votre application au fur et à mesure qu’elle se développe
sans avoir à les partager.

28. 14. Créer le Script 5dpourboire 18p
1. Créez un nouveau Script et reproduire le Script suivant.
2. Glissez l’espace de texte “Montant” de la Vue dans le Script.
3. Glissez l’étiquette “Pourboire” dans le Script.
4. Sélectionnez le groupe de boutons et cliquez sur l’icône clé.
5. Choisir le bon Script dans le menu déroulant.
1
2
3
4
5
1
3
4
4
5
2
3
vizwik

29. 15. Vue 5aCartes et Scripts 5a
3
5 4
vizwik
Regardez les Scripts que l’on a utilisés pour afficher un lieu sur une carte.

30. 16. Niveau avancé: Vue 5eDessiner
et créer des Scripts
vizwik
C’est plus compliqué à faire. Il faut être à un niveau plus avancé. Tu peux
aller copier l’application “Dan’s Paint” pour voir comment il a créé les
Scripts. Il y a aussi des vidéos Youtube en anglais qu’un enseignant s’est
amusé à faire.

31. Hey les enseignants-es!
vizwik
Pour voir vos élèves dans la classe, n’oubliez pas de cliquer sur le panneau
des membres. En tant qu’administrateur de la classe, vous pouvez aussi
aller voir les projets de vos élèves en cliquant sur le panneau des
applications.

32. www.vizwik.com
vizwik