tutoriel de base pour vizwik

Download Tutoriel de base pour Vizwik

If you can't read please download the document

Upload: martine-paquet

Post on 25-Jun-2015

205 views

Category:

Education


0 download

DESCRIPTION

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

TRANSCRIPT

  • 1. Tutoriel de base avec modle(Enseignants-es: Utilisez ce tutoriel avec les lvespour crer une application partir dun modle -1h)Apprendre Crer Partager

2. Pour enseignants-es:vizwik1. Enseignants-es: Crer une classe2. Enseignants-es: Copier un modle3. Enseignants-es: Partager un modle 3. Pour les lvesvizwik1. lves: Crer un compte2. lves: Copier le modle App FJFNB (Atelier)3. Ajouter des images dans Vizwik4. Vue 1Accueil: Modifier les images et lcran de fond5. Vue 2Profil: Modifier les proprits et informations6. Vue 3Info: Modifier les informations7. Table de donnes Blog Articles modifier 4. Pour les lves (suite)8. Vue 5Outil: Ajouter un url un bouton9. Vue 5bVideo: Modifier la vido10. Vue 5cTaxes et les Scripts11. Comment partager votre application12. Allez voir votre application sur le mobile13. Vue 5dPourboires et crer le Script pour le pourboirede 18%vizwik 5. Points de surplusvizwik14. Vue 5aCarte et les Scripts 5a15. Niveau avanc: Vue 5eDessiner et crer des Scripts 6. 1. Enseignants-es: Crer une classe12341. Cliquez sur le profil de lutilisateur.2. Entrez le nom de lcole.3. Entrez un nom de classe et cliquez sur crer.4. Donnez le code de la classe aux lves.vizwik 7. 2. Enseignants-es: Copier lemodle App FJFNB (Atelier)231. Ouvrez le panneau des applications (dans votre compte publiqueVizwik).2. Cliquez sur Nouveauts.3. Choisissez App FJFNB (Atelier) et cliquez dessus.1vizwik 8. 2. Enseignants-es: Copier lemodle App FJFNB (atelier)44. Cliquez sur copier pour ouvrir le projet copi.vizwik 9. 3. Enseignants-es: Commentpartager un modle dans la classe1. Retournez dans la classe.2. Cliquez sur la liste des projets.3. Retrouver le modle et cliquez sur le crayon qui est situ en haut ladroite de lapplication.123vizwik 10. 3. Enseignants-es: Commentpartager un modle dans la classe4. Vous pouvez modifier le titre de lapplication.5. Vous pouvez modifier la description si vous voulez.6. Choisissez les catgories.7. Partagez avec les membres de Vizwik et choisir Tous pour le modle.8. Cliquez Partager ou Mise jour. Cest une mise jour dans ce cas-ci, car ce nest pas lapremire fois que lapplication a t partage.85467vizwik 11. 1. lves: Crer un compte1. Cliquez sur FR2. Cliquez sur Sinscrire2vizwik1 12. 1. lves: Crer un compte3. Les lves doivent cliquer Non et poursuivre.3vizwik 13. 1. lves: Crer un compte4. Il y a deux faons de sinscrire pour les lves: avec ou sans code de laclasse. Supposons que vous leur donnez un code de la classe, ils vontrpondre Oui la question.4vizwik 14. 1. lves: Crer un compte5. Remplir les cases ci-dessous et passez ltape suivante. Le courrielest optionnel pour les lves. Cependant, les lves qui veulentreconfigurer leur mot de passe plus tard devront fournir un courrielafin de recevoir une notification.5vizwik 15. 2. lves: Copier le modleApp FJFNB (Atelier)1. Ouvrez le panneau des applications2. Cliquez sur Nouveauts.3. Choisissez App FJFNB (Atelier) et cliquez dessus.*Note: Pour les enseignants-es cest aussi dans ce panneau que vous verrez toutes lesapplications partages par vos lves et que vous pourrez vrifier leur travail en ayant la capacitde pouvoir ouvrir leurs projets. Seuls les enseignants-es auront ce pouvoir.213vizwik 16. 2. lves: Copier le modleApp FJFNB (atelier)4. Cliquez sur copier pour ouvrir le projet copi et pouvoir y apporter lesmodifications ncessaires.4vizwik 17. 3. Ajouter des images dansVizwik: environ 2 images1vizwik1. Cliquez sur Mdia dans le tableau des lments2. Cliquez sur Images3. Cliquez sur le + pour ajouter des images ou juste glisser-dposer lesimages de votre bureau dans Vizwik. Images de vous: profil,couverture, autres23 18. 4. Vue 1Accueil:Personnaliser la Vue1432vizwik1. Slectionnez llment de la Vue que vous voulez modifier.2. Cliquez sur licne en forme de cl sur le coin droit de la Vue.3. Modifiez les proprits: limage, les polices de caractres.4. A rpter pour chaque lment slectionn: image, tiquette, bouton, etc. 19. 5. Vue 2Profil: Modifier lesproprits et informations1231. Modifiez la couverture.2. Modifiez limage de profil.3. Modifiez ltiquette.vizwik 20. 5. Vue 2Profil: Modifier lesinformations: Fb, Twitter,...11. Slectionnez limage Facebook.2. Ouvrez la cl de proprits pour inscrire lurl et choisir le genre: Web.3. Rptez les tapes 1 et 2. Pour Twitter, choisissez Web, pour letlphone, choisissez #tlphone et pour le courriel, choisissezCourriel.23vizwik 21. 6. Vue 3Info: Modifierlinformation de ltiquette31 21. Slectionnez ltiquette (en rouge sur la photo).2. Double-cliquez dans ltiquette pour slectionner le texte.3. Effacez et remplacez le texte de votre biographie. Vous pouvez letaper dans un document word et le copier ici.vizwik 22. 7. Modifier la Table des donnesBlog Articles1. Modifiez les titres, le texte de larticle et la description.2. A partir du tableau des lments, glissez les images dans la colonneIcon.21vizwik 23. 8. Vue 5Outil: Ajouter un url un bouton1vizwik1. Ouvrez le Script 4a go to blog et effacez le lien url blog.vizwik.compour le remplacer par votre url.2. Slectionnez le bouton Blog et vrifiez si le Script est bien attach aubouton en cliquant sur licne cl et Scripts.2 24. 10. Vue 5bVideo: Modifier la vido1. Slectionnez la vido et ouvrez licne cl.2. Entrez le id de la vido. Le id de la vido se retrouve la fin du urlaprs youtube.12vizwik 25. 11. Vue 5cTaxes et les ScriptsvizwikRegardez comment on a cr cette Vue et les Scripts qui sy rattachent.Tout le travail a t fait pour toi, mais il faut que tu essaies de comprendrecomment on a pu faire ce calcul. Les couleurs correspondent aux lmentsde la Vue qui ont t glisss dans le Script. 26. 12. Hey les lves! Comment partagervotre application21. Clique sur lapplication en bas.2. Une fentre souvre. Modifie le titre de ton application.3. Modifie la description de ton application.4. Choisis les catgories.5. Partage avec les membres de Vizwik et choisir Aucun pour le modle.6. Clique Partager.65413vizwik 27. 13. Allez voir votre applicationsur le mobile!1. Allez sur m.vizwik.com sur votre tlphone, ipod ou tablette (avecGoogle Chrome).vizwik2. Sur le menu gauche, vous verrez vos projets, vos applications, vosabonnements et les applications publiques dans le rseau. Vouspouvez tester votre application au fur et mesure quelle se dveloppesans avoir les partager. 28. 14. Crer le Script 5dpourboire 18p1. Crez un nouveau Script et reproduire le Script suivant.2. Glissez lespace de texte Montant de la Vue dans le Script.3. Glissez ltiquette Pourboire dans le Script.4. Slectionnez le groupe de boutons et cliquez sur licne cl.5. Choisir le bon Script dans le menu droulant.123451344523vizwik 29. 15. Vue 5aCartes et Scripts 5a35 4vizwikRegardez les Scripts que lon a utiliss pour afficher un lieu sur une carte. 30. 16. Niveau avanc: Vue 5eDessineret crer des ScriptsvizwikCest plus compliqu faire. Il faut tre un niveau plus avanc. Tu peuxaller copier lapplication Dans Paint pour voir comment il a cr lesScripts. Il y a aussi des vidos Youtube en anglais quun enseignant sestamus faire. 31. Hey les enseignants-es!vizwikPour voir vos lves dans la classe, noubliez pas de cliquer sur le panneaudes membres. En tant quadministrateur de la classe, vous pouvez aussialler voir les projets de vos lves en cliquant sur le panneau desapplications. 32. www.vizwik.comvizwik