├── .gitignore ├── .project ├── Archive ├── weblit1 │ ├── LearningObjectives.md │ ├── club-type-specific │ │ ├── session01-GLAM.md │ │ └── session01-community.md │ ├── extensions │ │ └── extension01-mechanics-and-search.md │ ├── session01-basics.md │ ├── session02-remixathon.md │ └── session03-search.md ├── weblit2 │ ├── LearningObjectives.md │ ├── club-type-specific │ │ └── session04-afterschool.md │ ├── extensions │ │ ├── extension02-css-tricks.md │ │ ├── extension03-intro-javascript.md │ │ └── extension04-scratch.md │ ├── session04-html.md │ ├── session05-css.md │ └── session06-remixjavascript.md └── weblit3 │ ├── Module03-Collaboration │ └── 03. Collaboration and Ideation.md │ ├── Module04-ProjectPlanning │ └── 04. Project planning.md │ └── Module05-PaperPrototyping │ └── 05. Paper prototyping and feedback.md ├── Experiments ├── StartHere │ ├── 1stmonthRC.html │ ├── advocate.html │ ├── coordinate.html │ ├── running-a-club.md │ ├── running-events.md │ ├── starting-a-club.md │ ├── starting-club-index.html │ ├── starting-club.html │ └── training-plan.html ├── Tabbed Remixes.html └── Tabbed Remixes_files │ ├── css │ ├── logo.png │ ├── modernizr.custom.04022.js │ ├── style.css │ └── webmaker-avatar-200x200.png ├── LICENSE.md ├── MobileWeb ├── create-webmaker-project.html ├── design-webmaker-project.html ├── facilitator-guide.html ├── glossary.html ├── learning-about-the-internet.html ├── publishing-and-sharing.html └── setting-up-your-phone.html ├── ProtectingYourData ├── AnonymizerAct.html ├── index.html ├── ip-tracer-worksheet.pdf ├── session01-ip.html ├── session01-password-collage.html ├── session02-lightbeam.html ├── session02-secure-passwords.html ├── session03-datatrail.html └── session03-privacycoach.html ├── QuackingJavascript ├── images │ ├── about_me_1.png │ ├── atthecontrols_octonauts_gup_800.jpg │ ├── blockly_800.png │ ├── boxes_variables_arrow.png │ ├── chef-man.jpg │ ├── chips_800.jpg │ ├── chips_800_sq.jpg │ ├── chocolate-chip-cookies_publicdomain.png │ ├── console_image_1.png │ ├── console_image_2.png │ ├── console_image_3.png │ ├── console_image_4.png │ ├── console_image_5.png │ ├── console_image_6.png │ ├── console_numbers_1.png │ ├── console_webmaker_2.png │ ├── console_webmaker_800.png │ ├── console_webmaker_800_2.png │ ├── cookie_clicker_1.png │ ├── cookie_clicker_2.png │ ├── cookie_clicker_3.png │ ├── creating_a_page.png │ ├── daddyorchips.jpg │ ├── daddyorchips.png │ ├── daddyorchips_3.gif │ ├── dance.gif │ ├── dora_the_explorer.jpg │ ├── dora_the_explorer_2.jpg │ ├── dora_the_explorer_square.jpg │ ├── for_loop_full.jpg │ ├── for_loop_sq.jpg │ ├── go_for_it_800.jpg │ ├── if_flow.png │ ├── katy-perry-super-bowl-sharks.jpg │ ├── rainy_decision_1.png │ ├── rubberduck_square.jpg │ ├── save_strawberry_full.png │ ├── save_strawberry_square.png │ ├── saveimageas.png │ ├── saveimageas_2.png │ ├── selection_bbc.jpg │ ├── swimming_pool_800.jpg │ ├── swimming_pool_ice_800.jpg │ ├── thermo.jpg │ ├── thimble_simple.png │ ├── thimble_simple_2.png │ └── tshirt_shop_800.jpg ├── index.html ├── js_loops.html ├── magic_numbers.html ├── selection.html ├── sequences.html ├── stylesheets │ ├── qprint.css │ └── qstyles.css └── whats_inna_name.html ├── README.md ├── WebLiteracyBasics-I ├── LearningObjectives.md ├── README.md ├── bn-IN │ └── index.html ├── index.html ├── legit-o-meter.html ├── pt-BR │ └── index.html ├── session01-kraken.html ├── session01-pingkong.html ├── session02-hackthenews.html ├── session02-puzzlebox.html ├── session03-chef.html ├── session03-storyofus.html ├── template.html ├── web-chef-example.html └── web-chef-recipe.html ├── about ├── Gruntfile.js ├── LICENSE ├── README.md ├── assets │ ├── css │ │ └── style.css │ ├── img │ │ ├── 2header.jpg │ │ ├── 3header.jpg │ │ ├── 4header.jpg │ │ ├── 5header.jpg │ │ ├── amy.jpg │ │ ├── andy.jpg │ │ ├── appmaker.png │ │ ├── favicon.ico │ │ ├── faye.jpg │ │ ├── header.jpg │ │ ├── model.jpg │ │ ├── popcornmaker.png │ │ ├── raj.jpg │ │ ├── tab.png │ │ ├── thimble.png │ │ ├── weblitmap-1.1.png │ │ ├── weblitmap-1.1.svg │ │ └── xraygoggles.png │ └── less │ │ └── style.less ├── bower.json ├── index.html ├── package.json └── thanks.html ├── assets └── webmaker-mobile-curriculum-handout.pdf ├── images ├── arrow-down.png ├── assets │ ├── advocate-tile.png │ ├── background-tiles.ai │ ├── background01.png │ ├── club-proposal-assets.ai │ ├── club-proposal-assets.png │ ├── collaborate-tile.png │ ├── coordinate-tile.png │ ├── deliberate-tile.png │ └── krakenheader.png ├── business.png ├── cafe.jpg ├── check-webmaker-project.jpg ├── checker.png ├── chef-in-action.jpg ├── chef-man.jpg ├── culture.png ├── datatrail-badge.jpg ├── design-webmaker-1.jpg ├── design-webmaker-2.jpg ├── designing-webmaker.jpg ├── explore-webmaker-discover.jpg ├── explore-webmaker.jpg ├── hackthenews-action.jpg ├── hackthenews.png ├── html-puzzleboxes.jpg ├── ip-tracer-01.jpg ├── ip-tracer-badge.jpg ├── kraken-action-01.jpg ├── kraken-action-02.jpg ├── kraken-action-03.png ├── kraken-finished-example.jpg ├── kraken-in-progress.jpg ├── legitometer-header.png ├── legitometer.png ├── lightbeam-clear.png ├── make-webmaker-project-1.jpg ├── newshack-example-2.png ├── newshack-example-animated.gif ├── newshack-example.png ├── octocat-small.png ├── phone.png ├── pingkong.png ├── plan-webmaker-project-1.jpg ├── privacycoach-badge.jpg ├── provide-webmaker-feedback.jpg ├── science.png ├── share-webmaker-projects.jpg ├── sketch-webmaker-project-1.jpg ├── square-kraken.png ├── square-search.png ├── story-of-us-01.jpg ├── story-of-us-02.jpg ├── story-of-us-03.jpg ├── story-of-us-04.jpg ├── story-of-us-05.jpg ├── trainingheader.png ├── web-chef-01.jpg ├── web-chef-02.jpg ├── web-chef-03.jpg ├── web-chef-04.jpg ├── web-chef-05.jpg └── web-chef-project.png ├── index.html ├── javascripts ├── jquery.js └── scale.fix.js ├── params.json ├── style.css └── stylesheets ├── print.css └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .settings 3 | .project 4 | .idea 5 | -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | webmaker curriculum 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Archive/weblit1/LearningObjectives.md: -------------------------------------------------------------------------------- 1 | ##Web Literacy Basics I 2 | In this module, learners begin to find out about the foundations of the web. Discovering what makes the web a unique place to find and gather information, they'll learn about how the web is constructed. 3 | 4 | ##Big Ideas 5 | The web is like lego, so you can remix it's building blocks to make your first web page. You can use technology to search for, organize and use resources to be expressive creatively. When using other people's media, you should attribute their contribution to your work, ideas or projects. 6 | 7 | #Tools 8 | * the Browser 9 | * [X-Ray Goggles](http://goggles.webmaker.org) 10 | 11 | ##Learning Objectives and Assessment 12 | 13 | By the end of this module, learners should be able to: 14 | 15 | * Install X-Ray Goggles as a bookmarklet 16 | * Search for an image and discover its URL for including in a remixed web page 17 | * Use X-Ray Goggles to modify text and images on specific web pages 18 | * Switch between browser tabs 19 | * Make use of keyboard shortcuts (i.e. for copying and pasting) 20 | * Use X-Ray Goggles to modify text and images on any web page 21 | * Attribute images, text and other assets used from other websites 22 | * Choose openly-licensed assets to include in a web page 23 | * Publish a remixed web page and make a note of its URL 24 | * Discover time-sensitive information using a range of search engines 25 | * Identifying openly-licensed images relating to a specific event 26 | * Assess the credibility of websites and their content by comparing information from a number of sources 27 | 28 | The following competencies of the [Web Literacy Map](https://webmaker.org/resources) are relevant to this module - along with the relevant 'maker' badges. 29 | 30 | Navigation badge 31 | Web Mechanics badge 32 | Search badge 33 | Credibility badge 34 | Remixing badge 35 | Open practices badge 36 | 37 | 38 | * **Navigation:** Using software tools to browse the web 39 | * **Web Mechanics:** Understanding the web ecosystem 40 | * **Search:** Locating information, people and resources via the web 41 | * **Credibility:** Critically evaluating information found on the web 42 | * **Remixing:** Modifying existing web resources to create something new 43 | * **Open Practices:** Distinguishing between open and closed licensing 44 | 45 | ##Basic Agendas 46 | 47 | [**Session 1: The Web is like Legos (45 mins)**](https://github.com/mozilla/webmaker-curriculum/blob/master/WebLiteracyBasics-I/session01-basics.md) 48 | 49 | [**Session 2: Remixathon (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/session02-remixathon.md) 50 | 51 | [**Session 3: Search and Store (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/session03-search.md) 52 | 53 | ##Extension Agendas 54 | 55 | [**Extension 1: Web Mechanics and Search Engines (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/extensions/extension01-mechanics-and-search.md) 56 | 57 | ##Club Type Specific Agendas 58 | 59 | [**Session 1: The Web is like legos (Mozilla Supporter)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/club-type-specific/session01-community.md) 60 | 61 | [**Session 1: The Web is like Legos (GLAM)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/club-type-specific/session01-GLAM.md) 62 | 63 | 64 | ----- -------------------------------------------------------------------------------- /Archive/weblit1/club-type-specific/session01-GLAM.md: -------------------------------------------------------------------------------- 1 | #Session 1: The Web is like Legos (GLAM) 2 | *This session helps learners understand that any webpage can be taken apart and reconstructed due to the open nature of the web.* 3 | 4 | ##Learning Objectives 5 | 6 | *Install X-Ray Goggles as a bookmarklet 7 | *Search for an image and discover its URL for including in a remixed web page 8 | *Use X-Ray Goggles to modify text and images on specific web pages 9 | *Switch between browser tabs 10 | *Make use of keyboard shortcuts (i.e. for copying and pasting) 11 | 12 | ##Agenda 13 | 14 | 1. (5 mins) [Introduction round](https://laura.makes.org/thimble/introductions-and-setup ) (create new activity like this branded Webmaker Club.) 15 | 16 | 2. (40 mins) [Design Challenge: Activating Culture](https://keyboardkat.makes.org/thimble/design-challenge-activate-culture) -------------------------------------------------------------------------------- /Archive/weblit1/club-type-specific/session01-community.md: -------------------------------------------------------------------------------- 1 | #Session 1: The Web is like legos (community club) 2 | *This session helps learners understand that any webpage can be taken apart and reconstructed due to the open nature of the web.* 3 | 4 | ##Learning Objectives 5 | 6 | *Install X-Ray Goggles as a bookmarklet 7 | *Search for an image and discover its URL for including in a remixed web page 8 | *Use X-Ray Goggles to modify text and images on specific web pages 9 | *Switch between browser tabs 10 | *Make use of keyboard shortcuts (i.e. for copying and pasting) 11 | 12 | #Agenda 13 | 14 | 1. (5 mins) [Introduction round](https://laura.makes.org/thimble/introductions-and-setup ) (create new activity like this branded Webmaker Club. Include “rules”) 15 | 16 | 2. (20 mins) [Your first hack](https://tbx.makes.org/thimble/your-first-hack) 17 | 18 | 3. (20 mins) [Your first hack part 2](https://tbx.makes.org/thimble/maker-party-your-first-hack-pt-2) -------------------------------------------------------------------------------- /Archive/weblit1/extensions/extension01-mechanics-and-search.md: -------------------------------------------------------------------------------- 1 | #Extension: Web Mechanics and Search Engines 2 | *This extension explores more of the basic web mechanics and the functionality of searching through a fun, hands-on game and a silly project.* 3 | 4 | ##Learning Objectives 5 | 6 | ##Agenda 7 | 1. (5 mins) Introduction round (always say hello first!) 8 | 9 | 2. (15 mins) [Web Mechanics speed dating](https://juliahivenyc.makes.org/thimble/MTgwOTQ0ODk2/web-mechanics-speed-dating) 10 | 11 | 3. (25 mins) [SEO Battle](https://katermouse.makes.org/thimble/MjUyOTAzNjgw/seo-battle) -------------------------------------------------------------------------------- /Archive/weblit1/session01-basics.md: -------------------------------------------------------------------------------- 1 | #Session 1: The Web is like Legos (45 mins) 2 | *This session helps learners understand that any webpage can be taken apart and reconstructed due to the open nature of the web.* 3 | 4 | ##Learning Objectives 5 | 6 | * Install X-Ray Goggles as a bookmarklet 7 | * Search for an image and discover its URL for including in a remixed web page 8 | * Use X-Ray Goggles to modify text and images on specific web pages 9 | * Switch between browser tabs 10 | * Make use of keyboard shortcuts (i.e. for copying and pasting) 11 | 12 | ##Agenda 13 | 14 | 1. (5 mins) [Introduction round](https://laura.makes.org/thimble/introductions-and-setup) (create new activity like this branded Webmaker Club.) 15 | 16 | 2. (20 mins) [How to Hack the Robot Dance](https://mozteach.makes.org/thimble/how-to-hack-the-robot-dance) 17 | 18 | 3. (20 mins) [Hack the Web with the Goggles](https://mozteach.makes.org/thimble/hack-the-web-with-the-goggles) -------------------------------------------------------------------------------- /Archive/weblit1/session02-remixathon.md: -------------------------------------------------------------------------------- 1 | #Session 2: Remixathon (45 mins) 2 | *This unit helps learners understand each of the basic building blocks of the web by having them rearrange a webpage.* 3 | 4 | ##Learning Objectives 5 | 6 | * Use X-Ray Goggles to modify text and images on any web page 7 | * Attribute images, text and other assets used from other websites 8 | * Choose openly-licensed assets to include in a web page 9 | * Publish a remixed web page and make a note of its URL 10 | 11 | ##Agenda 12 | 13 | 1. (5 mins) Introduction round (always say hello first!) 14 | 15 | 2. (40 mins) Remixathon: [Save the Open Web](https://mozteach.makes.org/thimble/remixathon-save-the-open-web) or [Holiday Hacking] (https://mozteach.makes.org/thimble/remixathon-holiday-hacking) -------------------------------------------------------------------------------- /Archive/weblit1/session03-search.md: -------------------------------------------------------------------------------- 1 | #Session 3: Search and Store (45 mins) 2 | *This session has learners practice searching and saving assets from the web, so that they can be more effective at finding media assets and reusing them.* 3 | 4 | ##Learning Objectives 5 | 6 | * Discover time-sensitive information using a range of search engines 7 | * Identifying openly-licensed images relating to a specific event 8 | * Assess the credibility of websites and their content by comparing information from a number of sources 9 | 10 | ##Agenda 11 | 12 | 1. (5 mins) Introduction round (always say hello first!) 13 | 14 | 2. (20 mins) [How do you find images?](https://cogdog.makes.org/thimble/LTE4OTY5Mzk1MjA=/image-finding-discussion-activity) 15 | 16 | 3. (20 mins) Learners surf the web, fill and organize a folder with stuff they like. Learners should keep track of website authors and owners for any assets they collect. -------------------------------------------------------------------------------- /Archive/weblit2/LearningObjectives.md: -------------------------------------------------------------------------------- 1 | #Web Literacy Basics II (3 sessions) 2 | 3 | This module uses pre-existing webpages to help learners use remixing to make something new. It teaches basic HTML/CSS while helping learners understand that the web was built for remixing. This module also helps learners put their ideas online by focusing on the basic technologies that make the Web run (HTML/CSS). 4 | 5 | If your club has done ideation or planning modules, you can use participants pre-existing content to help them build their ideas for the web. Otherwise, use the activities to help learners understand the basic concepts of composing for the web, HTML and CSS. 6 | 7 | ##Learning Objectives and Assessment 8 | 9 | By the end of this module, learners should be able to: 10 | 11 | * identify and use HTML tags 12 | * structure a web page 13 | * create something new on the Web using existing resources 14 | * use CSS tags to change the style and layout of a Web page 15 | * improve the accessibility of a Web page by modifying its color scheme and markup 16 | 17 | The following competencies of the [Web Literacy Map](https://webmaker.org/resources) are relevant to this module - along with the relevant 'maker' badges. 18 | Composing for the Web badge 19 | Design and Accessibility badge 20 | 21 | * **Composing for the web:** Creating and curating content for the web 22 | * **Design and Accessibility:** Creating universally effective communications through web resources 23 | 24 | **Assessing the learning** 25 | Learners should be able to identify and use HTML tags, structure a web page, create something new on the Web using existing resources, use CSS tags to change the style and layout of a Web page and improve the accessibility of a Web page by modifying its color scheme and markup. 26 | 27 | ##Basic Agendas 28 | 29 | [**Session 4: Remixing HTML (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/session04-html.md) 30 | 31 | [**Session 5: Remixing CSS (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/session05-css.md) 32 | 33 | [**Session 6: Remixing Javascript (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/session06-remixvideo.md) 34 | 35 | ##Extension Agendas 36 | 37 | [**Extension 2: Web Fonts and CSS Tricks (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/extensions/extension02-css-tricks.md) 38 | 39 | [**Extension 3: Remixing Javascript (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/extensions/extension03-remixing-javascript.md) 40 | 41 | [**Extension 4: Intro to Javascript (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/extensions/extension04-intro-javascript.md) 42 | 43 | [**Extension 5: Visual Programming with Scratch (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/extensions/extension05-scratch.md) 44 | 45 | ##Club Type Specific Agendas 46 | 47 | [**Session 4: Remixing HTML (After School)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics/club-type-specific/session04-afterschool.md) -------------------------------------------------------------------------------- /Archive/weblit2/club-type-specific/session04-afterschool.md: -------------------------------------------------------------------------------- 1 | **Session 4: Remixing HTML (After School Club)** *This session demystifies HTML.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (40 mins) Lights on Afterschool 6 |
-------------------------------------------------------------------------------- /Archive/weblit2/extensions/extension02-css-tricks.md: -------------------------------------------------------------------------------- 1 | **Extension: Web Fonts and CSS Tricks** *This extension shows learners how to use special fonts and design elements like drop shadows to improve the readability of their webpages.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (15 mins) CSS Webfonts and Text Shadows
  4. 6 |
  5. (25 mins) Six Word Memoir
  6. 7 |
-------------------------------------------------------------------------------- /Archive/weblit2/extensions/extension03-intro-javascript.md: -------------------------------------------------------------------------------- 1 | **Extension: First steps with Javascript** *This until introduces the syntax of Javascript.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (20 mins) First Steps with Javascript: Facilitator explains the basics of JS while participants make a button for their webpages
  4. 6 |
  5. (20 mins) Making Madlibs: Facilitator explains strings, arrays and buttons, then participants make their own Madlibs
  6. 7 |
-------------------------------------------------------------------------------- /Archive/weblit2/extensions/extension04-scratch.md: -------------------------------------------------------------------------------- 1 | **Extension: Visual Programming with Scratch** *This extension uses Scratch to teach remixing and computational thinking.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (10 mins) Scratch intro: Facilitator shows participants the basics of Scratch and explains how remixing Scratch code is a lot like remixing code on the web.
  4. 6 |
  5. (30 mins) Remixing in Scratch: Facilitator asks participants to tinker around with Scratch.
  6. 7 |
-------------------------------------------------------------------------------- /Archive/weblit2/session04-html.md: -------------------------------------------------------------------------------- 1 | **Session 4: Remixing HTML (45 mins)** *This session demystifies HTML.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (10 mins) Your first Webpage:
  4. 6 | 10 |
  5. (30 mins) Remixing a page: Once learners have successfully written a bit of HTML/CSS, the Facilitator asks them to remix the Internet Defense League starter make.
  6. 11 |
-------------------------------------------------------------------------------- /Archive/weblit2/session05-css.md: -------------------------------------------------------------------------------- 1 | **Session 5: Remixing CSS (45 mins)** *This session helps learners start to add style to their webpages.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (10 mins) Let’s write CSS. Facilitator explains CSS, including tag styles, ids and classes, while learners follow along writing on their first webpage.
  4. 6 |
  5. (30 mins) Stuck in the 90s:
  6. 7 |
-------------------------------------------------------------------------------- /Archive/weblit2/session06-remixjavascript.md: -------------------------------------------------------------------------------- 1 | **Session 6: Remixing Javascript (45 mins)** *This session shows learners how to remix a javascript quiz and tinker around with the programming language.* 2 | 3 |
    4 |
  1. (5 mins) Introduction round
  2. 5 |
  3. (10 mins) Remixing a quiz: Facilitator asks participants to remix the quiz to have a better design and questions for participants friends.
  4. 6 |
  5. (30 mins) Remixing Javascript: Facilitator asks participants to tinker around with Javascript and make the game prettier.
  6. 7 |
-------------------------------------------------------------------------------- /Archive/weblit3/Module03-Collaboration/03. Collaboration and Ideation.md: -------------------------------------------------------------------------------- 1 | #Module 3: Collaborating and Ideation (3 units) 2 | 3 | Help learners get to know each other's interests and look for ways to mash up ideas and inspirations to establish a concept that can be followed to production. At the end of this module, learners have a partner/group and a rough idea of what they want to build with the Web. 4 | 5 | 6 | ##Learning Objectives and Assessment 7 | 8 | By the end of this module, learners should be able to: 9 | 10 | * use synchronous and asynchronous tools to communicate with web communities, networks and groups (particularly their project group) 11 | * choose web tools for particular contributions/collaborations 12 | * use and share files in open, web-friendly formats 13 | * share processes and ideas in an open, online format (e.g. blogging or microblogging) 14 | 15 | Learners should also be aware that: 16 | 17 | * collaboration makes ideation more fun and successful 18 | * decision trees are useful to apply logic to problems, and can be used to make interactive stories 19 | * conditionals lead a user to make decisions based on the conditions of a story arc 20 | * IF/THEN statements are statements that return a value 21 | * working together will help develop ideas 22 | 23 | 24 | Sharing badge 25 | Collaborating badge 26 | Open Practices badge 27 | 28 | * **Sharing:** Creating web resources with others 29 | * **Collaborating:** Providing access to web resources 30 | * **Open Practices:** Helping to keep the web democratic and universally accessible 31 | 32 | **Assessing the learning** 33 | 34 | At the end of this module, learners should have begun using synchronous and asynchronous tools to communicate with web communities, networks and groups, particularly their project group. They should be choosing web tools to use with their groups for particular contributions/collaborations, and begin using and sharing files in open, web-friendly formats. Additionally, learners will share processes and ideas in an open, online format (e.g. blogging or microblogging). 35 | 36 | ##Agendas 37 | 38 | 39 | **Unit 7: Form Project groups (45 mins)** *This unit uses mindmapping to get learners to articulate their initial ideas, which the facilitator can use to create project groups.* 40 | 41 |
    42 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 43 |
  3. (25 mins) Defining the problem, Collaborative Mindmapping: Facilitators ask club participants what they want to build and why. Participants use mindmapping to focus on the why.
  4. 44 |
  5. (5 mins) Sort Yourselves Icebreaker Facilitators should run this activity to allow for distributed skillsets
  6. 45 |
  7. (10 mins) Group Talk Form groups and have each group discuss their mindmaps and initial ideas
  8. 46 |
47 | 48 | **Unit 8: Brainstorming (45 mins)** *This unit has learners working together to brainstorm around web projects they would like to build.* 49 | 50 |
    51 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 52 |
  3. (20 mins) Firestarter: Groups work together to define design opportunities for the next several club meetups (e.g. what do they want their web project to be)
  4. 53 |
  5. (20 mins) Collaborative tool demos: Facilitators introduce club members to different tools their groups can use during the club./
  6. 54 |
55 | 56 | 57 | **Unit 9: Forming Connections (45 mins)** *This unit sets up shared repositories and resources so that club members can access their work during and outside of the club.* 58 | 59 |
    60 |
  1. (5 mins) Introduction round Welcome new club members and remind old club mentors of the club rules.
  2. 61 |
  3. (40 mins) Process Decisions: Facilitators have learners create or link social identities, set up online workspaces (e.g. blogs and collaborative documents), and create (or learn to use) club specific tools. Learners should have this for their individual groups, and learn how to use club wide resources.
  4. 62 | 66 |
67 | 68 | ##Extension 69 | 70 | The extension for Module 3 helps learners reflect on why connection is an important part of webmaking. 71 | 72 |
    73 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 74 |
  3. (10 mins) Creating Connections 75 |
  4. (30 mins) Reflecting on Connecting
  5. 76 |
77 | 78 | ##Swap 79 | 80 | 81 | **Unit 8: Brainstorm Ideas (informal/mainstream educator)** 82 | 83 |
    84 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 85 |
  3. (25 mins) Making a Decision Tree: Facilitators ask club participants to talk and think about their ideas from the last session. Then, the create decision trees to determine how they will work together. (NOTE: Remix this activity to be collaborating-process oriented)
  4. 86 |
  5. (15 mins) Collaborative tool demos: Facilitators introduce club members to different tools their groups can use during the club
  6. 87 |
88 | -------------------------------------------------------------------------------- /Archive/weblit3/Module04-ProjectPlanning/04. Project planning.md: -------------------------------------------------------------------------------- 1 | Module 4: Project Planning (3 units) 2 | ==================================== 3 | 4 | In this module learners plan a project by thinking about who they want to communicate with, how they will organize what they want to say and how they envision the project with paper prototyping. At the end of this module, learners will have a paper prototype of their dream web project. 5 | 6 | 7 | ##Learning Objectives and Assessment 8 | 9 | By the end of this module, learners should be able to: 10 | 11 | * identify the different parts of a Web page using industry-recognized terms 12 | * start improving the accessibility of a Web page by modifying its color scheme and markup 13 | * consider their audience and think critically about the way they structure content 14 | 15 | Learners should also be aware that: 16 | 17 | * 'Information Architecture' is a system of organization that takes into account both how you present information and how a user accesses that information 18 | * working openly means you release early and often to improve your own practice 19 | * webmaking intermingles social skills, technical skills and topical knowledge 20 | * being part of a community means you can improve your practice and help improve others' as well 21 | * inviting people into your work is a good way to give them agency to contribute 22 | 23 | Design and Accessibility badge 24 | 25 | * **Design and Accessibility:** Creating universally effective communications through web resources 26 | 27 | **Assessing the Learning** 28 | 29 | Learners will be able to identify the different parts of a Web page using industry-recognized terms and will start improving the accessibility of a Web page by modifying its color scheme and markup. They will also learn to consider their audience and think critically about the way they structure content. 30 | 31 | ##Agendas 32 | ----- 33 | 34 | **Unit 10: Designing for your Audience (45 mins)** *This unit teaches design skills and helps learners think about the people they want their web project to affect.* 35 | 36 |
    37 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 38 |
  3. (5 mins) Planning: Facilitators give a brief introduction to planning.
  4. 39 |
  5. (20 mins) Defining the Audience: Facilitators ask club participants to think about who they want to build a web project for.
  6. 40 |
  7. (15 mins) Coloring the Web: Learners remix a webpage to document the colors and emotions they want to use in their projects.
  8. 41 |
42 | 43 | **Unit 11: Organizing content (45 mins)** *This unit has learners determine their content categories and information architecture.* 44 | 45 |
    46 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 47 |
  3. (10 mins) A Strong Wind Blows for Page Elements: Facilitators use this activity to review page elements participants learned in other units
  4. 48 |
  5. (30 mins) Build a Schematic or Storyboard
  6. 49 |
50 | 51 | 52 | **Unit 12: Content Jumpstart (45 mins)** *This unit has learners collecting their content and assets using the organizational structure they worked out in the previous unit.* 53 | 54 |
    55 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 56 |
  3. (40 mins) Mini Makers Scrum: Facilitators ask participants to work together to plan, organize, curate and find content that fills their schematic.
  4. 57 |
58 | 59 | ##Extension 60 | 61 | **Web Images** *The extension for Module 4 introduces learners to ambient design skills and gives them more time to tinker with design elements and collect or organize their content.* 62 | 63 |
    64 |
  1. (5 mins) Introduction round (always say hello first!)
  2. 65 |
  3. (10 mins) Image Formats: Facilitators explain the different kinds of image formats on the web. https://mozteach.makes.org/thimble/designing-for-the-web-images
  4. 66 |
  5. (30 mins) Animated Music Video: Participants use their new knowledge of image formats to create a music video that uses at least one of each format.
  6. 67 |
68 | 69 | -------------------------------------------------------------------------------- /Archive/weblit3/Module05-PaperPrototyping/05. Paper prototyping and feedback.md: -------------------------------------------------------------------------------- 1 | Module 5: Paper Prototyping and Feedback 2 | ======================================= 3 | 4 | Club participants can use this module to test out their ideas and planning with their peers through paper prototyping and discussion. After this module participants and their groups should have not only a solid idea of what they want to build, but a plan and a basic design for building it. 5 | 6 | ##Learning Objectives and Assessment 7 | 8 | COMING SOON 9 | 10 | Using constructive criticism in a group or community setting 11 | 12 | ##Agendas 13 | ----- 14 | 15 | **Unit 13: Paper Prototyping a Website (45 mins)** *Learners construct paper versions of their websites and visualize the information architecture and interactions they would like to develop.* 16 | 17 | 1. (5 mins) Introduction round (always say hello first!) 18 | 19 | 2. (40 mins) Build paper prototypes for your websites. (Remix [this activity](https://jess.makes.org/thimble/LTEwMjUzMTA3MjA=/paper-prototype-mobile-apps) to be focused on websites, perhaps Kat + Jess can design cut out pieces and parts to make paper prototyping super easy?) 20 | 21 | **Unit 14: Gathering User Feedback (45 mins)** *This unit helps learners test their content structure and gather feedback if their organization makes sense to other people.* 22 | 23 | 1. (5 mins) Introduction round (always say hello first!) 24 | 25 | 2. (40 mins) [User Test and Iterate on Your Paper Prototype] (https://jess.makes.org/thimble/MjY2NDY5Mzc2/user-test-and-iterate-on-your-paper-prototype) 26 | 27 | 28 | **Unit 15: Creating the Development Plan (45 mins)** *In this final unit of Web Literacy Basics, learners will roadmap next steps for the design and development of their websites or apps.* 29 | 30 | 1. (5 mins) Introduction round (always say hello first!) 31 | 32 | 2. (25 mins) [Roadmapping next steps](https://laura.makes.org/thimble/NDc0OTM5NjQ4/roadmapping-my-next-steps) 33 | 34 | 3. (15 mins) Reflection on Web Literacy Basics units. -------------------------------------------------------------------------------- /Experiments/StartHere/1stmonthRC.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Your First Months as a Regional Coordinator 14 | 45 | 108 | 109 | 110 | 111 | mozilla 112 | 113 |
114 |
115 |

Your First Months as a Regional Coordinator

116 | 117 |

A regional coordinator is a central role serving a global community of Mozillians dedicated to teaching the web. We are gracious conveners and authentic learners. Our goal is to support Mozilla Club captains to teach the web in a locally relevant and sustained way.

118 |
119 |
120 | 121 |
122 |

Preamble

123 | 124 |

We are in service to club captains becoming better champions and facilitators of web literacy. Our roles will be full of reflection and experimentation. A Regional Coordinator is *not* running lots of clubs. Instead, you are recruiting, on-boarding, and sustaining club captains to achieve positive outcomes, a sense of community and purpose, and to further web literacy. Regional coordinators become part of a community of practice with other local leaders around the world.

125 | 126 |

Our club captains' success is our success.

127 | 128 |

Outcomes

129 | 130 |

After completing the on-boarding outlined here, you’ll have:

131 | 132 | 139 |
140 |
141 |
142 |

Publish Your Story

143 |
144 | 145 |
146 |
147 |

Craft your story. Why is web literacy important to you? How will clubs contribute to the change you want to see in the world? Why should people join you? Publish it in Discourse.

148 | 149 |

Introduce yourself to your peers. Share your story with fellow regional coordinators. Discuss how you want to learn and how your peers can best support you. Give feedback and encouragement to others.

150 |
151 |
152 | 153 |
154 |

Reflect Openly and Often

155 |
156 | 157 |
158 |
159 |

Set up a thread in Discourse. to reflect regularly on your progress. Read and respond to other regional coordinators. What are the challenges you are facing? Where do you need help? Publish your progress. 160 |

Decide who you want to serve. Think about the learners you ultimately want to benefit from clubs. Who are the best club captains to reach and teach those learners? What do club captains need and what can you do for them? Share your reflections. 161 |

162 |
163 |
164 | 165 |
166 |

Find your Club Captains

167 |
168 | 169 |
170 |
171 |

Practice telling your story. This is one of the most effective ways to find collaborators. Tell your story to other regional coordinators. How do they respond? How do you feel telling it? Share your reflections.

172 |

Have a conversation with each potential club captain. Talking to someone 1:1 is very powerful. Tell them your story and how they can make a difference. Invite them to run a club. Also, listen to what they want to achieve and take their insights back into your planning.

173 |
174 |
175 | 176 |
177 |

Prepare an Orientation

178 |
179 | 180 |
181 |
182 |

Set a date for an orientation. Once you have enough club captains, plan a kickoff meeting. The goal will be for them to define their own story and become confident in running their club. Do this in-person, if possible. 183 |

Prepare an agenda. Building on what you learned from your conversations, review [this orientation agenda]. Where needed, adapt it to fit the needs and interests of your club captains, like this [example].

184 |
185 |
186 | 187 |
188 |

Host an orientation (repeat #1 - 4 with your club captains)

189 |
190 | 191 |
192 |
193 |

Review your agenda beforehand with fellow regional coordinators. Get feedback. Visualize the event and practice how you will run it.

194 |

Host the orientation. Using [this agenda], on-board your club captains. Invite them to publish their stories of why is web literacy important to them, and how their club will contribute to the change they want to see in the world. Publish it in Discourse.

195 |
196 |
197 |

Let's #TeachTheWeb!

198 |
199 | 200 | 201 | -------------------------------------------------------------------------------- /Experiments/StartHere/advocate.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Advocate for and Promote Your Club 21 | 32 | 33 | 34 | 35 |
36 | Tip Sheet 37 |
38 | 39 |
40 |
41 |

Advocate for and Promote Your Club

42 | 43 |

You and your core planning team will want to speak publicly about your club. It is important to communicate your message using consistent language. Craft 5-10 sentences or ideas that help you to explain the focus, structure and goals of your club. Read on for more promotional tips and tricks.

44 | 45 |

Made by Laura.

46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
    54 | 55 |
  1. 56 |

    Leverage Social Media

    57 | 58 |

    You know the power of the Web, that's why you're setting up a club to teach it! #MakeTheWeb to #TeachTheWeb. Here are some ideas to promote your club:

    59 | 60 |
    61 |
      62 |
    • Set up a Site You will share your planning process and ideas widely. Create a page for your event. You can use webmaker.org (soon), wordpress.com, blogger.com, or tumblr.com to create a free page (free is good).
    • 63 | 64 |
    • Get Creative Show the world what you are up to with consistent posts to social media site including: Facebook, Twitter, Flickr, YouTube/ Vimeo and blogs. Get creative and make your own buzz in these spaces.
    • 65 | 66 |
    • Define a Hashtag Create a hashtag for the event. Throughout the event have participants and your crew tweet and post on social networks.
    • 67 |
    68 |
    69 |
  2. 70 |
  3. 71 |

    Craft a Press Release

    A press release is usually a one-page document describing your club, your organization and anything noteworthy that you might want to communicate. This document should be carefully written as reporters will refer to it when writing their stories. Remember to include clear contact information so that members of the media know who to follow up with. Here's an example: 72 |
  4. 73 |
  5. Network to Expand Your Contacts

    74 | Send out the news release at least a week before the event. Notify the TeachTheWeb community as well as mainstream media outlets in your community — newspapers, TV and radio — think about other outlets and organizations that potentially could spread the word about your club. This might be parent groups, techie meet-ups, bloggers, podcasters, tweeters, etc. 75 |

    Submit your URLs and social media links to the Community Discourse!

    76 |
  6. 77 | 78 |
  7. 79 |

    Keep Spreading the Word about your Club

    80 |

    Plan to share the work you're doing in your club and host celebrations. Every so often, invite community members to join the club for a day or two, and build some Demo or Expo Fairs into your club's schedule. Keep a blog that documents the club's day-to-day work, as well as its special events. Invite kids to create dev blogs of their own. Be sure to protect time for championing your kids work at the club and in the community. Set dates and deadlines for sharing and meet them.

    81 |
  8. 82 | 83 |
84 |
85 |
86 | 108 |
109 |
111 | 112 | 113 | -------------------------------------------------------------------------------- /Experiments/StartHere/running-a-club.md: -------------------------------------------------------------------------------- 1 | Running a Club (Pedagogical Best Practices for this situation) 2 | ---- 3 | Combine Chad's planning and approaching teaching & learning + 4 | https://laura.makes.org/thimble/freestyle-your-event -------------------------------------------------------------------------------- /Experiments/StartHere/running-events.md: -------------------------------------------------------------------------------- 1 | Running Events in Clubs 2 | ---- 3 | Pull together the appropriate resources from: 4 | https://events.webmaker.org/event-guides 5 | https://party.webmaker.org/en-US/resources/planning-your-event -------------------------------------------------------------------------------- /Experiments/StartHere/starting-a-club.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/Experiments/StartHere/starting-a-club.md -------------------------------------------------------------------------------- /Experiments/Tabbed Remixes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Testing Tabs for Club Curriculum Remixes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 27 | 28 | 29 |
30 | 41 | 68 |
69 | 70 |
71 |

Prototype for Curriculum Remixes

72 |
73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | 88 |
89 |
90 |

Generic

91 |

Groups start by spending 20 minutes researching. Using the guidelines from the Tip Sheet, groups should evaluate 4 internet sources, documenting their findings on the Legit-o-Meter (either by writing on the handout or editing the online template). 92 |

93 |
94 |
95 |

Adult Learners

96 |

Ask each group what they found out about the Kraken and to defend their opinions using the Legit-o-Meter worksheets they filled out. Participants can change position if they hear convincing arguments. 97 |

98 | 99 |
100 |
101 |

Offline

102 |
    103 |
  1. 104 | Complete the pre-activity questionnaire. 105 |
  2. 106 |
  3. 107 | Do the activity on your own to become familiar with it. 108 |
  4. 109 |
  5. 110 | Print out the Legit-O-Meter Worksheets. 111 |
  6. 112 |
  7. 113 | Label three pieces of paper with “Real,” “Imaginary” and “Something In-between,” and hang them on different sides of the room. 114 |
  8. 115 |
116 |
117 |
118 |

En Espanol

119 |

Etiqueta de tres piezas de papel con "real", "Imaginary" y "algo intermedio", y colgarlos en diferentes lados de la habitación.

120 |
121 |
122 |
123 | 124 | 125 | -------------------------------------------------------------------------------- /Experiments/Tabbed Remixes_files/css: -------------------------------------------------------------------------------- 1 | /* cyrillic-ext */ 2 | @font-face { 3 | font-family: 'Open Sans Condensed'; 4 | font-style: normal; 5 | font-weight: 300; 6 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xE6du99w8ONfQrOf4kprgAx_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 7 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 8 | } 9 | /* cyrillic */ 10 | @font-face { 11 | font-family: 'Open Sans Condensed'; 12 | font-style: normal; 13 | font-weight: 300; 14 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xK8wKBk9M_9zvJF5T73CXCh_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 15 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 16 | } 17 | /* greek-ext */ 18 | @font-face { 19 | font-family: 'Open Sans Condensed'; 20 | font-style: normal; 21 | font-weight: 300; 22 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xJ14gK-0unzMDfuYl-aQUV9_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 23 | unicode-range: U+1F00-1FFF; 24 | } 25 | /* greek */ 26 | @font-face { 27 | font-family: 'Open Sans Condensed'; 28 | font-style: normal; 29 | font-weight: 300; 30 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xB5VLgeZEtrtjc2zP-H3k9d_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 31 | unicode-range: U+0370-03FF; 32 | } 33 | /* vietnamese */ 34 | @font-face { 35 | font-family: 'Open Sans Condensed'; 36 | font-style: normal; 37 | font-weight: 300; 38 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xAWz7bTsodKOChnd4npPWzF_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 39 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 40 | } 41 | /* latin-ext */ 42 | @font-face { 43 | font-family: 'Open Sans Condensed'; 44 | font-style: normal; 45 | font-weight: 300; 46 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xD_0YkshJ_UyXEU-Q7eV4G5_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 47 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 48 | } 49 | /* latin */ 50 | @font-face { 51 | font-family: 'Open Sans Condensed'; 52 | font-style: normal; 53 | font-weight: 300; 54 | src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xMmDra0ONnO3FPH--kzkC5zr7w4p9aSvGirXi6XmeXNA.woff2) format('woff2'); 55 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 56 | } 57 | /* cyrillic-ext */ 58 | @font-face { 59 | font-family: 'Open Sans Condensed'; 60 | font-style: normal; 61 | font-weight: 700; 62 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xPX7z5o44AuUJ1t1avdkNXJ_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 63 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 64 | } 65 | /* cyrillic */ 66 | @font-face { 67 | font-family: 'Open Sans Condensed'; 68 | font-style: normal; 69 | font-weight: 700; 70 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xLLF6RfyvCYuuChpfFHKAr5_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 71 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 72 | } 73 | /* greek-ext */ 74 | @font-face { 75 | font-family: 'Open Sans Condensed'; 76 | font-style: normal; 77 | font-weight: 700; 78 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xIbCcO5IWJIaQ5MtZqYsHUp_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 79 | unicode-range: U+1F00-1FFF; 80 | } 81 | /* greek */ 82 | @font-face { 83 | font-family: 'Open Sans Condensed'; 84 | font-style: normal; 85 | font-weight: 700; 86 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xHQ3DnTiPFZC1qn696_nOv9_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 87 | unicode-range: U+0370-03FF; 88 | } 89 | /* vietnamese */ 90 | @font-face { 91 | font-family: 'Open Sans Condensed'; 92 | font-style: normal; 93 | font-weight: 700; 94 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xLzZT6Zu7Z-BZJGL0hT-UJV_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 95 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 96 | } 97 | /* latin-ext */ 98 | @font-face { 99 | font-family: 'Open Sans Condensed'; 100 | font-style: normal; 101 | font-weight: 700; 102 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xPJmhJzg6kSQTtrFMk-8lT5_v5H-gcmDugi2HQeB0BPm.woff2) format('woff2'); 103 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 104 | } 105 | /* latin */ 106 | @font-face { 107 | font-family: 'Open Sans Condensed'; 108 | font-style: normal; 109 | font-weight: 700; 110 | src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xIgEy7irt_A5K-aDq9kG7DHr7w4p9aSvGirXi6XmeXNA.woff2) format('woff2'); 111 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 112 | } 113 | /* cyrillic-ext */ 114 | @font-face { 115 | font-family: 'Open Sans Condensed'; 116 | font-style: italic; 117 | font-weight: 300; 118 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzVxzW2HGxJE-cxaore_4G_hYZAM-K2J-O2ctq74oFkH-s.woff2) format('woff2'); 119 | unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 120 | } 121 | /* cyrillic */ 122 | @font-face { 123 | font-family: 'Open Sans Condensed'; 124 | font-style: italic; 125 | font-weight: 300; 126 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzV4zIibREM_xtIOs0xIJYzcAZAM-K2J-O2ctq74oFkH-s.woff2) format('woff2'); 127 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 128 | } 129 | /* greek-ext */ 130 | @font-face { 131 | font-family: 'Open Sans Condensed'; 132 | font-style: italic; 133 | font-weight: 300; 134 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzV9WNSx_9Tm--PxC8nYzol_oZAM-K2J-O2ctq74oFkH-s.woff2) format('woff2'); 135 | unicode-range: U+1F00-1FFF; 136 | } 137 | /* greek */ 138 | @font-face { 139 | font-family: 'Open Sans Condensed'; 140 | font-style: italic; 141 | font-weight: 300; 142 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzV4S1q5RGaHzzAAUgHklRNwMZAM-K2J-O2ctq74oFkH-s.woff2) format('woff2'); 143 | unicode-range: U+0370-03FF; 144 | } 145 | /* vietnamese */ 146 | @font-face { 147 | font-family: 'Open Sans Condensed'; 148 | font-style: italic; 149 | font-weight: 300; 150 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzV0RUj-8OE20lRl9GlTGRU-QZAM-K2J-O2ctq74oFkH-s.woff2) format('woff2'); 151 | unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 152 | } 153 | /* latin-ext */ 154 | @font-face { 155 | font-family: 'Open Sans Condensed'; 156 | font-style: italic; 157 | font-weight: 300; 158 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzV12Cn97i9IlPbfrzIs7KZtAZAM-K2J-O2ctq74oFkH-s.woff2) format('woff2'); 159 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 160 | } 161 | /* latin */ 162 | @font-face { 163 | font-family: 'Open Sans Condensed'; 164 | font-style: italic; 165 | font-weight: 300; 166 | src: local('Open Sans Cond Light Italic'), local('OpenSans-CondensedLightItalic'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/jIXlqT1WKafUSwj6s9AzVyqWG1TIildrkra2taUxHyR2IY20qb3OO3nusUf_NB58.woff2) format('woff2'); 167 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 168 | } 169 | -------------------------------------------------------------------------------- /Experiments/Tabbed Remixes_files/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/Experiments/Tabbed Remixes_files/logo.png -------------------------------------------------------------------------------- /Experiments/Tabbed Remixes_files/modernizr.custom.04022.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.5.3 (Custom Build) | MIT & BSD 2 | * Build: http://www.modernizr.com/download/#-shiv-cssclasses-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return u(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f * { 16 | flex: 1 100%; 17 | } 18 | 19 | .footer { 20 | background: #eee; 21 | min-height:55px; 22 | text-align: right; 23 | padding:20px 0px; 24 | } 25 | 26 | .main { 27 | text-align: left; 28 | background: white; 29 | } 30 | 31 | hgroup{ 32 | padding:20px 50px; 33 | } 34 | 35 | .main div.line{ 36 | background-color:#3fb58e; 37 | height: 55px; 38 | padding:0px 0px 5px 0px; 39 | } 40 | 41 | .line p, .agenda p{ 42 | font-weight: 300; 43 | } 44 | 45 | .line p{ 46 | padding:11px 50px; 47 | color:white; 48 | margin-left:auto; 49 | margin-right:auto; 50 | width:100%; 51 | } 52 | .aside { 53 | background: #013E5F; 54 | width:5%; 55 | padding:0; 56 | color:white; 57 | font-size: 1.3em; 58 | 59 | } 60 | 61 | .aside img{ 62 | width:100%; 63 | } 64 | 65 | .attribution { 66 | bottom: 10px; 67 | color: #eee; 68 | opacity: 0.5; 69 | position: relative; 70 | top: -30px; 71 | transition: all 0.2s ease 0s; 72 | float: right; 73 | right: 15px; 74 | } 75 | 76 | .goals{ 77 | padding:10px 20px; 78 | } 79 | 80 | .goals ul, .literacy{ 81 | margin-bottom:10%;; 82 | } 83 | 84 | .goals ul, .agenda ul{ 85 | padding-left:0; 86 | 87 | } 88 | 89 | .agenda>ul>li>div, footer { 90 | padding:20px 50px; 91 | } 92 | 93 | .goals ul li{ 94 | list-style-position:inside; 95 | list-style-type: square; 96 | font-weight:300; 97 | font-size:.9em; 98 | 99 | } 100 | 101 | .agenda>ul>li{ 102 | list-style-position:inside; 103 | list-style-type: none; 104 | border-bottom: 1px solid #eee; 105 | } 106 | 107 | .agenda ul li ul{ 108 | padding-left:10px;} 109 | 110 | .time{ 111 | width:60px; 112 | height:60px; 113 | -webkit-border-radius: 50%; 114 | border-radius: 50%; 115 | display: inline-block; 116 | border: 2px solid #3fb58e; 117 | float:right; 118 | padding:0; 119 | } 120 | 121 | .time p{ 122 | font-weight: 300; 123 | text-align: center; 124 | font-size: 1.3em; 125 | line-height: 115%; 126 | margin-top:10%; 127 | } 128 | 129 | hr { 130 | color: #FF4E1F; 131 | background: #FF4E1F; 132 | width: 75%; 133 | height: 5px; 134 | } 135 | 136 | .sessions { 137 | background: #FFF1C5; 138 | float:right; 139 | } 140 | 141 | .start { 142 | margin-top:10%; 143 | text-align: right; 144 | } 145 | 146 | .coming-soon { 147 | background-color:#F5F5F5; 148 | border: 5px dashed #E3EAEE; 149 | } 150 | 151 | .img-example { 152 | width: 50%; 153 | margin-left: 30%; 154 | padding-bottom: 7px; 155 | } 156 | 157 | .literacy-color-credibility, .literacy-color-search, .literacy-color-composing{ 158 | color:white; 159 | } 160 | 161 | .literacy-color-credibility{ 162 | background-color: #FF5984; 163 | } 164 | .literacy-color-search{ 165 | background-color: #fe4040; 166 | } 167 | 168 | .literacy-color-composing{ 169 | background-color: #01bc85; 170 | } 171 | .literacy-color-practices{ 172 | background-color: #0097d6; 173 | } 174 | 175 | .literacy-color-webmechanics{ 176 | background-color: #FF6969; 177 | color: white; 178 | } 179 | 180 | .literacy-color-navigation{ 181 | background-color: #FF4E1F; 182 | color: white; 183 | } 184 | 185 | .literacy-color-remixing{ 186 | background-color: #00CEB8; 187 | color: white; 188 | } 189 | 190 | 191 | .socialBtns { 192 | float:right; 193 | width:120px; 194 | } 195 | 196 | @media all and (min-width: 600px) { 197 | .aside { flex: 1 auto; } 198 | } 199 | 200 | @media all and (min-width: 800px) { 201 | .main { flex: 3 0px; } 202 | .aside-1 { order: 1; } 203 | .main { order: 2; } 204 | .footer { order: 3; } 205 | } 206 | 207 | body { 208 | padding: 2em; 209 | background-color:#eee; 210 | } 211 | 212 | 213 | .tabs { 214 | position: relative; 215 | margin: 40px auto; 216 | width: 750px; 217 | } 218 | 219 | .tabs input { 220 | position: absolute; 221 | z-index: 1000; 222 | width: 150px; 223 | height: 40px; 224 | left: 0px; 225 | top: 0px; 226 | opacity: 0; 227 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 228 | filter: alpha(opacity=0); 229 | cursor: pointer; 230 | } 231 | .tabs input#tab-2{ 232 | left: 150px; 233 | } 234 | .tabs input#tab-3{ 235 | left: 250px; 236 | } 237 | .tabs input#tab-4{ 238 | left: 360px; 239 | } 240 | 241 | .tabs label { 242 | background: #00bad6; 243 | font-size: 15px; 244 | line-height: 40px; 245 | height: 40px; 246 | float: left; 247 | display: block; 248 | color: #fff; 249 | width: 80px; 250 | letter-spacing: 1px; 251 | text-transform: uppercase; 252 | font-weight: bold; 253 | text-align: center; 254 | border-radius: 3px 3px 0 0; 255 | } 256 | 257 | .tabs label:after { 258 | content: ''; 259 | background: #506b7b; 260 | position: absolute; 261 | bottom: -2px; 262 | left: 0; 263 | width: 100%; 264 | height: 2px; 265 | display: block; 266 | } 267 | 268 | .tabs input:hover + label { 269 | background: #0097d6; 270 | } 271 | 272 | .tabs label:first-of-type { 273 | z-index: 4; 274 | box-shadow: 2px 0 2px rgba(0,0,0,0.1); 275 | } 276 | 277 | .tab-label-2 { 278 | z-index: 3; 279 | } 280 | 281 | .tab-label-3 { 282 | z-index: 2; 283 | } 284 | 285 | .tab-label-4 { 286 | z-index: 1; 287 | } 288 | 289 | .tabs input:checked + label { 290 | background:#63cfea; 291 | z-index: 6; 292 | } 293 | 294 | .clear-shadow { 295 | clear: both; 296 | } 297 | 298 | .content { 299 | background: #fff; 300 | position: relative; 301 | width: 100%; 302 | height: 370px; 303 | z-index: 5; 304 | box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); 305 | border-radius: 0 3px 3px 3px; 306 | } 307 | 308 | .content div { 309 | position: absolute; 310 | top: 0; 311 | left: 0; 312 | padding: 10px 40px; 313 | z-index: 1; 314 | opacity: 0; 315 | 316 | -webkit-transition: opacity linear 0.1s; 317 | -moz-transition: opacity linear 0.1s; 318 | -o-transition: opacity linear 0.1s; 319 | -ms-transition: opacity linear 0.1s; 320 | transition: opacity linear 0.1s; 321 | } 322 | 323 | .tabs input.tab-selector-1:checked ~ .content .content-1, 324 | .tabs input.tab-selector-2:checked ~ .content .content-2, 325 | .tabs input.tab-selector-3:checked ~ .content .content-3, 326 | .tabs input.tab-selector-4:checked ~ .content .content-4 { 327 | z-index: 100; 328 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 329 | filter: alpha(opacity=100); 330 | opacity: 1; 331 | 332 | -webkit-transition: opacity ease-out 0.2s 0.1s; 333 | -moz-transition: opacity ease-out 0.2s 0.1s; 334 | -o-transition: opacity ease-out 0.2s 0.1s; 335 | -ms-transition: opacity ease-out 0.2s 0.1s; 336 | transition: opacity ease-out 0.2s 0.1s; 337 | } 338 | .content div h2, 339 | .content div h3{ 340 | color:#3fb58e; 341 | } 342 | .content div p { 343 | font-size: 14px; 344 | line-height: 22px; 345 | text-align: left; 346 | margin: 0; 347 | color: #3fb58e; 348 | padding-left: 15px; 349 | font-family: sans-serif; 350 | border-left: 8px solid #3fb58e; 351 | } -------------------------------------------------------------------------------- /Experiments/Tabbed Remixes_files/webmaker-avatar-200x200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/Experiments/Tabbed Remixes_files/webmaker-avatar-200x200.png -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | #Attribution! 2 | 3 | Mozilla content is created by individual contributors and released under a [CC-BY 4.0 Universal license](https://creativecommons.org/licenses/by/4.0/). We'd all appreciate it if you took the time to learn about [proper attribution](https://wiki.creativecommons.org/Best_practices_for_attribution), and we'd love to see how you're using this content! 4 | 5 | 6 | -------------------------------------------------------------------------------- /MobileWeb/facilitator-guide.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Facilitator Guide 24 | 25 | 26 | 27 | 28 | 29 | 30 | 51 | 52 | 53 | 54 |
55 | 61 | 62 | 63 | 64 | 65 | 66 |
67 |
68 |
69 | 70 | 71 |

Facilitator Guide

72 | 73 | 74 |

Made by Katie and remixed for Maker Party by Bobby. 75 | 76 |

Much of the success of the workshop lies with the facilitator — it’s in your hands! Here are some hints to help you run the best workshop possible.

77 | 78 |
79 |
80 | 81 |
82 | 83 |
84 |
    85 | 86 |
  • 87 |
    88 |

    Before the workshop

    89 |
      90 |
    • Engage/ work with the group — chat with them informally!
    • 91 |
    • Encourage them to be brave, offer their ideas and thoughts to the group.
    • 92 |
    • Make sure you prepare — organization is key.
    • 93 |
    • As much as possible, try and get a good gender balance in the room, so that everyone can feel comfortable to speak. One male for every two females is a good guideline.
    • 94 |
    95 |
    96 |
  • 97 | 98 |
  • 99 |
    100 |

    During the workshop

    101 |
      102 |
    • Keep an eye on the time
    • 103 |
    • Listen to the participants! Appreciate their input.
    • 104 |
    • Be confident — you’re the expert!
    • 105 |
    • Know your content — again, prepare!
    • 106 |
    • Keep it fun, be creative.
    • 107 |
    • Set ground rules — how will the session be run, what is the timing for the session, what will be expected of them
    • 108 |
    • Speak clearly — especially if there are people who are not interacting in their native tongue.
    • 109 |
    • Make sure your body language is open and positive
    • 110 |
    • During the parts of the workshop that involve working with a mobile phone, make sure you sit next to people rather than in front of them — this will help create a supported learning environment.
    • 111 |
    • Where there is more than one mentor, make sure that each mentor helps out with delivery, splitting the tasks
    • 112 |
    • If the scenarios provided don’t suit your environment as much, change them around to make them more relevant to the learners.
    • 113 |
    114 |
    115 |
  • 116 |
117 |
118 |
119 | 120 | 121 | 122 |
123 | 124 | 125 |
126 | Creative Commons License 127 |
128 |
129 |
130 | 131 | 132 | -------------------------------------------------------------------------------- /MobileWeb/glossary.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Glossary for the Internet and the Web 24 | 25 | 26 | 27 | 28 | 29 | 30 | 51 | 52 | 53 | 54 |
55 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 |
73 | 74 | 75 |

Glossary for the Internet and the Web

76 | 77 | 78 |

Made by Katie and remixed for Maker Party by Bobby. 79 |

80 |
81 |
82 | 83 |
84 |
    85 | 86 |
  • Download: to copy a package of information (such as a file or application) from the Internet on to a computer or mobile device.
  • 87 | 88 |
  • Installation: to save a file or application on your computer or mobile device. This is what happens, usually automatically, once you have downloaded the file of application from the Internet.
  • 89 | 90 |
  • App (application): a piece of software designed for specific function, this is usually downloaded to mobile device.
  • 91 | 92 |
  • Operating system: the base software which lets you communicate with the supports your computer or mobile phone’s functionality and lets you to communicate with it, like an intermediary inside the phone. Android is one such operating system.
  • 93 | 94 |
  • Register: To record a profile of yourself in the app (usually an email address or username and then password) so that your can save your activities and progress, and continue each time you come back.
  • 95 | 96 |
  • Log in/sign in: To enter your name/ email and password when you come back to an app, so you can return to your previous activities.
  • 97 | 98 |
  • Password: A private phrase or word that only you know – and is used to sign-in to online accounts, such as email or Facebook.
  • 99 | 100 |
  • 3G/4G (third generation, fourth generation): These are standards or ways that we connect our phones to the Internet. If you are connected to the mobile Internet (but not through Wifi) you should see a 3G or 4G sign at the top of your mobile screen.
  • 101 | 102 |
  • Links: these are website references in a webpage or electronic document which let you display or connect to another document or webpage.
  • 103 | 104 |
  • URL (Uniform Resource Locator): the address of any document, file or website available on the internet. Examples include www.facebook.com and www.bbc.com
  • 105 | 106 |
  • Open source: this refers to computer software, like Webmaker, where the source code is made "open" so that anyone may view, change or distribute a version of the software for any purpose. 
  • 107 | 108 |
  • Remixing: to create a version of a project, based on the original, but incoporating new elements.
  • 109 | 110 |
  • Sharing: how we distribute our thoughts, feedback and projects over the internet. We share them through comments, web projects and updates.
  • 111 | 112 |
  • Non-linear navigation: a multi directional way of formatting Webmaker projects or websites to tell a dynamic and illustrative story. This is how projects or websites can take you in lots of different information directions.
  • 113 | 114 |
  • RGBA and # (tinker mode): (Red Green Blue Alpha) is a colour palette, and way of adjusting or ‘tinkering’ with this colour palette through increasing or decreasing different amounts of colour.
  • 115 |
116 |
117 |
118 | 119 | 120 | 121 |
122 | 123 | 124 |
125 | Creative Commons License 126 |
127 |
128 |
129 | 130 | 131 | -------------------------------------------------------------------------------- /ProtectingYourData/AnonymizerAct.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Web Literacy Basics I | Reading the Web: Credibility 10 | 11 | 12 | 13 | 31 | 32 |
33 | 75 | 76 |
77 |
78 |
79 |

Reading the Web: Credibility

80 | 81 |

Made by the #TeachTheWeb team with special thanks to Mouse. 82 |

83 | 84 |

Learners will use the Internet to solve the mystery of The Kraken, a legendary sea creature, while also learning about search terms, keywords, and how to assess the validity and relevance of web sources.

85 |
86 |
87 | 88 |
89 |

Learners can earn the Credibility Maker Badge.

90 |
91 | 92 |
93 |
    94 |
  • 95 |
    96 |
    97 |

    5
    98 | min

    99 |
    100 | 101 |
    Preparation
    102 | 103 |

    Print out Legit-O-Meter Worksheets

    104 | 105 |

    Get three pieces of blank paper and label them with “Real,” “Imaginary” and “Something Inbetween” then hang them on different sides of the room.

    106 |
    107 |
  • 108 | 109 |
  • 110 |
    111 |
    112 |

    10
    113 | min

    114 |
    115 | 116 |
    Introduction Round
    117 | 118 |

    Start a quick conversation about web sources by asking questions like:

    119 | 120 |
    121 |
      122 |
    • Is everything you read or watch online true?
    • 123 | 124 |
    • How do you know when information on the internet is reliable?
    • 125 | 126 |
    • How can you tell when it isn’t reliable?
    • 127 |
    128 |
    129 | 130 |

    Briefly review the Legit-o-Meter Tip Sheet to discuss some general rules for determining the credibility of a website.

    131 |
    132 |
  • 133 | 134 |
  • 135 |
    136 |
    137 |

    30
    138 | min

    139 |
    140 | 141 |
    Data Trail Timeline
    142 | 143 |

    Run the Kraken the Code Activity from Mouse

    144 | 145 |

    Create a timeline video or slideshow to demonstrate how your information gets collected by companies and other organizations throughout the course of a typical day.

    146 |
    147 |
  • 148 | 149 |
  • 150 |
    151 |
    152 |

    5
    153 | min

    154 |
    155 | 156 |
    Reflect and Review
    157 | 158 |

    Ask learners to demonstrate what they've learned. You can also ask learners to reflect on what they're doing during the main activity. Ways of doing this include:

    159 | 160 |
    161 |
      162 |
    • Asking learners individually to talk you through the process of searching for credible information.
    • 163 | 164 |
    • Going through a sample search together and asking the group what to do next.
    • 165 | 166 |
    • Pairing-up learners and asking them to create a screencast showing and verbalising the decisions they make.
    • 167 |
    168 |

    169 |

    170 |
    171 |
  • 172 |
173 |
174 |
175 | 176 | 179 |
180 | 181 | 182 | -------------------------------------------------------------------------------- /ProtectingYourData/ip-tracer-worksheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/ProtectingYourData/ip-tracer-worksheet.pdf -------------------------------------------------------------------------------- /QuackingJavascript/images/about_me_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/about_me_1.png -------------------------------------------------------------------------------- /QuackingJavascript/images/atthecontrols_octonauts_gup_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/atthecontrols_octonauts_gup_800.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/blockly_800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/blockly_800.png -------------------------------------------------------------------------------- /QuackingJavascript/images/boxes_variables_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/boxes_variables_arrow.png -------------------------------------------------------------------------------- /QuackingJavascript/images/chef-man.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/chef-man.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/chips_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/chips_800.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/chips_800_sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/chips_800_sq.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/chocolate-chip-cookies_publicdomain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/chocolate-chip-cookies_publicdomain.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_image_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_image_1.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_image_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_image_2.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_image_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_image_3.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_image_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_image_4.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_image_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_image_5.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_image_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_image_6.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_numbers_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_numbers_1.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_webmaker_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_webmaker_2.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_webmaker_800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_webmaker_800.png -------------------------------------------------------------------------------- /QuackingJavascript/images/console_webmaker_800_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/console_webmaker_800_2.png -------------------------------------------------------------------------------- /QuackingJavascript/images/cookie_clicker_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/cookie_clicker_1.png -------------------------------------------------------------------------------- /QuackingJavascript/images/cookie_clicker_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/cookie_clicker_2.png -------------------------------------------------------------------------------- /QuackingJavascript/images/cookie_clicker_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/cookie_clicker_3.png -------------------------------------------------------------------------------- /QuackingJavascript/images/creating_a_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/creating_a_page.png -------------------------------------------------------------------------------- /QuackingJavascript/images/daddyorchips.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/daddyorchips.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/daddyorchips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/daddyorchips.png -------------------------------------------------------------------------------- /QuackingJavascript/images/daddyorchips_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/daddyorchips_3.gif -------------------------------------------------------------------------------- /QuackingJavascript/images/dance.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/dance.gif -------------------------------------------------------------------------------- /QuackingJavascript/images/dora_the_explorer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/dora_the_explorer.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/dora_the_explorer_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/dora_the_explorer_2.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/dora_the_explorer_square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/dora_the_explorer_square.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/for_loop_full.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/for_loop_full.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/for_loop_sq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/for_loop_sq.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/go_for_it_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/go_for_it_800.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/if_flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/if_flow.png -------------------------------------------------------------------------------- /QuackingJavascript/images/katy-perry-super-bowl-sharks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/katy-perry-super-bowl-sharks.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/rainy_decision_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/rainy_decision_1.png -------------------------------------------------------------------------------- /QuackingJavascript/images/rubberduck_square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/rubberduck_square.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/save_strawberry_full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/save_strawberry_full.png -------------------------------------------------------------------------------- /QuackingJavascript/images/save_strawberry_square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/save_strawberry_square.png -------------------------------------------------------------------------------- /QuackingJavascript/images/saveimageas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/saveimageas.png -------------------------------------------------------------------------------- /QuackingJavascript/images/saveimageas_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/saveimageas_2.png -------------------------------------------------------------------------------- /QuackingJavascript/images/selection_bbc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/selection_bbc.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/swimming_pool_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/swimming_pool_800.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/swimming_pool_ice_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/swimming_pool_ice_800.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/thermo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/thermo.jpg -------------------------------------------------------------------------------- /QuackingJavascript/images/thimble_simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/thimble_simple.png -------------------------------------------------------------------------------- /QuackingJavascript/images/thimble_simple_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/thimble_simple_2.png -------------------------------------------------------------------------------- /QuackingJavascript/images/tshirt_shop_800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/images/tshirt_shop_800.jpg -------------------------------------------------------------------------------- /QuackingJavascript/stylesheets/qprint.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/QuackingJavascript/stylesheets/qprint.css -------------------------------------------------------------------------------- /QuackingJavascript/stylesheets/qstyles.css: -------------------------------------------------------------------------------- 1 | .img-screenshot { 2 | padding-bottom: 7px; 3 | max-width: 600px; 4 | width: 100%; 5 | height: auto; 6 | } 7 | 8 | .pure-table th, .pure-table td { 9 | padding: 0.5em 1em; 10 | } 11 | 12 | .step-section ol { 13 | counter-reset: step-counter; 14 | list-style-type: none; 15 | padding-left: 10px; 16 | } 17 | 18 | .step-section ol > li::before { 19 | align-items: center; 20 | border: 2px solid #27aae1; 21 | border-radius: 50%; 22 | color: #27aae1; 23 | content: counter(step-counter, decimal); 24 | counter-increment: step-counter; 25 | display: flex; 26 | font-weight: 700; 27 | height: 30px; 28 | justify-content: center; 29 | left: -60px; 30 | padding: 5px; 31 | position: absolute; 32 | width: 30px; 33 | z-index: 5; 34 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | *Note: the issues relating to this repository can now be found [here](https://github.com/MozillaFoundation/Mozilla-Learning/issues?q=is%3Aopen+is%3Aissue+label%3Acurriculum)* 2 | 3 | #Check out the live pages! 4 | [Web Literacy Basics I](https://mozilla.github.io/webmaker-curriculum/WebLiteracyBasics-I/) 5 | 6 | #See the wiki 7 | The [wiki associated with this Github repo](https://github.com/mozilla/webmaker-curriculum/wiki) has tons of information about Web literacy Clubs and links out to other plans and resources. Definitely give it a look! 8 | 9 | #Remix this! 10 | 11 | Create your own version of the curriculum by forking this repository: 12 | 13 | 1. Create a GitHub account and login 14 | 2. Hit the 'Fork' button to the top-right of this page 15 | 3. Edit the repository for your own needs 16 | 17 | For the third step, you can edit each document in-situ on GitHub (easiest), or you can use the native client (slightly trickier, but better results). Either way, you'll need to use [Markdown](http://daringfireball.net/projects/markdown/) and/or HTML to format the pages. 18 | 19 | If you have changes to suggest to *this* repository, please fork it and then submit a pull request. Guidance on how to do this can be found in the [GitHub help section](https://help.github.com/articles/using-pull-requests/). 20 | 21 | ----- 22 | 23 | *Taken from [http://mzl.la/club_curriculum](http://mzl.la/club_curriculum). Click on the 'watch' button to be informed of updates!* 24 | 25 |

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

26 | 27 | -------------------------------------------------------------------------------- /WebLiteracyBasics-I/LearningObjectives.md: -------------------------------------------------------------------------------- 1 | ##Web Literacy Basics I 2 | In this module, learners begin to find out about the foundations of the web. Discovering what makes the web a unique place to find and gather information, they'll learn about how the web is constructed. 3 | 4 | ##Big Ideas 5 | The web is like lego, so you can remix it's building blocks to make your first web page. You can use technology to search for, organize and use resources to be expressive creatively. When using other people's media, you should attribute their contribution to your work, ideas or projects. 6 | 7 | The reason is that reading is the first act of going online. It is critical to developing literacy to bolster people's agency on the web, and it is a building block to developing higher order skills. 8 | 9 | As part of that, when you read the web, one of the first things you want to know is: can I believe what I'm reading? Is it valid and credible? 10 | 11 | #Tools 12 | * the Browser 13 | * [X-Ray Goggles](http://goggles.webmaker.org) 14 | 15 | ##Learning Objectives and Assessment 16 | 17 | By the end of this module, learners should be able to: 18 | 19 | * Install X-Ray Goggles as a bookmarklet 20 | * Search for an image and discover its URL for including in a remixed web page 21 | * Use X-Ray Goggles to modify text and images on specific web pages 22 | * Switch between browser tabs 23 | * Make use of keyboard shortcuts (i.e. for copying and pasting) 24 | * Use X-Ray Goggles to modify text and images on any web page 25 | * Attribute images, text and other assets used from other websites 26 | * Choose openly-licensed assets to include in a web page 27 | * Publish a remixed web page and make a note of its URL 28 | * Discover time-sensitive information using a range of search engines 29 | * Identifying openly-licensed images relating to a specific event 30 | * Assess the credibility of websites and their content by comparing information from a number of sources 31 | 32 | The following competencies of the [Web Literacy Map](https://webmaker.org/resources) are relevant to this module - along with the relevant 'maker' badges. 33 | 34 | Navigation badge 35 | Web Mechanics badge 36 | Search badge 37 | Credibility badge 38 | Remixing badge 39 | Open practices badge 40 | 41 | 42 | * **Navigation:** Using software tools to browse the web 43 | * **Web Mechanics:** Understanding the web ecosystem 44 | * **Search:** Locating information, people and resources via the web 45 | * **Credibility:** Critically evaluating information found on the web 46 | * **Remixing:** Modifying existing web resources to create something new 47 | * **Open Practices:** Distinguishing between open and closed licensing 48 | 49 | ##Basic Agendas 50 | 51 | [**Session 1: The Web is like Legos (45 mins)**](https://github.com/mozilla/webmaker-curriculum/blob/master/WebLiteracyBasics-I/session01-basics.md) 52 | 53 | [**Session 2: Remixathon (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/session02-remixathon.md) 54 | 55 | [**Session 3: Search and Store (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/session03-search.md) 56 | 57 | ##Extension Agendas 58 | 59 | [**Extension 1: Web Mechanics and Search Engines (45 mins)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/extensions/extension01-mechanics-and-search.md) 60 | 61 | ##Club Type Specific Agendas 62 | 63 | [**Session 1: The Web is like legos (Mozilla Supporter)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/club-type-specific/session01-community.md) 64 | 65 | [**Session 1: The Web is like Legos (GLAM)**](https://github.com/LauraHilliger/webmaker-curriculum/blob/master/WebLiteracyBasics-I/club-type-specific/session01-GLAM.md) 66 | 67 | 68 | ----- -------------------------------------------------------------------------------- /WebLiteracyBasics-I/README.md: -------------------------------------------------------------------------------- 1 | Learners get familiar with reading, writing and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration. The learning objectives underpinning each activity are informed by Mozilla's Web Literacy Map. Complete the activities in sequence, or mix and match for your learners. Need help? Visit our discussion forum to get help and share your experience. 2 | 3 | See [http://teach.mozilla.org](http://teach.mozilla.org) for more information -------------------------------------------------------------------------------- /WebLiteracyBasics-I/bn-IN/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web Literacy প্রাথমিক | 7 | 8 | 9 |
35 |
36 |

Web Literacy প্রাথমিক |

37 | 38 |

#TeachTheWeb টিমের দ্বারা নির্মিত বিশেষ ধন্যবাদ Mouse-কে

39 |

40 | 41 |

42 |

এই মডিউলে, শিক্ষার্থীরা ওয়েবের ফাউন্ডেশন সম্পর্কে জানতে শুরু করে। আবিষ্কার করে কি ওয়েবকে অনন্য জায়গা করে তুলছে তথ্য জানা ও জোগাড় করার জন্য, তারা শিখবে যে কিভাবে ওয়েব তৈরি হয়।

43 |
44 | 45 |
46 |

47 |
48 | 49 |
50 | 119 |
120 |
এরপরে, শেখাতে চেষ্টা করুন
121 |
122 | 123 | 124 | -------------------------------------------------------------------------------- /WebLiteracyBasics-I/legit-o-meter.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Legit-O-Meter Tip Sheet 17 | 18 | 19 | 20 |
21 | Tip Sheet 22 |
23 | 24 |
25 |
26 |

Legit-O-Meter Tip Sheet

27 |

There are like billions and billions of websites, but not all sites are created equal.

28 |

Made by MOUSE! and a lite remix by Laura

29 |
30 |
31 |
32 |
33 |
34 |
35 |

Search for “How to cure a cold”.

36 |

You might find a web forum from 2004 where someone suggests putting toothpaste up your nose and singing ‘happy birthday’, or a site named “cure a cold in 10 minutes” where you only need to buy this one magic pill for $99 to never have a cold again. Finding real medical advice among all the countless bad advice can be close to impossible.

37 |

38 | But! All hope is not lost! Here are a few things you should check to help you decide if a website is legit:

39 | 40 | 41 |

Look for Names: Does the site list its author?

42 |

If the author of a website or Internet article is willing to list his or her name (and sometimes contact information too) alongside it, that can be a good sign that the information is accurate since it is something the author is willing to stand behind. 43 |

44 | 45 |

Check the Date: When was the site or post written?

46 |

When you’re using web research (or any research!) to build a case for your argument, you want to use the most recent information possible. Old websites might contain things that have since been proven wrong or are in other ways out ­of ­date. If you can find the date that a website or article was created, it can help you decide whether it contains useful information or not.

47 | 48 |

Find the Sources: Where did their information come from?

49 |

Just like you’re going to backup your research by showing your sources, websites may be more legitimate if they list (or “cite,” if you want to use the professional research term) the sources of their information. For example, most Wikipedia articles will have a list of references (like articles, websites or scientific studies) at the bottom of the page to backup the information in the Wikipedia article.

50 | 51 |

.Com vs .Edu:What’s the Domain?

52 |

Those three letters at the end of most URLs are called a “domain.” The most 53 | 54 | common domains are “.com” which stands for “commercial,” and .net, 55 | 56 | which stands for “network.” These domains can be purchased by any 57 | 58 | company or person who is willing to pay for them, which might make 59 | 60 | them more open to bad or misleading information. However, URLs that 61 | 62 | end in .edu and .gov can only be used by educational or government 63 | 64 | organizations. For this reason, they may be more trustworthy. Library 65 | 66 | online databases are a great way to find reliable sources; public libraries 67 | 68 | often have a .gov or a .org domain. 69 |

70 | 71 |

Sometimes Looks Matter: Is the site well designed?

72 |

Whether or not a site looks nice can be a matter of opinion, but sometimes 73 | 74 | it really can make a difference! If someone spent a lot of time making sure 75 | 76 | a site looks nice and that the information on it is easy to find, that can be a 77 | 78 | sign that it is more reliable than a poorly­designed site. 79 |

80 | 81 |

Spell-check: How’s the writing style?

82 |

Just like when a site is not designed well, bad spelling and grammar can be 83 | 84 | a sign that the site’s creator did not spend a lot of time and care making it. 85 | 86 | Most creators of legitimate sites spend a lot of time making sure there are 87 | 88 | as few mistakes on it as possible. 89 |

90 | 91 |

Avoid the Sale: Do they want you to buy something?

92 |

Even when a website looks nice, cites sources, and lists authors, you should 93 | 94 | be suspicious if it seems like it is trying to sell you something. Sometimes 95 | 96 | creators of websites will mislead you or hide certain information if they 97 | 98 | want you to buy their product. So when doing web research, be careful of 99 | 100 | sites that tell you to buy products or pay a fee. 101 |

102 | 103 |

Double-check: Can you verify the info with another source?

104 |

Even with all these tips, it can sometimes be difficult to tell if a site is 105 | 106 | legitimate or not. Some credible sites won’t have any of the good qualities 107 | 108 | above and some bad sites will have all of them. One way to know for sure 109 | 110 | that the information you’re seeing is correct is to double­check it in a 111 | 112 | source that you are SURE is reliable (like an encyclopedia). 113 |

114 | 115 |

Different Sources for Different Searches: How critical do you 116 | 117 | need to be?

118 |

These guidelines work well for many types of research, but there are 119 | 120 | plenty of credible websites that may not pass all of the checks above. If you 121 | 122 | are researching a celebrity and discover that they have a personal blog that 123 | 124 | they haven’t updated in years, and made a lot of spelling errors ­ it would 125 | 126 | still be a credible resource, since you know who wrote it. Use your best 127 | 128 | judgement to evaluate each site you research based on what you are 129 | 130 | looking for. 131 |

132 | 133 |
134 |
135 | 153 |
154 |
155 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /WebLiteracyBasics-I/template.html: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | Web Literacy Basics | 1.A. NAME OF SECTION: NAME OF ACTIVITY 24 | 25 | 26 | 27 | 28 | 29 | 30 | 51 | 52 | 53 | 54 |
55 | 91 | 92 | 93 | 94 | 95 | 96 |
97 |
98 |
99 | 100 | 101 |

1. Reading the Web

102 |
103 |

Activity X

104 | 105 | 106 |

Made by X and remixed for Clubs by Mozilla. 107 | 108 | 109 |

Learners will ...

110 |
111 |
112 |
113 | 114 | 115 | 116 |
117 |
    118 |
  • 119 |
    120 | 121 | 122 |

    Preparation

    123 |
      124 |
    1. 125 | Do the activity on your own to become familiar with it. 126 |
    2. 127 |
    3. 128 | Complete the pre-activity questionnaire for you and for the learners. 129 |
    4. 130 |
    131 |
    132 |
  • 133 | 134 |
  • 135 |
    136 |
    137 |

    10
    138 | min

    139 |
    140 | 141 | 142 |

    Introduction

    143 | 144 |

    [...]

    145 | 146 |
    147 |
      148 |
    • [...]
    • 149 |
    150 |
    151 | 152 |
    153 |
  • 154 | 155 |
  • 156 |
    157 |
    158 |

    25
    159 | min

    160 |
    161 | 162 | 163 | 164 |

    Main Activity

    165 | 166 |

    [...]

    167 | 168 |
    169 |
      170 |
    • [...]
    • 171 |
    172 |

    173 |
  • 174 | 175 |
  • 176 |
    177 |
    178 |

    10
    179 | min

    180 |
    181 | 182 | 183 |

    Reflection

    184 | 185 |

    [...]

    186 | 187 |
    188 |
189 | 190 | 191 |
192 | 193 | 194 | 195 | 196 | 199 | 200 | 201 | 202 | -------------------------------------------------------------------------------- /WebLiteracyBasics-I/web-chef-example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Chef Recipe Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 |
33 |
    34 |
  1. Introduce yourself to the community discussion forum
  2. 35 |
  3. Tweet a picture of something you made using the hashtag #teachtheweb on Twitter.
  4. 36 |
  5. Join the Webmaker newsgroup and introduce yourself via email.
  6. 37 |
  7. Connect on Google+ and share your thoughts on Connected Learning
  8. 38 |
  9. Visit the Webmaker blog and comment on a post you found interesting.
  10. 39 |
40 |
41 | 42 |
43 |

44 | Reflect on how the Community responds 45 |

46 | 47 | 48 | 49 |

50 | The Mozilla Story made by Mozilla and available under a Creative Commons BY 2.0 license. 51 |

52 | 53 |
54 | 55 |
56 | 57 | 58 | 59 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /WebLiteracyBasics-I/web-chef-recipe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Chef Recipe 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 |
    33 |
  1. Add steps
  2. 34 |
  3. more steps
  4. 35 |
  5. ...
  6. 36 |
37 |
38 | 39 |
40 |

41 | Do you have a video or other media, too!? 42 |

43 | 44 | 45 | 46 |

47 | "For Loop is like no other l@@p" made by Chloe Varelidi and available under a Creative Commons BY-SA 4.0 license. 48 |

49 | 50 |
51 | 52 |
53 | 54 | 55 | 56 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /about/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | 'use strict'; 3 | 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON( 'package.json' ), 6 | less: { 7 | development: { 8 | options: { 9 | paths: [ 'assets/css' ], 10 | compress: true, 11 | sourceMap: true, 12 | sourceMapBasepath: '/', 13 | sourceMapRootpath: '/' 14 | }, 15 | files: { 16 | 'assets/css/style.css': 'assets/less/style.less' 17 | } 18 | }, 19 | dist: { 20 | options: { 21 | paths: [ 'assets/css' ], 22 | compress: true 23 | }, 24 | files: { 25 | 'dist/css/style.css': 'assets/less/style.less' 26 | } 27 | } 28 | }, 29 | copy: { 30 | dist: { 31 | files: [ 32 | {expand: true, src: ['assets/img/**'], dest: 'dist/img/'} 33 | ] 34 | } 35 | }, 36 | autoprefixer: { 37 | main: { 38 | browsers: [ 'last 2 versions' ], 39 | expand: true, 40 | flatten: true, 41 | map: true, 42 | src: 'assets/css/*.css', 43 | dest: 'assets/css' 44 | } 45 | }, 46 | // running `grunt watch` will watch for changes 47 | watch: { 48 | files: [ 'assets/less/*.less' ], 49 | tasks: [ 'less:development', 'autoprefixer' ] 50 | }, 51 | connect: { 52 | server: { 53 | options: { 54 | port: 1111, 55 | useAvailablePort: true 56 | } 57 | } 58 | } 59 | }); 60 | 61 | grunt.loadNpmTasks( 'grunt-contrib-less' ); 62 | grunt.loadNpmTasks( 'grunt-contrib-connect' ); 63 | grunt.loadNpmTasks( 'grunt-autoprefixer' ); 64 | grunt.loadNpmTasks( 'grunt-contrib-watch' ); 65 | grunt.loadNpmTasks( 'grunt-contrib-copy' ); 66 | 67 | grunt.registerTask( 'default', [ 'less:development', 'autoprefixer', 'connect', 'watch' ] ); 68 | grunt.registerTask( 'build', [ 'less:dist', 'copy:dist', 'autoprefixer' ] ); 69 | }; 70 | -------------------------------------------------------------------------------- /about/README.md: -------------------------------------------------------------------------------- 1 | # Webmaker Whitepaper -- Readme 2 | 3 | ## Authorship 4 | 5 | See for more information. 6 | 7 | ## Development 8 | 9 | Make sure to have **grunt** installed globally. 10 | 11 | npm install -g grunt-cli 12 | 13 | Next run `npm install`, followed by `grunt` to get the development server running. 14 | 15 | #### Play nice 16 | 17 | * remove trailing whitespace from files before save 18 | * don't use non-ascii file names 19 | * run `grunt build` before commit (and make sure there are no errors) 20 | 21 | Do all this w/ ease! 22 | 23 | mv .git/hooks/pre-commit.sample .git/hooks/pre-commit 24 | echo "\n# run grunt build before commit, abort if errors\ngrunt" >> .git/hooks/pre-commit 25 | 26 | ## License 27 | ### Code 28 | This Source Code Form is subject to the terms of the Mozilla Public 29 | License, v. 2.0. If a copy of the MPL was not distributed with this 30 | file, You can obtain one at . 31 | 32 | ### Content 33 | 34 | Details to come. 35 | -------------------------------------------------------------------------------- /about/assets/img/2header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/2header.jpg -------------------------------------------------------------------------------- /about/assets/img/3header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/3header.jpg -------------------------------------------------------------------------------- /about/assets/img/4header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/4header.jpg -------------------------------------------------------------------------------- /about/assets/img/5header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/5header.jpg -------------------------------------------------------------------------------- /about/assets/img/amy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/amy.jpg -------------------------------------------------------------------------------- /about/assets/img/andy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/andy.jpg -------------------------------------------------------------------------------- /about/assets/img/appmaker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/appmaker.png -------------------------------------------------------------------------------- /about/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/favicon.ico -------------------------------------------------------------------------------- /about/assets/img/faye.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/faye.jpg -------------------------------------------------------------------------------- /about/assets/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/header.jpg -------------------------------------------------------------------------------- /about/assets/img/model.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/model.jpg -------------------------------------------------------------------------------- /about/assets/img/popcornmaker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/popcornmaker.png -------------------------------------------------------------------------------- /about/assets/img/raj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/raj.jpg -------------------------------------------------------------------------------- /about/assets/img/tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/tab.png -------------------------------------------------------------------------------- /about/assets/img/thimble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/thimble.png -------------------------------------------------------------------------------- /about/assets/img/weblitmap-1.1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/weblitmap-1.1.png -------------------------------------------------------------------------------- /about/assets/img/xraygoggles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/about/assets/img/xraygoggles.png -------------------------------------------------------------------------------- /about/assets/less/style.less: -------------------------------------------------------------------------------- 1 | @import '@{makerstrap-bower-path}/makerstrap/less/build/makerstrap.complete.less'; 2 | @makerstrap-bower-path: './bower_components'; 3 | @font-size-base: 15px; 4 | 5 | body { 6 | background-color: @brand-primary; 7 | background-size: cover; 8 | background-attachment: fixed; 9 | background-position: center; 10 | background-repeat: no-repeat; 11 | background-image: url('../img/header.jpg'); 12 | } 13 | 14 | .navbar-webmaker { 15 | position: relative; 16 | margin-bottom: 0; 17 | 18 | .webmaker-logo { 19 | display: inline-block; 20 | padding: 2px 10px; 21 | margin-top: 8px; 22 | } 23 | 24 | @media (min-width: @screen-sm-min) { 25 | .webmaker-logo { 26 | margin-top: 5px; 27 | } 28 | } 29 | 30 | @media (min-width: @screen-lg-min) { 31 | padding: 12px 0; 32 | height: 90px; 33 | 34 | .webmaker-logo { 35 | margin-top: 0; 36 | padding: 0; 37 | } 38 | 39 | .navbar-nav { 40 | margin-top: 6px; 41 | } 42 | 43 | } 44 | } 45 | 46 | .navbar .nav, 47 | .navbar .nav > li { 48 | float:none; 49 | display:inline-block; 50 | *display:inline; /* ie7 fix */ 51 | *zoom:1; /* hasLayout ie7 trigger */ 52 | vertical-align: top; 53 | } 54 | 55 | .navbar-inner { 56 | text-align:center; 57 | } 58 | 59 | .jumbotron { 60 | margin: 0 auto; 61 | padding-top: 5rem; 62 | padding-bottom: 5rem; 63 | background: transparent; 64 | 65 | .title { 66 | color: @grey; 67 | padding: 0; 68 | } 69 | } 70 | 71 | main { 72 | margin-top: 40rem; 73 | background: @white; 74 | 75 | h2 { 76 | margin-top: 4rem; 77 | } 78 | 79 | p { 80 | line-height: 1.8; 81 | } 82 | 83 | .well { 84 | margin-top: 2rem; 85 | margin-bottom: 2rem; 86 | } 87 | 88 | li { 89 | padding: 0.3em; 90 | } 91 | 92 | footer { 93 | background-color: @lightgrey; 94 | margin-top: 4rem; 95 | padding-bottom: 4rem; 96 | margin-bottom: 0; 97 | font-size: 12px; 98 | z-index: 2; 99 | 100 | h2 { 101 | font-size: 1.8em; 102 | } 103 | } 104 | } 105 | 106 | #webmaker-mentors, #weblitmap { 107 | margin-top: 4rem; 108 | margin-bottom: 4rem; 109 | } 110 | 111 | #weblitmap { 112 | max-width: 640px; 113 | margin: auto; 114 | } 115 | 116 | .webmaker-mentor { 117 | margin-top: 0.4em; 118 | 119 | img { 120 | display: block; 121 | margin: 0.7em auto; 122 | } 123 | 124 | p { 125 | margin-top: 0.7em; 126 | } 127 | 128 | &:first-child { 129 | margin-top: 0; 130 | } 131 | } 132 | 133 | footer.wm-footer { 134 | .footer-links ul { 135 | list-style: none; 136 | } 137 | 138 | background: @brand-secondary; 139 | z-index: 2; 140 | } 141 | 142 | // know more, do more, do better hexagons 143 | .hexagon { 144 | margin-top: 0.24em; 145 | margin-bottom: 0.24em; 146 | width: 176px; 147 | height: 100px; 148 | background-color: #000; 149 | border-color: #000; /* must match background color */ 150 | position: relative; 151 | display: inline-block; 152 | perspective: 1000; 153 | cursor: default; 154 | 155 | &:before { 156 | content: ''; 157 | width: 0; height: 0; 158 | border-bottom: 0.25em solid; 159 | border-color: inherit; 160 | border-left: 0.44em solid transparent; 161 | border-right: 0.44em solid transparent; 162 | position: absolute; 163 | top: -0.25em; 164 | left: 0; 165 | } 166 | 167 | &:after { 168 | content: ''; 169 | width: 0; 170 | position: absolute; 171 | bottom: -0.25em; 172 | left: 0; 173 | border-top: 0.25em solid; 174 | border-color: inherit; 175 | border-left: 0.44em solid transparent; 176 | border-right: 0.44em solid transparent; 177 | } 178 | 179 | .content { 180 | font-size: @font-size-base; 181 | display: block; 182 | position: absolute; 183 | top: 0; 184 | left: 0; 185 | width: 176px; 186 | height: 100px; 187 | 188 | .header { 189 | font-weight: 300; 190 | font-size: 1.4em; 191 | margin-top: 0.7em; 192 | } 193 | 194 | p { 195 | line-height: 1.2; 196 | } 197 | } 198 | 199 | // colors! 200 | @hex-blue: @brand-secondary; 201 | @hex-white: @lightgrey; 202 | @hex-yellow: @darkyellow; 203 | &.white { 204 | background: @hex-white; 205 | border-color: @hex-white; 206 | color: @hex-blue; 207 | 208 | .content { 209 | background: @hex-white; 210 | } 211 | } 212 | 213 | &.blue { 214 | background: @hex-blue; 215 | border-color: @hex-blue; 216 | color: @white; 217 | 218 | .content { 219 | background: @hex-blue; 220 | } 221 | } 222 | 223 | &.yellow { 224 | background: @hex-yellow; 225 | border-color: @hex-yellow; 226 | color: @white; 227 | 228 | .content { 229 | background: @hex-yellow; 230 | } 231 | } 232 | } 233 | 234 | // webmaker tools 235 | 236 | #webmaker-tools-descriptions { 237 | .col-sm-6 { 238 | 239 | & > img:first-child { 240 | max-height: 5em; 241 | margin: 1rem auto; 242 | display: block; 243 | } 244 | 245 | & > h4, & > a { 246 | text-align: center; 247 | display: block; 248 | margin: auto; 249 | } 250 | 251 | & > a { 252 | margin-bottom: 1rem; 253 | } 254 | } 255 | 256 | } 257 | 258 | // page menu 259 | #page-menu { 260 | margin-top: 40px; 261 | line-height: 1.8; 262 | font-size: 1.6rem; 263 | z-index: 1; 264 | 265 | &.affix { 266 | position: fixed; 267 | top: 0px; 268 | } 269 | &.affix-top { 270 | position: absolute; 271 | } 272 | &.affix-bottom { 273 | position: absolute; 274 | } 275 | 276 | li { 277 | background: none; 278 | transition: opacity 0.3s ease 0s; 279 | opacity: 0.5; 280 | 281 | &:hover, 282 | &.active { 283 | opacity: 1; 284 | background: none; 285 | 286 | & > a, 287 | & > a:focus, 288 | & > a:hover, 289 | & > a:active, 290 | & > a:visited { 291 | background: none; 292 | } 293 | } 294 | } 295 | } 296 | 297 | // tabzilla hacks 298 | #tabzilla-panel.tabzilla-closed.open { 299 | box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2); 300 | } 301 | #tabzilla { 302 | background: url(../img/tab.png) no-repeat scroll left top / 150px auto transparent; 303 | position: absolute; 304 | top: -12px; 305 | right: 5px; 306 | } 307 | -------------------------------------------------------------------------------- /about/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webmaker-whitepaper", 3 | "author": "@fuzzyfox", 4 | "version": "0.0.4", 5 | "private": true, 6 | "dependencies": { 7 | "makerstrap": "mozilla/makerstrap#~0.1.8" 8 | }, 9 | "ignore": [ 10 | "node_modules/", 11 | "dist/", 12 | "Gruntfile.js", 13 | "server.js", 14 | "package.json" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /about/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webmaker-whitepaper", 3 | "author": "William Duyck ", 4 | "version": "0.0.4", 5 | "scripts": { 6 | "postinstall": "bower install && cd ./bower_components/makerstrap && bower install" 7 | }, 8 | "devDependencies": { 9 | "grunt-contrib-watch": "^0.6.1", 10 | "grunt": "^0.4.4", 11 | "grunt-autoprefixer": "^0.7.2", 12 | "grunt-contrib-connect": "^0.7.1", 13 | "grunt-contrib-less": "^0.11.0", 14 | "grunt-contrib-copy": "^0.5.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /about/thanks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Our Community RULES!! 13 | 14 | 15 | 16 | 17 | mozilla 18 |
19 |
20 |

Mozilla Learning Networks: Community

21 |

The Clubs initiative wouldn't be possible without the loving collaborative work of a number of individuals in the Mozilla community. We would like to give a special shout-out to the people listed below.

22 |
23 |
24 | 25 |
26 | 27 |

Amazing people (in no particular order):

28 |
    29 |
  • Andrea Ellis, Kansas City Library
  • 30 |
  • Leslie Scott, aSTEAM Village
  • 31 |
  • Lina Kim, Diana Lee, and Ab Velasco, Toronto Public Library
  • 32 |
  • Justin Hoenke, Chattanooga Public Library
  • 33 |
  • Meredith Summs, MOUSE
  • 34 |
  • Gina Tesoriero, NYC Department of Education
  • 35 |
  • Maurya Couvares, ScriptED
  • 36 |
  • Nivedita Lane, Boys and Girls Clubs of Canada
  • 37 |
  • Heather Schneider, Shedd Aquarium
  • 38 |
  • Christina Cantrill, National Writing Project
  • 39 |
  • Dan Gilbert, Afterschool Alliance
  • 40 |
  • Jess Weichler, Makerbox
  • 41 |
  • Su Adams, Staplehurst School
  • 42 |
  • Steven Flower, CoderDojo Manchester
  • 43 |
  • Jonathan Prozzi, Digital Harbor
  • 44 |
  • Ellie Mitchell, Maryland Afterschool Network
  • 45 |
  • Emma Dicks, Innovate the Cape
  • 46 |
  • Mick Fuzz, Clearer Channel
  • 47 |
  • Emma Irwin, Mozilla Community Education
  • 48 |
  • Vineel Reddy, Gauthamraj Elango, Ankit Gadgil, Sayak Sarkar, Galaxy Kadiyala, Priyanka Naj, Mozilla India
  • 49 |
  • San Emmanuel James and Lawrence Kisuuki, Mozilla Uganda
  • 50 |
  • Faye Tandog, Mozilla Philippines
  • 51 |
  • Chad Sansing, BETA Academy
  • 52 |
  • Kim Wilkens, St. Anne's-Belfield School
  • 53 |
  • Ian O'Byrne, University of New Haven
  • 54 |
  • Alvar Maciel, Buenos Aires educator
  • 55 |
  • Mikko Kontto, The English School in Helsinki
  • 56 |
  • Greg McVerry, Southern Connecticut State University
  • 57 |
  • Luis Sanchez, Mozilla Mexico
  • 58 |
  • Roz Hussin, University of Nebraska-Lincoln
  • 59 |
  • Sophia Koniarska, Think Big
  • 60 |
  • Pete O'Shea, CoderDojo
  • 61 |
  • Elijah van der Giessen, NetSquared
  • 62 |
  • Chris Mills, Mozilla Developer Network
  • 63 |
  • Kathryn Barrett, Girls Learning Code
  • 64 |
  • Elio Qoshi, Webmacademy Albania
  • 65 |
  • Andre Garzia, Rio LAN House project
  • 66 |
  • Simona Ramkisson, Amira Dhalla, Doug Belshaw, Lainie DeCoursy, Laura Hilliger, An-Me Chung and Chris Lawrence, Mozilla Foundation 67 |
  • 68 |
  • Karen Smith, Hive Toronto
  • 69 |
  • Stacy Martin, Mozilla Privacy
  • 70 |
71 |
72 | 73 |
74 | Get started with 75 |
76 | 77 | 78 | -------------------------------------------------------------------------------- /assets/webmaker-mobile-curriculum-handout.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/assets/webmaker-mobile-curriculum-handout.pdf -------------------------------------------------------------------------------- /images/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/arrow-down.png -------------------------------------------------------------------------------- /images/assets/advocate-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/advocate-tile.png -------------------------------------------------------------------------------- /images/assets/background-tiles.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/background-tiles.ai -------------------------------------------------------------------------------- /images/assets/background01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/background01.png -------------------------------------------------------------------------------- /images/assets/club-proposal-assets.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/club-proposal-assets.ai -------------------------------------------------------------------------------- /images/assets/club-proposal-assets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/club-proposal-assets.png -------------------------------------------------------------------------------- /images/assets/collaborate-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/collaborate-tile.png -------------------------------------------------------------------------------- /images/assets/coordinate-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/coordinate-tile.png -------------------------------------------------------------------------------- /images/assets/deliberate-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/deliberate-tile.png -------------------------------------------------------------------------------- /images/assets/krakenheader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/assets/krakenheader.png -------------------------------------------------------------------------------- /images/business.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/business.png -------------------------------------------------------------------------------- /images/cafe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/cafe.jpg -------------------------------------------------------------------------------- /images/check-webmaker-project.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/check-webmaker-project.jpg -------------------------------------------------------------------------------- /images/checker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/checker.png -------------------------------------------------------------------------------- /images/chef-in-action.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/chef-in-action.jpg -------------------------------------------------------------------------------- /images/chef-man.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/chef-man.jpg -------------------------------------------------------------------------------- /images/culture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/culture.png -------------------------------------------------------------------------------- /images/datatrail-badge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/datatrail-badge.jpg -------------------------------------------------------------------------------- /images/design-webmaker-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/design-webmaker-1.jpg -------------------------------------------------------------------------------- /images/design-webmaker-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/design-webmaker-2.jpg -------------------------------------------------------------------------------- /images/designing-webmaker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/designing-webmaker.jpg -------------------------------------------------------------------------------- /images/explore-webmaker-discover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/explore-webmaker-discover.jpg -------------------------------------------------------------------------------- /images/explore-webmaker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/explore-webmaker.jpg -------------------------------------------------------------------------------- /images/hackthenews-action.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/hackthenews-action.jpg -------------------------------------------------------------------------------- /images/hackthenews.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/hackthenews.png -------------------------------------------------------------------------------- /images/html-puzzleboxes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/html-puzzleboxes.jpg -------------------------------------------------------------------------------- /images/ip-tracer-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/ip-tracer-01.jpg -------------------------------------------------------------------------------- /images/ip-tracer-badge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/ip-tracer-badge.jpg -------------------------------------------------------------------------------- /images/kraken-action-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/kraken-action-01.jpg -------------------------------------------------------------------------------- /images/kraken-action-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/kraken-action-02.jpg -------------------------------------------------------------------------------- /images/kraken-action-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/kraken-action-03.png -------------------------------------------------------------------------------- /images/kraken-finished-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/kraken-finished-example.jpg -------------------------------------------------------------------------------- /images/kraken-in-progress.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/kraken-in-progress.jpg -------------------------------------------------------------------------------- /images/legitometer-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/legitometer-header.png -------------------------------------------------------------------------------- /images/legitometer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/legitometer.png -------------------------------------------------------------------------------- /images/lightbeam-clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/lightbeam-clear.png -------------------------------------------------------------------------------- /images/make-webmaker-project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/make-webmaker-project-1.jpg -------------------------------------------------------------------------------- /images/newshack-example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/newshack-example-2.png -------------------------------------------------------------------------------- /images/newshack-example-animated.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/newshack-example-animated.gif -------------------------------------------------------------------------------- /images/newshack-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/newshack-example.png -------------------------------------------------------------------------------- /images/octocat-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/octocat-small.png -------------------------------------------------------------------------------- /images/phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/phone.png -------------------------------------------------------------------------------- /images/pingkong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/pingkong.png -------------------------------------------------------------------------------- /images/plan-webmaker-project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/plan-webmaker-project-1.jpg -------------------------------------------------------------------------------- /images/privacycoach-badge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/privacycoach-badge.jpg -------------------------------------------------------------------------------- /images/provide-webmaker-feedback.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/provide-webmaker-feedback.jpg -------------------------------------------------------------------------------- /images/science.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/science.png -------------------------------------------------------------------------------- /images/share-webmaker-projects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/share-webmaker-projects.jpg -------------------------------------------------------------------------------- /images/sketch-webmaker-project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/sketch-webmaker-project-1.jpg -------------------------------------------------------------------------------- /images/square-kraken.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/square-kraken.png -------------------------------------------------------------------------------- /images/square-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/square-search.png -------------------------------------------------------------------------------- /images/story-of-us-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/story-of-us-01.jpg -------------------------------------------------------------------------------- /images/story-of-us-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/story-of-us-02.jpg -------------------------------------------------------------------------------- /images/story-of-us-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/story-of-us-03.jpg -------------------------------------------------------------------------------- /images/story-of-us-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/story-of-us-04.jpg -------------------------------------------------------------------------------- /images/story-of-us-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/story-of-us-05.jpg -------------------------------------------------------------------------------- /images/trainingheader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/trainingheader.png -------------------------------------------------------------------------------- /images/web-chef-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/web-chef-01.jpg -------------------------------------------------------------------------------- /images/web-chef-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/web-chef-02.jpg -------------------------------------------------------------------------------- /images/web-chef-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/web-chef-03.jpg -------------------------------------------------------------------------------- /images/web-chef-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/web-chef-04.jpg -------------------------------------------------------------------------------- /images/web-chef-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/web-chef-05.jpg -------------------------------------------------------------------------------- /images/web-chef-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozilla/webmaker-curriculum/a6e5e2b0cbb5793719e5e63557bc3133d1e4a275/images/web-chef-project.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | Mozilla Learning Curriculum 14 | 15 | 16 | 17 | mozilla 18 | 19 |
20 |
21 |

Mozilla Learning Networks: Curriculum

22 | 23 |

Here you'll find our curriculum production queue. We're testing and packaging content for sustaining local learning using Mozilla's pedagogy. Learn more about Mozilla Clubs and how we #TeachTheWeb

24 |
25 |
26 | 27 |
28 |

Production Notes

29 |

The Mozilla Learning Networks Team is producing two streams of curriculum, the Web Literacy stream and the Teach Like Mozilla stream. The first is designed to cover the skills and competencies required to read, write and participate on the web, and the Teach Like Mozilla stream aims to deliver leadership skills and competencies needed for teaching, organizing and sustaining learning for the Web.

30 | 31 |

We discuss production, share insights, work through issues using our Github repo as an issue tracker, and you're welcome to get involved. We also gather to discuss curriculum on our community forum, Discourse. If we can be of service, don't hesitate to contact us!

32 | 33 |

Web Literacy Queue

34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 53 | 54 | 57 | 58 | 61 | 62 | 65 | 66 | 67 | 68 | 71 | 72 | 75 | 76 | 79 | 80 | 83 | 84 | 85 | 86 | 89 | 90 | 93 | 94 | 97 | 98 | 101 | 102 | 103 | 104 | 107 | 108 | 111 | 112 | 115 | 116 | 119 | 120 | 121 |
NameTimelineCompetenciesStatus
51 | Mobile Storytelling with the Android Webmaker App 52 | 55 | Q3 2015 56 | 59 | Web Mechanics, Accessibility, Designing, Sharing 60 | 63 | 64 |
69 | Web Literacy Basics II 70 | 73 | Q4 2015 74 | 77 | Web Mechanics, Composing, Remixing, Designing, Coding/Scripting, Accessibility, Sharing, Participation, Open Practices 78 | 81 | 82 |
87 | Intro to Intermediate Web Development 88 | 91 | Q1 2016 92 | 95 | Navigation, Web Mechanics, Credibility, Search, Security, Composing, Remixing, Coding?Scripting, Designing, Accessibility, Collaboration, Privacy, Open Practices 96 | 99 | 100 |
105 | http://chadsansing.github.io/curriculum-testing/webmaker-curriculum/QuackingJavascript/index.html 106 | 109 | Q2 2016 110 | 113 | Navigation, Web Mechanics, Composing, Remixing, Designing, Accessibility, Collaborating, Participation 114 | 117 | 118 |
122 | 123 |

Teach Like Mozilla Queue

124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 143 | 144 | 147 | 148 | 151 | 152 | 155 | 156 | 157 | 158 | 161 | 162 | 165 | 166 | 169 | 170 | 173 | 174 | 175 | 176 | 179 | 180 | 183 | 184 | 187 | 188 | 191 | 192 | 193 | 194 | 197 | 198 | 201 | 202 | 205 | 206 | 209 | 210 | 211 | 212 |
NameTimelineCompetenciesStatus
141 | Leveraging Open Practices for Leadership 142 | 145 | Q4 2015 146 | 149 | Open Practices, Promoting Action, Working Locally, Mobilizing Community, Building Partnerships 150 | 153 | 154 |
159 | Leading Online Efforts to Scale & Spread 160 | 163 | Q1 2016 164 | 167 | Promoting Action, Mobilizing Community, Building Partnerships 168 | 171 | 172 |
177 | Leading Face-to-Face Professional Development for Scale & Spread 178 | 181 | Q1 2016 182 | 185 | Promoting Action, Working Locally, Mobilizing Community, Building Partnerships 186 | 189 | 190 |
195 | Thought Leadership for Scale & Spread 196 | 199 | Q2 2016 200 | 203 | Open Practices, Promoting Action, Mobilizing Community 204 | 207 | 208 |
213 | 214 |
215 |

Learn more about how you can teach others to read, write, and participate on the Web at Mozilla Learning Networks.

216 |
217 |
218 | 219 | 220 | -------------------------------------------------------------------------------- /javascripts/scale.fix.js: -------------------------------------------------------------------------------- 1 | fixScale = function(doc) { 2 | 3 | var addEvent = 'addEventListener', 4 | type = 'gesturestart', 5 | qsa = 'querySelectorAll', 6 | scales = [1, 1], 7 | meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; 8 | 9 | function fix() { 10 | meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; 11 | doc.removeEventListener(type, fix, true); 12 | } 13 | 14 | if ((meta = meta[meta.length - 1]) && addEvent in doc) { 15 | fix(); 16 | scales = [.25, 1.6]; 17 | doc[addEvent](type, fix, true); 18 | } 19 | 20 | }; -------------------------------------------------------------------------------- /params.json: -------------------------------------------------------------------------------- 1 | {"name":"Webmaker-curriculum","tagline":"Experimenting with a potential curriculum for Webmaker Clubs","body":"#Web Literacy Clubs curriculum (alpha)\r\n\r\n##Meta\r\n\r\nIn 2015, Mozilla is working with the community on [Web Literacy Clubs](https://wiki.mozilla.org/Webmaker/2015/Mentors/Clubs) (name TBC). The idea is to address the following questions:\r\n\r\n* **higher quality teaching and learning.** How can the teaching and learning experience be improved for mentors and learners?\r\n* **local community networks.** How can local learning communities grow stronger and more networked through Webmaker?\r\n* **contributor retention.** How can mentors be encouraged engage with Webmaker longer?\r\n\r\nThere will be a number of different kinds of clubs, all of which require initial guidance. The draft of a curriculum arc for clubs can be found below:\r\n\r\n\"Curriculum\r\n\r\n\r\nIntroduction\r\n-----\r\n\r\nTeach the Web by helping your learners make, tinker, explore and play. Your goal is to give participants skills and exposure, experience and access to web making tools and knowledge. At the end of this curricular arc, learners will understand that they can be expressive on the web, and they will be armed with the tools and knowledge to build the web we all want. Learn more about the important concept of [Web Literacy](https://mozilla.github.io/webmaker-whitepaper/).\r\n\r\nSpecial knowledge about the web is not required to run this in your club. The only thing your students need to be able to do is open a web browser that’s connected to the internet.\r\nModule Instructions\r\nEach Module has a series of units, designed to be completed in order. A unit includes 45 minutes of programming for your Webmaker Club. Modules also have an “Extension”, which details an optional unit for clubs that have more time to spend on a particular theme.\r\n\r\nOnce you’ve run through the units included in each module, your learners will have enough evidence to submit applications for achievements included under “Learning Objectives and Assessment”. At the end of each module, remind your participants of the achievements they should apply for.\r\n\r\nOnce you’ve run through the units included in each module, your learners will have enough evidence to submit applications for achievements included under “Learning Objectives and Assessment”. At the end of each module, remind your participants of the achievements they should apply for.\r\nChoose your Club Archetype\r\n\r\n\r\n\r\n##Types of Webmaker Club\r\n\r\n\r\nThere are four types of Webmaker club. If you’re not affiliated with an organization, then yours is probably a ‘Community Club’. \r\n\r\n\"Webmaker\r\n\r\n###GLAM clubs\r\n\r\nGLAM stands for “Galleries, Libraries, Archives and Museums”. These institutions generally have a bit of budget to run long-tail programming in an informal educational environment. The makeup of these programs depend on the institution, but generally audiences are first-come, first-serve and may include a large percentage of new learners at each session. \r\n\r\n###After School clubs\r\nAfter School clubs are optional extended learning programming that take place directly after a school day. Formal educators prepare interest-based additional programming that students choose to participate in at the beginning of an academic year or semester. These programs likely attract the same group of learners over and over, so the club lead can prepare content that builds off the previous sessions learning objectives.\r\n\r\n###Community clubs\r\nA community club attracts audiences who are likely to be as interested in social aspects of the club dynamic as the learning objectives. These types of clubs attract a base of members sprinkled with regular new participants, so programming often needs to split the difference between repeat learners and new members. Mozillians might see this type of club as a regular community meetup that focuses on learning in addition to community organizing.\r\n\r\n###University clubs\r\nThis kind of club tends to aim it’s programming to helping participants gain real world experience to extend the theoretical learning the university provides. Often these clubs are like After School clubs in that participants stick around for an academic year or semester. However this club can also provide the social aspect of a community club, so the type of programming determines the culture of the club. \r\n\r\n*Choosing a club type reveals general resources for each type, getting permission, funding, space tips, etc.*\r\n\r\n\r\n#What's your persona?\r\n![Personas](https://i.imgur.com/pfGNVZ5.png)\r\n\r\n*We would love to know what kind of user stories are out there, so if you're using this curriculum, remixing it, inspired by it or otherwise reading this, let us know by filing [a GitHub issue](https://github.com/mozilla/webmaker-curriculum/issues) or joining us in [our community forum](http://discourse.webmaker.org). We're eager for your feedback!*\r\n\r\n\r\n#Contents\r\n\r\n1. [Web Literacy Basics I](https://github.com/mozilla/webmaker-curriculum/blob/master/WebLiteracyBasics-I/LearningObjectives.md)\r\n2. [Web Literacy Basics II](https://github.com/mozilla/webmaker-curriculum/blob/master/WebLiteracyBasics-II/LearningObjectives.md) \r\n\r\n#Remix this!\r\n\r\n\r\nCreate your own version of the curriculum by forking this repository:\r\n\r\n1. Create a GitHub account and login\r\n2. Hit the 'Fork' button to the top-right of this page\r\n3. Edit the repository for your own needs\r\n\r\nFor the third step, you can edit each document in-situ on GitHub (easiest), or you can use the native client (slightly trickier, but better results). Either way, you'll need to use [Markdown](http://daringfireball.net/projects/markdown/) and/or HTML to format the pages. \r\n\r\nIf you have changes to suggest to *this* repository, please fork it and then submit a pull request. Guidance on how to do this can be found in the [GitHub help section](https://help.github.com/articles/using-pull-requests/).\r\n\r\n-----\r\n\r\n*Taken from [http://mzl.la/club_curriculum](http://mzl.la/club_curriculum). Click on the 'watch' button to be informed of updates!*\r\n\r\n

\"Creative
This work is licensed under a Creative Commons Attribution 4.0 International License.

\r\n\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | } 4 | 5 | h3 { 6 | font-size: 35px; 7 | font-weight: 300; 8 | margin-top: 50px; 9 | margin-bottom: 20px; 10 | } 11 | 12 | footer { 13 | text-align: right; 14 | margin-top: 40px; 15 | margin-bottom: 40px; 16 | } 17 | 18 | .table > thead > tr > th, 19 | .table > tbody > tr > th, 20 | .table > tfoot > tr > th, 21 | .table > thead > tr > td, 22 | .table > tbody > tr > td, 23 | .table > tfoot > tr > td { 24 | padding: 10px 15px; 25 | } 26 | 27 | .jumbotron { 28 | text-align: center; 29 | padding-top: 80px; 30 | padding-bottom: 80px; 31 | margin-bottom: 0; 32 | } 33 | 34 | .jumbotron h1 { 35 | margin-top: 10px; 36 | } 37 | 38 | .jumbotron p { 39 | line-height: 1.6; 40 | } 41 | 42 | @media (min-width:1200px) { 43 | .container { 44 | width:1100px 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /stylesheets/print.css: -------------------------------------------------------------------------------- 1 | @import url('https://stuff.webmaker.org/makerstrap/latest/makerstrap.complete.min.css') print; 2 | @media print { 3 | 4 | img { 5 | max-width: 300px; 6 | } 7 | 8 | @page { 9 | size:85%; 10 | margin: .5cm; 11 | } 12 | 13 | 14 | body { 15 | font: 11pt; 16 | line-height: 1.4; 17 | width:90%; 18 | margin:0px; 19 | } 20 | 21 | ul li{ 22 | list-style: none; 23 | margin:none; 24 | padding:none; 25 | } 26 | 27 | .agenda > ul > li > div { 28 | padding: 0px 0px; 29 | } 30 | 31 | .agenda{ 32 | padding:0; 33 | margin:0; 34 | } 35 | 36 | h1 { 37 | font-size: 18pt; 38 | font-weight:bold; 39 | } 40 | 41 | h2 { 42 | font-size: 14pt; 43 | margin-top: 25px; 44 | } 45 | 46 | .aside h2 { 47 | font-size: 18pt; 48 | } 49 | 50 | video, iframe, embed, object, .time{ 51 | display:none; 52 | } 53 | 54 | button:after{ 55 | word-wrap: break-word; 56 | } 57 | 58 | a:after { 59 | content: " (" attr(href) ")"; 60 | font-size: 80%; 61 | color:#333; 62 | } 63 | 64 | p a { 65 | word-wrap: break-word; 66 | } 67 | 68 | p{ 69 | width:85%; 70 | } 71 | .aside { 72 | border-top: 1px solid #bbb; 73 | margin-top: 30px; 74 | display: block; 75 | } 76 | 77 | .image{ 78 | width:20%; 79 | } 80 | 81 | .attribution{ 82 | display:none; 83 | } 84 | 85 | .wrapper{ 86 | display:table; 87 | width:85%; 88 | } 89 | .main div.text-light{ 90 | display:table-header-group; 91 | } 92 | .aside{ 93 | display: table-footer-group; 94 | } 95 | .main .agenda{ 96 | display:table-footer-group; 97 | } 98 | 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /stylesheets/styles.css: -------------------------------------------------------------------------------- 1 | .queue { 2 | max-width:100%; 3 | } 4 | 5 | .wrapper { 6 | display: -webkit-box; 7 | display: -ms-flexbox; 8 | display: -webkit-flex; 9 | display: flex; 10 | -webkit-flex-flow: row wrap; 11 | flex-flow: row wrap; 12 | margin-left:auto; 13 | margin-right:auto; 14 | max-width:85%; 15 | } 16 | 17 | .wrapper > * { 18 | flex: 1 100%; 19 | -ms-flex: 1 100%; 20 | -webkit-flex: 1 100%; 21 | } 22 | 23 | .footer { 24 | background: #eee; 25 | min-height:55px; 26 | text-align: right; 27 | padding:20px 0px; 28 | } 29 | 30 | .footer a:link{ 31 | float:right; 32 | } 33 | 34 | .main { 35 | text-align: left; 36 | background: white; 37 | } 38 | 39 | hgroup{ 40 | padding:20px 50px 0px 50px; 41 | } 42 | 43 | .main div.line{ 44 | background-color:#3fb58e; 45 | height: 55px; 46 | padding:0px 0px 5px 0px; 47 | } 48 | 49 | .line p, .agenda p{ 50 | font-weight: 300; 51 | } 52 | 53 | .line p{ 54 | padding:11px 50px; 55 | color:white; 56 | margin-left:auto; 57 | margin-right:auto; 58 | width:100%; 59 | } 60 | .aside { 61 | background: #013E5F; 62 | width:5%; 63 | padding:0; 64 | color:white; 65 | font-size: 1.3em; 66 | 67 | } 68 | 69 | .aside img{ 70 | width:100%; 71 | } 72 | 73 | .attribution { 74 | bottom: 10px; 75 | color: #eee; 76 | opacity: 0.5; 77 | position: relative; 78 | top: -30px; 79 | transition: all 0.2s ease 0s; 80 | float: right; 81 | right: 15px; 82 | } 83 | 84 | .license a:link{ 85 | float:left; 86 | } 87 | 88 | .goals{ 89 | padding:10px 20px; 90 | } 91 | 92 | .goals ul, .literacy{ 93 | margin-bottom:10%;; 94 | } 95 | 96 | .goals ul, .agenda ul{ 97 | padding-left:0; 98 | 99 | } 100 | 101 | .agenda>ul>li>div, footer { 102 | padding:20px 50px; 103 | } 104 | 105 | .goals ul li, .goals p{ 106 | list-style-position:inside; 107 | list-style-type: square; 108 | font-weight:300; 109 | font-size:.9em; 110 | 111 | } 112 | 113 | .agenda>ul>li{ 114 | list-style-position:inside; 115 | list-style-type: none; 116 | border-bottom: 1px solid #eee; 117 | } 118 | 119 | .agenda ul li ul{ 120 | padding-left:10px;} 121 | 122 | .time{ 123 | width:60px; 124 | height:60px; 125 | -webkit-border-radius: 50%; 126 | border-radius: 50%; 127 | display: inline-block; 128 | border: 2px solid #3fb58e; 129 | float:right; 130 | padding:0; 131 | } 132 | 133 | .time p{ 134 | font-weight: 300; 135 | text-align: center; 136 | font-size: 1.3em; 137 | line-height: 115%; 138 | margin-top:10%; 139 | } 140 | 141 | hr { 142 | color: #FF4E1F; 143 | background: #FF4E1F; 144 | width: 75%; 145 | height: 5px; 146 | } 147 | 148 | .sessions { 149 | background: #FFF1C5; 150 | } 151 | 152 | .start { 153 | margin-top:10%; 154 | text-align: right; 155 | } 156 | 157 | .coming-soon { 158 | background-color:#F5F5F5; 159 | border: 5px dashed #E3EAEE; 160 | } 161 | 162 | .img-example { 163 | width: 100%; 164 | padding-bottom: 7px; 165 | } 166 | 167 | figcaption{ 168 | font-size:.8em; 169 | font-weight: 300; 170 | font-style: italic; 171 | color: #4d4e53; 172 | padding-bottom:2%; 173 | float:right; 174 | } 175 | 176 | .img-thumbnail { 177 | width: 30%; 178 | float:left; 179 | } 180 | 181 | .literacy-color-credibility, .literacy-color-search, .literacy-color-composing{ 182 | color:white; 183 | } 184 | 185 | .literacy-color-credibility{ 186 | background-color: #FF5984; 187 | } 188 | .literacy-color-search{ 189 | background-color: #fe4040; 190 | } 191 | 192 | .literacy-color-composing{ 193 | background-color: #01bc85; 194 | } 195 | .literacy-color-practices{ 196 | background-color: #0097d6; 197 | } 198 | 199 | .literacy-color-webmechanics{ 200 | background-color: #FF6969; 201 | color: white; 202 | } 203 | 204 | .literacy-color-navigation{ 205 | background-color: #FF4E1F; 206 | color: white; 207 | } 208 | 209 | .literacy-color-remixing{ 210 | background-color: #00CEB8; 211 | color: white; 212 | } 213 | 214 | .literacy-color-open-practices{ 215 | background-color: #0097d6; 216 | color: white; 217 | } 218 | 219 | .literacy-color-sharing{ 220 | background-color: #739ab1; 221 | color: white; 222 | } 223 | 224 | .literacy-color-community-participation{ 225 | background-color: #63cfea; 226 | color: white; 227 | } 228 | 229 | .literacy-color-collaborating{ 230 | background-color: #506b7b; 231 | color: white; 232 | } 233 | .literacy-color-privacy{ 234 | background-color: #00bad6; 235 | color: white; 236 | } 237 | .literacy-color-security{ 238 | background-color: #ff004e; 239 | color: white; 240 | } 241 | .literacy-color-designing{ 242 | color: white; 243 | } 244 | 245 | 246 | .socialBtns { 247 | float:right; 248 | width:120px; 249 | } 250 | 251 | @media all and (min-width: 600px) { 252 | .aside { 253 | flex: 1 auto; 254 | -ms-flex: 1 auto; 255 | -webkit-flex: 1 auto; 256 | } 257 | } 258 | 259 | @media all and (min-width: 800px) { 260 | .main { 261 | flex: 3 0px; 262 | -ms-flex: 3 0px; 263 | -webkit-flex: 3 0px; 264 | } 265 | .aside-1 { order: 1; } 266 | .main { order: 2; } 267 | .footer { order: 3; } 268 | } 269 | 270 | body { 271 | padding: 2em; 272 | background-color:#f1f1f1; 273 | } 274 | .leadTime { 275 | background-color:#3fb58e; 276 | padding:5px; 277 | text-align:center; 278 | color:white; 279 | } 280 | 281 | .small{ 282 | font-style: italic; 283 | color: #FFF; 284 | padding-bottom: 10%; 285 | } 286 | .exampleIcon{ 287 | float:left; 288 | margin-right:2%; 289 | width: 125px; 290 | clear: both; 291 | } 292 | --------------------------------------------------------------------------------