Kaie's Blog: 2006-12

[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了，請參照此處

．Tags: AJAX all blog blogger hack computer javascript JSON WTF

．Comment counts: 20 Comments

[+/-]

[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中的話，記得將裡頭的<置換成<

<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>

※展示出來的功能，請參照此圖，並加以操作看看…

．Tags: all blog blogger hack computer IE javascript WTF

．Comment counts: 58 Comments

[+/-]

[Blog] A not only Awesome but Lightning Fast Blog

．Tags: AJAX all blog computer Design JSON template

．Comment counts: 0 Comments

[+/-]

[WordPress] Theme : Vistered Little 1.6

．Tags: all blog computer Design theme WordPress

．Comment counts: 4 Comments

[+/-]

[AJAX] Web-based BBS : gaaan.com

．Tags: AJAX all BBS

．Comment counts: 4 Comments

[+/-]

[Browser] Browser Compatibility Notes

．Tags: all blog computer css firefox IE javascript

．Comment counts: 0 Comments

[+/-]

[Template] Kubrick style for Blogger beta

由於個人很喜歡Kubrick這個源自於WordPress裡預設的"簡單中又不失美感"的一個版型 ^_^，於是將他移植到Blogger Beta的平台上 ^_^，並且加上了一些個人自認為還還不錯的功能...，只不過對於IE的親和力可能要說聲抱歉了...XD，IE實在很討人厭..囧rz，可能有一些些小bug就是了，但不會有什麼太大的影響!!

．底下為預覽圖：

這裡有示範網站 Demo / Example
以按右鍵->另存新檔的方式下載此 Template 或 Template (二選一)
(※注意事項：請把原先的作好備份，以備不時之需!!套用時，要先把沒用的widget清空，再小心將你原本的widget搬到此新 template，不然到時不見了，你會愈哭無淚的!)

．額外附加功能：

Expandable posts with Peekaboo view(Blogger Beta 摘要/全文切換之"繼續閱讀功能) [Figure]
Peek-A-Boo view of posts in label/archive pages (在Label/Archive頁面加入擴展功能 ) [Figure]
Author comment highlighting and notification (特別標示出，原Blog作者註解，用於和非Blog作者作區別) [Figure]
Comments with profile photos (顯示註解者的個人圖像) [Figure]

若你想換成自己的Banner的話，底下有一個簡單又快速的方法...really Awesome!!

Website: http://redalt.com/Tools/Kubrickr
此Kubrickr就是利用強大的 Flickr 所提供的超大圖庫，然後由裡頭的圖片產生你所想要的Banner，實在是個非常棒的應用!! 真是造福了不少人群..

所以說，你若看煩了Kubrick預設的Banner，或想要多點變化，你可以隨時輕鬆的從Kubrickr產生你所喜歡的 ^_^

若有問題，歡迎隨時留言討論...

[Updated 2006/12/13]
修正背景色的色差，與原始的Kubrick不太一樣，導致用Kubrickr所產生出來的Banner和舊版本的不一樣!! < 感謝 Orion 提供 >

[Updated 2007/07/14] 由於原作者hosting的javascript file(hackosphere.js)空間，已經無法承受愈來愈多人的存取，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>

．Tags: all blog Design template WTF

．Comment counts: 108 Comments

[+/-]

[AJAX] What is AJAX (2)

接續上一篇[AJAX] What is AJAX(1)，是否覺得很有趣...二話不說，繼續往第二篇前進吧...
．原文出處：堯@部落格 -> AJAX漫談(2)
※文章內容：
說了那麼多，ajax可以運用在什麼地方，可能還是有很多人不太清楚，這邊我再稍微的說明一下Ajax的運用範例。

需要伺服器大量處理的網站：由於ajax可以依據使用者的要求來供給資料，所以服務器和瀏覽器中間可以透過ajax來不斷的供給正確的資料，而無需一開始就把全部的資料一次處裡完。這樣不但可以省下伺服器處理的時間，用戶端的瀏覽器也只需要載入他所需要的資料就可以了。所以能夠處理的規模也變的大的許多，例如Google Map，Google Earth，如果後端一次把所有的資料都運算給你，那一台服務器能夠提供多少人使用?規模自然大不起來。
需要多用戶互動頻繁的網站：例如聊天室，很多不同的用戶透過xml把訊息送出去，然後透過ajax讓其他在聊天室裡面的人都可以只抓到更新的那一部分資料，這樣也可以減少伺服器端的重新發送重複資料，同時也可以加快傳輸的時間，讓網路浪費減到最低，效能自然達到最高。
需要保存大量使用者操作介面資料的網站：例如google的spreadsheet，讓使用者直接在web上面操作類似excel的功能，而這部分使用者很多資料都存在local端的電腦，如果不用ajax，那每次資料都要重新載入，這樣的excel根本用不下去。
資料的驗證：例如現在很多網站都有提供檢查用戶名稱是否可用的功能，如果在傳統的web application都是整頁reload，然後告訴你這個不行，那個不行....但是現在只要點一下，馬上就可以檢查資料的正確性，這點的確非常方便。

※原作者工作經驗談：
說到這，又讓我想起那時候為了生活接案子(悲慘的日子)，用Microsoft.NET做了很多案子，可是.NET的很多基本元件，都是用戶填了資料，網頁直接refresh，然後整頁在不知不覺中(根本就是有感覺~~)做了更動。這部分一直讓我很不諒解，這根本只是讓程式開發者用很簡單的方式來開發程式，但是對於伺服器資源及網路流量做了最壞的示範啊。當初在做案子的時後，我心理都會問，這樣的架構最多能夠負擔到多少人？但是由於案子是別人給的，錢也是別人給的，又指定要用.NET開發，所以只好默默的結案了事。也許像這樣的web application根本不需要用到ajax的架構，但如果有一天用戶的老闆大發奇想要擴大運用.....Oops....

．Tags: AJAX all computer

．Comment counts: 0 Comments

[+/-]

[AJAX] What is AJAX (1)

之前在堯@部落格中看到了一系列的「AJAX」的文章，筆者以簡易明瞭的條列式方式，一一解說，對於原本半知半解的我，受益良多...透過CC的授權，將文章內容轉戴於底下：
．原文出處：堯@部落格 -> AJAX漫談 ※文章內容：

Ajax(Asynchronous JavaScript + XML)是在2005年二月由Jesse James Garrett在一篇名為Ajax: A New Approach to Web Applications所大力推廣。當時很快就獲得了很大的迴響。但是ajax並不是一項新的技術，而只是運用了過去原本就有的技巧所混合出來的一項概念。早在Garrett提出之前，就有很多人運用這樣的技術，例如Google Map。javascript 和xml的技術混用，我在2000年的一個CMS專案中就曾經運用過(我那時候根本沒聽過什麼ajax)，而且其優點就如同Garrett所提，可以充分改善Web Pages的不足之處。只是早期並沒有這個名詞，很多進階的web developer默默的在運用這部分的技術而已。

在傳統的web架構上面，有很多缺點限制了web application的發展：

互動性不足：傳統的網路架構，是讓使用者在網頁上面點透過連結，跟遠端產生的頁面一頁一頁的重新載入(Reload)，所以每當使用者點了一個連結，就必須呆呆的等待右上方的地球(以前的netscape)或是IE的 Microsoft那面旗子飄玩，然後用戶才知道互動的結果是怎樣。這樣的互動其實在90年代就讓人覺得很方便了，但是在現今一切都要求快狠準的年代，這樣的互動性很明顯的就達不到我們的標準(這句話可以借給卓榮泰說明一下什麼是動態道德標準)。
校能不足：也由於傳統的web架構，使用者都必須每次把頁面重新的載入一次，所以對於系統的資源就很浪費。通常我們在讀取一個頁面的時候，資料讀進來都還得要經過處裡一下，就像是在我的部落格裡面，右方的side bar每次讀進來都必須要跑過一次javascript去抓del.icio.us的tag然後轉成看到的樣子。這樣當然很愚蠢啊，因為幾乎都是相同的東西，只是當初制定web架購，為了讓每一頁的資源都成功的獲得釋放，所以相對的就造成現在的狀況。也就是因為這個先天不良，所以Ajax架構出來的程式，幾乎都捨棄了下一頁的功能。甚至有些比較狠的，連上一頁也一併拿掉了(javascript就能做到)。這樣一但進到網頁裡面，所有在網頁內做的事情，都在彈指之間做到了，使用者只覺得網站的互動性很強。不過這點其實也有點trade off，提升互動性的後果，就是離線閱讀(offline mode)會讀不到東西，網站會變的很怪。不過在比例上，現在好像沒看過有人還在用離線閱讀了，畢竟今日的網路價格很便宜，已經不是當初撥接每分鐘計價的時代了。
介面太過簡單：在傳統的web post的模式，實在做不了太複雜的工作，一個表單的Form要填寫的資料沒辦法太複雜，如果要填寫的頁面資料超過一頁，那往往都是透過post的方式把資料一頁頁的存在server端，這就很討厭啦，因為為了要能照顧user資料不用白填，所以就必須要追蹤user之前填過的所有資料，session cookie的什麼技術都用上了，為的只是要打破當初制定的那個能提供離線閱讀的架構，囧rz~~~~。
資源浪費：在傳統的web pages上面，你會看到大部分的人都會把相關可以點的東西，越放越多在同一個頁面上，而每次做了一個連結，頁面重讀後，為了讓使用者不知道什麼時候才會點的功能能夠一覽無遺的準備在那邊讓用戶可以隨時點下去，所以只好再重新送了一次。網路的資源就在這樣的一頁一頁的翻動中，重複著送出一些相同的東西。 (Google在剛出來的時候因為介面相當乾淨，反而獲得了大部分的人的認同，製造出一種很有效率的印象)

在Ajax之前，一份由當時MicroSoft提出的IE4架構裡面(沒錯，就是IE4，1997年)，介紹了IE4提供的XML物件，並讓使用者可以透過javaScript來操作xml物件。記得那時候的瀏覽器Netscape必須要使用object的方式load xml object進來才能進行操作，這點其實非常的不方便，所以我後來做的專案都指定要求客戶的web application架構必須使用IE作為標準瀏覽器，說起來我也算是當時殘害netscape的一個幫兇~~~。而現在ajax所用的技術，再當時就都有提供了。當時流行的概念是soap，但是由於soap需要大量的伺服器端的協助，所以好像也沒有紅起來。 ajax之所以會大紅大紫，原因還是來自於blog和web 2.0的概念大量的被複製，相對於javascript本身架構並沒有太大的變化，但是web的技術門檻由於提供服務的服務性網站變多，很多服務也都相對的提供xml做為data source，這點讓有programing能力的blogger趨之若鶩，紛紛的透過ajax技術把服務網站的資料整合到blog裡面。總而言之，就是整個網路消費市場習慣的改變，才讓ajax因此傳播開來，而這一項沒有發明的發明，隨著web 2.0的散佈，慢慢的在網路界變成一個神話。(沒有發明的發明在90年代指的是SOAP，當時還有很多人出來指稱soap會變成影響網路發展的一個重要指標，但是呢...，或許現在還沒到檢驗的時候吧，we will see...)

．Tags: AJAX all computer

．Comment counts: 0 Comments

[+/-]