我在網站製作流程中各個環節會用到的工具

一個網站的製作流程,基本劃分就會專案接洽、網站企劃、視覺設計、前端工程、後端工程與測試上線這幾個環節,而在各個環節裡又會使用不同的工具,雖然可以找到在介紹前端的工具,或是介紹企劃的工具,但是將每個環節所需要的工具整理在一起的文章我個是還蠻少見的,喜歡實驗新工具的我而常常裝了一堆東西或註冊一堆東西之後,發現沒有推薦文章來的好用就刪除了,經過了這麼多年,以下就來介紹我還裝在我的mac上或是實際上我們公司有在使用的工具吧!

專案接洽

在這個環節裡主要是一些文書處理軟體,比方說Word、excel、Power Point或Page、Numbers、Keynote,除了這些常備文書軟體外,我們公司還有用:

Redmine - 專案管理系統,是免費的Open Source,可以分派問派、追蹤問題處理進度,並且可以統整文件與檔案,對專案進度頗重要的甘特圖也有內建功能對應,對我們公司的工作流程來說非常重要的,就連薪資我都是用這個做記錄。

OmniPlan - 這是我個人最近再用的單機專案管理軟體,Mac only。我會用它的主因是為了他的甘特圖,建立快速而且乾淨、清楚,但除此之外的其他功能我都沒在用,所以其實有點殺雞用牛刀的感覺。使用頻率不高,除非我要畫甘特圖,不然幾乎用不到。

網站企劃

Xmind - 對於資料整理、腦力激盪來說,我覺得Xmind真的非常有用,他可以用看似零散其實很有條理的mind map把資料整理起來,透過這樣整理的過程資料就可以變成有用的資訊,也可以讓我們比較全觀的看整個專案或是某個想法,可以避免見樹不見林的情況,而除了全觀以外,也可以細看某一個分支想法的細節,真的是可以讓你見樹又見林啊!mind map 這東西我從高中就開始使用了,還記得是某節輔導課輔導老師教的,要我們用mind map來表達我自己,我大概就是從這個時候開始才認為自己想走資訊吧,之後因為我很不會唸書,更不會背書,我就異想天開的想說不知道mind map能不能拿來背書......沒想到真的可以,成績也一路從吊車尾變成拿獎學金,厲害吧!還不趕快試試看用免費版本的Xmind來畫mind map!免費版其實就很夠用了,要付費也很ok喔!

Balsamiq Mockups - 這是一個網站很醜、軟體介面很醜,但是對於不會設計軟體的專案或企劃來說,非常容易上手的原型企劃工具,只要拖拉三兩下就可以完成一頁的企劃,缺點是他無法設定連結,所以我只有要做三個頁面以下或想快速表達我的想法時才會使用它,算是對專案溝通上非常便利的一個工具。

Mockplus - 這其實像是Balsamiq Mockups 的加強版,是對岸同胞製造的,有免費與付費版本,因為是對岸製造,所以對英文充滿障礙的朋友們就可以使用這個了,不但網站比較好看、軟體介面也比較好看,使用上手程度其實是差不多的,不過我個人使用的頻率比Balsamiq Mockups 低很多,原因在於Mockplus的功能強很多。

Axure rp - 我印象中我是從4.0版本開始用起,現在已經到8.0了,對於RWD響應式網站的繪製更加的便利、成熟、好用,不管是新手還是老手都可以用得非常開心,是用來建立wireframe的好幫手,我們家也是使用Axure rp 來建立wireframe與客戶核對規格、資料與功能,並且再透過wireframe與內部人員溝通,由於已經有畫面與資料,所以在內部溝通上問題就減少了很多,不用依靠彼此的想像來做討論,可以減少彼此誤會而產生糾紛的情況,一路用下來真的都很不錯!有些人可能會覺得用Axure rp 產出的html又不能延續使用,所以直接請前端來做wireframe不就好了,但是對我來說wireframe其實就像大樓建造時的藍圖,藍圖在討論過程中修修改改的,你總不能叫工程師直接來做吧?這樣工程師光處理這些不確定是否真的是修改的修改就可以忙到吐血了,怎麼集中火力做出品質好的前端?而且我們家人力非常精簡,所以這種算是核對內容的任務就該由專案或企劃來完成,讓工程師就專心在實際開發上,心無旁騖才能做得更好。但是如果今天是做擬真一點的prototype那我就會覺得可以由前端工程師來協助,原因在於prototype通常都很接近最後實際的成品,中間修改的服務不會像wireframe這麼大,對相較之下對於前端工程師的負擔就不會這麼重,也不會過於繁瑣。

視覺設計

photoshop - 這應該不用介紹了,我想做設計的不知道ps應該不算會設計吧?不過嚴格來說這是拿來修圖、修照片用的,不太適合拿來做網站。

illustrator - 我想這也是不需要介紹,因為這跟上一樣都是adobe出的,只是這個是向量軟體,對於RWD響應式網站來說還算是ok的設計軟體。

Sketchup app - 噢!這個軟體真的是太酷了,簡單、易學、好上手,最重要的是拿來做響應式網頁設計非常的方便,而且可以直接輸出@2x跟@3x的圖,一次還可以輸出多種格式,我現在偶而還會拿來畫圖,真的是好用得不得了!如果我還有更多空閒時間,我應該會一直跟它溺在一起吧!如果滿分五顆星,它應該是給五顆都不夠那種,沒試過的設計師一定要試試看!

marvel - 跟invision差不多的prototype webapp服務invision便宜,主要拿來與客戶過視覺設計使用,客戶可以直接在設計稿上標註留言,加快視覺提案修改與討論的進度。

前端/後端工程

Sublime Text - 前後端開發我都用它,因為他真的是神兵利器來著,好用的不得了!連我們家不會寫code的專案也都在用,因為真的很好用啊!順便介紹一些好用的plugin!

Sourcetree - 有介面的git工具,也可以搭配bitbucket使用。git的使用在中大型專案上顯得格外重要,尤其是多方協作的時候,很容易發生覆蓋或回朔的問題,有了git做版本紀錄後,誰誰誰蓋到code或誰誰誰搞錯檔案都很清楚,可以減少很多溝通上的誤會,也能快速讓所有的程式碼復原。

SvnX - 有介面的免費svn工具,如果不知道svn是什麼,其實svn跟git差不多,也是版本控管工具。

Prepros - 這是一個多功能的工具,他可以協助編譯Less、Sass、Compass、Stylus,也可以協助編譯Jade template、Haml、coffeescript等等,不管是壓縮檔案、圖片或是Live reload、FTP等功能,都非常好用。我目前都是過Prepros來處理CSS與使用Jade template和Live reload,非常方便,免費版會一直跳出贊助訊息,但是不影響使用,如果有能力贊助可以考慮一下。

imageoptim - 這是一個mac only的圖片壓縮程式,一般前端在處理圖片的時候,大部分還是會用photoshop來處理,可是photoshop在圖片縮的功能上奇差無比,同樣一張jpg的檔案大小有可能會差到50%,所以通常在上線之前,我會在用imageoptim壓縮所有的圖片,以減少網站loading。

filezilla - 我目前在使用的ftp,應該很多人也都使用這套,我會設定好FTP站台,然後匯出,讓客戶直接匯入filezilla使用,客戶只要點兩下就可以連上空間了。

主機/測試上線

除了一般LAMP系列(Linux、Apache、Mysql、php)以外,我有時還會安裝一些其他的東西來輔助我管理主機。

AWStats - 老牌免費的log分析,一般主機安裝完後都會有文字的log分析,但是因為打開就只會看到一多字,所以除非有什麼問題,不然其實很少會使用,但是安裝AWStats之後,log資料就會變得很簡單易懂,所以就清楚的可以看到流量、網友使用環境等等,讓log資料效益提高。

GoAccess - 跟AWStats一樣是log分析使用的,近期我比較喜歡用這一套,介面看起來比較新穎,比較適合我,我對介面好像跟好用其實還蠻注重的,不過功能來說其實跟AWStats差不多,安裝上來說,我覺得比AWStats簡單一點。

ApacheBench - 這是Apache附帶的一個主機壓力測試軟體,簡稱AB,主要是針對Apache主機效能做檢測,像是每秒可以送出多少request,除了Apache主機以外,像是lighttpd或是IIS主機也都可以使用。

Apache JMeter - 也是Apache的產品,採用Java開發,也是用來測試主機效能用的,這套應該會比AB詳細一點,不過我每次測試都只是大概看一下,所以我兩套都會用,交叉測試,雖然結果總是差不多就是了。

virtualbox - 虛擬機、模擬器,用來建立各種測試環境用的,我主要拿來跑windows OS用的,原因是有些客戶一定會用windows only的設定,導致我用mac無法使用,所以通常只有需要用windows的時候我才會使用。

MAMP - Mac軟體,類似xampp,是可以快速在本機端架起php使用環境的軟體,還蠻好用的。

其他

silverback - Mac專屬的UX使用軟體,主要就是螢幕錄影還有使用者臉部錄影,目前2.0已經可以免費使用,3.0還沒推出,持續等待新版推出中。

textnut - markdown文字編輯器,目前我是拿來寫部落格文章使用,但是圖片沒有辦法一起上傳到blog裡,所以還在尋找其他不錯的解決的方,但是拿來寫文章還不錯用。

以上就是我目前對於網站專案來說比較常用到的軟體工具,比較可惜的是有些是mac only,不是跨平台,不過應該還是找得到類似的軟體可以替代,希望這一篇對那些也想學得很複雜的朋友們有所幫助喔!

[免費]壓縮需要密碼?就用The Unarchiver

我的Mac有兩個解壓縮軟體,一個是The Unarchive另外一個是iUnarchive,但是我比較喜歡的是The Unarchive,因為The Unarchive是檔案小、解壓快而且支援解壓縮密碼輸入的軟體,整體運作起來非常快速,使用上也非常方便,通常剛用Mac的朋友都會不知道該如何解開有密碼的檔案,通常這時候如果你有The Unarchive,那根本就不是問題,不管是zip還是rar亦或是7-zip等壓縮檔案,都難不倒The Unarchive!軟體評價高達五顆星!

安裝後可以在右鍵選項中看到The Unarchive,如下圖:


您也可以修改預設值,當遇到壓縮軟體時都改用
The Unarchive開始,這樣的設定在The Unarchive的軟體中就可以找到:


是的,
The Unarchive支援繁體中文,你不用擔心介面太過外國人而看不懂,你甚至可以解壓縮後的位置與其他相關設定:

當然,The Unarchive也支援多國語系壓縮,所以遇到編碼不同的壓縮檔,你也不需要太過擔心:

如果你剛好缺一個完美的解壓縮軟體,那建議你可以試一下The Unarchive,保證可以解決你許多困擾!

軟體下載特快車:The Unarchive

[免費]iBoostUp加速與防護你的Mac

你是否有過系統使用久了之後覺得越來越慢,或者是越來越不穩定的情況?雖然大部份使用磁碟工具做驗證之後都會改善,但是如果遇到開機卡很久,連進入都困難時,你就會懊惱為什麼平常沒有做好防護了!

iBoostUp目前在App store免費排行榜65名,感覺起來還蠻後面的,但是如果你知道App store上面有幾百萬App之後你還會覺得排名很後面嗎?iBoostUp是一款可以檢測你的Mac狀況的軟體,除了幫你刪除那些擾人又佔空間的莫名其妙檔案外,還可以幫你掃瞄硬碟、檢測記憶體,甚至到防火牆、Wifi安全、系統檔案設定等等,可以說是麻雀雖小但是五臟俱全的軟體,偶而用一下真的可以讓你安心不少,如果你的Mac常常有小毛病,也許iBoostUp可以幫你忙噢!(本文章由草監影像私人頻道所撰寫)

軟體下載特快車:iBoostUp

[免費]avast! Mac版免費防毒軟體

對於Mac要不要安裝防毒軟體的事情還真的眾說紛紜,就我個人的部份我以前安裝過一個完全免費的iAntiVirus,不過使用頻率超低,僅有安裝時試過一次,再來就是在剛才要刪除前又使用了一次,掃起來不會有明顯的系統變慢的情況,不過掃出來的結果都像下圖:

是的!什麼東西都沒掃出來!有沒有覺得很掃興?如果你覺得很掃興,那我真的覺得你被PC寵壞了!因為沒東西才應該是正常的不是嗎?這樣代表你的系統非常安全阿!所以你說Mac好不好?(本篇文章來自草監影像私人頻道)

那既然很安全,為什麼我又要avast!安裝防毒軟體?首先,avast!在PC界已經擁有響當當的名聲,再來avast!推出的Mac版還在Beta階段,所以還在實驗中,對於一個熱愛Mac的使用者來說想測試一下應該也是人之常情,最後,現在Mac用戶越來越多,會不會像PC一樣當使用者多病毒也跟著多,那就是不得而知的情況了,所以基於以上的原因,我覺得我來試用一下avast! Mac版,對於日後的總總未知有個試過的軟體也是一種保障。

說了這麼多也該開始介紹一下我們今天的主角:avast! Mac版免費防毒軟體,安裝非常容易就跟其他軟體一樣下載後直接拖曳到應用程式資料夾即可,如下圖:

比較不同是,當軟體打開後還需要做一個軟體使用權益說明文件的閱讀,然後在做一些基本設計安裝,前後約1分鐘時間就會進入軟體了。(本篇文章來自草監影像私人頻道)

軟體打開以後就會像這樣,左邊是選單,右邊是選單內容,一開始進入的是軟體概述,所以你可以看到目前啓動中的功能、版本、病毒碼更新版本。

切換到掃描選項時,你會看到很多不同的掃瞄方式,你可以選擇你想要的掃瞄方式,甚至可以選則最後的客制化掃瞄,完成你像要的掃瞄方式。

最下方可以看到系統運作情況,當軟體開啟後就會自動掃瞄檔案,確保你的系統安全。

avast! Mac版免費防毒軟體還會常駐在右上角的選單列,你可以隨時開啓主控台,隨時間看系統情況,不過如果你問我安裝avast! Mac版免費防毒軟體會不會讓OS變慢,我的回答是:會!所以可想而知當我這篇文章寫完後,我很懷疑軟體會不會還存在,如果你有防毒軟體需求,也許你可以參考一下avast! Mac版免費防毒軟體,也期許表現會如同在PC上一樣這樣的出色!

軟體下載特快車:avast! Mac版免費防毒軟體

[應用]一定做的到的效率工作表-wunderlist

相信有許多人在以往常常會因為事情過多而一筆一筆列在筆記本上,每當完成一件事情便畫掉,來紀錄自己的進度,也管理自己手上的事物,而把這樣的模式資訊化後,就變成了現在眾所皆知的工作表了,其中Google就推出了工作表這個服務,你可以在自己的E-maol或是日曆中看到這項服務。

何謂工作表?簡單來說就是紀錄需要做的工作項目(也就是待辦事項),依照個人的喜好做分類(例如:未開始工作、進行中工作、以完成工作),讓你清楚的看到自己之後要做什麼、現在要做什麼還有你做完了什麼,你可以一目了然,不會漏掉或忘記什麼事情,你甚至還可以省去記憶工作項目的腦容量,也因為好處實在太多,所以現在越來越多人使用工作表,如果你還沒使用過,也許你該好好的來嘗試一下!

我一般都是用Google工作表,但是由於公司也採用Gmail,導致我的工作表分成兩個,這樣一來對我在工作紀錄上就常常會無法統一,而且開始漏東漏西,讓工作表變得毫無好處可言,但是這麼好的東西,又可以幫工作變得有條理的工具怎麼可以放著不用呢?所以首當其衝的問題就是解決我的工作表分開兩處的問題,使得我必須去另尋第三個工作表,而這個工作表也勢必會離開Google賬戶,畢竟我的工作表會分成兩個就是因為我自己本身跟公司的兩個Google帳號所致,正當我想解決這個問題的同時,我發現到一個iPhone App可以解決我的問題。等等?iPhone App?那不是手機軟體嗎?沒錯!這個軟體不但可以在手機上使用,還可以在電腦上使用,並且支援Mac 與 Windows,不但解決了工作表需要離開Google賬戶的問題,還解決了我在家裡用Mac、在公司用Windows的世紀大難題!

Wunderlist 雲端工作表管理
適用於Windows , Mac OS , iPhone , iPod Touch

Wunderlist是一個免費的雲端工作表軟體,他很簡單也很好用,而且因為是雲端,所以你可以在任何地方、任何時間、任何電腦、任何iPhone上都看到一樣的工作表!除了界面簡潔又有質感,它還有一個最大的優點,那就是它是免費的、Free的!

首次打開軟體你需要填入E-mail與密碼就可以建立帳號,以後你只要使用這組帳號密碼你就可以在任何地方使用任何電腦或iPhone來管理你的工作列表,我也不用像以前兩個Google帳號在那邊登出登入,省去了我許多的麻煩!

帳號建立完成後映入眼簾的畫面真的是又精緻又簡潔,而且一開始就寫上了教學項目告訴你該如何使用這個軟體,雖然沒有動態展示,但是光看那些"工作項目"我就非常清楚這個軟體就是我要的東西!

右下角是背景切換按鈕,你可以選擇你喜歡的背景,不管是陰沈的還是陽光或是可愛的,通通都有!保證符合大部份人的胃口,另外最右邊的那個箭頭則是縮起右邊側欄,如果不懂我在説什麼你可以嘗試案案看,因為這個按鈕不會讓你的帳號在五秒內自爆,所以不用擔心!

右上角的部份就是工作表類別了,這裡通常是未開始、進行中、以結束這類的標題,不過呢!這個軟體會將結束的部份放置在同一個工作類別中,所以分類就不會像以往那樣,而且會變成“家事工作表“、“公事工作表“ 等等這類的大項目,快速鍵是Cmd+L。

左邊最上方白色字部份就是這個工作表類別了,下面深色的欄位就是新增工作項目的部份了,可以填上“早上八點要開會“、“記得繳電話費“等等這類的待辦事項,快速鍵是Cmd+N或Cmd+T。咦?等等,如果我的工作是有時煎限制的怎麼辦?別擔心,你可以選擇最前面的小時鍾。

點選小時鍾後,就會出現月曆,你可以選擇你這個工作的完成日期, 讓你很快的掌握時間,如果真的不需要時間限制,那只要點選月曆右下角的“No Date“即可關閉月曆。

當然,有時候就是難免會手滑打錯字或誤新增一個代辦事項,這時你不需要緊張,如果是打錯字,你只要在代辦事項上點兩下就可以更改內容,如果是誤新增,只要相滑鼠移上代辦事項,最後方就會出現叉叉,點一下,你的煩惱就消失殆淨啦,如果是日期設定錯誤,基本上這跟打錯字是一樣的,只要點擊兩次待辦事項的文字,前方的星號就又會變成小時鍾,給他點下去你就可以調整正確的時間啦!
 

除了時間以外,有些事情比較緊急也比較重要,所以你可以上面打上星號提醒自己要趕快完成,你甚至可以直接拖拉做排序,而如果完成了你就可以在前方的白色框框按一下,這則代辦事項就會打勾,顯示已經完成!但是如果不幸的讓工作過期了怎麼辦?

 你就可以在左下角看到大大的紅色按鈕,告訴你你有幾件工作超時了!只要按下去就可以看到超時的待辦事項啦!

半透明的工作項目讓你會不會誤以為尚未完成,而且上面的待辦事項文字也會被畫掉,辨識程度非常高。

再來左下角的功能可以說非常重要,尤其又以綠色那顆更為重要,因為那顆綠色按鈕就是同步鈕,只要按一下或使用快速鍵Cmd+S,立即雲端同步讓你四處都可以掌握你的工作表!而同步鈕旁邊則是塞選鈕,依序分別為“全部代辦事項“、“星號註記代辦事項“、“以完成代辦事項“,透過這三個按鈕可以讓你快速將工作類別裡的代辦事項全部抓出來,讓你一次看得夠!當然如果你打星號過的代辦事項如果已完成了,就不會出現在星號代辦事項裡,而是會出現在以完成事項中喔。

最後中間的部份也是塞選鈕,可以幫你塞選出有限定時間今天、明天、接下來的七天、七天以後以及沒有時間限制的待辦事項,如果今天有3個代辦事項,你就會看到Today上面有個小紅標籤,裡面會想著3,不知不覺看到就會緊張起來,真的很有督促效果!

至於在iPhone上的Wunderlist,功能上與電腦上的完全相同,不過在選單的安排與操作上有些些微的不同。

一開始的登入頁面與電腦上的差不多,你可以選擇註冊新帳號或直接登入。

登入之後看到的是工作表類別,你可以在這裡最上方新增工作表類別,也可以用右上角按鈕管理這一頁裡的類別,像是刪除誤新增的類別,或是將代辦事項做個排序。

選擇工作表類別進去之後就是代辦事項,一樣可以加星號跟完成後打勾,不過不同的是當你完成後下次在進來你就不會看到該事項在列表上了。

選擇事項之後進去就是該事項的類容了,你可以在這裡修改該代辦事項的任何資訊,包含截止時間。

右下角黑色More點選下去之後,你就可以看到其他在電腦上的功能,像是過濾代辦事項,而在這裡你會看到一個“Done“的選項,進去後你就可以看到你以完成的項目,這點跟電腦上比較不一樣,另外如果進去Setting你就可以做一些個人化設定。

在iPhone App版上你依然可以更改背景,背景的內容與電腦版上完全一樣,這些面板其實質感都還蠻高的,每一個看起來都蠻順眼的,你可以依照你的喜好來選擇你想要的背景。

雖然說Wunderlist還很陽春,我不能寫下代辦事項的內容,只能選用一些重點字句寫在代辦事項的標題上,但是整體來說卻可以做到有效管理代辦事項的功能,很適合懶得打太多的朋友們,而且Wunderlist開始服務可以說非常短暫,所以之後勢必會加強功能,但是儘管現在這樣的質感與內容已經可以符合許多朋友對於工作表的需求了,如果你跟我一樣很煩腦不知道怎樣可以好好的管理自己的工作項目,那我想這個Wunderlist應該可以幫你不少忙喔!

[實用]書籤同步-多款瀏覽器,跨平台都行!

      真的是太殺了,還殺很大,除了光殺很大三個字可以變成新聞很殺,以外,現在多款軟體都開始研發跨平台方案了,所以如果你是軟體開發者你還沒想到要跨平台那你真的有點跟不上潮流囉!

Foxmarks 我第一次接觸時是在Firefox的附加元件上,那時我已經覺得他好用到了極點,我可以馬上同步家裡與公司的書籤,真是太棒了!我在也不需要忍受兩台電腦書籤不一樣,想找書籤卻又找不到的窘境了,但是我的IE與Firefox的書籤還不一樣,導致我再也不想要開IE了,但是為了工作需求還是得忍受一下IE,畢竟網路上得使用者有很大部份都不是用Firefox,我好希望大家都用Firefox阿~~~!

自從我換了電腦改用Mac book pro 之後,問題沒有更多,只是Safari的書籤還是跟Firefox不一樣,我只能一直不斷的匯入匯出,用人工手動來做同步,但是就在最近,我發現了一件事情,那就是Foxmarks開始同步多款瀏覽器甚至還跨平台阿!真是太猛啦!不管你是Windows系列或是Mac系列他都可以幫你做同步,我在也不需要手動同步啦!

因為我是Mac 所以我下載Safari版本,看到右下角的五顆星沒,我真想給他一百顆!

在下載之前我用手動同步了最後一次,也稍微做了一下書籤整理,真的真的,這是最後一次了!

下載完不用說當然是馬上安裝囉!檔案就如圖上寫的2.3M還蠻小的!

安裝成功後當然不用說馬上來試試看同步功能到底好不好用囉!

馬上來個同步當然要先登入Foxmarks才可以,登入後立即同步,果然跟想像中一樣好用,同步後果然Safari跟Firefox書籤都是一樣的,真的!我在也不用擔心走到外面書籤都不一樣或者想存書籤卻忘記帶回家的窘境了!

當然如果你不在外面的電腦安裝軟體免得忘了移除導致帳戶出現很多幽靈書籤或幽靈現象的話,Foxmarks也有提供網路界面讓你網路存取書籤,是不是很貼心又很夠意思?

使用界面非常簡單易懂,使用性來說算是很不錯,至少我是覺得不用學習就會用了,這種不用思考的界面最適和我了!

另外,現在Foxmarks升級囉!Foxmarks 成立另外一個網路服務叫做 XmarksXmarks像是一個線上書籤字典,除了原本Foxmarks的服務可以持續在Xmarks上使用外,你還有可以擁有更多Xmarks特別服務,比方說替書籤評分等等的功能,不過目前Xmarkshttp://www.xmarks.com/且安裝喔!有了Foxmarks,不用擔心無法使用只能安裝於Firefox上,所以如果要做跨平台或跨瀏覽器的書籤服務,你還可以上Foxmarks網站上下載相關服務軟體並Xmarks的功能喔!你還在等什麼?還不敢快去試試看!