Remix the Web! Using Mozilla Webmaker for Library Workshops & Programming

Presented by Tamarack Hockin (@tamahoc) and myself for the Education Institute. Full notes: http://wp.me/pHQ83-Wv
--
Learn about the Mozilla Webmaker Suite, an online set of tools to make, edit, and remix webpages and videos. Webmaker is great for teaching users, staff, and yourself how to build and interact with some of the Web's fundamentals-- including HTML, CSS, Javascript, and web literacy concepts.

Transcript

1. Remix the Web! Using Mozilla
   Webmaker for Library Workshops
   & Programming
   Cynthia Ng / BC Libraries Cooperative / @TheRealArty
   Tamarack Hockin / Surrey Public Library / @tamahoc
   

   View Slide

2. Part 1: Webmaker Tools
   ● Introduction
   ● The Tools
   ● Why Webmaker?
   Part 2: Webmaker in the Wild
   ● Library Case Studies
   ● Participants & Facilitation
   ● Selling Webmaker
   Part 3: Wrap Up & Next Steps
   ● Training & Documentation
   ● Demo (if time permits)
   ● Q & A
   Outline
   

   View Slide

3. Introduction
   ● teach, learn, and share
   ● global
   ● open source, open discussions
   ● community involvement
   ● share and remix
   

   View Slide

4. The Tools
   

   View Slide

5. X-Ray Goggles
   ● inspect the blocks that make up a webpage
   ● “hack” the page by inserting or changing
   o text
   o images
   o colours
   o etc.
   

   View Slide

6. Remixing the Goggles Webpage
   

   View Slide

7. Remix of the Real Women of Canada website
   

   View Slide

8. Thimble
   ● create webpages
   ● HTML & CSS editor
   ● instant preview
   ● responsive help
   

   View Slide

9. Remixing “Make a Beautiful Animated Poem”
   

   View Slide

10. Popcorn Maker
    ● online video editor
    ● pull in
    o videos
    o images
    o sounds
    o google maps
    ● add links
    

    View Slide

11. Remixing “Animated Music Video”
    

    View Slide

12. Appmaker
    ● newest tool
    ● use preset bricks
    ● make them interact
    ● works in various browsers desktop & mobile
    

    View Slide

13. Remixing “Music App”
    

    View Slide

14. Why Webmaker?
    ● fully web based, no installation necessary
    ● free
    ● lots of resources
    ● no experience necessary
    ● fun!
    

    View Slide

15. Remix!
    

    View Slide

16. Webmaker in the wild...
    

    View Slide

17. Program: Spring Break
    

    View Slide

18. Program: Summer Camp
    

    View Slide

19. ● Program is adjustable
    ● Embrace chaos
    ● Learning styles vary by age group
    Making Adjustments
    

    View Slide

20. Hello HTML World!
    *from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
    

    View Slide

21. An Easy Sell
    ✓Rewarding for staff
    ✓Wide appeal
    ✓Supports digital
    literacy & citizenship
    ✓Cost effective
    

    View Slide

22. Training & Documentation
    ● Gallery with lots of makes with instructions
    built-in
    ● Search for other makes and teaching kits
    ● Resources including the Web Literacy Map
    ● Badges
    ● MOOC #teachtheweb
    ● Events
    ● Mentor Network and other networks
    

    View Slide

23. Resources
    - Webmaker
    http://webmaker.org
    - Webmaker Wiki for Teachers
    https://wiki.mozilla.org/Webmaker/Teach/WebmakingResources
    - HTML Introductions
    http://www.w3schools.com/tags/
    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
    - T. Hockin Program Plan
    https://db.tt/Y0IEHMbU [docx] https://db.tt/hIBfOYGY [PDF]
    - SL Makers Camp webpage
    https://slmakers.makes.org/thimble/LTEwMDAwNzY4MA==/sl-makers-tmc2014
    - Teach the Web Monthly Calls
    https://wiki.mozilla.org/Webmaker/TeachTheWeb/Calls
    

    View Slide