2014/3/10

Introducing MozTW Badges - Mozilla 台灣社群徽章系統

Badges
"Badges" by libraryems on Flickr

[English summary]

We, Bob Chao and goescat from Mozilla Taiwan (MozTW) community, are building a badge system to recognize the contribution of Mozilla community members and have fun. This article shows the idea.

Currently we have a basic structure with few badges as samples, and we are invite people (you!) to submit / design more badges with tools, include the (localized) Badge Maker Offline Toolkit provided by Snook.

Here we drafted the design principles of MozTW Badges:

  1. Encouraging people to contribute to Mozilla projects
  2. Set up contributing pathway, helping community members to experience more.
  3. Identify the ability of community members.

... and also 4 categories of badges: Events / Achievements, Roles, Abilities, Contributions.

Community members can design their own badges and submit to the system. Once we make sure that the design fits the principles, we will include it to the system.

You may have heard that Mozilla designed a few badges for community, like this, this, this, and this. But we still need some badges for things that related to local projects -- MozTW Badges fits the needs, and also works as a hub for different projects to showcase / promote their badges.

MozTW Badges is still a prototype, and we are trying to figure out a method to use badge system to encourage people join / enjoy the community. We will keep posting updates on this blog.


小遊戲當道,大家對於各式各樣的「成就」、「徽章」也不至於陌生 -- 你在遊戲中達成了某些條件後,就會「解鎖、被授予」徽章來表彰你的成就,而透過一次次的累積或許還能得到什麼特別的功能、圖片等等。其實說到底,這跟我們小時候可能都拿過的「好寶寶貼紙」或許也有異曲同工之妙,一方面以有形的貼紙獎勵你,二方面也進一步激勵你取得更多貼紙、以換回更好的東西。

換個方向,其實這些徽章 / 貼紙同時可以拿來證明了你有某些能力、參與過某些事件等等。有很多平台也已經支援這樣的系統來鼓勵使用者多多參與,例如大家可能都聽過的 Foursquare,甚至紅到讓粉絲成立 Foursquare 的徽章網站

The MozTW Badges

近期,我跟社群成員 goescat 正在設計一套給 MozTW(Mozilla 台灣社群)使用的徽章系統 -- 姑且先稱為 MozTW Badges。這套徽章系統希望可以在許多層面幫上社群成員,包括:

  • 讓各種社群成員表彰彼此的貢獻,鼓勵大家發展各種能力
  • 知道誰確實對什麼東西有其(已獲驗證的)能力與經驗,藉此協助社群成員分析我們自己的優缺點,或是尋找幫手
  • 更重要的是:蒐集獎勵徽章本來就是件有趣的事情,看技客們滿載貼紙的筆電外殼就知道了 :P

許多技客的筆電外殼,貼滿花花綠綠的貼紙,表達自己的屬性

Structure

在設計這套徽章系統的架構時,我們先考量了社群對於徽章形態與作用會有哪些需求。

目前草稿如下:

作用與形態

徽章的設計目的應該要照顧這些要點:

  • 鼓勵參與貢獻:絕大部分的徽章設計,都將以此為依歸。
  • 鼓勵精進自我能力:借由徽章本身的鼓勵性質,鼓勵社群成員自我挑戰、獲取經驗
  • 識別社群成員能力:徽章先天會有「分類」的性質,以此也能識別整體社群的能力,以強補弱

而進一步區分為四類:

  • 獎勵參與各種事件:這個十分常見,例如參與當季的連續聚等等。這類徽章拿了以後終身不會過期,主要其實也是有趣與紀念使用。
  • 特定身份識別:例如在地化經理、社群聯繫人、Mozilla 校園大使、Webmaker 輔導員等等特定身份。這類的徽章或許能被取消,無論是「到期」或是借由其他方式取回。以這類徽章當作身分證明,或許不見得容易被人接受,但至少我們可以創造視覺印象上圖片與身份的對應。
  • 證明擁有特定能力:或許是因為上了什麼課程,或提出什麼證據,我們可以證明該社群成員具有特定能力,並頒發這類徽章。
  • 獎勵特定領域貢獻:證明擁有特定能力的徽章或許不見得適合由社群以分散決策的方式發送,因此在這個部分我們另外也加上更實際對 Mozilla 有幫助的獎勵特定領域貢獻徽章。而這樣的徽章應該是用來表彰貢獻經驗的,因此會隨著貢獻量升級。以此,我們更強調要把會的技能拿出來用,而不只是學了就好。

這張圖展示了上述的分類與要點:

分散式設計

徽章畢竟還是會有「發放機構」的問題,為了嘗試保有社群的分散式風格,我們一方面將鼓勵大家設計自己關心領域的徽章(例如,Ernest 或許會想設計 SUMO 的貢獻徽章),二方面也歡迎提名應該獲得徽章的夥伴。

此外為了在具備分散式特色的同時也保持一定的外觀統一識別,我們規劃了一些簡單的要點提供大家參考:

  • 形狀:目前我們建議依據徽章類別調整徽章的形狀
    • 五角星:單一事件
    • 六角星:證明擁有特定能力
    • 八角星:獎勵特定領域貢獻
  • 色彩:建議同一群的徽章採用相同色系,或可用深淺不同來說明等級
  • 標記數字:有些情況也可以用標示數字的方法來明確說明徽章等級,可以用加註圓框數字的方式處理。
  • 單一事件、角色識別兩類其實不用太拘束,可以盡情發揮無妨,但需盡可能追求簡單扼要,例如避免在徽章上塞太多文字 -- 那樣反而也無法一眼識別出是哪個活動。

舉例來說,這是給所有第一次參加 Mozilla 台灣社群相關活動夥伴的「Hello Foxmosa」徽章,屬於單一事件形態,採用五角星:

另外針對對外推廣 Mozilla 相關事宜的演講者,則有「摩力講師」徽章,獎勵這方面的貢獻。

若演講次數多,則將另外頒發「明星講師」徽章,以顏色區別其不同

上述的徽章名稱都是暫時取的,圖案僅供調理參考、實際內容物參見標示。或許出外演講超過二十次的夥伴我們應該給個「現實扭曲力場」徽章也說不定 :P

為了兼顧分散與集中的優點,MozTW Badges 也應該有個網站集中宣導各種社群成員可獲得的徽章。我大概規劃了個草稿,可見此圖檔,有機會再另外撰文描述。

在地關懷

事實上 Mozilla 也正在規劃給整體社群使用的徽章,目前已經有幾個兼具紀念與實驗性質的作品,大致也都落在前述的分類中,舉幾個例:


Peter 獲得的 webdev - 50 pull requests merged 徽章

MozTW Badges 與之不同之處,為專注於台灣社群的相關事務。事實上個人也覺得各個子團體(按地區、語言、能力等等區分皆可)應該都要有一套不會與 Mozilla 的徽章系統打架的徽章系統,以便處理例如「協助在地化網站架設」、「協助在地專案規劃」等等從全球角度比較難兼顧的部分。

而既然 Mozilla 在 2014 年的目標之一是推廣 Open Badges(可視為為了徽章跨平台通用性,而制定的一套徽章後設資料,以及相關發送、展示、驗證機制),我想今年對於徽章的設計與規劃只會多不會少,有些全球通用的徽章點子也應該送往相關人員處。

發送徽章

在目前的實驗期間我們將先採用 https://badges.mozilla.org/ 這個平台發送徽章。其實還有很多徽章發送平台我們還需要繼續測試,例如 Mozilla 剛推出的 BadgeKit。歡迎跟我們一起研究適合的發送平台。


Mozilla 甫推出的 BadgeKit,目前還在 Private Beta 中

下一步

這篇文章只先描述我們的基本想法,接下來還有很多事情可以做,也歡迎大家協助:

  • 參與實驗:試著取得第一個 MozTW 徽章:只要在 MozTW 相關活動中與任一個已經擁有「Hello Foxmosa」徽章的夥伴見面,就可以請他提名你取得這個徽章 :D 我們也會不斷在這個 blog 更新相關的新實驗。
  • 參與規劃:歡迎到社群討論群組針對這個想法發言規劃。
  • 一起設計:把握前述原則後,歡迎提供新的徽章設計。您可以下載由 Snook 提供、已經翻譯為中文的「徽章設計離線工具包」來用,記得真正的關鍵是最後一張表格,要把徽章相關條件都設計出來。接著歡迎到社群討論群組發表您的設計,我們可以在那邊進一步討論。
  • 設計網站:在測試階段過後,我們需要夥伴幫忙把網站規劃詳細設計、實作出來,意者也請到社群討論群組寄個信喊聲一下

當然,若你看完這篇文章有什麼想法,能夠在下面留言與我們交流,那就更好了!期待可以聽到你的意見 :)

Special Thanks: Peter Chen (English editing.)

2014/1/4

我習慣的 bug report 格式

由於自己是從 Mozilla 開始接觸相關事務的,很多習慣大致都由在 Mozilla 的生活養成。簡要分享自己回報軟體問題的步驟。

關鍵問題:「在什麼樣的情境下,引發了與預期有所出入的結果?」

1. 情境

  • 作業系統、搭配軟體等
  • 誘發錯誤結果的步驟,術語稱之為 reproduce steps,這會需要回報者自己多試幾次確定步驟正確。寫作上的重點是儘量用很難操作錯誤的表達方式,例如「開啟新分頁」或許不如「按下 Cmd/Ctrl - T,開啟新分頁」 -- 或許,其他開啟新分頁的方法本來就不會引發一樣的錯誤。

2. 預期

  • 本來應該發生什麼事的描述,其實不會很難寫。
  • 如果有其他可以供參考的資料,例如別的同類軟體產生的正確結果截圖等,則又更佳。

3. 結果

  • 做完上述步驟後,實際發生的結果
  • 有畫面截圖或者其它可證明/說明結果的報表(例如 log 檔),則又更佳。

其他

  • 出現機率:有些事情可能不是每次都會出現,但出現機率高到讓你覺得不容忽視。這時可註記之,一方面這是重要資訊,很可能代表還有隱藏的線索尚未發現;二方面,也是要避免看這份回報的人自己試一次沒問題就打回票了。
  • 標題簡要清楚:這跟寫信一樣,就不多提。

由於 Mozilla 的 Bugzilla 平常需要應付很多新手回報問題,所以上面的要點已經被做成了制式表單(如圖,我另外標了數字可對照之),另外也有一篇文章教使用者如何回報問題,可參考之。(雖然看不懂那篇英文的人,或許也無法獨立、不需協助地回報問題,但有人想翻譯還是大歡迎的。)

所以我自己的慣用格式如下:

## Steps:

1. reproduce
2. steps
3. here

## Expect

(expectation after the steps above)

## Result

(actual result)

## Notes

(other notes)

其他事項會列在 Notes 處,而有時自我判斷無關作業系統與搭配軟體版本的就省略之(有時會判斷錯就是,屆時還是得花上一次來回)。因著「簡要分享」的想法,有些例如「重要性」什麼的就且不提。比我能寫得好的大有人在,只是分享一下習慣。

2013/12/5

Firefox 附加元件:用 Markdown Here 在 Blogger 上發文

因為公司的系統常用 markdown,在這幾個月裡我也開始慢慢熟悉語法,就想找些方法以後用 markdown 寫 Blog。我之前大多使用 HTML 編寫,大致的缺點就是比較慢… 改用 markdown 應該會快很多,至少有點 tag 潔癖的情況下,用 markdown 似乎可以確保出來的語法整潔?
不過由於自己的 blog 在 Blogger,多少也有改點佈景,實在有點懶得搬家到別的地方,於是開始找「能在 Blogger 上寫 markdown」的方法。目前大部份的教學文件都要你轉個方向走,例如:
  • 先用 markdown 編輯器寫、轉成 HTML、再把 HTML 貼上來:想也知道我不可能選這個啊…
  • 利用其他有整合好的編輯器,把「轉成 HTML 在貼」的工作盡可能自動化:缺點是 Blogger 上的一些文章設定沒那麼方便,變成寫好要再回來調整,且不一定有辦法上傳圖片…
後 來找到這個 Firefox 附加元件 — Markdown Here,似乎還 不錯,他其實只是把 Rich Text Editor 裡的 markdown 純文字轉換為 HTML 內容,但這樣便讓相容性提高了許多 — 理論上可以相容任何 Rich Text Editor 網站。
目前試用有些缺點:
  1. 為了在 HTML 跟 Markdown 之間互轉,它在產出的 HTML 碼裡會塞一些有點醜的原始碼編碼… 外觀看不到,但看 Code 很醜,且重點是大幅增加了頁面所需的 data
  2. 另外它預設會添加很多 style… 這個要去設定裡把它的 Style 全部清掉。其實這個設定原意也是讓頁面更漂亮,但遇到你自己本來就會加 CSS 的 Blog 時,還是全拿掉吧…
或許用一用會決定要來自己改他的 code,但無論如何有興趣的朋友可以試試看 :)

下載 Markdown Here

2013/10/6

Mozilla Summit 2013: Where am I (Day 3)

[en] The final day of Mozilla Summit 2013! Again I'm sharing my schedule for your reference.

The Location and Facilitators information are all for Santa Clara, please check the full agenda of Sunday. It could be your final chance to stop and say hi this year :P.

繼昨天,這是我明天的選課單。地點時間以 Santa Clara 為主,中文是我自己的 Comments,各議程詳細資訊請見 Summit Wiki

13:15-14:30

很難選,所以我後補多選一個。

Distributed Leadership and decision making

Mozilla 的運作模式中很多部分都需要分散決策,事實上這也是其所認同的核心價值之一(跟程式開發一樣,分不同模組、由不同人開發並決定怎麼做事)。這當然會有很多麻煩,這堂會討論大大小小麻煩的地方,並討論解決方案。

(備選)Ideas into Action: Next steps for me and my team

蔣登登同學主持。內容是討論專案規劃,以讓 Summit 中產生的點子持續推動下去。

(備選)Designing your project for participation

如何讓設計的專案能為眾人參與?推薦覺得事情都要在自己手上完成的人參加,雖然會這樣想的人大概也不會參加 orz

15:00-16:15

Brainstorming on Future Local MozHackSpaces

最近對 HackSpace 的構成與營運方式很有興趣,希望去跟大家多聊聊。

(備選)Community-driven Web Compatibility

  • Grand Ballroom Salon CD
  • TBD

似乎是要去動手做的題目,我猜應該是針對行動網站的技術宣教事宜吧?

我對其他 Sessions 的想法

The Future of Comms Reps: 現在的 Comms Reps 可以去,提一些可行不可行的事情比較好。(特別是區域內有公司營運的這個、那個,還有另一個以及又一個地區。)

Call to Developers: Ask a localizer: 多國語系程式開發其實有很多意想不到的眉角,有興趣的可以去聽聽。

Economic Justice, Mozilla, and the Trans Pacific Partnership: 其實是很深的題目,也值得討論。有哲學系的朋友嗎?

The Role of Commercial L10n at Mozilla: 看得懂會有什麼問題,而不只是說「請人做比較穩/快」的話,請試著貢獻你的想法。

Effectively communicating your contribution at Mozilla: 推薦學生社群成員參加,讓履歷更漂亮。

2013/10/5

Mozilla Summit 2013: Where am I (Day 2)

[en] I'll be at these sessions during the afternoon of Day 2 in Mozilla Summit 2013, just FYI. The Location and Facilitators information are all for Santa Clara, please check the full agenda of Saturday. Welcome to stop and say hi.

繼昨天,這是我明天的選課單。地點時間以 Santa Clara 為主,中文是我自己的 Comments,各議程詳細資訊請見 Summit Wiki

Practicing Open

為了產出「a new FAQ guide on "How to work open at Mozilla"」文件的討論會,我應該去分享些什麼。

Mozilla 的新員工似乎許多(特別是非工程師)都不知道這個組織是什麼玩意,這似乎有點麻煩;另外在當前合作廠商變多、且產業與以前瀏覽器不同的情況下,應該發展一些仍然可以稱得上「Open」的訊息流通方式。

是說這場的主持人今年四月剛進 Mozilla,然後還是作行銷呀。(這不是說她就一定不了解就是,我只是突然有點抖,但也許她其實超 Open。)


備選:Defining and Packaging a Mozilla Core experience for onboarding

編寫新成員的入門課程 -- Just kidding,不過意思應該沒有差太遠。與前面差別是一個給員工、一個給志工。社群成員有興趣的話,我還挺希望有人去。

Imagining a Mozilla-Wide Open Badges System + OBI 101

Open Badges 相關的討論,我一直都算蠻有興趣的。


備選:Level Up with Firefox Student Ambassadors!

校園大使相關的,如果 OpenBadges 那場很不堪我才會去。

對於其他場的 Comments

首先昨天的 Firefox OS 2014 居然真的是討論場!我錯了,先致歉。

其他:

Building a Framework to enable Mozilla to effectively communicate across our community: 看說明是有點興趣,且在布魯塞爾是 Gerv 主持。不過本時段太多軌只好連備選都排不上。

Developing empathy for your users: 未看先猜公司會有一部分人去聽,所以等著聽她們描述就好。

Designing for our users not ourselves: 感覺是 UCD 入門班。

Strategies of industry players and competing effectively: 如果參與的一群人平常有在關心,應該是個不錯的 session。

Understanding web developers: For developer engagement.

How do we scale up our innovation capacity?: 未看先猜可能會有點發散。

Developing an Open Badge Eco-system: 蠻有興趣的,但重點是 Santa Clara 沒有這場 orz

Contributing with just the browser: 如果主持得好,應該是有趣的討論會。未看先猜是從 L20N 的想法作為起點發想的,今天彼得大帝跟我說他們做了個類似 Facebook、只要添加特殊標記就可通用的網站翻譯工具。

2013/10/4

Mozilla Summit 2013:Where am I (Day 1)

[en] I'll be at these sessions, just FYI. The Location and Facilitators information are all for Santa Clara, please check the full agenda of Friday. Welcome to stop and say hi.

以下是我的選課指南,給眾人參考。地點跟 Facilitators 都是 Santa Clara 的場次,而後面中文是我自己的 Comment。完整資訊請參考 Wiki

正取選擇

下午 1:00-2:15 及 2:45-4:00 可以任選兩堂:

Building a Web Literate World

無論你想、或不想讓小孩學電腦程式,先問,如果出發點不是為了「競爭力」呢?

我自己是很吃 Webmaker 專案提出來的這一套:教你一點邏輯,一點 Web 的編輯方式,只是因為那(即將)就是生活技能之一,就如拿筆書寫、操作微波爐。沒有人想計較你寫字好看與否,傳遞表意即可;沒有人想計較你操作微波爐多快,有東西可以吃即可。

希望接下來對 Mozilla Foundation 的專案更深入接觸。

What does "Mozillian" mean?

跟社群自我定位有關,做社群的人心裡都應該認真想一次這件事情。來去看看別人想些什麼,提供意見。

備選 (aka If something goes wrong...)

Ecosystems in our Image

有興趣的地方:應該會討論到,在當前的 App Marketplace 世界裡,Mozilla 要有怎樣的表現,才不至隨波逐流,而能把理念化為機制,實際產生影響?

對於其他 Session 的想法 (Few comments on other session)

The Web We Want: Could be a good topic for discussion, but I can hardly image how deep we can go in a 75 mins session.

Firefox OS in 2014 and Beyond: 1) Luckly I'm familiar with the development team, and the public information should be enough (or it's not Mozilla.) and 2) I think it will not be a "discussing session," IMPOV.

Privacy, Security, and Data: Pragmatic Innovations for Users and the Web: Looks nice when relate to UX, not sure if we will have some prototype or anything as an outcome.

2013/8/2

COSCUP 2013,我會在哪? Day 1

以下是我(如果有空聽的話)在 COSCUP 2013 的預定行程表,先寫第一天的:

Open Data Initiatives for Taiwan、座談會:Open Data 面面觀

前面三場其實你也不得不做如此選擇,因為是全場聯播;但,即使撇開「全場聯播」這件事情不理,這三場還是很有吸引力的。

做 Open Data 的夥伴,相信一定很想有機會直接面對在政府裡的負責人,而前 Google 亞太營運總監、現在在行政院負責協調跨部會科技業務的政務委員張善政先生,無疑是最佳人選之一。這也是 COSCUP 幾年來少見,直接邀請政府單位相關業務負責人前來演講的狀況,全因 Open Data 這個議題中,政府機構的資料釋出是最被關注的一環。

第二場則是議程組絞盡腦汁開出來的好菜,也是 COSCUP 在第二屆的「開放組織新人秀」之後難得又有的座談會形式議程。除了張政委之外,有雲端翟神翟本喬,Open Content 推動者莊庭瑞老師,以及戰力超群的「零時政府」高天師 clkao,主持人更是 COSCUP 前任總召葉平。個人是很有興趣聽聽他們針對 Open Data 能激起怎樣的火花。

開源硬體有什麼意義? / What does it mean to open-source hardware?

我很少說自己覺得崇拜誰。若有的話,翟神非常可能是其中一個,且講題我也蠻有興趣的,就它了。

如果爆滿,我可能會去「Hello! NFC!」瞭解一下這個玩意。

教會改用 OpenOffice.org 的經驗

作為推廣者,對於導入有興趣,應該也是很正常的 :) 實例分享最是難得,我想聽聽他們怎麼做。
滿了的話,我可能會去「純自由軟體的虛擬偶像歌手實作」,Paul 的議程應該很有趣吧哈哈哈!

當設計遇上opensource,人人都可以是設計師

這段有點難選 orz,我自己也算是非正規設計師,且一直很想在 COSCUP 裡多放點非技術人員的 Open Source 觀點,所以就選這個。

它擊敗了「經驗分享:用 Javascript 實作注音輸入法」「Good Rice: A Real-Life Example of Linked Open Data」,以及 MozTW 有參與的「座談會:找人來了後怎麼辦?開源專案的志工經營分享,以Mozilla、Wikipedia、與OpenStreetMap為例」

便利專案管理的輔助制度:貢獻者契約

這邊也有點難選,不過看了一下描述後,還蠻想聽聽冬梅姐對貢獻者契約的整理。

不過如果我腿很酸,也可能坐在原地聽另一個也有興趣的「以pure data製作中文歌唱合成器」,或者看上一場的情況留在「座談會:找人來了後怎麼辦?」

HTML5专业图像处理开源引擎-AlloyImage

對於中國的公司怎麼發展、釋出 Open Source 軟體很有興趣,所以大概不只是去聽 AlloyImage 介紹吧 :P 另外也很有興趣的是「App on Server: NAS 上的 App 開發與商業模式」,或者「How the KDE community ticks」

撥開法律服務的黑色迷霧

這一節也好難選 orz 最後選了看起來像是行政上實務經驗分享的這個議程。同時間考慮的有「Live Coding」(一直很想學 Pure Data 相關的東西),且其實推薦大家可以參考「Mozilla Webmaker 教育專案」

中国大陆开源社区的发展与现状

這一節也是好難選 orz orz
  • 「Listening me! 福利請聽」看起來很有趣,也想聽聽實務分享;
  • 半個(或者說三分之一個好了?)前端工程師的我,對「一小時 RWD 就上手」當然有興趣;
  • 我有玩 Open Street Map,也希望瞭解「自製簡易實景調查(街景)車」呀... 
不過,想想之後最難有機會面對面的或許是對岸的社群,那就去聽聽看他們怎麼玩好了。

Open Data in D3JS - 以零時政府為例

最近比較有在玩圖,所以應該會去聽聽看人家怎麼用 D3JS 來展示數據,另一個也很有興趣的是「Build your own Trello within 200 Lines of Code」

大陆地区网络状况简介

這個議程禁止錄影錄音,太機車,那就沒什麼好說了啊。爆滿的話我應該會去「從『小』投入立體打印」聽聽經驗分享。