Confirmed users
5
edits
Webmaker/Teach/WebmakingResources: Difference between revisions
→Useful Slides: linked to uploaded presentation file
mNo edit summary |
(→Useful Slides: linked to uploaded presentation file) |
||
| (42 intermediate revisions by 7 users not shown) | |||
| Line 1: | Line 1: | ||
==Getting Started== | ==Getting Started with Webmaking== | ||
Get to know Mozilla’s Webmaking Tools!<br> | Get to know Mozilla’s Webmaking Tools!<br> | ||
| Line 11: | Line 11: | ||
Students become content creators by enhancing, remixing and sharing web videos.<br> | Students become content creators by enhancing, remixing and sharing web videos.<br> | ||
==Hacktivity Kits for | ==Hacktivity Kits for Mozilla Webmaker Tools== | ||
Each 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.<br> | 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.<br> | ||
[http://hivenyc.org/kits.html <b>Take me to the | If you're new to teaching the web, this is a great place to start. | ||
< | [http://hivenyc.org/kits.html <b>Take me to the HACTIVITY KITS!</b>] | ||
===Contributed Hacktivity Kits=== | |||
[https://thimble.webmaker.org/p/f8c8/ Open Data Day - Memories of our City] | |||
====Contributed Ice Breaker==== | |||
[https://docs.google.com/document/d/1onX-qvX2KtsVVCVB6vhpS8r6bQqmvfAECvhOKnw1Ees/edit?usp=sharing Webmaker Bingo] | |||
===Hacktivity Kits Remixed=== | |||
:*[https://docs.google.com/file/d/0B0-nCNqp_Aheb0ZrSHJlaU5qMVk/edit?usp=sharing Remixing the Web: TASCasaurus After-School Curriculum] – A remix of the Hacktivity Kit by The After-School Corporation (TASC) and Hive NYC Learning Network. | |||
<center>''Have you used the Hactivity Kits to teach the web? Did you remix the activities to better meet your needs? Please post them here!''</center> | |||
<br>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 [https://lists.mozilla.org/listinfo/webmaker the Webmaker List!] | |||
==Creating a Web Literate Planet== | |||
Here are some primers to help you understand and create context for teaching the web. | |||
*[http://commonspace.wordpress.com/2012/09/06/a-reading-list-for-webmakers/ A Reading List for Webmakers] by Mark Surman, Executive Director of Mozilla | |||
*[http://mzl.la/T4A12 Openness and the Web] –Slidedeck on the ethos of open web and how it relates to webmaking. | |||
==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. | |||
[http://www.zythepsary.com/education/making-is-learning-chad-sansing/ 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. | |||
[http://explorecreateshare.org/2013/03/18/brooklyn-explorers-follow-up-training-pase/ Creating Dynamic Web Content] | |||
Brooklyn Explorers Program, a partnership between Hive NYC Learning Network and Partnership for After School Education in New York City. | |||
[http://www2.gov.bc.ca/assets/gov/topic/B125BBFA3197257535F97E315A83E564/uploads/how_to_hackathon_with_youth.pdf How to run a Hackathon for Youth] Hackathon in a Box from Open Data BC and the Ministry of Education | |||
==Webmaker Projects== | ==Webmaker Projects== | ||
*[http://webmaker.org/projects 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. | *[http://webmaker.org/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. | ||
* [http://maker.mozillapopcorn.org/storycamp/ Popcorn Storycamp] Popcorn Story Camp starts with a [http://maker.mozillapopcorn.org/storycamp/cinema.html 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. | * [http://maker.mozillapopcorn.org/storycamp/ Popcorn Storycamp] Popcorn Story Camp starts with a [http://maker.mozillapopcorn.org/storycamp/cinema.html 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. | ||
* [http://hivenyc.org/storycamp StoryCamp 2.0] Popcorn StoryCamp gets a facelift. This Hacktivity Kit version has 5 modules that can be done independently or in any order! | * [http://hivenyc.org/storycamp StoryCamp 2.0] Popcorn StoryCamp gets a facelift. This Hacktivity Kit version has 5 modules that can be done independently or in any order! | ||
* [[Webmaker/Teach/LiteracyResources/Introduction_to_Collaborative_Webmaking | 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. | * [[Webmaker/Teach/LiteracyResources/Introduction_to_Collaborative_Webmaking | 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. | ||
* [https://docs.google.com/a/zythepsary.com/document/d/1MfTj6Ntq6elmomCcJJXWuaXJCoVtqAnEi9RsgCNHHLE/edit Beginner HTML & Javascript for Teachers] and [https://docs.google.com/a/zythepsary.com/document/d/1hmf2WuoifOz8NsUgamzLYNWa--uVkmF5w-5bFy0RGuU/edit Variation of Beginner HTML & Javascript for Teachers] These sample #openschools projects "Teacher Affirmations" and "Album Cover Classroom Feedback" from [http://twitter.com/chadsansing Chad Sansing] explains basic HTML and JS to help educators get coding. | * [https://docs.google.com/a/zythepsary.com/document/d/1MfTj6Ntq6elmomCcJJXWuaXJCoVtqAnEi9RsgCNHHLE/edit Beginner HTML & Javascript for Teachers] and [https://docs.google.com/a/zythepsary.com/document/d/1hmf2WuoifOz8NsUgamzLYNWa--uVkmF5w-5bFy0RGuU/edit Variation of Beginner HTML & Javascript for Teachers] These sample #openschools projects "Teacher Affirmations" and "Album Cover Classroom Feedback" from [http://twitter.com/chadsansing Chad Sansing] explains basic HTML and JS to help educators get coding. | ||
== Holding Webmaker Events == | |||
* [http://webmaker.org/events/guides Guide to hosting Webmaker events] | |||
===Contributed Documents=== | |||
*[https://docs.google.com/document/d/1OMpdps0DpnXidcaRn4Uj4Er1vVwmDdyyQkzqq_W19y8/edit?usp=sharing Registration Form (including photo-permission)] | |||
*[https://docs.google.com/presentation/d/1Op1ryZFzNXHhOZzdegLWgToEcamQZ0f0A4YenbszUrM/edit?usp=sharing Webmaker Certificate] | |||
===Useful Slides=== | |||
Slides for introduce Webmaker, feel free to remix and don't forget to list back here! | |||
* [http://www.slideshare.net/ankitgadgil/webmaker-init Webmaker init()] by by [https://reps.mozilla.org/u/ankitgadgil/ Ankit Gadgil] | |||
* [http://www.slideshare.net/irvinfly/201304-icos-webmaker Mozilla Webmaker] by [https://reps.mozilla.org/u/irvin/ Irvin]. [https://www.dropbox.com/s/nm3ccz798jn9vtm/201304%20ICOS-Webmaker.key keynote file] release under cc:by-nc-sa. ([https://groups.google.com/d/msg/mozilla.webmaker/cHWIVgV7RBM/bwybzOomqJ0J readmore]) | |||
* [http://www.slideshare.net/sayak_sarkar/webmaker Introduction to Webmaker] at [https://reps.mozilla.org/e/mozilla-campus-konnect/ Mozilla Transposing Ideas] by [https://reps.mozilla.org/u/sayak_bugsmith/ Sayak Sarkar] (Released under cc:by-nc-sa) | |||
* [http://www.slideshare.net/umeshagarwal92102/kick-start-html5 KickStart@HTML5] by [https://mozillians.org/en-US/u/umesh/ Umesh Agarwal] | |||
* [http://www.slideshare.net/umeshagarwal92102/kick-start-css KickStart@CSS] by [https://mozillians.org/en-US/u/umesh/ Umesh Agarwal] | |||
* [http://www.slideshare.net/clem01/mozilla-tw-c01webmaker20130826-update An Introduction to Mozilla Webmaker (with X-Ray Goggles update) 2013-08-26] by [https://mozillians.org/en-US/u/Clem/ Clem] (Released under cc:by-sa) [[File:MozillaTW C01 Webmaker 20130826 updated.odp|thumbnail|WebmakingResources#Useful_Slides: An Introduction to Webmaker]] | |||
==Archives of Mozilla Webmaking Resources for Educators== | ==Archives of Mozilla Webmaking Resources for Educators== | ||
Here you’ll find previous iterations of Mozilla webmaking resources for educators | Here you’ll find previous iterations of Mozilla webmaking resources for educators. | ||
===Hackasaurus=== | ===Hackasaurus=== | ||
| Line 44: | Line 93: | ||
* [http://www.hackasaurus.org/en-US/educators/ 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. | * [http://www.hackasaurus.org/en-US/educators/ 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. | ||
* [http://www.youpd.org/hackasaurus 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==== | ====Prototypes of Hackasaurus Learning Activities==== | ||
| Line 49: | Line 100: | ||
* [http://toolness.github.com/hackasaurus-parable/ Browser Basics Copy/Paste] A prototype for a series of mini challenges. [https://github.com/toolness/hackasaurus-parable Read about the vision here.] | * [http://toolness.github.com/hackasaurus-parable/ Browser Basics Copy/Paste] A prototype for a series of mini challenges. [https://github.com/toolness/hackasaurus-parable Read about the vision here.] | ||
* [http://lovebomb.me Lovebomb] A fun prototype that helps a learner create their own ECard. | * [http://lovebomb.me 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=== | |||
*[https://docs.google.com/file/d/0B0ddAThp8tOXVXRlZmk3UGQ5WGc/edit?usp=sharing Robots, Ninjas, Kittens] | |||
*[https://docs.google.com/file/d/0B0ddAThp8tOXWlJrcENZXzQwdDQ/edit?usp=sharing Paper Events & Speech Bubbles] | |||
*[https://docs.google.com/file/d/0B0ddAThp8tOXNXVlbXpzakZvZWc/edit?usp=sharing Sample Paper Popcorn Template (Robots)] | |||
= | ====WikiHow Guides on Popcorn==== | ||
===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 [http://forums.wikihow.com/ WikiHow community]. | An excellent set of step by step guides to using the newest version of Popcorn. Contributed by the truly awesome folks in the [http://forums.wikihow.com/ WikiHow community]. | ||
* [http://www.wikihow.com/Use-Mozilla%27s-Popcorn-Maker Main article] | * [http://www.wikihow.com/Use-Mozilla%27s-Popcorn-Maker Main article] | ||
| Line 71: | Line 123: | ||
* [http://www.wikihow.com/Use-Playback-Control-Events-in-a-Mozilla-Popcorn-Maker-Project Use Playback Control Events] | * [http://www.wikihow.com/Use-Playback-Control-Events-in-a-Mozilla-Popcorn-Maker-Project Use Playback Control Events] | ||
===Documentation and using Popcorn.js=== | ====Documentation and using Popcorn.js==== | ||
* [http://mozillapopcorn.org/maker/lib/userManual.html Popcorn Maker manual] | * [http://mozillapopcorn.org/maker/lib/userManual.html Popcorn Maker manual] | ||
* [http://popcornjs.org/popcorn-docs/ Popcorn.js API documentation] | * [http://popcornjs.org/popcorn-docs/ Popcorn.js API documentation] | ||
| Line 80: | Line 132: | ||
* [http://popcornjs.org/googlemaps 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. | * [http://popcornjs.org/googlemaps 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 | ====Popcorn in Action==== | ||
Programs, workshops and events that used Popcorn Maker to teach webmaking. | |||
* [https://wiki.mozilla.org/Events/Hack_Jam/Popcorn 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. [https://wiki.mozilla.org/images/0/01/Popcorn_hackjam.pdf Download the PDF] | * [https://wiki.mozilla.org/Events/Hack_Jam/Popcorn 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. [https://wiki.mozilla.org/images/0/01/Popcorn_hackjam.pdf Download the PDF] | ||
* [http://tiptoes.ca/?p=568 Running a Webmaker Event (Popcorn)] An epic blogpost from educator/ReMo/Mozillian Emma Irwin that details her agenda and experience running a popcorn event. | * [http://tiptoes.ca/?p=568 Running a Webmaker Event (Popcorn)] An epic blogpost from educator/ReMo/Mozillian Emma Irwin that details her agenda and experience running a popcorn event. | ||
* [https://etherpad.mozilla.org/Festival2011-3Dfiles 3D design challenges from the 2011 Mozilla Festival] | * [https://etherpad.mozilla.org/Festival2011-3Dfiles 3D design challenges from the 2011 Mozilla Festival] | ||
* [http://toolness.github.com/instapoppin/ Instapoppin] Making Popcorn With Just HTML and CSS | * [http://toolness.github.com/instapoppin/ Instapoppin] Making Popcorn With Just HTML and CSS | ||
* [http://blog.jenniferproctor.com/popcorn-maker-for-film-studies/ Popcorn Maker for Film Studies] | * [http://blog.jenniferproctor.com/popcorn-maker-for-film-studies/ Popcorn Maker for Film Studies] | ||
==Open News== | ===Open News=== | ||
* [http://archive.p2pu.org/general/open-journalism-open-web 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. | * [http://archive.p2pu.org/general/open-journalism-open-web 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. | ||
* [https://www.drumbeat.org/en-US/challenges/unlocking-video/ Unlocking Video] How can new web video tools transform news storytelling? This is an introduction and idea bank for video on the web. | * [https://www.drumbeat.org/en-US/challenges/unlocking-video/ Unlocking Video] How can new web video tools transform news storytelling? This is an introduction and idea bank for video on the web. | ||
| Line 98: | Line 150: | ||
* [http://bit.ly/wkQIC4 the Data Journalism Handbook] | * [http://bit.ly/wkQIC4 the Data Journalism Handbook] | ||
* http://lernanta.p2pu.org/en/groups/knight-mozilla-learning-lab/ | * http://lernanta.p2pu.org/en/groups/knight-mozilla-learning-lab/ | ||
* [http://t.co/yuzBE3qp Openness on the Web] (Slidedeck from @cyberdees on FirefoxOS) | |||
== | ==Other Resources on Learning to Code== | ||
* | * https://developer.mozilla.org/en-US/docs/Web/Tutorials | ||
* http://scratch.mit.edu | |||
* | |||
* http://codeacademy.com (ToS §3) | * http://codeacademy.com (ToS §3) | ||
* http://khanacademy.com (by-nc-sa) | * http://khanacademy.com (by-nc-sa) | ||
* http://www.p2pu.org | * http://www.p2pu.org | ||
* http://www.youpd.org/ | * http://www.youpd.org/ | ||
* http://www.html.net/ | * 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://interact.webstandards.org/curriculum/ (open content, very comprehensive, hard to implement directly unless doing a full college or university course) | ||
* http://drtechniko.com/2012/04/21/teaching-the-how-to-train-your-robot-class/ | * 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.) | * https://sites.google.com/site/cssi2012content (multi-week class, including 1 day JS, 2 days HTML/CSS, etc.) | ||
* http://software-carpentry.org/ | |||