fluid UI為一個能夠快速完成APP介面雛型的網站，免費使用者能夠最多建置一個Project、最多十個頁面，對於大型的專案可能不太夠用，但對於小型專案即是一個不錯的選擇，能夠快速的添加各種元件進入介面中，以快速完成介面雛型。
https://www.fluidui.com/editor/live/preview/p_SSzpdu0ksTdhUrznKtpxVcqokQ6FfwlU.1428896345520
2015年4月12日 星期日
2015年4月4日 星期六
取代紙本，從報紙到APP-聯合報plus
每天早上，刷牙洗臉後，出門去便利商店買一份報紙，回家搭配著早餐，這是中年人世代的人每天日常的一部分，隨著這世代的人年紀越來越大，而現今的青年、少年世代，卻再也沒有人會去便利商店買報紙了，聯合報也發現了這個現象，因此，在報紙銷售漸漸跌落的同時，取而代之的是行動APP，以迎合現在年輕人的口味，讓傳統的報業能夠繼續走下去。
Tag(標籤)
該如何將報紙上的文章，能夠在APP上呈現，讓讀者更好讀呢？這成了報紙轉為APP最重要的課題，為文章加上Tag(標籤)是一個好方法，無論以人工或是利用程式從文章中自動找尋，都能使讀者能夠透過分類好讀文章，例如一則有關於林書豪的新聞，先從各大分類：社會、體育、娛樂、生活等等標籤中，挑選出體育的標籤，從粗到細依序加上籃球、NBA等等分類標籤，這能幫助讀者便於從分類中尋找文章，而也可在加上其他內容特別的標籤，如：湖人、林書豪等等，也可以幫助讀者從搜尋功能中找到想要閱讀的內容。
Diigo
https://www.diigo.com/
Diigo是一個可以用來替網頁建立書籤(bookmark)的工具，使用者替文章建立想要的標籤，而這個標籤是存在於網路上的，其他的使用者找可以透過網路查看標籤，其目的是從文章中找出重點，讓社群可以快速地蒐集資料及分享意見，而除了製作標籤外，在看網頁的時候，也可以在重要的地方畫重點或是貼便條紙，以提供備註的效果，Diigo即為一個幫使用者作重點整理的工具，讓使用者間能夠更快速的閱讀文章。
Diigo
https://www.diigo.com/
Diigo是一個可以用來替網頁建立書籤(bookmark)的工具，使用者替文章建立想要的標籤，而這個標籤是存在於網路上的，其他的使用者找可以透過網路查看標籤，其目的是從文章中找出重點，讓社群可以快速地蒐集資料及分享意見，而除了製作標籤外，在看網頁的時候，也可以在重要的地方畫重點或是貼便條紙，以提供備註的效果，Diigo即為一個幫使用者作重點整理的工具，讓使用者間能夠更快速的閱讀文章。
TimelineJS
當作完文章的分類後，接下來就要處理文章的呈現方式，除了傳統的分類搜尋，而有一種新的呈現方式-時間軸，利用TimelineJS讓讀者能夠由時間軸查看新聞，一方面幫助讀者釐清時序，另一方面在整理資料、做懶人包時也是相當有幫助的。
TimeMapper
而除了時間點以外，TimeMapper加入了一個新元素-地點，將文章、時間軸、地圖三者融合在一起，地域性也是新聞中很重要的元素之一，當然在標籤中可能已經貼上了亞洲、台灣、台
北等等地區性標籤，但是如果能很直觀的在地圖上呈現，有助於讀者快速的認知，而TimeMapper即是做了這項應用，當選擇時間軸上的任一事件時，上方會帶出事件的詳細文章內容，而右側的地圖也會快速地指向發生該事件的區域。
當報紙漸漸被網路取代，傳統的報業則必須想出新的應用使其能夠永續長存，而在將報紙結合為APP的同時，以標籤作為分類的基礎，再利用TimelineJS、TimeMapper等等呈現方式，這些新穎的呈現方式即是為了讓讀者能夠更易閱讀，也是報業是否能在APP下繼續生存的關鍵要素。
當作完文章的分類後，接下來就要處理文章的呈現方式，除了傳統的分類搜尋，而有一種新的呈現方式-時間軸，利用TimelineJS讓讀者能夠由時間軸查看新聞，一方面幫助讀者釐清時序，另一方面在整理資料、做懶人包時也是相當有幫助的。
TimeMapper
而除了時間點以外，TimeMapper加入了一個新元素-地點，將文章、時間軸、地圖三者融合在一起，地域性也是新聞中很重要的元素之一，當然在標籤中可能已經貼上了亞洲、台灣、台
北等等地區性標籤，但是如果能很直觀的在地圖上呈現，有助於讀者快速的認知，而TimeMapper即是做了這項應用，當選擇時間軸上的任一事件時，上方會帶出事件的詳細文章內容，而右側的地圖也會快速地指向發生該事件的區域。
當報紙漸漸被網路取代，傳統的報業則必須想出新的應用使其能夠永續長存，而在將報紙結合為APP的同時，以標籤作為分類的基礎，再利用TimelineJS、TimeMapper等等呈現方式，這些新穎的呈現方式即是為了讓讀者能夠更易閱讀，也是報業是否能在APP下繼續生存的關鍵要素。
2015年3月28日 星期六
雲端資料庫應用-Ragic 正忠排骨飯實例(二)
繼上一周Ragic菜單的應用，這週使用的是新功能訂便當，這個功能在沒有Ragic的環境下可能需要耗時兩周到一個月的時程，在Ragic中卻能僅僅使用十分鐘的時間將其完成，由此可見雲端資料庫於效率上有很大的幫助。
以下以正忠排骨飯的訂便當系統作為範例，簡述Ragic的功能：
設定各欄位：
相同於菜單，使用者必須先設定欄位，可以自由地調整欄位的位置與型態，而不同於菜單的是，兩者的權限不相同，菜單所使用的為外部布告欄，即外部使用者只可閱讀不可編輯，訂便當所使用的則為外部問卷，即外部使用者僅能編輯自己的部分而不能閱讀其他人的編輯內容。
Ragic與關聯式資料表不同之處為欄位的名稱沒有規定一定要英文或數字，他的欄位名稱即為關聯式資料表中的Value，而系統會自動幫使用者命名一個隱藏的Id。
連結工作表：
這也是Ragic中相當方便的功能，可以簡易的將訂便當的欄位與菜單的欄位相互結合，而使顧客能夠直接從菜單中選取欲訂的便當種類並填入數量，而便當的價格與小計則會自動的產生，讓顧客能夠很方便的訂便當。
Ragic的資料表概念也跟傳統的關聯式資料表不同，如訂便當時，Ragic為當你多訂一個種類的便當時，才會在新增一行，也節省了資料庫的空間，並且更貼近使用者的需求。
訂便當：
簡易的十分鐘操作完成後，即可讓顧客方便的訂便當囉！
訂便當一覽：
可以建立一個工作項目的報表，以送出時間當作篩選條件，即可產生訂便當一覽，讓店員也能夠簡易的觀看所有訂便當的資訊，以確保便當都能成功送達。
儀表板：
也能夠建立一個儀表板的報表，讓使用者能夠由訂便當的紀錄中，查看分析的數據，而也能夠自由決定呈現的項目，除了平均以外下面也能夠進行比率的分析，由資料筆數來評斷顧客的購買意願。
2015年3月15日 星期日
雲端資料庫應用-Ragic 正忠排骨飯實例(一)
Ragic為一個雲端資料庫的應用，使用者不需要會撰寫程式即可以建立資料庫，而功能也有許多巧思在裡面，只需要簡便的操作，即能為企業建立一個堪用的雲端資料庫，其中有許多實用的設定只需簡易的選取，即可達到平常需大量耗時的操作。
以下以正忠排骨飯的菜單作為範例，簡述Ragic之功能：
設定各欄位：
使用者一開始先行設定欄位名稱及輸入型態，其輸入形態不同於傳統的關聯式資料庫那般制式化的text、int，而加入許多實用的型態，如金額、電子郵件、電話，能幫助於輸入時快速的檢視資料型態，以減少錯誤。
輸入菜單資料：
當完成了基本的設定後，再來就是將菜單一筆一筆鍵入資料庫中，而也可從現有的檔案匯入，以快速形成表單，但是圖片的部分似乎沒有辦法，而需要一筆一筆將圖片上傳，這是我覺得可以改進的地方。
菜單一覽：
當所以菜單資料皆輸入後，即可成為下方的菜單，也可透過設定，改變其展示的方式，像是這個範例中，就是將其呈現方式設定為Album，即可以相簿方式來呈現。
內嵌至網頁：
選取好欲呈現的樣式後，會出現串程式碼，只需將程式碼內嵌至網頁中，即可完成Ragic的雲端資料庫應用了，是否非常的方便呢?
2015年3月8日 星期日
企業行動化(M化)對BPR的影響
行動裝置的普及，促使企業行動化掀起了新一波的BPR浪潮，企業M化也成為企業生存必需的措施，M化讓使用者能夠無所不在、定位性、個人化、便利性的使用原本必須在電腦上才能使用的功能，BYOD(Bring Your Own Device)也成為現今辦公室的趨勢，更快速地業務派給與線上辦公室的概念，也漸漸的於某些產業中取代傳統的辦公室概念，M化的普及卻也讓不了解的人有以下六大迷思：
1. 買了智慧型手機就是M化
M化真正的重點在於：「能否讓員工在任何地點、任何時間使用任何工具取得必要資訊。」 ，而智慧型手機只是M化的載具，若沒有為智慧型手機設計專屬的APP，使用上不但對業績沒有幫助，反而使用的不便會造成員工的困擾。
2. M化很單純
「M化實際上就是一次企業流程再造。」，M化的目的是為了改善企業的流程，這不僅是購買載具即能解決的，必須從流程中的根本、徹底的再造，雖然不及E化所需考慮的那麼廣泛，卻也沒有想像中的單純。
3. M化一定要使用無線網路
M化只要能於任何時間和地點取得必要資訊即可，不局限於使用無線網路。
4. M化等於抱著電腦資料到處跑
受限於較小的操作介面，需要適合於手持裝置的介面設計，才能讓使用者能夠更直觀、符合人體工學的使用，而不是呈現過多的資訊，而讓使用者無法快速取得必須的資訊，造成M化的效率降低。
5. 別人M化，所以我要跟進
如同ERP，不是每間企業都適合，必須配合企業內部的核心能力，以防止M化與BPR產生手腦做不同事情況，M化所促起的BPR，仍需配合企業的核心能力以及良好的系統設計，才能發揮最大的功效。
6. M化一次就可做完
M化不是一次就可以完成的，這會導致員工對於變革的抗拒，必須以領航導入(Pilot)的概念，從點再到線再到面，一步一步地讓企業M化，而達成BPR的效果。
M化在現今行動裝置普及的時代，已經是不可避免的趨勢，尋找到企業所需的M化概念，再透過良好的介面設計與系統設計，提升組織內外部的績效，若能以相適的系統運行，M化即能達到BPR的效用，改善企業的流程。
1. 買了智慧型手機就是M化
M化真正的重點在於：「能否讓員工在任何地點、任何時間使用任何工具取得必要資訊。」 ，而智慧型手機只是M化的載具，若沒有為智慧型手機設計專屬的APP，使用上不但對業績沒有幫助，反而使用的不便會造成員工的困擾。
2. M化很單純
「M化實際上就是一次企業流程再造。」，M化的目的是為了改善企業的流程，這不僅是購買載具即能解決的，必須從流程中的根本、徹底的再造，雖然不及E化所需考慮的那麼廣泛，卻也沒有想像中的單純。
3. M化一定要使用無線網路
M化只要能於任何時間和地點取得必要資訊即可，不局限於使用無線網路。
4. M化等於抱著電腦資料到處跑
受限於較小的操作介面，需要適合於手持裝置的介面設計，才能讓使用者能夠更直觀、符合人體工學的使用，而不是呈現過多的資訊，而讓使用者無法快速取得必須的資訊，造成M化的效率降低。
5. 別人M化，所以我要跟進
如同ERP，不是每間企業都適合，必須配合企業內部的核心能力，以防止M化與BPR產生手腦做不同事情況，M化所促起的BPR，仍需配合企業的核心能力以及良好的系統設計，才能發揮最大的功效。
6. M化一次就可做完
M化不是一次就可以完成的，這會導致員工對於變革的抗拒，必須以領航導入(Pilot)的概念，從點再到線再到面，一步一步地讓企業M化，而達成BPR的效果。
M化在現今行動裝置普及的時代，已經是不可避免的趨勢，尋找到企業所需的M化概念，再透過良好的介面設計與系統設計，提升組織內外部的績效，若能以相適的系統運行，M化即能達到BPR的效用，改善企業的流程。
2015年3月6日 星期五
工具應用：專案管理、心智圖、UML
專案管理：
Trello
https://trello.com/
是一種免費的專案管理工具，只需要使用信箱註冊後即可開始使用，組織(organization)的組長創造一個專案空間(board)供組織內的成員之間使用，以便條(list)為主要的溝通工具，組員發布主題的便條，而其他組員可以在下面發表評論，以達到討論的效果，即時的更新，讓組員間可以無間隙的溝通。
New Organization
首先，這個工具是從組織為出發點，組長創一個新的組織(organization)，其中可以對組織做粗略的描述(description)，邀請成員進入這個群組。
New Board
第二個步驟，創造一個專案，而專案在Trello中稱作board，設定一個名稱(title)，然後選擇一個組織加入這個專案，創完專案之後，組員就可在內自由討論了。
Add a list...
完成上述步驟後，組員即可以自由的新增便條(list)來進行討論，便條即為專題中討論的大標題，給定一個討論的方向及主題。
Add a card...
card是list中較細項的活動，為標題中的子標題，並在其中加入成員，以分而其他成員也可以在下面回應(comment)，以進行討論。
Trello提供了專案小組織間一個即時溝通、討論的平台，讓成員能夠將專題的內容，能夠有效的進行，免費而註冊方便，只需要信箱即能加入小組成員，操作起來也相當的簡單，但是上面沒有日曆、不能觀看甘特圖是其缺點，而這些功能可以使用Redmine來應用。
心智圖：
Mind iT
http://www.mindit-bookmarking.com/
是一個將書籤(bookmarking)繪製成心智圖的工具，心智圖是參考我們的輻射性思考的模式，將問題由一個點，延伸的不同面向，向四方散射的一種圖表，Mind iT是將瀏覽器中儲存的眾多網路書籤，繪製成心智圖，以位置及顏色來區分，以便日後使用時能更快速的找到，也進一步的成為學習知識的好幫手。
Browser Extension
Mint iT可以作為一個瀏覽器的擴充工具，擴充在瀏覽器上方的工具列中，讓需要使用時能快速地進入頁面。
Link Maps
每個節點代表一個網路書籤，用子節點來表示從屬關係。
Position and Color
可以藉由位置跟顏色來區分不同類型的資料，以顏色來將網站分類。
Easy to Navigate
右側有一條如Google Map中的縮放條，可以放大或縮小來尋找所需要的網站。
Add Note
點擊節點則可以進行編輯、新增、刪除、作註解等功能。
Instant Search
可以直接輸入想要尋找的關鍵字，來快速的找到資料。
Mind iT是一個能夠幫助專案管理的工具，將網路書籤繪製成心智圖，只需要點擊擴充於瀏覽器的Mind iT就可以快速地找到專案內所需相對應的資料。
UML：
Astah
http://astah.net/
是一個專門用來畫UML的免費好工具，可以協助使用者繪製出系統分析中UML的各種圖(diagram)，只用簡單的操作就能將平常很難畫的精美的圖，畫的維妙維肖。
File
跟一般的辦公室軟體相同，由檔案(file)為出發點，要開始繪製UML之前，必須先建立(new)一個新的檔案。
Diagram
畫圖是UML中的核心，而在Astah中，五個觀點的九張圖當然也都能在其中繪製，包括常用的use case diagram、class diagram等，這些都能在免費版的Astah中使用，而ER diagram、Data flow diagram等則必須要在專業版中才能使用，非常方便的一點是，當選擇了欲繪製的圖之後，會自動把該圖會使用到的圖案或是工具放在工具列上，每一個圖的工具列都不一樣，而使用者只須要簡單的操作就可以使用。
以class diagram為例，只需要連點兩下就會產生一個新的class，而在相對的位置中點擊一次則可以產生一個新的attribute或是operation，而只需要一般的拖曳就能夠移動各class的位置，點擊class則可以挑選線的種類來描述class的關聯，也可在旁邊做一個便利貼來做註解。
Astah是一個免費的UML工具，其中分成了professional跟community兩種版本，顧名思義community是免費下載的，而professional則可以有較多的功能，而Astah非常貼心的讓比較沒有經濟能力的學生可以申請免費證照(free licence)，讓學生即使不用付費也能使用到專業版的功能。
Trello
https://trello.com/
是一種免費的專案管理工具，只需要使用信箱註冊後即可開始使用，組織(organization)的組長創造一個專案空間(board)供組織內的成員之間使用，以便條(list)為主要的溝通工具，組員發布主題的便條，而其他組員可以在下面發表評論，以達到討論的效果，即時的更新，讓組員間可以無間隙的溝通。
New Organization
首先，這個工具是從組織為出發點，組長創一個新的組織(organization)，其中可以對組織做粗略的描述(description)，邀請成員進入這個群組。
New Board
第二個步驟，創造一個專案，而專案在Trello中稱作board，設定一個名稱(title)，然後選擇一個組織加入這個專案，創完專案之後，組員就可在內自由討論了。
Add a list...
完成上述步驟後，組員即可以自由的新增便條(list)來進行討論，便條即為專題中討論的大標題，給定一個討論的方向及主題。
Add a card...
card是list中較細項的活動，為標題中的子標題，並在其中加入成員，以分而其他成員也可以在下面回應(comment)，以進行討論。
Trello提供了專案小組織間一個即時溝通、討論的平台，讓成員能夠將專題的內容，能夠有效的進行，免費而註冊方便，只需要信箱即能加入小組成員，操作起來也相當的簡單，但是上面沒有日曆、不能觀看甘特圖是其缺點，而這些功能可以使用Redmine來應用。
心智圖：
Mind iT
http://www.mindit-bookmarking.com/
是一個將書籤(bookmarking)繪製成心智圖的工具，心智圖是參考我們的輻射性思考的模式，將問題由一個點，延伸的不同面向，向四方散射的一種圖表，Mind iT是將瀏覽器中儲存的眾多網路書籤，繪製成心智圖，以位置及顏色來區分，以便日後使用時能更快速的找到，也進一步的成為學習知識的好幫手。
Browser Extension
Mint iT可以作為一個瀏覽器的擴充工具，擴充在瀏覽器上方的工具列中，讓需要使用時能快速地進入頁面。
Link Maps
每個節點代表一個網路書籤，用子節點來表示從屬關係。
Position and Color
可以藉由位置跟顏色來區分不同類型的資料，以顏色來將網站分類。
Easy to Navigate
右側有一條如Google Map中的縮放條，可以放大或縮小來尋找所需要的網站。
Add Note
點擊節點則可以進行編輯、新增、刪除、作註解等功能。
Instant Search
可以直接輸入想要尋找的關鍵字，來快速的找到資料。
Mind iT是一個能夠幫助專案管理的工具，將網路書籤繪製成心智圖，只需要點擊擴充於瀏覽器的Mind iT就可以快速地找到專案內所需相對應的資料。
UML：
Astah
http://astah.net/
是一個專門用來畫UML的免費好工具，可以協助使用者繪製出系統分析中UML的各種圖(diagram)，只用簡單的操作就能將平常很難畫的精美的圖，畫的維妙維肖。
File
跟一般的辦公室軟體相同，由檔案(file)為出發點，要開始繪製UML之前，必須先建立(new)一個新的檔案。
Diagram
畫圖是UML中的核心，而在Astah中，五個觀點的九張圖當然也都能在其中繪製，包括常用的use case diagram、class diagram等，這些都能在免費版的Astah中使用，而ER diagram、Data flow diagram等則必須要在專業版中才能使用，非常方便的一點是，當選擇了欲繪製的圖之後，會自動把該圖會使用到的圖案或是工具放在工具列上，每一個圖的工具列都不一樣，而使用者只須要簡單的操作就可以使用。
以class diagram為例，只需要連點兩下就會產生一個新的class，而在相對的位置中點擊一次則可以產生一個新的attribute或是operation，而只需要一般的拖曳就能夠移動各class的位置，點擊class則可以挑選線的種類來描述class的關聯，也可在旁邊做一個便利貼來做註解。
Astah是一個免費的UML工具，其中分成了professional跟community兩種版本，顧名思義community是免費下載的，而professional則可以有較多的功能，而Astah非常貼心的讓比較沒有經濟能力的學生可以申請免費證照(free licence)，讓學生即使不用付費也能使用到專業版的功能。
訂閱：
文章 (Atom)