動民主 1.0 介面設計 Pirate Feedback UI Redesign
編輯歷史
| 時間 | 作者 | 版本 |
|---|---|---|
| 2013-10-05 11:10 – 11:11 | r1942 – r1947 | |
顯示 diff（112 行未修改）
|
||
| 2013-08-09 23:47 – 00:10 | r1929 – r1941 | |
顯示 diff- Pirate Feedback UI Redesign 動民主介面設計
+ 動民主 1.0 介面設計 Pirate Feedback UI Redesign
專案介紹 | Project Readme / Meta
（1 行未修改）
動民主介面改版之前端工程卡關搶救計畫 - hackth4n 專用頁面
這次 8/10 黑客松的東西先放上面這個文件（因為主要 focus 在 angular 怕整個貼落落長），之後再合併進來原本這邊
+ *我後悔了，應該一開始就放同一份文件才對 QQ
（74 行未修改）
*N*初版 UI 與 mockup - ETBlue
*angular js 前端工程 - Pomin Wu, Yuan Hsiang Cheng
- *出版 UI 改良 - （請簽名）*前開發手札
+ *初版 UI 改良 - （請簽名）*前開發手札
前端工具集
（24 行未修改）
|
||
| 2013-08-08 09:33 – 09:34 | r1918 – r1928 | |
顯示 diff（72 行未修改）
*由義大利的朋友 Lorenzo 將前後端改成 angular js - https://github.com/Mec-iS/angular-lqfb-redesign
+ *Yuan Hsiang Cheng 套好了 http://yhsiang.github.io/angular-lqfb-redesign/app/#/
+ *
*開發者
（3 行未修改）
*阿修分工與成員
*N*初版 UI 與 mockup - ETBlue
- *angular js 前端工程 - （請簽名）
+ *angular js 前端工程 - Pomin Wu, Yuan Hsiang Cheng
*出版 UI 改良 - （請簽名）*前開發手札
（25 行未修改）
|
||
| 2013-08-08 08:25 – 08:27 | r1890 – r1917 | |
顯示 diff Pirate Feedback UI Redesign 動民主介面設計
專案介紹 | Project Readme / Meta
+
+
+ 動民主介面改版之前端工程卡關搶救計畫 - hackth4n 專用頁面
+ 這次 8/10 黑客松的東西先放上面這個文件（因為主要 focus 在 angular 怕整個貼落落長），之後再合併進來原本這邊
（101 行未修改）
|
||
| 2013-08-05 19:10 – 19:44 | r1446 – r1889 | |
顯示 diff- Liquid Feedback Visual Comminucation
- g0v 升級版 lqfb 之介面改良計畫（握拳）
+ Pirate Feedback UI Redesign 動民主介面設計
+ 專案介紹 | Project Readme / Meta
- prototype: http://lqfb-test.g0v.tw/pf/
+ *來龍去脈（想解決什麼問題）
- *前端工具集
+ 主旨
+ *pirate feedback 是一套開源碼的民主倡議與表決系統，目前已中文化並使用中。但介面讓使用者難以接受，所以需要重新設計。
+
+ 牽涉領域
+ *基礎建設
+
+ 現有類似專案
+ *動民主 2.0（壹民主 / 全民踹共 / 零時國會 / ... 名稱未定） 新版動民主還在早期規劃階段，在那之前，我們需要先讓第一版動民主可以上線使用，到時候再轉換過去
+
+ 相關組織單位
+ *g0v
+
+ 相關專案
+ *pirate feedback 是 liquid feedback 的改良版
+
+ 授權方式
+ *源碼：
+ *視覺設計：CC
+
+ 使用資料
+
+
+ 相關資訊
+ *台德義 edemocracy 討論群組 - https://groups.google.com/forum/#!forum/e-dem
+ *動民主 1.專 與 2.0 專案展過程 - https://docs.google.com/presentation/d/1kA3jf0pQbPF87mRidkp0ChlAiztGw8eOYYTasfU0yQ0/edit?usp=sharing
+ 專案目前狀態
+ **雛形
+
+ *目標與功能（要如何解決）
+ 預
+ 定使用者
+
+ *一般上網族群，非資訊宅
+ 預定功能
+
+ *同 pirate feedback，只是介面重新整理
+ 使用方式
+
+ *desktop / mobile
+
+ *實做細節（非技術背景可跳填）
+
+ 使用技術與工h*angular js
+ *jade
+ *sass
+
+ 協作工具
+ ackfoldr 工作資料夾網址：
+ http://hack.g0v.tw/meta/sonS8O8jEzU
+
+ *github repo：https://github.com/Mec-iS/angular-lqfb-redesign
+ 出檔案格式
+
+
+ *html / css / js進度與 to-do
+ *w*ui / visual design
+ e需要重新套版至 angular jsu有成果
+
+ *pirate feedback 系統原貌 http://lqfb-test.g0v.tw/pf/
+
+ *系統分析文件 https://docs.google.com/folder/d/0B0NsS2a-Qx8ZN3dBc3F2R2dzUzg/edit?docId=1UrC-s_SA70JbxdcaOlOxuVTJ3i9USA_pMnRI2OZ6s5k*介面設計圖稿 https://docs.google.com/folder/d/0B0NsS2a-Qx8ZV0ZGVEJLRHUtSk0/edit
+ *第一版 html / css mockup http://g0v.github.io/pirate_feedback_ui_redesign/
+ *由義大利的朋友 Lorenzo 將前後端改成 angular js - https://github.com/Mec-iS/angular-lqfb-redesign
+
+ *開發者
+
+ 技術指導
+
+
+ *阿修分工與成員
+ *N*初版 UI 與 mockup - ETBlue
+ *angular js 前端工程 - （請簽名）
+ *出版 UI 改良 - （請簽名）*前開發手札
+
+ 前端工具集
mobile web
Quick Start Guide to PhoneGap+AngularJS
（1 行未修改）
http://nativedroid.godesign.ch/demo/index.html
Topcoat - CSS for clean and fast web apps.
- 色盲友善色票
- http://colorbrewer2.org/
-
+ 色盲友善色票 http://colorbrewer2.org/
讓 Fire.app 支援 Jade 的方法
- *開發手札
- au 發現 jQuery Mobile 有 holo 的 skin
+ irc 暫存區
+ au 發現 jQuery Mobile 有 holo 的 skin
http://nativedroid.godesign.ch/
很擔心prfb的網頁版爆炸慢
（12 行未修改）
|
||
| 2013-08-05 18:05 | r1445 | |
顯示 diff（12 行未修改）
色盲友善色票
http://colorbrewer2.org/
-
- 讓 Fire.app 支援 Jade 的方法（Windows 7 版）
- *Linux 跟 Mac 請以此類推... XD
- *用 command prompt 安裝 Jade
- *按 Windows 鍵
- *出現開始功能表，游標會自動出現在下方搜尋框
- *輸入 cmd 後按 enter
- *找到 cmd.exe （也就是 command prompt）並執行它
- *在 command prompt 裡輸入 npm install -g jade 後按 enter
- *會自動上網抓 Jade 的程式並安裝它，要跑一小下子
- *製作 Fire.app 的 Jade 設定檔
- *打開檔案總管，移動到需要使用 Jade 的專案的資料夾
- *在專案資料夾根目錄空白的地方按「滑鼠右鍵→新增→純文字檔案」
- *檔名設定成 http_servlet_handler.rb （注意副檔名要改成 .rb，不是 .txt）
- *如果看不到副檔名，在檔案總管按 Alt + F 叫出功能選單，選「工具→資料夾選項」，再選檢視分頁，找到「隱藏已知檔案的副檔名」取消打勾，然後按「確定」
- *連到 https://gist.github.com/tka/5302996 網頁
- *往下捲一點，找到 http_servlet_handler.rb for windows 這一段
- *把內容複製後貼到剛才新增的 http_servlet_handler.rb 文字檔中，存檔
- *測試
- *在專案資料夾根目錄裡新增空白的文字檔，檔名叫 foo.jade
- *打開 Fire.app
- *跑完以後程式 icon 會出現在開始列的通知區，剛打開時 icon 黑色的
- *按下 Fire.app icon，選 watch folder... 後選專案資料夾的位置
- *watch 後 fire.app 的 icon 會變成彩色的
- *如果原本已經在 watch folder 中，先 stop watching 然後再重新 watch 一次
- *連到 http://127.0.0.1:24681/foo.jade
- *網頁一片空白沒有錯誤訊息，就表示成功了 :D
+ 讓 Fire.app 支援 Jade 的方法
*開發手札
（15 行未修改）
|
||
| 2013-06-30 02:05 – 02:45 | r947 – r1444 | |
顯示 diff（9 行未修改）
phonegap / phonegap-app-anyconference
http://nativedroid.godesign.ch/demo/index.html
-
Topcoat - CSS for clean and fast web apps.
-
色盲友善色票
http://colorbrewer2.org/
+
+ 讓 Fire.app 支援 Jade 的方法（Windows 7 版）
+ *Linux 跟 Mac 請以此類推... XD
+ *用 command prompt 安裝 Jade
+ *按 Windows 鍵
+ *出現開始功能表，游標會自動出現在下方搜尋框
+ *輸入 cmd 後按 enter
+ *找到 cmd.exe （也就是 command prompt）並執行它
+ *在 command prompt 裡輸入 npm install -g jade 後按 enter
+ *會自動上網抓 Jade 的程式並安裝它，要跑一小下子
+ *製作 Fire.app 的 Jade 設定檔
+ *打開檔案總管，移動到需要使用 Jade 的專案的資料夾
+ *在專案資料夾根目錄空白的地方按「滑鼠右鍵→新增→純文字檔案」
+ *檔名設定成 http_servlet_handler.rb （注意副檔名要改成 .rb，不是 .txt）
+ *如果看不到副檔名，在檔案總管按 Alt + F 叫出功能選單，選「工具→資料夾選項」，再選檢視分頁，找到「隱藏已知檔案的副檔名」取消打勾，然後按「確定」
+ *連到 https://gist.github.com/tka/5302996 網頁
+ *往下捲一點，找到 http_servlet_handler.rb for windows 這一段
+ *把內容複製後貼到剛才新增的 http_servlet_handler.rb 文字檔中，存檔
+ *測試
+ *在專案資料夾根目錄裡新增空白的文字檔，檔名叫 foo.jade
+ *打開 Fire.app
+ *跑完以後程式 icon 會出現在開始列的通知區，剛打開時 icon 黑色的
+ *按下 Fire.app icon，選 watch folder... 後選專案資料夾的位置
+ *watch 後 fire.app 的 icon 會變成彩色的
+ *如果原本已經在 watch folder 中，先 stop watching 然後再重新 watch 一次
+ *連到 http://127.0.0.1:24681/foo.jade
+ *網頁一片空白沒有錯誤訊息，就表示成功了 :D
（16 行未修改）
|
||
| 2013-06-18 13:18 – 13:19 | r933 – r946 | |
顯示 diff（5 行未修改）
*前端工具集
+ mobile web
Quick Start Guide to PhoneGap+AngularJS
- Topcoat - CSS for clean and fast web apps.
phonegap / phonegap-app-anyconference
http://nativedroid.godesign.ch/demo/index.html
+
+ Topcoat - CSS for clean and fast web apps.
+
+ 色盲友善色票
+ http://colorbrewer2.org/
（16 行未修改）
|
||
| 2013-06-14 07:56 – 07:56 | r931 – r932 | |
顯示 diff（8 行未修改）
Topcoat - CSS for clean and fast web apps.
phonegap / phonegap-app-anyconference
+ http://nativedroid.godesign.ch/demo/index.html
（16 行未修改）
|
||
| 2013-06-12 17:50 – 17:52 | r901 – r930 | |
顯示 diff（2 行未修改）
prototype: http://lqfb-test.g0v.tw/pf/
-
- *Strategy
- 動民主系統的目的
- *老少咸宜，有電腦的人就能夠參與
- *
-
- *Scope
-
- *Structure
- 網頁結構/內容從海盜黨的架構中改良
- *議案 (level 1) (landing page)
- *filter
- *屬於哪個組織（所有/我的/特定組織）
- *屬於哪個主題（所有/我的/特定主題）
- *狀態（進行中/已結束）
- *處於哪個階段
- *我對議案的態度
- *timeline
- *
- *news
- *
- *組織 (level 1)
- *
- *成員 (level 1)
+ *前端工具集
+ Quick Start Guide to PhoneGap+AngularJS
+ Topcoat - CSS for clean and fast web apps.
+ phonegap / phonegap-app-anyconference
（16 行未修改）
|
||
| 2013-06-11 08:44 – 09:01 | r879 – r900 | |
顯示 diff Liquid Feedback Visual Comminucation
g0v 升級版 lqfb 之介面改良計畫（握拳）
- http://lqfb-test.g0v.tw/pf/
- part 1: User Interface
+ prototype: http://lqfb-test.g0v.tw/pf/
*Strategy
動民主系統的目的
*老少咸宜，有電腦的人就能夠參與
-
- user story
- *不熟悉電腦的使用者
- *目標
- *
- *行為
- *應該
- *用 layout 暗示動民主系統架構，
- *不用看說明文字就自動會操作
- *最好是連說明圖都不用畫 XD
- *不應該
*
（17 行未修改）
*
*成員 (level 1)
-
-
- *Wireframe / Content
-
-
- *Visual
-
- 持續更新於 picasa 相簿：https://picasaweb.google.com/110174937980629662857/G0v?authuser=0&feat=directlink
-
- mockup
-
- mobile
- *timeline
- *layout *
- *filter *
- *filter version 2*
-
-
- *units and areas
- *
- *members
- tablet / desktop
- *timeline
- *hand drawing draft https://picasaweb.google.com/lh/photo/qL8KJoya4Tba7ptvEIxUndMTjNZETYmyPJy0liipFm0?feat=directlink
（14 行未修改）
也有怎麼樣都卷不完，但是每次只 render 出一些資料的方法喲
聽說叫做 grid
-
-
-
- part 2: Illustrated Tutorial
- 參考資料 http://openlife.cc/blogs/2012/october/how-hook-solon-secure-voting-liquid-feedback
|
||
| 2013-06-10 17:01 – 17:05 | r849 – r878 | |
顯示 diff（54 行未修改）
*layout *
*filter *
- *filter version 2
- **
- **
+ *filter version 2*
+
+
*units and areas
*
（28 行未修改）
|
||
| 2013-06-10 14:08 – 14:09 | r836 – r848 | |
顯示 diff（54 行未修改）
*layout *
*filter *
+ *filter version 2
+ **
+ **
*units and areas
*
（28 行未修改）
|
||
| 2013-06-08 18:17 – 18:19 | r805 – r835 | |
顯示 diff（61 行未修改）
*timeline
*hand drawing draft https://picasaweb.google.com/lh/photo/qL8KJoya4Tba7ptvEIxUndMTjNZETYmyPJy0liipFm0?feat=directlink
+
+ *開發手札
+ au 發現 jQuery Mobile 有 holo 的 skin
+ http://nativedroid.godesign.ch/
+ 很擔心prfb的網頁版爆炸慢
+ 所以要包成 app 啊
+ 據說 web app 也要全部先 render 出來，只是讓 view 疊在一起，然後在互動時調換 layer 順序？
+ 不然用 toggle display 一樣會 render 很久...
+ 是的，jQuery mobile 正是這樣
+ app 的好處只是所有的 view 一次在安裝時下載完了
+ （而安裝時使用者的耐心比平時好很多）
+ 那麼議案清單需要分頁嗎？還是一直往下捲捲捲... 據說 js 不清記憶體的，捲到後面會爆炸慢 orz
+ 我覺得如果同時進行的議案不太多
+ =看歷史議案不是常態
+ =有需要時(捲到後面)再載入 = 就還好。
+ 也有怎麼樣都卷不完，但是每次只 render 出一些資料的方法喲
+ 聽說叫做 grid
（3 行未修改）
|
||
| 2013-06-08 07:24 – 07:26 | r784 – r804 | |
顯示 diff Liquid Feedback Visual Comminucation
g0v 升級版 lqfb 之介面改良計畫（握拳）
-
http://lqfb-test.g0v.tw/pf/
（48 行未修改）
mobile
*timeline
- *layout https://picasaweb.google.com/lh/photo/un7ZAawPLwVuTPMWy5IVd9MTjNZETYmyPJy0liipFm0?feat=directlink
- *filter https://picasaweb.google.com/lh/photo/rLiMKLycrXO56rovTt_me9MTjNZETYmyPJy0liipFm0?feat=directlink
+ *layout *
+ *filter *
*units and areas
*
（11 行未修改）
|
||
| 2013-06-07 12:44 – 12:44 | r780 – r783 | |
顯示 diff（1 行未修改）
g0v 升級版 lqfb 之介面改良計畫（握拳）
- http://lqfb-test.g0v.tw/g0v/
+ http://lqfb-test.g0v.tw/pf/
part 1: User Interface
（64 行未修改）
|
||
| 2013-06-07 07:42 – 07:43 | r767 – r779 | |
顯示 diff（11 行未修改）
user story
*不熟悉電腦的使用者
- *目標：
+ *目標
*
- *應該：
+ *行為
+ *應該
*用 layout 暗示動民主系統架構，
*不用看說明文字就自動會操作
*最好是連說明圖都不用畫 XD
+ *不應該
+ *
*Scope
（46 行未修改）
|
||
| 2013-06-07 05:13 – 05:17 | r702 – r766 | |
顯示 diff（6 行未修改）
*Strategy
- 目標：
- *用 layout 暗示系統架構
+ 動民主系統的目的
+ *老少咸宜，有電腦的人就能夠參與
+
+ user story
+ *不熟悉電腦的使用者
+ *目標：
+ *
+ *應該：
+ *用 layout 暗示動民主系統架構，
*不用看說明文字就自動會操作
*最好是連說明圖都不用畫 XD
（3 行未修改）
*Structure
-
- 議案 (level 1) (landing page)
+ 網頁結構/內容從海盜黨的架構中改良
+ *議案 (level 1) (landing page)
*filter
*屬於哪個組織（所有/我的/特定組織）
（5 行未修改）
*
*news
-
- 組織 (level 1)
-
- 成員 (level 1)
+ *
+ *組織 (level 1)
+ *
+ *成員 (level 1)
- *Content
+ *Wireframe / Content
- *Wireframe & Visual
+ *Visual
持續更新於 picasa 相簿：https://picasaweb.google.com/110174937980629662857/G0v?authuser=0&feat=directlink
（20 行未修改）
|
||
| 2013-06-07 01:00 – 01:01 | r690 – r701 | |
顯示 diff（36 行未修改）
*Wireframe & Visual
+
+ 持續更新於 picasa 相簿：https://picasaweb.google.com/110174937980629662857/G0v?authuser=0&feat=directlink
mockup
（18 行未修改）
|
||
| 2013-06-03 05:24 – 05:29 | r590 – r689 | |
顯示 diff（15 行未修改）
*Structure
+
+ 議案 (level 1) (landing page)
+ *filter
+ *屬於哪個組織（所有/我的/特定組織）
+ *屬於哪個主題（所有/我的/特定主題）
+ *狀態（進行中/已結束）
+ *處於哪個階段
+ *我對議案的態度
+ *timeline
+ *
+ *news
+
+ 組織 (level 1)
+
+ 成員 (level 1)
（24 行未修改）
|
||
| 2013-06-03 03:36 – 03:54 | r334 – r589 | |
顯示 diff（2 行未修改）
http://lqfb-test.g0v.tw/g0v/
-
- *User Interface
+ part 1: User Interface
- Strategy
+ *Strategy
目標：
*用 layout 暗示系統架構
（1 行未修改）
*最好是連說明圖都不用畫 XD
- Scope
+ *Scope
- Structure
+ *Structure
+ *Content
+ *Wireframe & Visual
- *Illustrated Tutorial
+ mockup
+
+ mobile
+ *timeline
+ *layout https://picasaweb.google.com/lh/photo/un7ZAawPLwVuTPMWy5IVd9MTjNZETYmyPJy0liipFm0?feat=directlink
+ *filter https://picasaweb.google.com/lh/photo/rLiMKLycrXO56rovTt_me9MTjNZETYmyPJy0liipFm0?feat=directlink
+ *units and areas
+ *
+ *members
+
+ tablet / desktop
+ *timeline
+ *hand drawing draft https://picasaweb.google.com/lh/photo/qL8KJoya4Tba7ptvEIxUndMTjNZETYmyPJy0liipFm0?feat=directlink
+
+
+
+ part 2: Illustrated Tutorial
參考資料 http://openlife.cc/blogs/2012/october/how-hook-solon-secure-voting-liquid-feedback
|
||
| 2013-06-01 05:11 – 05:15 | r249 – r333 | |
顯示 diff（5 行未修改）
*User Interface
+
+ Strategy
+ 目標：
+ *用 layout 暗示系統架構
+ *不用看說明文字就自動會操作
+ *最好是連說明圖都不用畫 XD
+
+ Scope
+
+ Structure
+
+
（5 行未修改）
|
||
| 2013-06-01 04:04 – 04:06 | r185 – r248 | |
顯示 diff- Liquid Feedback UI Design
+ Liquid Feedback Visual Comminucation
g0v 升級版 lqfb 之介面改良計畫（握拳）
http://lqfb-test.g0v.tw/g0v/
- 圖解 http://openlife.cc/blogs/2012/october/how-hook-solon-secure-voting-liquid-feedback
- UI
+ *User Interface
+
+
+
+
+ *Illustrated Tutorial
+
+ 參考資料 http://openlife.cc/blogs/2012/october/how-hook-solon-secure-voting-liquid-feedback
|
||
| 2013-06-01 04:04 | r184 | |
顯示 diff（8 行未修改）
|
||
| 2013-06-01 03:54 – 04:04 | r178 – r183 | |
顯示 diff（2 行未修改）
http://lqfb-test.g0v.tw/g0v/
+
+ 圖解 http://openlife.cc/blogs/2012/october/how-hook-solon-secure-voting-liquid-feedback
+
+ UI
|
||
| 2013-05-31 08:01 – 10:02 | r66 – r177 | |
顯示 diff- Gas Feedback UI Design
+ Liquid Feedback UI Design
g0v 升級版 lqfb 之介面改良計畫（握拳）
http://lqfb-test.g0v.tw/g0v/
-
- *Wording
- 領域
|
||
| 2013-05-31 08:01 | r65 | |
顯示 diff（7 行未修改）
|
||
| 2013-05-31 08:00 – 08:01 | r54 – r64 | |
顯示 diff（3 行未修改）
http://lqfb-test.g0v.tw/g0v/
- W
+ *Wording
+ 領域
|
||
| 2013-05-31 08:00 | r53 | |
顯示 diff（6 行未修改）
|
||
| 2013-05-31 08:00 | r52 | |
顯示 diff（2 行未修改）
http://lqfb-test.g0v.tw/g0v/
+
+ W
|
||
| 2013-05-29 11:04 – 11:05 | r29 – r51 | |
顯示 diff- Gas Feedback
- g0v 升級版的流動式民主
+ Gas Feedback UI Design
+ g0v 升級版 lqfb 之介面改良計畫（握拳）
+
+ http://lqfb-test.g0v.tw/g0v/
|
||
| 2013-05-29 09:54 – 09:57 | r1 – r28 | |
顯示 diff- Untitled
-
- This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
+ Gas Feedback
+ g0v 升級版的流動式民主
|
||
| 2013-05-29 09:54 | r0 | |
顯示 diff+ Untitled
+ This pad text is synchronized as you type, so that everyone viewing this page sees the same text. This allows you to collaborate seamlessly on documents!
|
||