StoryCamp Hacktivity Kits

Contents

This page lists the contents and learning objectives of all the StoryCamp Hacktivity Kits. StoryCamp aims to help inspired community leaders to pick up skills and empower local youth to become online storytellers. We believe in the world wide web as a force for good and want to spread web literacies across the map. We put together a series of hacktivity kits that will help you run awesome group events where everyone uses the web to make cool things.

Introductions

Big Picture

Participants will understand:
- Procedural storytelling refers to a way of designing stories so they’re different every time.
- The open structure of the Web allows you to create procedural stories.
- Information architecture is a system of organization that takes into account both how you present information and how a user accesses that information.
- SVT (Story, Vision, Tech) is a solid model for creating a web native film. Technology can serve as inspiration, but never substitute for a story.
- Using data allows you to change the context of a story.
- Remixing is a form of derivative artwork.
- Media has influence over culture and society, and cultures and societies have influence over shaping media.
- the Web is made out of building blocks that they can rearrange to create new things through an iterative process.
- HTML is a language used to tell computers how to build webpages so that humans can consume them
- CSS means cascading style sheets
- Parts of a webpage include HTML, CSS, graphic assets and text content
- The combination of an opening tag and its corresponding closing tag and the content in between is called an element
- It is important to write code following standards so that it is accessible to different kinds of users
- There are resources on the web for webmaking
- What information is public on the web
- How to verify sources on the web
Learners will be able to :
- Use Popcorn Maker to pull dynamic data from the web into a video.
- Plan a How to using paper prototyping.
- Collaborate and work together to share ideas and iterate projects.
- Recontextualize a story by adding data to it.
- Use keyboard shortcuts (i.e. for copying and pasting)
- Right-click and scroll with the mouse
- Create storyboards and schematics.
- Create their own webpages using the following HTML tags : <html>, <head>, <title>, <body>, <h1>,<h2>, etc, <p>, <ul> & <ol>, <li>, <img>, <a>
- Style their webpages using the following CSS properties: positioning values, hex numbers/color, fonts/sizes, class, div
The Results:
- Learners will use Popcorn Maker to make a new project.
- Learners will use Thimble to make a new project.
The Event Type:
- Hack Jam
Tell the story:

Learners will make their own web native films and explore larger concepts on the topic. Learners will learn about media history, media use, web development, web mechanics and other media related topics while making interactive projects on and for the web. They will collaborate to make critical commentaries, peer reviews and use assets from the web to tell stories of their own.
Circle Up Module
- What does information architecture mean?
- What does "open web" mean?
- What is procedural storytelling?
- How did feedback help you iterate and improve your project?
- Why is it important to have open access to the Internet?
- Why is it important that the web is designed by many individuals?
- Why is it important for websites to invite participation?
- What is the web made out of?
- What does "open web" mean?
- How should you protect your data on the web?
- How does HTML & CSS allow you to be creative?
- How did feedback help you iterate and improve your project?

Hacktivities

Icebreaker
An icebreaker is an activity that gets the blood pumping, forms connections between learners, AND introduces a topic. There are thousands of different ways to introduce a topic and get learners interacting with each other. Choose one and hack it to fit with your specific learning objectives!
Diving In
A diving in activity is one that gives pointed instruction to participants on tools or procedures. An example of a diving in activity would be allowing the participants to get used to the interface of Thimble or Popcorn by having them make projects. Before learners can practically apply new skills, they need to be comfortable with the tools they'll be using and have a basic understanding of the skills they'll be sharpening.
Hands on Hacking
A Hands on Hacking activity is a practical activity that allows learners to delve deeper into the essential questions of your session. Go back to thinking of the results: what will your learners MAKE when they are done? Create a project that gives learners enough time to explore and tinker while working towards the completion of the activity.
Playtesting and Feedback

Learners share their projects.
Is the user:
- following the instructions?
- getting the joke?
- understanding the commentary?
Have learners form groups and take notes.

Start a discussion by having learners complete sentences.
- I thought you did a nice job with/of ___.
- You might want to improve ___.
- Your idea was fun/interesting because ___.
- What you made was ___ and it made me think/feel ____.
Let your learners review each other's work.

When they're finished with their reviews, ask them what next steps would be for each project. How can each project be iterated and improved upon?
Assessment
How did your learners do? Here is a helpful guide for assessing their work.

Additional Resources

This section collects the extra resources from all six of the StoryCamp Hacktivity Kits into one place.