Very sad to report that Vizwik has ceased operations (Sept '16)

Getting Started with VizWik

In this Introduction Activity, students will build a Business Card Template starting with a blank project space.

Afterwards, in the "Business Card" Activity, students will copy and edit a template that I borrowed from Martine Paquet (VizWik staff).

For both the Intro and Business Card activities, the end result may be the same.  The goal in keeping these activities so similar was to get students familiar with VizWik with some easier and repetitive tasks.  (Teachers may choose to blend these two activities together.)

If you missed the "Welcome to VizWik" video and an explanation of VizWik, they are here.

Files used in this page's activity

blueice-flickr-byjosecarlosnorte.jpg
File Size: 198 kb
File Type: jpg
Download File
youtubebutton.png
File Size: 8 kb
File Type: png
Download File
email_button.png
File Size: 2 kb
File Type: png
Download File
phone_button.png
File Size: 2 kb
File Type: png
Download File

Introduction Activity Goals

  1. Get students using VizWik quickly.
  2. Show students the correct steps to follow to get quick results.
  3. Show students how to recover from VizWik freezes. (Close & re-open Google Chrome.)
  4. Make a button act like a button.
  5. Make an image act like a button.
  6. Make multiple app pages (called "Views").
  7. Make buttons so users can go to another page ("View").
  8. Test all of this on a phone simulator for iPhone and Samsung (Android).



Getting Started - 1a



Getting Started - 1b

Creating an image that acts like a button is almost as easy as creating a button itself!  
  1. Drag your image into the white space of VizWik.
  2. Watch the Media--> Images area open and the upload arriving.
  3. From the Media--> Images area, drag the image onto your view!


VizWik "Freezes"
Sooner or later, things crash.

Watch this video to see how VizWik sometimes freezes. (It doesn't let you edit items, doesn't let you open/close scripts and views).  

So I close the entire Google Chrome window and in the next video I open Chrome again, proving that my work is saved automagically (!!!) and VizWik is fully functional again.



Getting Started - 1c

Watch Google Chrome come back with everything saved where I left it.

Make an image act like a button to go to a web page.

Create another View.

Learn how VizWik chooses the Primary View (starting page for your app).

Create Home, Previous and Next buttons to change app Views (pages).



Getting Started - 1d

In this video, we drop Email and Phone images onto the primary view, and we make these images act like buttons to take us to the correct view (page).
  • Create a new view (page).
  • Drop the new image into VizWik's white space (and watch it appear in Media -> Images).  
  • Then, drag the image across VizWik (from Media -> Images) and into the Primary View.
  • Create a new script and name it something useful
    (like "Go to Email View")
  • In the new script, add a "Go To View" block of code.
  • Drag the symbol image of the new view into the new script. Draw a string from "Email View" to "Go To View".
  • Drag the symbol image of the new script ("Go to Email View") onto the actual envelope image in the view.
  • Your image is now a button!  Test it (but remember to refresh the phone simulator first!)


And sorry, at the end of this video, I say that I'll be back in a moment.  That was a "typo", as it was the last video of this series.  But there are more videos for VizWik here!
Next: VizWik - Business Card