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

M E M E - Create an editing tool to make memes with graphics and text

Make a tool panel to handle all the interface needed to create a meme!
Allow the user to upload pictures from their desktop with click or drag and drop
Let the user drag, resize and rotate the image with handy components
Add text and backing rectangles and adjust dimensions and position
Provide interface to change layers of the items and save the final meme!



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

Create a draggable collapsible panel
Load images from the computer or device
Make Dials and Sliders to rotate and scale
Use a TextArea to receive input text
Use Steppers to enter dimensions
Sort items by layers and remove items
Save a final image to a new Browser window


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

1. This is a mid level workshops so at least one of the first three workshops is recommended.
These include Canvas, Coding and Game - Canvas will help with the ZIM environment

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 "What IZ" and "Capture" tutorials.
They can take a look through 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 pretty loaded workshop - could be done over two workshops
So you may not get all of it done but techniques start to repeat
after the first content area or two are created


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.
Distribute the final version of the Meme Maker and have fun!

All the best,


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