
ZIM WORKSHOPS - http://zimjs.com/learn/

Three Hour CORE Workshop


INTRODUCTION ---------------------------------

The goal of each workshop is to teach the core elements of the topic.
Each workshop contains:

0. This instruction.txt page for the workshop.
1. A workshop_topic.zip file to give to the students with all they need for the workshop.
2. A teacher folder with sample code (topic1.html, topic2.html, etc.) to build with students.
3. A more finished project (topic_final.html) that you can give learners at the end.
4. An assets folder for the projects - also in the student ZIP.
5. A resources folder with docs, libraries and zim templates - also in student ZIP.
6. An index.html page that points to teacher/steps.html - also in student ZIP.


TOPIC ----------------------------------------

C A N V A S - Create on the HTML Canvas - learn the basics of Interactive Media.

Add shapes, images and text to a stage and set properties
like position, rotation, scale and alpha.  Nest objects in Containers.
Drag content and apply mouse interactivity.
Use components like buttons and sliders to control
a small application including sound and animation.


TECHNIQUES --------------------------------------

Canvas Template with Stage
Shapes and Registration Points
Properties like x, y, rotation, scale and alpha
Containers and Nesting
Dragging and Dropping
Events and Targets
Images and Sounds
Components like Buttons and Sliders


PREREQUISITES AND REQUIREMENTS ---------------

1. This is one of the basic workshops (along with CODING) so there are no prerequisites.

2. A computer with a browser and a text editor (syntax coloring helpful - Atom is good).
Internet is not required if the resources folder can be distributed by thumb drive, etc.

3. A projector and screen is probably necessary to show code if there are multiple students.
Make sure the code is large to easily see periods, commas, colons, semi-colons, etc.
And when students arrive make sure their code is big enough for them to see.  CTRL + -


PREPARATION -------------------------------------

Refer the students to the Basics "What IZ" and "Capture" tutorials.
They can take a look through the Basics ZIM Bits as well to help prepare.

Post the index.html, the teacher/steps.html and the workshop_topic.zip.
The index page redirects to the steps page which has a link to the zip.
Test the links.  You can give the link to the index to the students.
Or prepare a Thumb Drive with the student ZIP to distribute.

In the teacher/topic folder are numbered project files representing stages of building.
There are comments in the code to say what and why we are doing things.
Read over the comments and practice building the app at least once before teaching.
Print the source and use a highlighter to help you keep track while teaching.

**** This will be a fairly tight workshop for three hours.
Try to get coding as soon as you can and keep setup and intro time to a minimum
Do NOT go quickly over STEPS 2-6.
Estimated times are (5-10 minute breaks included):
70 minutes canvas1.html
60 minutes canvas2.html
50 minutes canvas3.html


INSTRUCTIONS ------------------------------------

Introduce yourself and have the students briefly meet one another.

Introduce the workshop and topic.  Introduce ZIM.

ZIM is a JavaScript framework to make interactive media on the HTML canvas.
ZIM is powered by CreateJS which is a library to make coding on the canvas easier.

Show learners the steps page with a link to their workshop ZIP file.
Or distribute the zip with a thumb drive.

Follow the steps to build.

When the workshop is done, show learners the resources links.
You are also welcome to show / distribute the canvas_final.html app.

All the best,


Inventor Dan Zen
http://danzen.com - Museum of Interactive Works
