Debater | 辯論家

2016/06 ~ 2016/08/21 COSCUP 演講準備區

COSCUP 演講資訊

Day 2 下午 http://coscup.org/2016/schedules.html

Debater 辯論家：網路筆戰大亂鬥

Debater 是一個架設在 Github Pages 上、純前端的網路服務，將散落各處的筆戰內容集中彙整，變成容易瀏覽的網頁。原始概念源自 g0v 動民主專案中的草根論壇紀錄頁面。這場短講將和大家分享 Debater 的設計方式、開發工具與流程，以及時代力量農損事件、FlyingV 事件、Wikimedia 解雇事件... 等應用案例。專案共筆： Debater 

演講內容

其實沒有一定要很技術面

講個故事也很棒

從頭到尾吧

發想到做出來

然後有什麼影響

原本以為是個消費者導向的產品，人人可以編輯，結果發現跟維基百科一樣，會去編輯的人非常少

將來開發的產品，凡是牽涉到 user input ，都要考慮這樣的生態

就算是polis

參與提問的人還是少

對比 hackmd: 私有 大於 部分共用 大於 完全公開

梗收集

小編瓶頸

https://twitter.com/momo_zaza_/status/753527344325767168

產品開發雙菱形

• https://medium.com/@Jeremy_hsu/%E7%BF%BB%E8%AD%AF-%E5%A6%82%E4%BD%95%E6%87%89%E7%94%A8%E4%BA%BA%E6%9C%AC%E8%A8%AD%E8%A8%88-hcd-%E4%BD%BF%E7%94%A8%E8%80%85%E7%B6%93%E9%A9%97-ux-%E4%BB%A5%E5%8F%8A%E5%85%B6%E4%BB%96%E7%9A%84%E5%89%B5%E6%84%8F%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B%E5%BE%9E%E9%9B%B6%E5%88%B0%E4%B8%80-b8262cd70748#.sinhihe9j
• http://myweb.fcu.edu.tw/~mhsung/Creativity/1_999/4D.htm

原型草稿區

20160806 學者回饋

情況：有人在臉書，有些人去別的地方吵，吵架方式會依平台而改變，依發言環境而改變，做下一步分析時要怎麼分析？如果不予回應之類，就整理不出東西。現在是 quote 有講出東西來的人。

平台可否區分發言環境，context（多一層 menu，可以濾掉某個來源，md 檔可以有參數）

2016/06/18 g0v hackath19n 提案區

範例一

http://etblue.github.io/debater/?source=https://hackmd.io/GwQwxgjAJgrAZgTgLQQQFgEZLSADAJiQTByRgGY1hVQ1yQMg/download

感謝 hackmd 佛心開 api 給 gh-pages 養米蟲

範例二

http://etblue.github.io/debater/?source=http://etblue.github.io/debater/file/npp-agricultural.md

感謝時代力量粉絲頁分享，雖然分享了以後也沒人看

範例三

http://etblue.github.io/debater/?source=https://hackmd.io/CwUwJgZiDMAcsFowAYQEYHAJy2QgRsslgtMMVuQMZUBs+EQA/download

感謝舜玲建議加上了 summary 功能

問題一

剪貼資料很苦力

問題二

著作權上不知道是否可以主張合理使用

問題三

許願人多，編輯人少（因為太苦力）

問題一的現況

目前的編輯小幫手，by tonyq，書於公館人行道旁 

*

https://gist.github.com/tony1223/478418a202e29fc16e17

目前編輯小幫手的使用方式...

提案內容一

希望把透抽的編輯小幫手變成瀏覽器外掛，可以不用開 console 剪貼 XD

提案內容二

希望法律專家提供著作權上的意見

提案內容三

有沒有人要整理最近輔大心理的筆戰內容順便當編輯流程白老鼠？詳 https://www.facebook.com/groups/597161320435546/

以上有興趣請洽 ETBlue

人和：

有多角色、不確定資料來源，導致討論複雜。驚訝的點：有學生整理了完整的資料。

某種說法：社會學的跑去輔大佔據心理系，搞團體動力學，檢討會的形式就是團體動力的做法。

媒體的時效性 vs 求證

希望讓進來的人知道每件事情都不是單向的，可以知道事實，但是是誰講的事實？

時間軸、觀點

有小編的引言，我篩選的標準是什麼、感興趣的面向

發展多元性，而不是硬要客觀

暫時置頂分隔線

專案資料

緣起

科技始終來自於八卦

目的

協助議題研究者收集分類彙整來自各地的網路吵架意見，形成初步的議題輪廓，以利後續的研究討論

授權

源碼：MIT

編輯：CC0

前身

動憲法

坑主

ETBlue

玄學

產品簡介

Debater is designed for data compulsive folks and hard working online facilitators, turning formatted discussion records into organised filterable web view. Designed by ETBlue. Source code available on GitHub. Documents on Hackpad. Community on Facebook.

COSCUP 2016 投稿版

Debater 是一個架設在 Github Pages 上、純前端的網路服務，將散落各處的筆戰內容集中彙整，變成容易瀏覽的網頁。原始概念源自 g0v 動民主專案中的草根論壇紀錄頁面。這場短講將和大家分享 Debater 的設計方式、開發工具與流程，以及時代力量農損事件、FlyingV 事件、Wikimedia 解雇事件... 等應用案例。專案共筆： Debater 

產品主要特色

Filter 

自由的資料來源

• 可彙整來自任何網路平台的發言，使用者可從每則發言的時間戳記可以追溯到原始發言網址，以便求證
• 可使用任何公開的文字編輯器製作資料檔，如 hackmd、gist、pastebin... 等，將資料檔網址匯入 Debater 即可瀏覽（推薦使用 hackmd 線上協作，編輯當下可即時更新，不需重新發佈資料檔。）
• 也可直接從本機匯入資料檔，此種方式不需將資料檔上傳到任何網路平台，不擔心資料外流

易於散播的議題網址

• 凡是來自公開網址的資料檔，皆擁有一個獨立的議題網址，可以直接分享給其他人
• 凡是同一台電腦同一個瀏覽器開過的議題網址，都會出現在 Recent 選單，方便使用者回來瀏覽新版資料

通用的編輯格式

• 資料檔使用 markdown 語法撰寫，不限軟體、不限作業系統，任何文字編輯器皆可直接編輯
• 只會抓取符合 markdown 語法的內容，其他會自動略過，因此資料檔中可使用任何不屬 markdown 語法的字元當作編輯註解，方便編輯團隊內部溝通

彈性的適用情境

• 特定對象參與的深入討論，編輯者可完整輸入發言人的背景資料，讓讀者更能掌握發言脈絡
• 不特定對象參與的廣泛討論，小編可省略發言人資料，單純依主題下標籤，發言人選單會自動隱藏
• 無法第一時間規劃好議題結構時，小編可省略主題結構樹，先就單則發言下標籤，無結構樹的頁面仍可正常顯示

不需連線也可使用

• 將 html 頁面下載到電腦後，可直接當成桌面程式，不需連上網路也可使用（開發中）
• 這是 Debater 不沿用 HackFoldr 的 404 作法而改採 query 的主因

開發手札

各階段 Screenshots

https://www.facebook.com/ETBlue/media_set?set=a.10206268572605935.1073741846.1014354995

Tasks

• ETBlue 受孤獨的 GH 啟發
• 抄 Mr Bigmouth 的 code 建立以 es6 撰寫的 MVC 架構
• 卡關在奇怪的地方問 tka 白癡問題，結果發現是 return deferred 物件的時間點弄錯了
• 參考 godfat 跟 isabel 跟 ipa 的意見改善 UI
• tka 完成單一議題網址分享
• hackmd (jacky) 熱情提供編輯後台
• LY 設定 livereload & 消除頁面閃爍 & 加入爭點黏人功能（且因此錯過 summit 議程組會議 XD）
• 透抽製作小編專用瀏覽器外掛
• 主題展開收合與階層標示功能
• jacky 補上 RWD

目前成果

demo

facebook groups docs Debater 議題 & 編輯範例列表

程式碼

• 網站（純前端） https://github.com/ETBlue/debater
• 瀏覽器外掛（貼在 console 內使用） https://gist.github.com/tony1223/478418a202e29fc16e17
• 完整版的瀏覽器外掛 https://github.com/MrOrz/debater-extension

社團

• facebook groups 孤獨的編輯家—— Debater 小編 & 開發者社團

使用說明

瀏覽議題

1. 點入 http://etblue.github.io/debater/
2. 匯入想呈現的資料，有三種匯入方式：
   1. 網路檔案：將文字檔 URL 複製貼上右上角檔案空格內，然後按 Enter （例： http://etblue.github.io/debater/file/npp-agricultural.md）
   2. 曾瀏覽過的網路檔案：從 Recent 選單選取最近瀏覽過的網路檔案
   3. 電腦本機檔案：切換到 Local 後按 Choose file 從本機電腦硬碟中選擇檔案
3. 點左方標籤可看依主題分類瀏覽，點上方標籤可依發言人身份瀏覽

建立新議題

1. 點入 https://hackmd.io
2. 
   

編輯議題

編輯格式

• // comments (will be ignored by Debater) (optional)
• # author name
• ## profiles (optional, no use currently)
• - http://... (optional)
• ## relations (optional, will show up in secondary navbar if presence)
• - relation 1 (optional)
• ## backgrounds (optional, will show up in secondary navbar if presence)
• - background 1 (optional)
• ## articles
• ### 2016/01/01 GMT0+8:00 http://...
• - content # tag
• ___ (divider between main content and the tag tree settings. all data below are optional)
• ``` (block start, html supported)
• <p>summary for all topics... blah blah</p>
• <p>second paragraph</p>
• ``` (block end)
• - level 1 tag
•   ``` (block start, html supported)
•   summary for the tag above... blah blah
•   ``` (block end)
•   - level 2 tag
•     ``` (block start, html supported)
•     summary for the tag above... blah blah
•     ``` (block end)
•     - level 3 tag
•       ``` (block start, html supported)
•       summary for the tag above... blah blah
•       ``` (block end)

工作流程與配套

Step 1. 組織議題研究團隊

理想中，每個議題的 Debater 編輯團隊建議由以下成員組成：

• 對議題專業領域有基本知識的人 x 1
• 擅長大量閱讀快速歸納且熟悉電腦操作與文書處理的人 x 1
• 瞭解組織經營策略且可規劃會議流程的人 x 1 （optional，組織主導的專案才需要）

Step 2. 建立議題架構

舉行編輯會議，確定議題方向與適合的下標籤原則，需要考量的事項：

• 下 tag 原則：盡量讓同一個 tag 底下可以呈現不同立場的人對同一件事情的歧見，以爭議點為核心下 tag，讓每個 tag 形成一個吵架串

Step 3. 爭點歸類與收集標籤

Step 4. 重構議題

Step 5. 細部微調與完稿

Step 6. 設計爭點故事線

Step 7. 發佈公審問卷

Step 8. 匯出公審統計與制訂後續策略