Remix the Web! Using Mozilla
Webmaker for Library Workshops
& Programming
Cynthia Ng / BC Libraries Cooperative / @TheRealArty
Tamarack Hockin / Surrey Public Library / @tamahoc
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Introduction
● teach, learn, and share
● global
● open source, open discussions
● community involvement
● share and remix
Slide 4
Slide 4 text
The Tools
Slide 5
Slide 5 text
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.
Slide 6
Slide 6 text
Remixing the Goggles Webpage
Slide 7
Slide 7 text
Remix of the Real Women of Canada website
Slide 8
Slide 8 text
Thimble
● create webpages
● HTML & CSS editor
● instant preview
● responsive help
Slide 9
Slide 9 text
Remixing “Make a Beautiful Animated Poem”
Slide 10
Slide 10 text
Popcorn Maker
● online video editor
● pull in
o videos
o images
o sounds
o google maps
● add links
Slide 11
Slide 11 text
Remixing “Animated Music Video”
Slide 12
Slide 12 text
Appmaker
● newest tool
● use preset bricks
● make them interact
● works in various browsers desktop & mobile
Slide 13
Slide 13 text
Remixing “Music App”
Slide 14
Slide 14 text
Why Webmaker?
● fully web based, no installation necessary
● free
● lots of resources
● no experience necessary
● fun!
Slide 15
Slide 15 text
Remix!
Slide 16
Slide 16 text
Webmaker in the wild...
Slide 17
Slide 17 text
Program: Spring Break
Slide 18
Slide 18 text
Program: Summer Camp
Slide 19
Slide 19 text
● Program is adjustable
● Embrace chaos
● Learning styles vary by age group
Making Adjustments
Slide 20
Slide 20 text
Hello HTML World!
*from https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
Slide 21
Slide 21 text
An Easy Sell
✓Rewarding for staff
✓Wide appeal
✓Supports digital
literacy & citizenship
✓Cost effective
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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