Mozilla Webmaker: Intro

Mozilla + 資訊教育 = Webmaker

Irvin @ moztw.org

Irvin•Mozilla Rep, 8+ years Mozillian

•Former Plurk F2E designer

•Front-end designer

•@irvinfly

?

We are champions of a Web where people know more, do more and do better.

- Mitchell Baker

Photo from https://www.mozilla.org/foundation/annualreport/2012/

1. idea 2. tools 3. community

Digital Native數位原⽣生代

Digital Native

學習打⽂文件

休閒玩遊戲、聊天

⽣生活無⼀一不電腦

Digital Native

Digital Native

實地⾮非到現場

錄影稍微慢⼀一點

實況⼈人⾁肉 SNG

Safety?

Credibility?

Privacy

Hack / Make

From read to write

Web Literacy Map

Web 素養⼀一覽探索

瀏覽 使⽤用軟體⼯工具瀏覽網站

Web 原理操作 了解網路⽣生態

搜尋以網路找出資訊、⼈人及資源

查驗可信度 謹慎評估網路上的資訊

資訊安全 保持 Web 資訊安全性

打造

編寫網路作品 在 Web 上建⽴立並編選內容

混搭重組 修改資源，創造新東⻄西

設計與無障礙 以網站建⽴立無疆界溝通

腳本程式寫作 打造 Web 上的互動體驗

基礎架構 了解網際網路架構

連結

分享 與他⼈人合作打造 Web 資源

協作 提供 Web 資源的存取

社群參與 參與網路社群、瞭解作法

網路隱私 評估線上分享資料的影響

實踐開放 讓 Web 保持⺠民主、可⽤用

1. idea 2. tools 3. community

digital native, web literacy

webmaker.org

X-Ray Goggles：改變網⾴頁

Thimble：⼿手把⼿手，教網⾴頁

PopcornMaker：網⾴頁與多媒體

https://laura.makes.org/thimble/privacy-and-security-teaching-kit

From

http

s://w

iki.m

ozilla

.org

/File

:Ope

n_Ba

dges

_nap

kin_s

ketc

h.png

From

http

s://w

iki.m

ozilla

.org

/File

:Ope

n_Ba

dges

_nap

kin_s

ketc

h.png

From

http

s://w

iki.m

ozilla

.org

/File

:Ope

n_Ba

dges

_nap

kin_s

ketc

h.png

http

://w

ww.

reco

nnec

tlear

ning.o

rg/c

ase-

studi

es/

1. idea 2. tools 3. community

digital native, web literacy

making, remixing, material, badges

HIVE Learning Network

Events

Image from http://openmatt.org/hall-of-fame/

1. idea 2. tools 3. community

digital native, web literacy

making, remixing, material, badges

mentor, hive, maker party

http://www.youtube.com/watch?v=zOMW30SpfTw&list=PLwdR-058nLX7o-39MT8_3ftojD5q3Tx-b

•加⼊入 Webmaker 台灣社群（online）bit.ly / webmaker-tw

•參與 Webmaker 讀書會（online/offline）

•參與 Badges 設計讀書會（online/offline）

•籌辦 Maker Party（offline）

Thanks!

!"@ irvinfly

Licences & CreditsOriginal slide made by BobChao, http://present.bobchao.net/presentation:mozilla-webmaker

!Except where otherwise noted, content on this slide deck is licensed under CC:BY-SA 4.0. All trademarks mentioned here belong to their respective owners. Get the original version includes video clips from http://present.bobchao.net/presentation:mozilla-webmaker !

• [Slide 10] http://openclipart.org/detail/185201/ Public Domain • [Slide 13] http://www.facebook.com/179043295447791/posts/717189408299841 Copyright © 經濟⽇日報 • [Slide 13] http://www.plurk.com/m/p/k4r3lk Copyright © 蘋果⽇日報 • [Slide 15] http://pixabay.com/de/augen-starren-auge-fl%C3%BCge-suchen-260571/ CC0 • [Slide 17] https://www.flickr.com/photos/gypsydancer12/2583772937/ CC:BY • [Slide 37] https://www.flickr.com/photos/mozillaeu/6312805168 CC:BY • [Slide 37] https://www.flickr.com/photos/mozillaeu/6312804040 CC:BY • [Slide 37] https://www.flickr.com/photos/irvin/10972432866/ CC:BY • [Slide 38] https://www.flickr.com/photos/flore_frmoz/10714446776/ CC:BY-NC-SA • [Slide 41] https://www.flickr.com/photos/mozillaindia/9852293406 CC:BY • [Slide 41] https://www.flickr.com/photos/mozillataiwan/7674050794/ CC:BY-SA • [Slide 41] https://www.flickr.com/photos/dougbelshaw/9533976181/ CC:BY