Tutoriel de base avec modèle 
(Enseignants-es: Utilisez ce tutoriel avec les élèves 
pour créer une application à partir d...
Pour enseignants-es: 
vizwik 
1. Enseignants-es: Créer une classe 
2. Enseignants-es: Copier un modèle 
3. Enseignants-es:...
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 ima...
Pour les élèves (suite) 
8. Vue 5Outil: Ajouter un url à un bouton 
9. Vue 5bVideo: Modifier la vidéo 
10. Vue 5cTaxes et ...
Points de surplus 
vizwik 
14. Vue 5aCarte et les Scripts 5a 
15. Niveau avancé: Vue 5eDessiner et créer des Scripts
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. ...
2. Enseignants-es: Copier le 
modèle “App FJFNB (Atelier)” 
2 
3 
1. Ouvrez le panneau des applications (dans votre compte...
2. Enseignants-es: Copier le 
modèle “App FJFNB (atelier)” 
4 
4. Cliquez sur “copier” pour ouvrir le projet copié. 
vizwi...
3. Enseignants-es: Comment 
partager un modèle dans la classe 
1. Retournez dans la classe. 
2. Cliquez sur la liste des p...
3. Enseignants-es: Comment 
partager un modèle dans la classe 
4. Vous pouvez modifier le titre de l’application. 
5. Vous...
1. Élèves: Créer un compte 
1. Cliquez sur FR 
2. Cliquez sur “S’inscrire” 
2 
vizwik 
1
1. Élèves: Créer un compte 
3. Les élèves doivent cliquer “Non” et poursuivre. 
3 
vizwik
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. Supposon...
1. Élèves: Créer un compte 
5. Remplir les cases ci-dessous et passez à l’étape suivante. Le courriel 
est optionnel pour ...
2. Élèves: Copier le modèle 
“App FJFNB (Atelier)” 
1. Ouvrez le panneau des applications 
2. Cliquez sur “Nouveautés”. 
3...
2. Élèves: Copier le modèle 
“App FJFNB (atelier)” 
4. Cliquez sur “copier” pour ouvrir le projet copié et pouvoir y appor...
3. Ajouter des images dans 
Vizwik: environ 2 images 
1 
vizwik 
1. Cliquez sur “Média” dans le tableau des éléments 
2. C...
4. Vue 1Accueil: 
Personnaliser la Vue 
1 
4 
3 
2 
vizwik 
1. Sélectionnez l’élément de la Vue que vous voulez modifier. ...
5. Vue 2Profil: Modifier les 
propriétés et informations 
1 
2 
3 
1. Modifiez la couverture. 
2. Modifiez l’image de prof...
5. Vue 2Profil: Modifier les 
informations: Fb, Twitter,... 
1 
1. Sélectionnez l’image Facebook. 
2. Ouvrez la clé de pro...
6. Vue 3Info: Modifier 
l’information de l’étiquette 
3 
1 2 
1. Sélectionnez l’étiquette (en rouge sur la photo). 
2. Dou...
7. Modifier la Table des données 
“Blog Articles” 
1. Modifiez les titres, le texte de l’article et la description. 
2. A ...
8. Vue 5Outil: Ajouter un url 
à un bouton 
1 
vizwik 
1. Ouvrez le Script “4a go to blog” et effacez le lien url blog.viz...
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...
11. Vue 5cTaxes et les Scripts 
vizwik 
Regardez comment on a créé cette Vue et les Scripts qui s’y rattachent. 
Tout le t...
12. Hey les élèves! Comment partager 
votre application 
2 
1. Clique sur l’application en bas. 
2. Une fenêtre s’ouvre. M...
13. Allez voir votre application 
sur le mobile! 
1. Allez sur m.vizwik.com sur votre téléphone, ipod ou tablette (avec 
G...
14. Créer le Script 5dpourboire 18p 
1. Créez un nouveau Script et reproduire le Script suivant. 
2. Glissez l’espace de t...
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 car...
16. Niveau avancé: Vue 5eDessiner 
et créer des Scripts 
vizwik 
C’est plus compliqué à faire. Il faut être à un niveau pl...
Hey les enseignants-es! 
vizwik 
Pour voir vos élèves dans la classe, n’oubliez pas de cliquer sur le panneau 
des membres...
www.vizwik.com 
vizwik
Prochain SlideShare
Chargement dans…5
×

Tutoriel de base pour Vizwik

585 vues

Publié le

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

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
585
Sur SlideShare
0
Issues des intégrations
0
Intégrations
190
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tutoriel de base pour Vizwik

  1. 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. 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. 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. 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. 5. Points de surplus vizwik 14. Vue 5aCarte et les Scripts 5a 15. Niveau avancé: Vue 5eDessiner et créer des Scripts
  6. 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. 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. 8. 2. Enseignants-es: Copier le modèle “App FJFNB (atelier)” 4 4. Cliquez sur “copier” pour ouvrir le projet copié. vizwik
  9. 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. 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. 11. 1. Élèves: Créer un compte 1. Cliquez sur FR 2. Cliquez sur “S’inscrire” 2 vizwik 1
  12. 12. 1. Élèves: Créer un compte 3. Les élèves doivent cliquer “Non” et poursuivre. 3 vizwik
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 32. www.vizwik.com vizwik

×