Blog
為啥會寫Blog咧？
大概就是高中時看到很多人在寫就覺得這個很酷，盲目的開始用～殊不知要也出那些很屌的文章並不是因為Blog～Blog只提供一個很簡單的平台讓大家來寫，寫出啥屁還是看個人…
以前還一直想為啥不架網站就好？幹麼搞個Blog咧
後來第一件事情→網址就爆了（要好網址請花錢！）…然後還要去找免費主機，學習使用SQL~雖然有好用的介面像是Phpmyadmin之類的好物，但是還有很多的語法在…光是讓文章與資料庫連結又可以搞死一堆人了，更不用說家tag之類細碎的功能，總體來說難度依然是>>Blog，東西總是越方便越好，不可能為了紀錄幾句話去搞個大工程學一堆東西
一開始跟本部知道不同平台的差異，高高興興的就收了微軟的廣告信開使用MSN Space，後來改名叫Live Space~我也算是1/3個微軟粉絲，來支持一下他的產品看看，恩～其實現在也想不太到MSN Space有啥缺點，大概就是空間有限讓我用起來要小心翼翼，不然各方面來說我是都沒遇到問題，不過後來看到了Blogger這東西，我也算半個Google Fan，很明顯的1/2 > 1/3所以就倒戈到Blogger去了 XDD
Blogger～最大的特色就是非常乾淨簡單，意思就是啥都沒有，但是他的配套就是有很大的自由度，只要網頁夠強幾乎沒有啥是其他家有而Blogger做不出來的
-------
以下是給楊Pat的，紀錄一下使用的東西，也當作以後要改版的備份
-------
Blogger使用上會有一個基本的Template，網路上有很多很漂亮的可以直接套用，像是這個blogger templates，分享的我覺得都蠻漂亮的！我最新版就是拿裡面的Charcoal改的，現在想想都忘記紀錄以前的式樣真是可惜阿，另外像Btemplates之類的也很多可以選，要找Template的話就到Google打Blogger Templates就會有超多東西可以看，
about 22,800,000 for blogger templates.
超多吧！
新版的Template就是一個xml檔，要修改的話就慢慢讀一下，像是圖片我都會抓下來另外放到Google page上面，畢竟原本的空間不一定長久會在，萬一掛了就囧了，而且隨便用別人的頻寬好像也不太好，雖然Google Page有每月100MB的流量限制，但那遠超過我這站會用到的可能，所以可以安心放，之前也是過放成大FTP，但同樣不知道學籍沒了後空間會留多久，當然如果有其他地方可以安穩的放檔也可以考慮，另外放的其他好處就是像Banner那邊的圖可以自己PS一下～或是以歡某個樣式卻不喜歡顏色也可以改
其實改Template就跟做網頁差不多，要注意的就是每欄的寬度，然後不要太寬（雖然現在大家都有高級的大螢幕，但是像我有時候到外面去用別人的電腦上就會用到1024*768之類的解析度），然後各個東西配置注意比例，再Layout那邊的Page Elements那邊就可以很容易的拖曳，另外就是有個好東西就是如果用到很多Javascript的話可以用一個Widget整理起來，然後把標題設成#HIDEME#就好了，這樣就不用每次改版都還要慢慢增加再Template裡面，不過我還是放很多再Template那邊…
會用到的
第一個～Lightbox
這東西真的很炫阿！
像是貼這張圖片
點下去就可以將網頁變暗然後放大圖出來，還有動態效果～以前的文章還蠻常玩的，但是現在反而比較乖了都會遵守Flickr的規定連回圖片頁面
再來就是頁面上的Commets，Blogger的意見頁面是另外單獨的，這樣有點麻煩，所以就用一點小技巧讓它變成同一頁面瀏覽，作法如下
把這段貼在<head> <script type='text/javascript'> http://crazymika.googlepages.com/ascommet.js
//<![CDATA[
var comment_form_template = '<div class="commentelem" style="clear:both">\n'
+ '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
+ '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='' type='text/javascript'/>
找到一段長的像這樣的
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
把它改成
<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>
在這段下面找一下 <dl id='comments-block'>
在它前面加上 <div expr:id='"commentsul" + data:post.id'> </div>
再來找到post-generating code.
長的像這樣 <b:includable id='main' var='top'>
<!-- posts --> 這附近應該會有一段像這樣
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
把它改成 <b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
再來找到post template的部份，開頭像是這樣 <b:includable id='post' var='post'>
再來找連結到意見的地方，類似這樣 <b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
把它改成 <b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display("" + data:f.url + "","commentsul" + data:post.id + "","","" + data:post.url + "#comments","max comments");toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments”;' expr:onclick='"toggleitem("comments" + data:post.id + "");return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if> max comments是最多要載入幾則到頁面上，改成false就是全部顯示
然後存檔～Done！
-------------
然後還有一點我會比較重視的就是繼續閱讀的功能，因為預設是沒有的～但是有時候不小心就會寫的落落長，這樣版面會很亂，所以找個Readmore的功能加進去，這樣要顯示多少就顯示多少，也不用刷新全部頁面顯示全文
請看這篇
其實應該是有放在Widget的版本，但是我沒用～感覺加進Template裡面效能會比較好，我覺得啦！
再來就是放一些小東西裝飾裝飾，我就放時鐘跟月曆、MSN對話連結、還有Reader訂閱的Blog資料夾，然後用Google自訂搜尋做個站內搜尋框，這些東西都可以很容易的用新增物件的html/Javascript部份來作到，要什麼特殊功能都可以自己加
找資料的話，最重要的關鍵字就是
無數的功能與技巧分享，然後美術設定的話跟一般網頁差不多，CSS厲害的就可以自己做很多東西～但是我沒啥天份，所以都拿別人版面簡單修一下就上了，個人比較喜歡簡單風格，太多花花綠綠的物件感覺會搶走視覺焦點，專心再文章上面就好～
然後超超超超強力推薦！
Microsoft出的Windows Live Writer
非常棒的離線編輯器，好用到人家都說不像是微軟的產品XDDD（真酸），多好用呢～用用看就知道了，馬上會覺得線上編輯器真是不WYSIWYG
還有！圖片空間也是強力推薦Flickr！用來外連圖片的話不用在意顯示兩百張得問題，空間穩定圖片品質優良
Blogger(Google)+WLM(Microsoft)+Flickr(Yahoo)
好用的組合阿！
另外很多的使用技巧也可以到ptt的Blog版找
然後會想要給別人看的話就放網頁到這邊檢查一下吧！不同作業系統與不同瀏覽器瀏覽結果，我一般都是作到主流的幾個要過，通常有問題的就是舊版IE～囧，不支援Javascript或Flash的參考就好
-------
最後，很有心的話
身為一名工設系的學生，在自己Blog上用一點專業也是很正常的，所以就檢查一下使用性吧！當然驗證的方式百百種，但是我偏好簡單的方式～
第一步驟叫做Heuristic Evaluation，非常簡單，就是使用者可以知道
1.我在哪裡?
2.重要的連結是不是很明顯?最好不用滾動就看到
3.是不是很容易就知道某個東西是一個連結或是按鈕或是OOO控制?
這是網頁基本～告訴我們不要把連結顏色設的太接近，按鈕位置要簡單明瞭，像我時鐘那個Calender的字就很失敗，誰會知道那是一個按鈕？
再來就是Cognitive Evaluation
就是假定一個情境去給任務，然後再這個任務的過程中每個步驟都問三個問題
– 使用者知不知道某個動作是需要的?
– 使用者會不會知道正確的動作在哪?
– 使用者對於系統回應的解讀是不是正確的?
有些時候不會每個都有答案～沒關係，就繼續下去
多找一些Task去測試，小問題我是都沒改啦！XDD，因為我都自己做，球員兼裁判會準才怪
留言
你說我才去按!哈