2010歲末改版╳(媽哈哈哈)™

其實這次改版也只是一些小東西的變動，並沒有什麼很大的改變
改版的目的主要還是希望瀏覽速度可以有所提昇
這篇紀錄算是補記，畢竟一個多月前就已經慢慢地開始動工了XD

新作法

最近開始不想在網誌花這麼多時間（其實是懶惰XD）
一直以來我都覺得Flickr的介面其實做的很棒，只拿來當"資料庫"實在是有點可惜
就像網友August所說的，心中開始想要好好經營Flickr這一塊
但，老實說，網誌經營了這麼久，不知多少個日月都栽在裡面，說拔就拔還真是捨不得
況且有些東西還是有相當紀錄的價值
為了要使網誌和Flickr不衝突（兩邊每次都同步的話，這樣也挺累人的XD）

我想出了一個策略

噹噹噹，策略來囉！（有沒有這麼瞎…= =|||）
是這樣的，我決定分成兩的部份，一些文章、遊記等文字敘述部份還是會寫在網誌，同樣的也是會放幾張比較代表性的影像，其餘的皆放在Flickr

Q：這不是跟以前一樣嗎，這麼多廢言…
A：NONONO，我還沒講完嘛XD

重點來了！
除了網誌的部份外，Flickr裡的每張照片都會有敘述和有趣的註解（特地強調有趣…什麼鬼）
相對地，網誌裡只會有一些自己想說的話或是感覺，將不會有任何照片描述
更明確的說，就是不會有影像內容的故事，只會單純展示，除非是比較有像徵性或意義的照片

題外話，Flickr的註解真的好有趣
有些東西直接打出來會覺得沒什麼，但是利用框框在圖片上圈點出來就會很容易的進入狀況
當然也歡迎大家也來給他"註解"一下囉

最後還是奉上我的Flickr，以後就要勞駕大家的手指頭多點一下了XD

更方便展示圖片的好幫手 │ Autoviewer

日前從雜誌得知New York Times的新圖像網誌LENS，便好奇的上去看看
一瀏覽馬上就被它吸引住了，姑且不論內容
這版面…在我心中真的是一百分
不但讓讀者非常直覺得選取閱讀，圖像部份也相當完整的呈現出來
經過一番仔細研究後，我決定要來試試看，模仿一下


當然，我並沒有想要重作一個FLASH網頁，因為…我不會做Orz
所以開始來找一些替代的方案，尋了一下，我發現了一個之前有嘗試過的好物，Autoviewer
雖然這樣需要另外寫一個網頁來內嵌
不過提供了更方便的瀏覽照片方式
唯一殘念的是，我還是不知道怎麼用同樣的方式切換文章，以後慢慢研究XD



Demo樣式，其實就是上一篇文章啦XD：Demo

版面再進化。JQuery UI tab

既上次改版後，一直覺得大概不會再對版面動大工程了，沒想到這次不動則已，動則就搞了一整天….= =

這次改版的大重點就是Jquery UI Tab的應用。一直以來，版面精簡和資訊豐富兩樣東西很難在一個版面上並存
當初我設計這個版面就是訴求簡單易讀，但也因為必須捨棄很多東西，例如留言板等可以增加Blog趣味性的widget
在一次看到部落客nightspirit的Blog時，突然靈機一動，何不也來做一個UI Tab分頁呢？          


所謂的UI Tab講白了就是利用javascript將widget顯示、隱藏，藉此表現出如分頁般的效果，詳細教學這邊就不多論述了（其實是懶得打了XD，網路上都找的到），附上幾個還蠻有參考價值的相關連結：Jquery UI Tab、

Blogger Hack - JQuery UI tab + TOC 實作

     

在分頁方面，我增加了許多有用的資訊（至少我自己覺得還蠻有用的XD），分頁標籤如下：

1. 網誌文章：即是文章內容，也是網誌的主體
2. 時間軸：所有文章的列表，其實就是Blogger內建的網誌存檔，本來有想要用TOC來展示全文，但是測試後發現，實在是太拖網頁讀取速度了，加上幾百篇文章一次列下來，應該也沒有人有興趣吧…，所以最終還是回純樸XD
3. 新文章、新回應：就……是新文章新回應嘛^^|||
4. 塗鴉版：這是新放進去的東西，其實就是google friend connect的留言版，雖然不知道有沒有人會去留言XD
5. Flickr：Flickr最新上載的照片，試過了用SlideShow等方式，都不是很滿意，畢竟讀取時間也是一大考量，最後找到了Flickriver裡的badge，不過我還是比較想要像是相簿般的列表，重點是要會自動更新，在慢慢尋找吧
6. 噗浪ing：就是plurk啦！
7. 愛閱讀：這個項目是我這次改版最喜歡的一個地方，可以讓所有人看到我訂閱的部落格，就像好東西就是要分享給大家的感覺，以前礙於版面，遲遲沒有將blogger內建的這項widget放下來，現在終於有機會讓它出現了
8. 人際地圖：為人數統技術聚的地方，做個整理讓資訊一目瞭然
9. I'm：也就是關於我XD
10. I'♥：裡面是放一下我喜歡或者是有興趣的網誌貼紙
11. 搜尋：裡頭有搜尋框，可以提供關鍵字搜尋，還有簡易的標籤分類，本來想用LVCHEN Blogger 標籤選台器，但是同樣的原因，為了要爭取網頁讀取的速度，只好捨棄

(光分頁介紹就講的落落長Orz，好像在寫說明書XD)

大體方面，配色並沒有什麼改變，倒是版面有點小小的更動

Header部份，將原本的"(媽哈哈哈)™遊樂園"和在線人數計數器拿掉，取而代之的是訂閱按鈕和分頁按鈕，看起來更簡潔，也因為分頁按鈕上"(媽哈哈哈)™"標誌的設計，網誌識別度並不會因為沒有Header而降低 。除此之外，有鑑於進入文章後缺少了明確回首頁的按鈕，我使用〈b:if〉語法來將首頁按鈕(位於中間，灰色的"媽哈哈哈遊樂園"按鈕)做條件式的隱藏、顯示

      
                      ↑改版前                                             ↑改版後（位於首頁）                               ↑改版後（位於內頁）

網誌底部lower bar部份就改變很多了，將所有的widget都移到分頁去，只留下頁尾的版權宣告。還有一個改變的地方是，一樣利用〈b:if〉讓廣告在首頁時不會出現，但是點進去文章後就會出現在lower bar裡 (改版前皆無放廣告)

       
                         ↑改版前                                          ↑改版後（位於首頁）                    ↑改版後（位於內頁，廣告在下方）  





最後一個改變，是將原本文字列表的相關閱讀拿掉，取而代之的是LinkWithin的圖文化相關閱讀，我覺得此外掛最大的優點在於擁有擷圖，不再只是幾行字，如此一來，不但可以增加讀者繼續點閱文章的動力，也增加了網誌的整題質感

 

最後，感謝nightspirit大的相關教學，特此立感謝狀XD

大躍進。自動調整版面

在我的認知裡面，一個部落格最重要的就是可以讓瀏覽者以最佳的方式來觀看
最剛開始改成目前大家所看到的版面其最終目的也是因為想要將照片以最佳、最大的方式呈現出來
一路走來，試過各式各樣的展現方式，但是都不長久
之所以不長久，莫非是因為腦中突然有了更好idea(當然無聊亂改的成份居多XD)

一直用12吋螢幕在作業的我，只是執著於如何在1024*768的標準畫面下做最佳化顯示
畢竟這也是大部分使用者的解析度(根據Google Analytics統計)

昨天換了一台22吋的螢幕(終於阿，科科)，在1920*1080的解析度下，突然覺得真是苦了大解析度的使用者阿
也因為這個原因，決定再來做個小調整
說了這麼多，先來驗收一下吧XD



有沒有，有沒有，現在Full HD當道，不用再被強迫看小圖囉
再改code之前，習慣性的先上Google找了一下相關的資訊
不過找到的都不是什麼有用的東西
或者說不是我想要的方式
我想要的，就是不管使用者再什麼的使用條件下，都可以輕鬆的一覽無遺
方法其實非常簡單，就是把原本版面裡px的絕對數值改成百分比
如此一來就會一不同的解析度來做不同的相對更改
例如：width:940px ---->  width:100%

今天去用HTC Magic試了一下，再mobile上也是完全OK，圖片不再會被擋到
大家調整視窗玩玩看！！

典雅小改版

沒錯，這張就是這次改版所有新增的相關插圖
自從上次收假回部隊，站哨的時候腦袋瓜都在想是不是該來改個版面，當然也有想爸媽和想女友啦XD
花了兩天的時間，全新的版面終於出爐囉

此次改版主要是從版面美工及配色下手，內部主要架構一樣是沒有變的
配色方面主要利用酒紅色、白、灰等做搭配，出來的視覺效果比我原本想像中的要好很多
本來擔心用全白的backgroud color會不會太刺眼、單調，沒想到和酒紅色竟然如此搭配

除了配色外，終於做出了新LOGO
本來的"媽哈"LOGO有點看膩了，加上有點複雜，一直有想砍掉重鍊的想法
但是想歸想，始終沒有去行動，剛好趁這次改板有idea的時候來好好施展一下不及格的美術功力XD



這張是網誌的header，本來網誌得標頭是挑圖片來放，每次看了總覺得沒什麼特色
與其說沒特色不如說感覺缺了點什麼…整體性吧，畢竟這是一個Blog的招牌，大家一進來第一個看到的東西
應該要以簡單明瞭的形式來表現，於是利用新設計出來的Logo (媽哈哈哈)™延伸出網誌的招牌



這是放在網誌最下面的，以前只是單純的用文字來敘述，缺點當然就是樣子是依個人瀏覽器來表現
有些人可能是新細明體，有些人是微軟正黑體…等，想一想，乾脆作成圖片檔一勞永逸



這是這次改最大的東西XD，說改最大是因為和原本的LOGO已經完全不一樣
本來是紅綠的媽哈，用來代表個人的圖示，雖說想換成圖形化的Logo卻始終不知道怎麼著筆
在多方嘗試後，我開始思考"媽哈哈哈遊樂園"是什麼，有什麼象徵性的東西
今天看到一個網友拍攝兒童節的作品時，突然靈光乍現
"媽哈哈哈"就是很快樂的行為，何不用一個快樂的小孩來構圖呢？
有了這個想法後，開始思考要怎麼去表現
想過用一張插腰笑得很開心的剪影，但是又覺得這樣不夠簡單大方，我想要的是幾個幾何方塊組合而成的畫面
最後，找到了一個好的樣本，那就是"Wall-E"裡的EVE
利用一個圓，四個相同的盾牌做組合，一個手舞足蹈的媽哈小孩出現了
（OS：哇哩勒，還真會掰…XD，不過就是一個亂畫出來的圖示嘛）



此為RSS訂閱鈕，和新logo簡單的結合，感覺比較有個人特色XD
除了上述介紹的這些外，其餘的大致上和以前都一樣，只是logo的地方改成新的logo

除了外觀外，還加了幾樣小元件
包括LVCHEN大的Blogger 標籤選台器 2.0、最新回應 v2.0和Chagg's 嘴砲日記: Blogger 最新文章功能

花了兩天，大部分時間都只是在腦中創作，好像也沒到創作的境界XD，不過努力下來還蠻滿意成果的
瀏覽起來也很舒服，內容也一目瞭然
每次改版都覺得越來越漂亮了，呵呵，還真會自我陶醉阿！

SimpleViewer

關於如何更好的show出照片，已經是現在我改template的最大方向了，之前所用的LightBox 2，雖然有著炫目的效果，但是
執行速度一直不是很理想，執行效率和電腦系統、瀏覽器之效能有很大的關係，加上除了秀圖片以外，並沒有辦法很好的分類
（如相簿之類的），時間一久，要找出原本的文章照片連結又是一番功夫，當然如果付錢升級flickr會員等就沒有這些問題，
不過時機歹歹，能省則省阿XD

再次尋覓後，發現了這套SimpleViewer，不但速度快，而且會隨著瀏覽者視窗解析度去改變圖片的大小，初步改出來還蠻滿意的，還有幾天收假，做個相簿順便整理一下之前上傳的照片，如果沒有懶惰的話...哈。

八月。新開張 Part2

改頭換面後，記錄一下改版的過程。

首先，因為我的blog是以照片為主題，在看了一些國外的攝影部落格後，就萌生了改版的念頭。觀察許多版面後，發現其中有不少共通之處。

一、幾乎都是一個欄位而已，我想是這樣的版面，才可以充分的利用空間，畢竟主角是照片，以我用Google Analytics分析來我的部落格之使用者的習慣，螢幕解析度為1024*768還是大多數，所以還是以可以不需要左右轉動的設計為主，當然，厲害的玩家應該有辦法寫出隨著螢幕解析度的不同而有不同的版面，但是，我太懶惰了XD。

二、SideBar原件簡單化，版面簡單化。簡單大方的設計，是必須的，太雜亂反而會有喧賓奪主的感覺，所以最後我採用全部收縮的樣式，這樣不但可以保持介面的乾淨，更不需要像以前一樣，怕邊欄擠爆了，就不敢放太多東西，現在放再多都不怕，因為收起來就好^^，想觀看的人只要點一下就會打開，還蠻不錯的感覺。

大致就是上面兩項重點，總歸一句，簡單明瞭，更能凸顯作品。

接下來就是自己實作的一些步驟 :

1.基本版面 : 基本上，我很懶，所以要我從白紙變出東西來實在是太累了。在網路上找到了這個樣板，PhotoBlogII，，覺得很符合我想要的樣式，就決定以這個為基準了。


2.繼續閱讀套件 : blogger固然好用，但是最為人詬病的還是沒辦法縮文章，導致整個版面落落長XD，不過很多高手都有許多解決方案了，大家可以網路找一下，還蠻多資源的， [BLOGGER]繼續閱讀懶人版(For Blogger New)。

3.Comment : 新版的Blogger已經可以將回應至於文章底部，但是我還是覺得要留言還要跳一個版面時再是有點麻煩，到是這個Intense Debate和Blogger配合的俏到好處，只要將自己的template上載，他就會自動安裝，非常容易上手，留言的方是很直觀，跟無名的很像(個人覺得無名很鳥，雖然我是交大資工畢業的，但是他的留言系統真的是好用)。

4.sidebar收縮 : 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling) ，這裡面有詳細的教學，真的覺得如果你是愛加東加西的話(像我一樣...)，這個絕對很合胃口。

以上大致是幾個主要的原件，當然還有一些小東西就不多介紹了，總之，還是要再說一次，改版成功。

八月。新開張

哇!! 我現在的感覺是好累。

終於還是忍不住改了版面，現在這樣感覺好清爽阿，一直以來，都覺得sidebar那邊有點雜，想拿掉又覺得怪怪的，但是不拿掉又佔了很多版面，畢竟我還是想要放大張一點的攝影作品，所以...花了一個晚上，構思如何排版，開始coding，怎麼好像回到以前XD。

恩，很有成就感，哈，來睡覺了...Orz，明天還要早起。

Blogger歡樂表情插件

剛剛在網路上看到一個"Blogger歡樂表情插件"（點進去有教學），好可愛阿，，馬上用一個，可惜沒有黑底白線條的，乾脆換成白色的背景，換個口味好了。

這樣子感覺生動多了，哈，很棒喔。

簡單風格

稍微修改了一下網誌的版面，改回更簡單的風格，果然看比較清爽。

最近這幾天，越來越覺得版面有點太花俏了，顏色太多，線條太多，所以決定來個不小的小改版XD。

第一、先是修改CSS，把原本sidebar的分隔線和Block全部拿掉。第二、將多餘的圖片都拿掉，個人簡介也拿掉，一直以來都覺得個人簡介有點冗...，拿掉果然一整個舒服。第三、把原本的文章列表砍了，用回原本blogger內建簡單的列表，比較耐看，讀取的速度也快多了。第四、做了個標籤雲，感覺還不賴XD，質感level up，Google就可以找到一堆作法了。第五、整體配色就是黑色、白色、加上少許紅色點綴，視覺效果還不賴。

對於最後的成效還蠻滿意的，跟之前大改版後的樣子也差蠻多的，不過老實講，就是因為沒什麼美術天份才要搞個極簡風XD，因為也只能做到這個樣子，殘念。