
ZIM WORKSHOPS - http://zimjs.com/code/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. A resources folder with docs, libraries and zim templates - also in student ZIP.
5. An index.html page that points to teacher/steps.html - also in student ZIP.


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

C O D I N G - Learn the basics of coding with JavaScript and the Canvas.

JavaScript is the popular and powerful programming language of the Web and Apps.
We will learn the basics of coding such as variables, conditionals, functions,
random numbers, loops, arrays, objects, events and more as time permits.
These techniques are common across many languages giving you transferable skills.


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

Script Tags in HTML
Programming Syntax
Expressions, Operators and Statements
Variables and Concatenation
Objects, Properties and Methods
Random Numbers
Conditionals and Loops
Arrays and Object Literals
Classes and Parameters
Functions and Scope
Timeouts and Intervals
Events (mouse and keys)
Tickers, Animation and HitTests


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

1. This workshop is one of the basic workshops along with the CANVAS workshop.
So there are no prerequisites.  Coding in any language will be helpful but not required.

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 -------------------------------------

Let potential students know about the CANVAS workshops (if available).
Refer the students to the Basics "What IZ" and "Capture" tutorials.

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
Estimated times are (5-10 minute breaks included):
70 minutes coding1.html
60 minutes coding2.html
50 minutes coding3.html

Try and get at least to Functions and Scope.
You might want to skip Timeouts and Intervals to make sure you get to Events
and then Tickers and HitTests are optional.
Perhaps warn the students that you may not get through everything and that is expected.


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

Introduce yourself and have the students briefly meet one another.

Introduce the workshop and topic.

Much of what we are coding here is common across multiple programming languages.

In a few cases we use ZIM - to easily log to the console and get random ranges.
In the final part of the lesson we use ZIM to show objects on the canvas.
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 coding_final.html app.

All the best,


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