Webmaker/Teach/WebmakingResources

From MozillaWiki
Jump to: navigation, search

Getting Started with Webmaking

Get to know Mozilla’s Webmaking Tools!

X-Ray Goggles
X-Ray Goggles provides a behind-the-scenes look at webpages that allow students to learn to read, write and think in the language of the web.

Thimble
Through the creation of webpages, Thimble gives your students the opportunity to practice and apply their web language skills to make the web.

Popcorn Maker
Students become content creators by enhancing, remixing and sharing web videos.

Hacktivity Kits for Mozilla Webmaker Tools

Each Mozilla-designed Hactivity Kit includes learning goals and outcomes, lesson plans, activities and projects, and assessment. The modular lesson plans and activities allow educators to use the kit in its entirety or customize it for their students.

If you're new to teaching the web, this is a great place to start. Take me to the HACTIVITY KITS!

Contributed Hacktivity Kits

Open Data Day - Memories of our City

Contributed Ice Breaker

Webmaker Bingo

Hacktivity Kits Remixed

Have you used the Hactivity Kits to teach the web? Did you remix the activities to better meet your needs? Please post them here!


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!

Creating a Web Literate Planet

Here are some primers to help you understand and create context for teaching the web.


Webmaking with Youth & Students

Here are examples of how Mozilla Webmaking Tools are being adopted and adapted by educators for in-school and out-of-school time learning.

How “making” can help students’ writing skills Video interview on project-based Learning with Chad Sansing from the Community Public Charter School in Charlottesville, Virginia.

Creating Dynamic Web Content Brooklyn Explorers Program, a partnership between Hive NYC Learning Network and Partnership for After School Education in New York City.

How to run a Hackathon for Youth Hackathon in a Box from Open Data BC and the Ministry of Education

Webmaker Projects

  • Mozilla Webmaker Projects provides a wide selection of webmaking projects for webmakers of all levels to create something amazing. Each project includes an online step-by-step guide that allows students to work independently as an individual or in groups.
  • 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.
  • StoryCamp 2.0 Popcorn StoryCamp gets a facelift. This Hacktivity Kit version has 5 modules that can be done independently or in any order!
  • 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.

Holding Webmaker Events

Contributed Documents

Useful Slides

Slides for introduce Webmaker, feel free to remix and don't forget to list back here!

Archives of Mozilla Webmaking Resources for Educators

Here you’ll find previous iterations of Mozilla webmaking resources for educators.

Hackasaurus

What is Hackasaurus?

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

Hackasaurus in Action

Programs, workshops and events that used Hackasaurus to teach Mozilla webmaking tools.

  • 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.
  • 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.
  • Jam Resources This wiki page links out to a variety of cheatsheets and resources and contains tips and tricks on running hackjams.
  • 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.
  • 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.

Prototypes of Hackasaurus Learning Activities

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


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.

Paper Popcorn Resources

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.

Documentation and using Popcorn.js

Popcorn in Action

Programs, workshops and events that used Popcorn Maker to teach webmaking.

Open News

Other Resources on Learning to Code

Retrieved from "https://wiki.mozilla.org/index.php?title=Webmaker/Teach/WebmakingResources&oldid=1062335"