[Web Service] hypo - We print photobooks! / 充滿印刷品味的相簿印製網路服務

　　據說hypo已經成立許久了，某種程度上，也幫了我許多忙 :)，像是一些特殊節日必備的Surprise，有如神助啊! 陸陸續續也製作了三種不同的產品，最早用iPhoto在管理相片時，作了身平第一本iPhoto攝影集-中本平裝，後來又製作過一本"月曆"，這可是有蘋果電腦才有的專屬服務呀，直接透過iPhoto輸出的pdf檔來印製。後來用Aperture在管理照片，想說那就嚐鮮一下，來點不一樣的"12平方"，每次拿到手中，看到成品感動真是不可言喻呀，一定要親自體驗過才知道這種Fu的。真心推薦這個服務，台灣有這種專業的團隊在經營這塊，並提供這樣好的服務，真是太甘心了。該團隊也有接受過ApplePlan的專訪，讓人很熱血呀... 介紹的很棒。

　　該服務除了提供了良好的使用體驗之外，本身對於技術方面也挺感興趣的，所以這邊大概提一下，關於該Web Service的前、後端所使用到的一些技術。其實之前就有些文章有提及，像是關於後端的WebObjects，以及團隊的成員，像是幕後推手yllan大大之類的。我比較有興趣的是，在使用該服務的初期，前端看來不外乎是Ruby、PHP所打造，陸續用了兩、三年之後，發現Wide這個服務已經導入Objective-J來打造，是否覺得這語言很眼熟? 是的，也就是XCode中 的Objective-C兄弟.. 說穿了其實就是Cappuccino Framework，像是一推出就令人感到驚豔的"280sides (Web版Keynote)"就是透過Cappuccino Framework打造的，效果之好實在挺難想像是純HTML所打造的。這個Framework打造出來的網站，看起來都會有幾分相似，例如 GitHub Issues ，我想透過會Cappuccino來實作，就是主打Web App，所以通常會是Auto Scale的FullScreen大小的layout。Hypo - Wide整個網站的視覺效果、設計感及使用體驗，的確很不錯，頗像在桌機使用App的感覺，加上hypo服務又有整合Flickr，因此對於我的吸引力又更大了。另外又有一套叫作SproutCore的Open Source Framework，由前Apple員工出來成立公司的產品。這項產品最有名的代表作，肯定就是Apple - MobileMe, iWork, iCloud 等網站，還有Network Camera大廠AXIS提供的"AXIS Design Tool"也是使用SproutCore打造的，一整個有專業到。SproutCore和Cappuccino這兩套作出來的東西，還挺神似的，網路上也有人寫了些比較[1], [2]. 不知是否台灣還有哪些團隊，有用此兩個Framework來打造的，還挺好奇的。但是比較後來才推出的Hypo Date產品，似乎沒有繼續延用Cappuccino了...XD，不知是怎樣的考量，雖然個人比較偏好Wide那樣的UX。Anyway, 期待hypo團隊，在未能能夠推出愈來愈多更棒更好用的服務。

　　放幾張當初所拍攝下來的成品 (From: My Flickr - Tag: hypo)

．ApplePlan 名人專訪 – hypo:
http://appleplan.com.tw/startpage/3447 (這篇訪談的介紹得超棒的)

[公告] 更新之前發佈過的一些 blogger 相關網頁

　　由於之前所發佈過的一些blogger hack，原作者已經不再hosting此javascript file ( http://www.anniyalogam.com/widgets/hackosphere.js ) ，所以牽涉到了底下幾個hack是否能夠正常運作，所以有使用到下列相關功能的人，請更新一下!
(只要看底下各篇中有註明 [Updated 2007/07/14] 的部份即可)

• [Template] Kubrick style for Blogger beta
• [Blog] Peek-A-Boo view of posts in label/archive pages
• [Blog] Expandable posts with Peekaboo view (blogger beta)

※還有一個重點就是，我之前porting到Blogger的kubrick ([Template] Kubrick style for Blogger beta) 這個template，也由於我所使用的googlepages空間，和 http://hackosphere.blogspot.com/這個站的作者 Ramani 糟遇到同樣的問題..."Bandwidth exceeded"，也就是超越了googlepages所提供的頻寬上限，導致很多放在 http://chenkaie.googlepages.com 底下的東西都load不出來了..OMFG，所以我想有很多有使用Kubrick template的網友，可能要忍耐一下了(好像要過個兩三天，權限才會復原)，囧囧囧囧rz.... 因此你的Blog暫時會醜個幾天，見不得人!!

若怕再遇到此情形，請自己host所使用到的檔案(也就是以http://chenkaie.googlepages.com/ooo.xxx 這個型式存存的檔案)，比較保險...

(謎：到底是啥檔案將我的googlepages帳號搞掛的...兇手快出來自首，自首無罪，抓到絕對嚴懲 >"< )

[Javascript] Style Sheet Switcher

由於上次使用朋友的電腦，是屬於「16:9 WideScreen」，忽然覺得我的Blog的版面在WideScreen的螢幕底下看，似乎有點浪費空間，好空虛的感覺 ...XD，WideScreen也是未來的趨勢，以後應該買不到一般「4:3」的螢幕了吧..囧rz，看來我的 Eizo L365 可以退休了...於是改成「三欄式」或是「寬版面」Template的趨勢，似乎是不可或免的!

※根據 Google Analytics 的「螢幕解析度」分析數據如下：
結論是閱讀此Blog的人，大概還是有五成以上是使用「1024x768」，所以目前的版面配置樣式，似乎還可以再撐一陣子..^_^，但為了照料那些使用「1280x???」解析度的人，還是得將版面給加寬些，降子看起來比較順眼些(純屬個人自以為)，所以就目前的情況來說，讓使用者能夠自行選擇版面大小是再適合不過的了，「力供丟嗯丟呀!」，並且Yahoo也有寬窄頁面切換的功能，看來我有跟得上時代的潮流..呃...

※使用方式，請見下圖：

※如何取得此功能
資料來源：
英文:Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)
中文: Ben's 部落不及格: Blogger進階玩-如何即時切換版型
註：懶得看英文的話，就看Ben兄的說明吧，生動又好懂低..

[Javascript] Encrypt your private blog post

　　今日在PPT上的Blog版逛到版友weijr所提到的一篇好文章，可以用來針對Blog中某一段文字給予加密，變成讓人無法理解的「火星文」 XD.. 解密過程只輸入正確的密碼之後，即可馬上在Blog上顯示出正確的「地球文」，不用重新Reload...超棒的Hack，對於此類技術性的Hack，個人超愛的…

研究所時有碰過一些跟Cryptography(密碼學)有關的東西，但只懂一點理論上的皮毛而已，沒有動作實作過，如今玩Blogger的同時，剛好有個有人心士將他所學應用在他的需求上，真是與實務面作了結合，太棒了老兄…我要向他看齊..XD。

原作者實現此Hack的用意就是: 他想要將他一些私人的、不方便公開的東西，亦或某些只想供親朋好友看的內容，記錄在公開的Blog上頭，又不失隱密性，且方便日後查詢，於是針對這些私密訊息的簡易加解密功能就如此誕生啦! (所利用的演算法是 256-bit AES，目前來說「安全性」算相當高了)

※適用範圍: 所有支援Javascript的Blog，若不幸你的Blog不支援的話，快跳槽來「Blogger」吧，保証可以隨便你惡搞的Blog平台，不會後悔的資料來源:
Vincent Cheung -> Encrypted blog posts
快往下瞧瞧這強大的Hack吧... :D
:: Demo (展現出來的效果如下，兩種方式) ::
Key(密鑰): ie-sucks

• Demo1:
  Click to Decrypt text (點擊此處解開火星文，裡頭有清涼的唷)
  
  
  Z0J1c4HlZqELhLfFoUOd5hH9Wu6ntYW26B4XXM24lKlRT05Z+lEDEsPVjtvqISIXoAtLKJwuksdqBpY3higDTLhYarZUgXVyyH1WY5N7hzPrP2xx0gJisgbHx2IdtoXww4Ure0hui2IcRuX26FSlxTnbIKQlLH22p7cIvQXgYak6KiV6MKaBKeiIBSKSYi5Kz8t6MSM4kIGnmzBmibsNMaPCjzb4KGmVA7xegfkyQNfPzK51Yl6SgeoENK8MUGTnbz0L1l5YT9vBYd5LxJdbf8/hwmhvY2Lzkq+iLeP9ClKIuirkwt2J3qhveuQR/tqylONAVxNccbT7e8n6j4pw85F8+4GAPDf60lbo9DuusRA=
  
• Demo2:
  Show encrypted text (點擊此處變身為火星人)
  
  

上方展現出來的效果是不是很炫呀 ^_^，超吸引人的吧，快來安裝一下吧，底下開始中文化原文..囧rz，方法如下:

首先在你的Blog中嵌入此Hack所需的Javascript，在Blogger的使用方法就是將底下的code加在Template中的</head>上面即可(其它Blog方法就是加在header裡頭就對了)<script language='JavaScript' src='http://vincentcheung.googlepages.com/blogjscrypt.js'></script>

完成上面動作之後，基本上就完成了，若要在新文章中新增「火星文時」的話，請透過底下兩個步驟:

1. 產生加密過後的火星文:
   透過此網站，輸入「Key」欄位以及「Plain Text」欄位，接著按Encrypt Button(加密鈕，在Plain Text欄的下方)，此時便會在「Cipher Text」欄位產生加密過後的火星文字啦(底下會用到..)!!
   ※千萬要記得上方你自行定義的Key，之後解密時要用的，若忘記了，恐怕沒有量子電腦(Quantum Computer)這般等級的高速電腦是解不出來的。
   
2. 嵌入火星文片段至新文章中:
   共有底下兩種顯示方式，依個人喜好選擇擇一
   ．方法一(如上頭Demo1，直接在文章中顯示火星文):<a href="javascript:Decrypt_text('unique_name');">Click to Decrypt text (點擊此處解開火星文)</a>

<div id="unique_name">此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)</div>
   
   ．方法二(如上頭Demo2，隱藏火星文，只顯示連結):<a href="javascript:Decrypt_text('unique_name', '此段內容為由上面Step1.所產生出來的一整段火星文(例如:wRxSwskrWsmohc1...之類的文字)');">Show encrypted text</a>

<div id="unique_name"></div>
   
   ※注意上方的unique_name型態是div tag的一個id名子，可以自行命名，只要在template中，或文章中不出現同樣的id即可，否則會造成判斷錯誤!!也就是在一個顯示頁面中，有用到兩個以上火星文片段的話，那麼此id的命名就必須是unique_name,unique_name1,unique_name2...之類的。
   

最後，作者很風趣的列舉了幾個常見問題(Faq)，很北爛的一個家伙...有興趣去看看...

[Javascript] Add Digg vote button on Blogger Template

為了順應目前網路的趨勢，我也要來跟大家一起Digg一下...有興趣的人一起來吧，若不懂Digg是什麼碗糕的人，簡單的說: Digg就跟台灣的"HEMiDEMi 黑米" 是同性質的站台，只不過Digg算是此類中的佼佼者，應該是世界最大站!!

其實...真正原因是，我是覺得這個「Digg Button」還蠻美的，很有質感，相當有「Web 2.0」的feeling..XD 可以拿來裝飾我的Blog，哈哈，會不會很像智障呀... :x 並且由於嵌入Javascript語法，所以又會再拖慢開啟網頁的速度....but 不管三七二十一了，我的 Blog 本來就不怎麼快了，再慢一點也無妨啦，大家就忍耐一下吧.. :p

雖然Digg.com在台灣不怎麼有名，因為台灣網路族群主要還是以"HEMiDEMi 黑米"為主，而且Digg.com裡頭被Digg的文章幾乎都是英文為主的網頁...但我還是堅持要這個"有質感的裝飾品" :D

想要跟我一樣惡搞的人，就跟著底下作吧..很簡單低
在你的Blogger template裡頭找到<p><data:post.body/></p>取代成底下的code<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>
就這麼簡單...感謝底下這位帥哥提供的資料資料來源:
Ajaxcold: Add Digg vote button on Blogger Template

[AJAX] AJAX Labels Cloud Reloaded

繼之前的[AJAX] AJAX Labels Cloud之後，原作者Deepak又再度的補強了「AJAX Labels」的功能囉，趕緊來瞧一瞧吧...資料來源:
Deepack -> AJAX Labels Reloaded
※新功能如下：

1. 內建分頁導覽系統(Navigation-System)，之前的Hack只能將所有同一個類別的文章同時顯示在同一頁面，若文章很多時即會吃掉很多Memory...Browser也會整個被拖慢
2. 支援在IE底下，使用以"繁體中文字"之類的 Unicode 來命名Label(標籤)!
3. 安裝方式更加簡易

※至於所展現出來的效果，請直接點選我的Blog上方"AJAX Tags Cloud"，再隨便選個分類即可一目了然...
底下直接講解如何安裝此Hack到你的Blogger中，至於有使用之前舊版本 AJAX Labels的玩家，請自行至"原著網站"看，有詳細的解說，教你如何「升級」到新版本的AJAX Labels(本人就是從舊版升級到新版本的)，要不然直接"砍掉重練"也是可行啦.. :p

Step 1. 為了以防萬一，先備份一下你原來的template吧! 再就就是編輯你的template，找到</head>這個keyword，再將底下code貼到</head>上方。<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5; //一次顯示幾筆資料
var navFlag = 1; //是否使用分頁(導灠)功能
var feedLabel = "Subscribe to"; //...該怎麼解釋呢..
var catLabel = "Sorted into:"; //...沒什麼好解釋的..
var closeLabel = "Click to close"; //...這也一樣.. XD
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />
上面5個粗體字的變數，根據個人喜好，可以自行再客制化一下.. :D
Step 2. 找到底下code <b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>取代成下方<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>
Step 3. "假如" 你在sidebar有Label Widget的話，再作這一步驟，找到底下code

<b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
<b:else/>
 <a href='data:label.url'><data:label.name/></a>
</b:if>

取代成下方

<b:if cond='data:blog.url == data:label.url'>
 <data:label.name/>
<b:else/>
 <a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

Step 4. 按下此Button，再隨著說明步驟，一步一步完成...

<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>

新增此Widget的目的就是，當你點選分類標籤時，更新的內容所要顯示的地方.. ^_^，看你想放哪邊就放哪邊囉!!

Step 5. 儲存範本，結束啦...快去看看吧!! 多了..Navigation-System是不是很Cool呀!

[AJAX] AJAX Labels Cloud

今天在 Blogger Hacked 發現一個超棒的東西叫作AJAX Labels，也就是之前 [Blog] Peek-A-Boo view of posts in label pages 的改良版，利用 AJAX/JSON 的技術，大幅提升Blog的更新速度，效果就像此圖中所表現的(建議還是試著點圖中的"AJAX Tas Cloud"才能親身體驗「真的快、好厲害」)，感謝作者Deepak分享(very Awesome!)資料來源：
Blogger Hacked: AJAX Labels接下來開始翻譯(...XD)安裝步驟：

Step1:若要此hack能夠正常運作的話，你必需在你的Blog裡使用"Prototype Javascript Library"，你可以到官網自行抓一份，放到你的空間中 或者懶得話拿我的去用也無妨..^^(畢竟是Google提供的空費空間)，所以到必需在你的Template中新增底下code (放置於<head>...</head>裡頭)<script src='http://chenkaie.googlepages.com/prototype.js' type='text/javascript'> </script>
<script src='http://chenkaie.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
Step2:接著新增核心部份程式碼，將底下連結中的程式碼仿Step1.同樣加到<head>...</head>裡頭，裡頭CSS請依照您個人喜好修改，細項說明，請參考原著解說!CSS Code & Javascript code:
http://bloggerhacked.googlepages.com/ajaxlabelsscript
Step3:在你的Template中找到底下片段，有一樣的全都要修改(若不改的話，就是原本Blogger提供的效果)

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

將上面紅色部份，取代成底下：

<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'>

Step4:若你原先有裝Labels Cloud的話(沒有請跳到Step5.)資料來源：
phydeaux3: Blogger Beta Label Cloud Update
phydeaux3: Code for Beta Blogger Label Cloud若要將點擊Labesl Cloud所呈現出的效果也修改成AJAX Labels的樣式的話，請將底下：<a expr:href='data:label.url'><data:label.name/></a>修改成底下的樣子<a expr:href='"javascript:getCat(\"" + data:label.name + "\")"' rel='tag'><data:label.name/></a>
Step5:新增一個"HTML/Javascript" Page Element放置於"Blog Posts" Element的上面(可隨個人喜好修改)，裡頭的code如下(和原作不一樣，原作的似乎有些小Bug，我作了一點修改，若你作完不行的話，請參考原著)：

<div id="indicator" style="display: none;">
<img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...
</div>
<div id="search-result" style="display: none;"></div>

Step6. 存檔離開就好囉....^^ 快去試試看呈現出來的驚人效果吧!!

※此AJAX Labels Cloud是抓取Blogger提供的feed中summary類別(比較精簡，為了追求更佳的速度感^^)，作為文章預覽，所以呈現出來只有一小段!
※還有預設，點選每一個Label只有呈現5篇文章，若要增加的話，請將Step2裡頭程式碼"?max-results=5"中的5改為您想要的數字即可!

[Update 2007-03-14]
原作者，發表了新版本的AJAX Labels了，請參照此處

[Javascript] Selectable Post Font Size for your best view!

之前有看到許多網站或討論區，有可以自行選擇顯示字型大小的功能，對於視力好的人來說或許字型小了些沒什麼影響，但有些老人家..(是我嗎..XD)，有時就會覺得看得有些吃力，若能迅速的讓字型放大，不用再花時間ReLoad頁面的話，將會是個很不賴的工具!!

※當然藉由按 Ctrl++/ Ctrl+- (for Firefox)，或者是Browser提供的放大縮小功能，不然就是通用的「Ctrl+滾輪上下滾」來達到放大縮小的功能，但我這個人比較龜毛，因為這兩種功能所表現出來的文字常常是破碎或是很醜，個人無法接受...時常因為這樣不逛那個站了…囧rz，並且透過上述的方式縮放頁面字型時，是所有版面的字型都會放大，也就連帶影響到Sibebar、Header...及其它非本文章內容的部份，整個網站當初設計好的版型都變了樣，喪失美感! 因此，我在此Blog中提供三種用於縮放文章內容的合適字型讓大家選擇(位於此處)!!

至於在Yahoo Taiwan的新聞裡點進每一篇新聞之後，也有提供類似這樣子的工具，But...他每次點換字級大小之後，都必需要 Reload 部份的頁面，明明可以不用Reload的，為啥他這麼作…後來發現，廣告部份也隨著Reload換新的了...囧rz，想必這是最主要的原因吧，那是他們吃飯的工具，就給他reload一下吧...XD!!

參考資料來源：
懒人图库 LAYABOUT'S GALLERY我根據上面所提供的的簡易版本，再修改成較適合於New Blogger版本 ^_^(當然再作適當的修改之後，其它Blog也都是可以套用的)。

在修改的過程中，又遇到某個語法getElementsByName在IE中的話只對表單的物件有作用...OMG..IE sux again!!還好有底下這位大哥的教學，解救了我...感恩!!
參考資料來源：
IE vs. FireFox 系列 - getElementsByName問題於是，最後完整版的Javascript code (IE & Firefox 都正常) 就變成底下：

[Updated 2006-12-26] 針對留言中Benjamin網友所遇到的問題，在這裡提醒大家，貼底下code時應注意的事項：

由於Blogger在parse template語法有無錯誤時，他會檢查是否存在相對應的左括: <及右括: >，若不存在便會跟你說你的template語法沒有正確的close，導致儲存失敗。不幸的是，你若將Javascript嵌入template檔中，並且又很巧的，用到compare operator，例如：「小於:<」，如此一來他便會產生上述所提的，少了相對應的右括: >，而導語法錯誤啦! 因此，大家若要將底下這段javascript嵌入template中的話，記得將裡頭的<置換成&lt;

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) {
 att = elem[i].getAttribute("name");
 if(att == name) {
    arr[iarr] = elem[i];
    iarr++;
 }
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i < zooms.length; i++) {
  zooms[i].style.fontSize = size+'px';
}
}
</script>

之後，因為我只讓本文內容(Post.body)的字型大小可供縮放，因此編緝template內容，將裡頭找到的所有

<p><data:post.body/></p>

都置換成底下的樣子

<span name='zoom'><p><data:post.body/></p></span>

如此，就可以將被 name='zoom' 的span tag包住的那些內容，賦予字型縮放的功能!!

最後在將你要提供此項功能的界面，填入此段程式碼即可，裡頭的數字以px為單位：
<a href="javascript:doZoom(16)">大</a>
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>※展示出來的功能，請參照此圖，並加以操作看看…

[Browser] Browser Compatibility Notes

因為之前我在這個Blog裡頭加了一個Javascript語法，為了達到[Blog Plugins]中的customizable tooltips效果，在Firefox中正常，但是在IE底下卻出現了 "Internet Explorer 無法開啟網際網路網站，操作已終止[Example]""，Oh My God...什麼鳥呀 XD! 對於javascript不熟的我，懶得花時間去Debug了，於是想辦法讓這段Javascript語法在IE中不要執行，方法如下：

． Conditional comment: (for css, xhtml, javascript)

<!--[if IE]>
 All IE browser
<![endif]-->
<!--[if IE 6]>
 IE 6
<![endif]-->
<!--[if IE 7]>
 IE 7
<![endif]-->
<!--[if lt IE 7]>
 IE 6 以下 (含)
<![endif]-->
<!--[if !IE]>  -->
 IE 4 或 其他 browsers
<!-- <![endif]-->

．Conditional compilation: (only for Javascript)

<script type='text/javascript'>
/*@cc_on @*/
/*@if (@_jscript_version >= 5.7)
   // IE7 &#25110;以後
@elif (@_jscript_version >= 5.6)
   // IE6
@elif (@_jscript_version >= 5.2)
   // IE5.5
@elif (@_jscript_version >= 5)
   // IE5
@else @*/
   // 其他 browser ,例如 Firefox, safari, IE 4.x
/*@end
@*/
</script>

．以上資料參考來源:
Xexex's Java 和其他二三事 : Browser相容性技巧筆記

[2007/03/21 Updated]div#milkr{width:200px;} /*-for ff-*/
* html div#milkr{width:180px;} /*-for ie6-*/
*+html div#milkr{width:150px;} /*-for ie7-*/

[Javascript] jQuery New Wave Javascript

真是個好東西呀，對於寫Javascript的人實在是一大福音!! 簡單而言就是，基本上他是一個javascript的library，可以幫助你用更簡單的方式撰寫Javascript，其主要特色就是利用特有的 Chainable method，支援CSS和XPath，可以將code寫得很簡單..又有效用，並且壓縮過後的code只有15Kb左右，相當的小，目前已經有許多Base on jQuery所開發的plugins囉...而且有很多功能都相當的迷人...XD 好想用呀~~但沒那麼多美國時間...

jQuery的作者有提到 jQuery is designed to change the way that you write Javascript.而且重點是要「quick and dirty」，果然coding的手法不外乎就是要「又快又髒」XD..
參考資料來源：
．jQuery Official Website
．jQuery Plugins :這裡好多寶呀，快去挖吧...

還有，去這Interface個站的demo裡頭和官方的Demo，點一點，你就可以jQuery所帶來的神奇功效囉..絕對讓你有足夠信心開出發自己的T(era)mail (better than G(iga)mail) XD....

Ex1:像我的Blog左邊的那一列小圖示:Top, Categories, Blog Archive, Message Board 這些小圖示點了之後，會用比較Smooth的方式捲動到所點的位置，就是利用jQuery + Plugins(來自interface)所完成的!!
Ex2:而右邊Sidebar中的每個widget的伸縮功能，就是利用jQuery中的slideToggle所完成的!!

架在Blogger上的Blog自由度就是夠高，而且以Google為後台，夠穩的啦~~不怕三不五時就掛點，Javascript看來可以多搞一點囉...^_^

[Javascript] Put Snap Preview Anywhere™ on Your Site

我在之前有參考了Palatis 這位網友的文章，記錄了[Javascript] show screenshot of a webpage by WebSnapr，後來亂逛時又發現了另一個相同類型的服務，和WebSnapr相比較的話：
．優點：速度比WebSnapr還要來得快許多 ^_^，而且相當容易申請。
．缺點：多了個較明顯的廣告(還可以接受，畢竟使用人家Free的service..)，customize的能力較弱，也就是目前你無法自定哪些例外的Domain不顯示Preview。
但對我而言，WebSnapr有時真的速度有點過慢...於是優點戰勝了缺點，就換了這個新的服務囉!
※至於申請的網址就在於：

Get Your Snap Anywhere™ Code Now! 快來申請吧!!
要填的欄位應該就沒什麼好說明的了!! trivial..^^

倒是其產生的code有個比較特別的地方就是HTML <script> Tag中的Optional Attributes: defer，他產生出來的語法，defer是沒給屬性的，當要存儲Blogger template時，這樣的語法是不允許的，因此就去問Google大神，到底這東西是幹麻用的...解釋大概如下：
defer:Indicates that the script is not going to generate any document content. The browser can continue parsing and drawing the page。(reference)

中文解釋:DEFER是腳本程式強大功能中的一個“無名英雄”。你可能從沒有使用過它，但是看完這裏的介紹後，相信你就離不開它。它告訴流覽器Script段包含了無需立即執行的代碼，並且，與SRC屬性聯合使用，它還可以使這些腳本在後臺被下載，前臺的內容則正常顯示給用戶。(參考來源)

智障的我，還是沒有很了解，但是感覺似乎是個不錯的東西...於是沒把它給拿掉...囧rz

※所以解決方法便是將原先的defer改成defer="defer"即可。

[Blog] Peek-A-Boo Navbar and Google Ajax BlogSearch box

為了使整個版面好看，但又不失支持Blogger的原則，還是要幫Blogger打個廣告，而且發現升級到Blogger beta之後，那個navbar裡頭的"Search Blog"這個功能，相當的不賴，他的Search Result會直接show在原本Blog中的#content-wrapper裡頭，也就是MainPage中，一整個就很像是WordPress所提供的「站內的全文搜尋」功能，個人相當滿意 :)。
※範例：像是搜尋Keyword "blog"的話，所呈現出來的結果就像這樣。

因此，我想要的呈現方式便是：將原本固定在版面上頭的navbar的行為設成：「隱藏在上頭看不到，一旦滑鼠移過去的時候，就會出現(還是有幫Blogger作個廣告吧 XD)」，然後將"Search Blog"的功能直接顯示在Sidebar中，方便搜尋 ^_^參考資料來源：
Basang Panaginip -> Setup a Blog: hide or remove the navbar and add blog search box．動態顯示Navbar的方式如下，只要在template中加入此段css code即可(IE不適用..對於IE的愛用者感到萬分抱歉，請儘速轉移到Firefox...XD)：

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0);
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100);
}

．在Sidebar中加入Search Blog的功能，只要新增一個Page Element(HTML/JavaScript)，然後加入底下的code:

<form id="searchthis" action="http://YourID.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Search" class="blue" type="submit"/>
<br/>By Google (Show result in this Blog)
</form>

至於一些個人化語法的修改，就請參考原著，不再詳述，基本上改上面的size:"Search Box的大小"，value:"所要顯示的文字"。

※由於上面那個Blog Search「目前」對於中文字的搜尋似乎還不太準確(給Google一些時間，相信他一定會改善的)，於是便需借助"Technorati"這個站的幫忙囉，可是透過他的網站所產生的javascript code，所呈現出來的樣式，並非我想的，於是便作了一些修改，拿掉些我不想要的東西 ^^，source code如下：

<script type="text/javascript">
<!--
drawTREmbed( '<div id="technorati">' +
'<form id="te_s" method="post" action="http://www.technorati.com/search.php">' +
'<input id="te_search" type="text" size="15" name="s" maxlength="255" /> <label for="te_search"> </label> ' +
'<input type=\"submit\" class=\"btn\" value=\"Search\" /> <input type=\"hidden\" name=\"sub\" value=\"searchlet\" /> <input type=\"hidden\" name=\"from\" value=\"http://chenkaie.blogspot.com\" /> <input type=\"hidden\" name=\"cc\" value=\"8hq5ubtxcg\" /> </form>' +
'Powered by <a href="http://www.technorati.com/?cc=8hq5ubtxcg"><img border="0" src="http://static.technorati.com/pix/tn-tiny.gif" alt="Powered by Technorati" /></a>'+
'<br/><a href="http://www.technorati.com/search/http://chenkaie.blogspot.com?cc=8hq5ubtxcg" id="te_lh" target="_blank" >» Blogs that link here</a>' +
'</div>'
);

function drawTREmbed(s){ document.write(s); }
// -->

</script>

[Javascript] show screenshot of a webpage by WebSnapr

今天在使用google reader時，讀到許久未post文的 Palatis 這位網友的文章，他把一個蠻酷的好玩意兒porting成適用於blogger的套件!! 謝謝他的貢獻 ^_^參考資料來源：
Palatis's Kafooster -> 用webSnarp在網頁上顯示小預覽圖
摘要文章內容如下：
webSnarp 2.0 是個提供網頁預覽圖服務的網站，詳情請上該網站去了解... 底下有提供一些小玩具，可以在網頁上加上一些特殊功能，讓滑鼠經過連結的時候跳出該連結的預覽圖。

這是適合 Blogger beta 的版本，請不要套用在其他地方。安裝的步驟如下：

1. 至 這裡 下載 websnapr.tar.bz2
2. 請自行，修改「websnapr.js」中的「myBaseURI」變數至您的網頁空間，若有特殊需求的話，再自行將websnapr.js中excludeDomains及excludeExtensions的變數內容改成你所要的…
3. 將所有檔案放到自己網頁空間下，記得要放在同一個資料夾裡！
4. 去 Blogger 範本中修改 html 的地方，找到</title>標籤，在底下插入：

<style media='screen' type='text/css'>@import "[您的網頁空間]/websnapr.css";</style>
<script src='[您的網頁空間]/websnapr.js' type='text/javascript'/>

※或者是你若不想動手作以上步驟的話，你也可以偷懶借用(for free ^^)我已經弄好的就行囉，就把底下這段code，貼到template裡就解決啦。


<style media='screen' type='text/css'>@import "http://chenkaie.googlepages.com/websnapr.css";</style>
<script src='http://chenkaie.googlepages.com/websnapr.js' type='text/javascript'/>

這樣就完成囉，呈現出來的效果就，如同這個連結...