HackStory共筆時間軸

 

CHEETAH L#HackStory共筆時間軸

 

 

IPA C專案簡介

CHEETAH Lslide

github: https://github.com/g0v/HackStory

source: http://visjs.org/timeline_examples.html

 

 

ET B緣由

CHEETAH L不少工作坊跟會議都需要參與者共同整理出時間軸，不管是重建事件經過、未來情境推估或是統整眾人的認知。這通常需要透過現場有夠大白板跟牆面，加上一堆便條紙來達成。雖然本人對於寫字跟便條紙頗有好感，但是要做成紀錄的時候就非常痛苦，這時候就很想要一個數位化的工具啊！不管是在整理議題的來龍去脈、事件發生的經過、推估未來情境發展都會好用很多。

 

 

IPA C要解決的問題

CHEETAH L要共同建立一套時間軸，現有方式遇到的問題如下：

1. 現場編撰：需要一定大小的空白牆面或白板，參與人數相對受限。缺乏數位化工具進行整理，事後編輯、保存與發布相對困難。
2. 數位工具：通常只能用文字表格或Google Sheet處理，而且時間刻度的設定相對侷限，無法自動調整間距，編輯上不夠直覺，視覺呈現不佳。

 

 

ET B預定使用者

（成品要給誰用、在什麼場合用、怎麼用）

CHEETAH L在工作坊或會議時，需要共同建立時間軸時，能夠讓參與者直接用手機或電腦直接

 

 

IPA C預定功能

CHEETAH L主要功能

• 以共筆方式做出時間軸，讓參與者共同標記事件對於進行意見標注或評論，也能夠顯示作者身份。

ddio Juan1. 拿來給共識工作坊用
ddio Juan2. 讓人可以投票（線上或線下）
ddio Juan3. bonus, 可以設定分支，像是子事件，相關的事件，如 Linux Branch

• 依照輸入的資料，自動調整時間刻度的間距，在視覺上表現出時間的間隔長度
Johnson Liang「自動調整」：
Johnson Liang1. 精細度希望到時、分
Johnson Liang2. 希望省略沒有事件的時間刻度
ddio Juan3. 預設的時間軸刻度
• 多軸與歧出軸：可以同時有多軸，並且能夠從某一軸線中的一點，拉出延伸的軸線。
• 能夠輸出成圖片檔：方便嵌入網頁或其他用途（這點也許就需要連帶有橫軸到縱軸的轉換功能）

Johnson Liang直軸 - 手機瀏覽。但有兩種情境（最上面的最近 or 最上面的最久遠），可能需要可以切換。
Johnson Liang橫軸 - 一般線下使用習慣是橫的時間軸。橫版也可以用於換頁印刷。

 

輸入資料方式

• 直接在時間軸上輸入
Johnson Liang要填的東西：time, event / topic, effects
Johnson Liang其他互動 - comments / +1：comments 與 +1 需要 user id
Cheetah Liu-Lee其他互動未來可加上tag功能
Johnson Liang
• 問卷表單
• 能夠從google spreadsheet或markdown文件讀取（如同timeline JS）

 

DDIO J專案初始設定

• 時間軸名稱
• 設定時間軸時間範圍，還有能否增加超出範圍的事件
• 設定時間刻度大小
• 設定分類、顏色，可以選擇之後是否開放新增分類

 

CHEETAH L介面設定

• 介面單位名稱
• 時間軸的集合：Board /Chart / Flow / 軸承bearing/ 線圈Coil
• 時間軸Timeline
• 事件Event

 

CHIA-LIANG K現有類似專案

IPA C（現成的是否可以直接使用？或者有什麼不足之處？國外專案可參考？）

 

 

 

時間地圖(timemapper)：強調時空的關係連結，將地圖與時間軸連結，需要以google sheet後台輸入。

JOHNSON LTimeline JS：國外專案，單一軸線，以圖文呈現事件或人物的年表。

Johnson Liang設計上似乎是以內容為主，時間軸只是一個用來串連各個時間的 navigation
Johnson Liang但此專案希望以時間軸為主。

 

線上 Timeline - http://www.tiki-toki.com/

• 可分 timeline
• 可協作
• 可嵌入到其他地方
• 不開源的商用 web app

 

CHEETAH LVisjs (比 timelinejs 更合用，也比較好 customize 的樣子)

JOHNSON LTimeline: http://visjs.org/timeline_examples.html

Repo: https://github.com/almende/vis

Cheetah Liu-Lee就決定是你了！

 

YUN-CHEN C318 學運時用 Tumblr 整理時間軸：http://ecfa.board.tw/ （連結已失效）

Google Sheet 後來：

https://docs.google.com/spreadsheets/d/1wYByB1HQ7F6zhFuyOGiYZ24tCs7DWY5ZSKfENfOW7xQ/edit?usp=sharing

 

ET B相關專案

IPA C（衍生自某專案/衍生出某專案/API串接自某專案.）

 

授權方式

CHEETAH LMIT / CC-BY

 

IPA C使用資料

ET B（會使用到哪些資料來源、各是什麼授權）

 

專案目前狀態

IPA C（構想 / 規劃 / 雛形 / 實作）

 

ET B利益揭露

（牽涉到哪些組織團體、有哪些已知的或潛在的金錢或物質或無形利益報酬）

 

 

IPA C徵求協作者

 

LANFON發起人/拋磚人：

• 淑華NeedsWriter: 需要文案幫手（撰寫基本資訊、報導專案etc）
• NeedsDesigner: 需要介面設計
• NeedsData: 需要資料（擷取、清理）
• NeedsTech: 需要技術支援（程式、架站 etc)
• NeedsProcess: 需要幫忙設計作業流程
• NeedsTalkingToRealPerson: 需要有人幫忙和其他機關聯絡

 

 

ET B實作細節（非技術背景可跳填）

 

ET B協作工具

• CHEETAH LGithub repo: https://github.com/g0v/HackStory
• Hackfoldr 工作資料夾網址：
• Google Drive: https://drive.google.com/drive/folders/0B3WI0Q0DjiUfQUdZeWJmQkVtdVk?usp=sharing
• Slack: https://g0v-tw.slack.com/archives/hackstory

 

測試檔案

Sample檔案

MU-ANSample spreadsheet

CHEETAH LSample spreadsheet (同婚議題)

 

ET B進度與 to-do

ET Blue僅供參考

• product planning（recommanded procedure from justin lee / 李易修）
• strategy
• scope
• structure
• wireframe
• visual
• web front-end
• web back-end
• ui / visual design

 

 

CHEETAH LFunction List

第一階段：建立新故事、建立新軸線、建立事件、編輯事件

第二階段：多軸建立：建立多重軸線→軸線位置移動功能→軸線間關係圖示的功能→多軸線顏色自選與分束功能→基本功能完成

第三階段：優化工程：自適應時間間距、開放時間間距縮放→多軸合併顯示

第四階段：故事交織：軸線資料共享功能→軸線資料分類目錄

第五階段：行動閱讀

 

 

 

JOHNSON LTechnical docs

• Timeline JS API https://github.com/NUKnightLab/TimelineJS3/blob/master/API.md
• Google sheet API https://developers.google.com/sheets/quickstart/js

 

 

CHEETAH L→

ET B成果展示（規劃文件、雛形/草稿、原型/初稿、正式發佈/完稿）

JOHNSON LPrototype 網址：https://g0v.github.io/HackStory/

 

CCFOX使用 json file 製作 timelinejs3 timeline:

• https://www.dropbox.com/s/fafdhr5pwcg2fgd/test1.json?dl=0
• https://www.dropbox.com/s/wmjn0xmmzmghy7z/use_json.htm?dl=0

使用 visjs 為基底發展 HackStory: http://visjs.org/timeline_examples.html

 

 

 

 

VIVIANNE C

 

CHEETAH L圖一（圖示）

 

 

 

 

VIVIANNE C

 

CHEETAH L圖二（新增圖表）

 

 

VIVIANNE C

 

CHEETAH L圖三（填入圖表名稱、時間跨距、描述）

 

 

 

VIVIANNE C

 

CHEETAH L圖四（主畫面：右邊有加入軸線與事件的選項、也有時間跨距縮放呈現的功能）

DDIO Jy

 

 

 

VIVIANNE C

 

CHEETAH L圖五（建立時間軸：填入名稱、時間跨距與描述）

 

 

 

VIVIANNE C

 

CHEETAH L圖六（第一條時間軸已經建立）

 

 

VIVIANNE C

 

CHEETAH L圖七（新增事件：填入名稱、時間、所屬時間軸、標籤、描述）

 

 

 

VIVIANNE C

 

CHEETAH L圖八（軸線一已建立兩個事件，軸線二也被建立）