Webmaker/Teach/WebmakingResources

Hacktivity Kits

The Hacktivity Kits for Webmaking are in prototype form. We would like to know how you work with them. Please let us know on the Discussion page! Or send your feedback to the Webmaker List!

Take me to the Hacktivity Kits!

Full Scale Webmaker Projects

• Webmaker Projects Practical starter projects, how-tos and recipes, designed to help people at all levels make something amazing. From tweaking your blog template to building apps that change the world.
• Popcorn Storycamp Popcorn Story Camp starts with a six chapter toolkit that contains videos, projects, templates, visuals and readings that will walk you through the process of creating a web native film. By the end you'll be ready to start hacking your own projects.
• Introduction to Collaborative Webmaking Web Literacy is quickly becoming the fourth literacy, yet it’s often not integrated into the classroom. This sample curriculum was created to help teachers integrate Webmaking into their standards based curriculum through a project based learning method that uses the Web as it’s platform.
• Beginner HTML & Javascript for Teachers and Variation of Beginner HTML & Javascript for Teachers These sample #openschools projects "Teacher Affirmations" and "Album Cover Classroom Feedback" from Chad Sansing explains basic HTML and JS to help educators get coding.

Hive

Hive networks create opportunities for youth to explore their intellectual and skill-based interests using digital media and other technologies.

• Digital Day Camp Curriculum Curriculum based on the Hive-funded program at Eyebeam. Read about the program

Hackasaurus

Hackasaurus is an open source toolkit that helps students see and begin to play with the building blocks of the web.

Hackasaurus Event Guides and Agendas

• MOUSE Workshops This series of workshops will train youth to become Mozilla Youth Ambassadors (still a working title). That means that youth will learn Hackasaurus, HTML, CSS and facilitation in order to run hacking events and/or clubs.
• P2PU Challenge Organize a Hackasaurus Hackjam In this challenge, you'll learn how to use the Hackasaurus tools, dabble with the basics of HTML and CSS, and meet new people. Then, you'll design and implement your own unique Hackasaurus Jam to share webmaking skills with others.
• Professional Development with Hackasaurus Created by Alicia Bradley, Helen Lee and Pauline Lee from the Teachers College at Columbia University this professional development curriculum uses a learner-centered approach and challenge-based learning.
• Original Hacktivity Kit It's so good we're linking it twice.
• Jam Resources This wiki page links out to a variety of cheatsheets and resources and contains tips and tricks on running hackjams.

Prototypes

• Browser Basics Navigation We noticed at many hack jams, especially those with younger kids, that many folks are not very proficient at navigating the Web. Further, there are some "computer basics", such as being able to use copy/paste habitually, that greatly limit their ability to create Web content, at least given current tools. While we don't have any materials that explicitly teach this stuff--it can be particularly hard because this varies between OS and browser vendor--we do have this Navigator Badge challenge.
• Browser Basics Copy/Paste A prototype for a series of mini challenges. Read about the vision here.
• Lovebomb A fun prototype that helps a learner create their own ECard.

Other Stuff

• New Visions Challenge In addition to becoming empowered to become web producers and remixers, Hacksaurus can be integrated into curriculum as a way of understanding the construction of public knowledge and perceptions about issues (e.g. science, current events, etc). This Challenge will enable you to use Hackasaurus and build a lesson integrating Hackasaurus for your students.
• P2PU Challenge Get to Know the X-Ray Goggles The XRay goggles make it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, all within your browser.
• Hackasaurus Webmaker Skills A wiki page that contains information on some of the different skills Hackasaurus helps develop.
• Hackasaurus Resources including the original Hacktivity Kit, an introductory presentation on hacking, the Web and Hackasaurus, an IT Checklist for running a Hackasaurus Jam, and the XRay Goggles cheatsheet.

Popcorn

Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.

WikiHow Guides on Popcorn

An excellent set of step by step guides to using the newest version of Popcorn. Contributed by the truly awesome folks in the WikiHow community.

• Main article
• Create a Persona Account (Necessary to save)
• Log in into Popcorn
• Add Text Events
• Add Image Events
• Add Google Maps
• Add Twitter Events
• Add Wikipedia Events
• Add Popup Events
• Use Playback Control Events

Documentation and using Popcorn.js

• Popcorn Maker manual
• Popcorn.js API documentation
• Popcorn.js intros
• Popcorn JS 101 This example shows how to create a basic popcorn event. The results of this code will be rendered at the end of the demonstration.
• Popcorn JS with YouTube This example shows how to create a basic popcorn event, using Youtube as the conductor.
• Popcorn JS with Vimeo This example shows how to create a basic popcorn event, using Vimeo as the conductor.
• Popcorn JS with Google Maps This example shows how to manipulate a map with popcorn. The results of the code are rendered at the end of the demonstration.

Popcorn Event Guides and Agendas

• Popcorn Hackjam A Mozilla Hack Jam for Video Makers is a two-day event that teams up video makers with web developers. Interactive video projects are built from concept to running code over the course of the event, using open tools and collaborative design. Download the PDF
• Running a Webmaker Event (Popcorn) An epic blogpost from educator/ReMo/Mozillian Emma Irwin that details her agenda and experience running a popcorn event.

Other Stuff

• Popcorn MacBeth A popcorn project that helps learners understand MacBeth in plain English.
• 3D design challenges from the 2011 Mozilla Festival
• Instapoppin Making Popcorn With Just HTML and CSS

Open News

• Open Journalism and the Open Web An archived, six-week online curriculum that will benefit both "hacks" and hackers (that's journalists & programmers, in plain English). Each week the course focused on a different topic, and each week the participants were joined by a different subject-matter expert (or two) from the field of news innovation.
• Unlocking Video How can new web video tools transform news storytelling? This is an introduction and idea bank for video on the web.
• Beyond Comment Threads How do we enable more coherent, elevated discussion on the web? How can news organizations improve the signal-to-noise ratio in public news commentary? This is an introduction and idea bank for comments on the web.
• Open Web's Killer App What would you build on the web that actually makes news better for the people who create and read it? How would you involve the public in the news making, editing or sharing process? This is an introduction and idea bank for journalism and innovation on the web.
• Open News FAQs
• Background Reading for Open News
• the Data Journalism Handbook
• http://lernanta.p2pu.org/en/groups/knight-mozilla-learning-lab/

Hackable Games

• Paper Prototype Socially Responsive Games with Verbs This workshop is about hacking the rules of existing videogames in response to topical issues, and prototyping new games that are vessels of alternative values and messages.

Software Carpentry

Our mission is to help scientists be more productive by teaching them basic computing skills. Our approach combines short, intensive workshops with self-paced online instruction. http://software-carpentry.org/

Teaching Environments

• Scratch: Intro to coding; drag-and-drop interface for kids
  • Main page: http://scratch.mit.edu/
  • Discussion board for teachers: http://scratched.media.mit.edu/discussions
  • Getting started guide: http://info.scratch.mit.edu/sites/infoscratch.media.mit.edu/docs/ScratchGettingStartedv14.pdf

Holding Webmaker Events

• http://webmaker.org/events/guides

Other

Slide Decks for Teaching Openness

Slide decks in this section are not necessarily *just* for teaching openness, but they have elements within them that cover certain aspects of the Open Movement and can be hacked to become relevant to your own particular use case.

• http://t.co/yuzBE3qp (Slidedeck from @cyberdees on FirefoxOS)

Interactive Online Schools

• http://codeacademy.com (ToS §3)
• http://khanacademy.com (by-nc-sa)
• http://www.p2pu.org
• http://www.youpd.org/

Tutorials / Lessons

• http://www.html.net/
• http://interact.webstandards.org/curriculum/ (open content, very comprehensive, hard to implement directly unless doing a full college or university course)
• http://www.instructables.com/
• http://makeprojects.com
• http://makezine.com
• http://hacknmod.com/
• http://drtechniko.com/2012/04/21/teaching-the-how-to-train-your-robot-class/
• https://sites.google.com/site/cssi2012content (multi-week class, including 1 day JS, 2 days HTML/CSS, etc.)