Basecamp 使用心得

Basecamp 是一個簡易的 Web 型式專案管理系統, 主旨是促使團隊的協同合作. 它有 messages, to-do list, milestone, writeboard, chat, file 等功能. 團隊成員可在裡面做訊息發佈, 檔案分享

message 其實就是討論區, team member 都可以發佈及回覆, 也提供 email 提醒的功能.
to-do list是待辦事項, 專案經理可以 assign 給某位成員, 並與 milestone 結合, 追蹤進度. writeboard 可以當作一個草稿區塊, 並讓 member 一起參與修改, 用這個功能把網頁內容草稿放在這裡讓客戶直接去改是最好的了. chat 提供多個 chat room, 每個 room 可以容納二位以上的 member 一同 chat, chat 包含了 message 及 talk, 也能即時上傳圖片至 chat room 裡, 使所有參與者看得到. file 就不多講了, 就是檔案上傳啦

以功能來看, 它並不提供很華麗或很龐大的功能, 它的功能都維持在最需要, 最簡單使用的層面上, 但又不忽略解決協同合作時會發生的問題及需求.

不必再管 server 一堆的鎖事, 就像租用虛擬主機一樣的意思. 我只要用它, 發揮出價值即可. Basecamp 的 writeboard, file 都提供版本控制的功能, 會將每次修改的版本都記錄區隔開來, writebord 甚至可以做 compare, 不過這些功能都維持在極簡易使用的型式. 跟有些大型合作軟體內提供的華麗功能, 它是相當樸素的, 不過只要使用者自己覺的夠用, 就好了. 像 compare, 若真的需要高級的 compare, 那我就取出這兩個檔案, 再用 Beyond compare 就好了.

說了一堆它的好話, 不過還是有一點不滿意, 就是它的英文操作介面. 雖然是這樣, 但我在裡面輸入中文並使用中文檔案名稱, 都沒有任可問題, 系統發出的 mail 中文字也能正確顯示. 希望未來會有中文的介面

放下我執, 站在巨人的肩膀看這美麗世界

早上在看這本"超越式CSS"時, 突然想到一句話: "站在巨人的肩膀上", 沒幾秒鐘又想到了另一句: "放下我執". 瞬間感到有點奇怪, 這兩句話都是耳熟能詳的話, 但今天卻突然同時間冒出來, 沒多久我就瞭解了, 最後得出這句:

放下我執, 站在巨人的肩上看這美麗的世界

在學習的過程中, 會遇到不同世界裡的巨人, 由於主要是靠閱讀, 所以大部份不是真的遇到他們. 最近在閱讀時, 彷彿越來越能置身於其中, 感受巨人們想傳達的美麗世界, 閱讀時當心中愈沒有自我的聲音, 這種感受就愈強.

我的看法是...我的經驗是...我學過的東西是...我想說的是...我...我...都可能會造成障礙, 即所謂的知識障. 想要站在巨人肩上, 必須要放下這些障礙, 與巨人合而為一, 才能瞭解巨人們看到的世界.

這裡不是要說過往的知識與經驗不好, 這不是絕對好與壞的二元概念, 相同的知識或經驗在不同層次下, 會有不同的結果. 因此在才一直以"放下"來描述, 而不是以"放棄"來表達. 對我們而言是好的經驗, 在巨人的世界裡或許就不這麼一回事了, 想站在巨人的肩上, 不只是努力看書學習, 還要磨練自己的心性, 才看得到不同的世界.

超越 CSS

今天很高興的運用 Firefox 裡用 Firebug 做 css 的修改, 還對自己修改得比較順手沾沾自喜時, 突然想到老婆都是用 IE6, 所以用 IE Tab 來檢視一下, 結果慘不忍睹, 果然高興不了太久. 痛定思痛, 決定要更深入瞭解 CSS, 並克服跨瀏覽器的問題.

馬上就跑到金石堂買了這本: 超越式CSS-網頁視覺設計の王道. 吸引我的原因是這本書是以親和力為核心價植(當然還是免不了討論到技術面), 而非以技術面為核心價值. 再來是整本書的設計感增加了整本書的價值, 這讓我有了更深刻的領悟:

不論做什麼網站, 若是沒辦法使網站瀏覽者感受到價值存在(無論是文字,版面,配色,影像,互動性等各層面), 再優秀的技術也是枉然. 設計者用充滿價值的心來製作, 客戶也能感受得到它的價值, 自然就與低價的產品有所區隔.

最後就是譯者在這領域也是專家, 自然更能表達出作者的精神了.

總之, 開始超越 CSS 吧.

(咦 ? 好像離 Ruby,RoR 愈來愈遠了...)

幾個製作 Blogger 網頁時遇到的問題

在製作彩油的展示與選取頁面時, 遇到不少問題, 在此記錄:



* Blogger 使用的是 UTF8 格式的檔案, .js 檔案內可能會有中文資料, 若不是以 UTF8 存檔, 可能會造成執行時期的錯誤.



* Blogger 內的文章可以貼入 <script>....</script>, 但卻不可貼入 <style>...</style>, Blogger 會自動將 <style> 及其內的所有資料全部移除, 所以放了也沒用. 因此 <style> 變成只能靠修改 template 置入. 但 template 卻是所有文章共用的區域, 久了不但 template 會變得複雜混亂, 也會使整體網頁顯示變慢. 拜這個問題所賜, 讓我找到了動態讀取 css 及 javascript 檔案的方法:

function loadCSS(css_filename) {
  var css=document.createElement('link');
  css.setAttribute('rel', 'stylesheet');
  css.setAttribute('type', 'text/css');
  css.setAttribute('href', css_filename);
  document.getElementsByTagName('head')[0].appendChild(css);
}
function loadScript(script_filename) {  
  var js = document.createElement('script');
  js.setAttribute('language', 'javascript1.2');
  js.setAttribute('type', 'text/javascript');
  js.setAttribute('src', script_filename);
  document.getElementsByTagName('head')[0].appendChild(js);
}  

呼叫上述的 code, 就可以擺脫使用 html tag 載入 css 與 js 的命運, 以 javascript 來呼叫載入.

update:沒多久就發現其實 jQuery 早已有 require 的 plugin, 真好. 不過目前暫時先用上面的方案就好了.



* 在使用 thickbox plugin 時遇上了奇怪的問題, 後來發現是 thickbox 內呼叫 jQuery 的 $("...").load 方法載入 html 檔案, 在這裡某些時候有問題. 這個方法使用形式是 load( url, params, callback ), 問題在 url 參數. 若傳入 url 是完整的, 像 "http://domain.com/html/page.html" 的話, 就會有點像當掉一樣, 停留在這裡; 若 url 只傳檔案名稱, 像 "page.html" 的話, 就可正常執行. 為什麼目前不得而知, 只好暫時避免以 ajax 的方式使用 thickbox, 改用 inline 的方式就沒問題了, iframe 的方式則還沒用過.

重要的基本功

雖然有了 jQuery 這把神兵利器, 提供了很多現成的方案也解決了不少的問題, 不過現在進入了必須要靈活運用的階段, 東拼西湊的情形無法維持太久, 須要多花點時間熟悉 javascript 及 DOM 的基礎面, 並多寫點 code.



想起以前剛開始用 delphi 的時候, 現在這種情形跟當時好像. 由於有 coding 經驗, 知道整體要學的部份有那些, 所以有時就想偷懶跳過一些基礎的部份, 直接做更後面一些的部份, 剛開始會感覺很好, 但往往在不久之後, 這些被忽略的部份仍會反應出來. 直到靜下心來瞭解, 才發現這些看似簡單的基礎有多麼重要.



所以...把馬步蹲好, 不然 jQuery 會哭的, 呵呵.

Blogger 工作

猶豫了一天, 最後還是決定把 jQuery 等相關的檔案移到 Google Pages. 不過由於在 Google Pages 內無法建立資料夾, 所以針對檔名做了統一的修改:



圖檔 - img.jq.(plugin).(filename).(ext)

CSS - css.jq.(plugin).(filename).css

JavaScript - jq.(plugin).pack.js





將之前增加在 template 的 CSS 移至獨立的 .css 檔案內.





對 CSS 還不熟, 但為了將喜愛的圖放在上方, 還是花了一番苦心呀:

#top_background {
  width: 100%; 
  height: 160px; 
  position: absolute; 
  top: 0px; 
  left: 0px;
  z-index: 1; 
  filter: alpha(opacity=20);  /* for IE 濾鏡*/ 
  opacity: 0.20;    /* for CSS3 濾鏡 */
  -moz-opacity: 0.20;   /* for Mozilla 濾鏡*/
}

<div align="center" id="top_background">
  <img width="320" src="..."/>
</div>

需要的效果是在將圖形置於右上角當底圖, 再加上圖片淡化, 嚴格來說這並不是底圖, 不過因為加了淡化效果, 所以湊和著用吧~~

不過也因此使 Title 的首頁連結失效(按不到), 最後乾脆在整個圖加上 Hyperlink 連結至首頁.

Template Solution

http://www.templatemonster.com/
號稱世界最大的 template provider , 提供非常多各式的 template, 它還提供 100% Satisfaction Guaranteed 的服務, 保證購買的 template 完全符合案子的需要, 否則退費. 所以它是論件收費的. 還有經銷方案喔, 國內有些網站就是跟 templatemonster 配合的.




http://www.zeustemplates.com/

http://www.deonixdesign.com/

跟 templatemonster 不同的是, 它們提供固定時間無限 download 的模式, 有 6 month / 1 year / 2 year 的方案, 不過在數量上跟 templatemonster 差很多啦