Mozilla Webmaker: Brief Intro.

965 views
827 views

Published on

A brief introduction on Mozilla Webmaker, from idea, tools, to community.

Check http://present.bobchao.net/presentation:mozilla-webmaker for more information, includes video clips of demo.

Mozilla Webmaker: Brief Intro.

  1. 1. Mozilla 與資訊教育 - Webmaker 趙柏強 bobchao@gmail.com
  2. 2. Who am I? •Mozilla Rep, 10+ years Mozillian •Creative Commoner •Project Manager, UX designer •Open Culture Lover •http://blog.bobchao.net
  3. 3. ?
  4. 4. 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/
  5. 5. INTEROPERABLE KNOWABLE OURS
  6. 6. 1. idea 2. tools 3. community
  7. 7. Digital Native 數位原⽣生代
  8. 8. Digital Native 學習 打⽂文件 休閒 玩遊戲、聊天 ⽣生活 無⼀一不電腦
  9. 9. Digital Native
  10. 10. Digital Native 實地 ⾮非到現場 錄影 稍微慢⼀一點 實況 ⼈人⾁肉 SNG
  11. 11. Heartbleed?
  12. 12. Credibility?
  13. 13. Privacy
  14. 14. H A C K
  15. 15. From read to write
  16. 16. Web Literacy Map
  17. 17. 
 Web 素養⼀一覽 探索 瀏覽 使⽤用軟體⼯工具瀏覽網站 Web 原理操作 了解網路⽣生態 搜尋
 以網路找出資訊、⼈人及資源 查驗可信度 謹慎評估網路上的資訊 資訊安全 保持 Web 資訊安全性 打造 編寫網路作品 在 Web 上建⽴立並編選內容 混搭重組 修改資源,創造新東⻄西 設計與無障礙 以網站建⽴立無疆界溝通 腳本程式寫作 打造 Web 上的互動體驗 基礎架構 了解網際網路架構 連結 分享 與他⼈人合作打造 Web 資源 協作 提供 Web 資源的存取 社群參與 參與網路社群、瞭解作法 網路隱私 評估線上分享資料的影響 實踐開放 讓 Web 保持⺠民主、可⽤用
  18. 18. 1. idea 2. tools 3. community digital native, web literacy
  19. 19. webmaker.org
  20. 20. X-Ray Goggles:改變網⾴頁
  21. 21. Thimble:⼿手把⼿手,教網⾴頁
  22. 22. PopcornMaker:網⾴頁與多媒體
  23. 23. https://keyboardkat.makes.org/thimble/LTU0ODUzNjMy/prototyping-with-a-teaching-kit-design-canvas
  24. 24. https://laura.makes.org/thimble/privacy-and-security-teaching-kit
  25. 25. Why? •Learning today happens anywhere and everywhere. •We need formal recognition for these newly earned and hard-won competencies and skills.
  26. 26. Fromhttps://wiki.mozilla.org/File:Open_Badges_napkin_sketch.png
  27. 27. Fromhttps://wiki.mozilla.org/File:Open_Badges_napkin_sketch.png
  28. 28. Fromhttps://wiki.mozilla.org/File:Open_Badges_napkin_sketch.png
  29. 29. http://www.reconnectlearning.org/case-studies/
  30. 30. 1. idea 2. tools 3. community digital native, web literacy making, remixing, material, badges
  31. 31. HIVE Learning Network
  32. 32. Events
  33. 33. Image from http://openmatt.org/hall-of-fame/
  34. 34. 1. idea 2. tools 3. community digital native, web literacy making, remixing, material, badges mentor, hive, maker party
  35. 35. INTEROPERABLE KNOWABLE OURS
  36. 36. Next step… •加⼊入 Webmaker 台灣社群(online)
 http://groups.google.com.tw/d/forum/moztw-webmaker •參與 Webmaker 讀書會(online/offline) •參與 Badges 設計讀書會(online/offline) •籌辦 Maker Party(offline) Thanks!
  37. 37. Licences & Credits 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 11] http://commons.wikimedia.org/wiki/File:Demonstration_against_ETA,_January_2000.jpg CC:BY • [Slide 13] http://openclipart.org/detail/192604/ Public Domain • [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 35] http://classhack.com/post/45364649211/open-badge-anatomy-updated CC:BY-SA • [Slide 40] https://www.flickr.com/photos/mozillaeu/6312805168 CC:BY • [Slide 40] https://www.flickr.com/photos/mozillaeu/6312804040 CC:BY • [Slide 40] https://www.flickr.com/photos/irvin/10972432866/ CC:BY • [Slide 42] https://www.flickr.com/photos/flore_frmoz/10714446776/ CC:BY-NC-SA • [Slide 45] https://www.flickr.com/photos/mozillaindia/9852293406 CC:BY • [Slide 45] https://www.flickr.com/photos/mozillataiwan/7674050794/ CC:BY-SA • [Slide 45] https://www.flickr.com/photos/dougbelshaw/9533976181/ CC:BY

×