HTML5 標籤雲 - TagCloud

4   Comments

Html5 Tagcanvas
談到標籤雲就會聯想到 Roy Tanck 運用Flash所做的TagCloud插件, 這個插件在 WordPress 也經常被使用. 我原本也是使用在Blogger裡, 後來想試試HTML5的標籤雲; 網路上居然搜尋不到?!
中文環境裡的搜尋結果幾乎是標籤雲分析器. 以前已介紹過這個 標籤雲分析器. 擴大搜尋找到的HTML5 TagCloud只支援WordPress或是付費插件; 雖然有權重分析的標籤雲看起來很專業.

我應該以Html5的思維來找, 猜想會不會是採用 "Canvas" 當作關鍵字? 果然找到了! Graham Breach 寫了以jQuery技術支援的 HTML5 Canvas TagCloud .

這位大方的好心人分享了他的設計.
雖然HTML5尚在醞釀中, 你可能會擔心換掉了Flash的標籤雲, TagCanvas會不會因為HTML5的發展變化而忽然失效?! 其實 "canvas" 這個元素已經是定案, 不會有問題. 雖然它是基於WebKit開發出來的, 在Firefox跟Opera運行一樣順暢.
比較有問題的是IE9以下的版本... 作者有找到相容的修正碼, 加載到CSS裡即可. 不過我看在IE7效果不好. (幸好, 2012-7月統計,全球IE7市占率僅1.9%. 台灣約4%, 台灣的IE用戶加油,好嗎?)

ㄟ..介紹至此, 很想結束收工. Canvas TagCloud網站裡已經詳述.
如果你看完裝設的方法, 就能了解使用的程式碼都是一樣的. 但區分了支援IE9以下版本的語法, 跟IE9以下用戶不管他死活的語法.
(沒有啦~ 有附加提示的區塊給不支援的網路客 )

使用HTML5技術有個好處, 對於不支援的瀏覽器, 它可以自動被省略(非法文檔的處理默契). 頂多那個位置變成空位, 就像是沒有裝設Flash Player的系統, 會看到元件提示圖. 現在的瀏覽器都能更新版本, 大多數的網路用戶可以呈現出效果.我只示範其中一種jQuery的語法, 在Blogger加裝HTML5標籤雲的方法. 因為你只需要載入一支jQuery程式庫就可以支援周遭衍生的眾多UI及各種插件.

Step 1. 先確認你的部落格裡有沒有使用 jQuery ?
通常jquery.min.js被置入CSS的 <head></head> 之間, 如下:

<head>
.....

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

Blogger好用之處就是你不一定要將jquery放在<head>裡面, javascript另外放在<body>裡面. 你可以全部裝進Html/Javascript模組裡. * 已經有使用jquery.min.js就不必重複申裝.

Step 2. 在 HTML5 Canvas TagCloud 下載 " jquery.tagcanvas.min.js" , "excanvas.js" 這兩個檔案.  excanvas.js 是讓IE9以下版本可以使用標籤雲, 你的讀者不會使用這麼舊的IE版本可省略. 將這兩個檔案上傳至網路空間取得有效網址. 推薦空間:Dropbox申裝方法.

Step 3. 將以下語法貼入Html/Javascript模組裡.

<!--[if lt IE 9]><script src="excanvas.js網址"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.tagcanvas.min.js網址"></script>
<script>
$(document).ready(function() {
if(!$('#myCanvas').tagcanvas({
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05
},'tags')) {
$('#myCanvasContainer').hide();
}
});
</script>

<div id="myCanvasContainer">
<canvas width="300" height="300" id="myCanvas">
<p>當瀏覽器不支援時的提示語</p>
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="http://xxx.blogspot.com/search/label/第1個標籤">第1個標籤</a></li>
<li><a href="http://xxx.blogspot.com/search/label/第2個標籤" target="_blank">第2個標籤</a></li>
<li><a href="http://xxx.blogspot.com/search/label/第3個標籤"><img src="圖示網址"/></a></li>
.....
</ul>
</div>

原本有使用 jquery.min.js 不必重複.
顏色相同的ID屬性配對, 命名時一定要相同.
當瀏覽器不支援時的提示語, 在可支援的瀏覽器上是被隱藏的. 你可以編輯圖示, 轉接連結等等html語法, 甚至可以將原有的flash標籤雲內嵌進去.
第1個標籤示範是基本連結. 第2個標籤示範是另開新視窗. 第3個標籤示範是以圖示取代連結的語法.
textColour 是標籤文字色碼.
outlineColour 是框取線的色碼.
textFont 指定字型.
你也可以將 href="連結" 指向任何網址或影音網址.

他的網站裡還有很多參數可使用. 例如換成垂直捲動或是水平捲動. 不同標籤群使用不同顏色, 字型等效果. 而且你還能同時使用多個標籤雲. 最方便的是:使用中文標籤不需要考慮內嵌字型的問題. 雖然不像Flash標籤雲可以自動抓取data裡的labels, 但是增加新標籤連結是很簡單的事.
嗯, 我應該沒有漏掉重要的情報吧! 對了, 滑鼠滾輪可控制縮放. * 如果你採用他所分享的源碼, 好歹在他的網站上推薦+1或按讚, 這才是優質網路客.

範例:



Author Summary
HTML5 標籤雲 - TagCloud
Subject : HTML5 標籤雲 - TagCloud
Author : - Dream Talker Updated at: 1:21 PM
Votes : 100% - 5.0 - based on 2014
HTML5標籤雲源碼,jQuery技術支援.在部落格裡加裝隨滑鼠立體滾動的html5標籤雲
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 你們家的標籤雲真的很厲害,不說都不知道原來還可以滑鼠縮放,真是太神奇了!

    而且,標籤雲點開後,變成全螢幕畫面,選取文章後也是全螢幕,沒有載入特效,讀取速度快多了,以後我就知道怎麼瀏覽速度比較快了,嘿嘿~

    ReplyDelete
    Replies
    1. 哈哈! 厲害的是設計者, 我覺得比以前的Flash標籤雲更容易修改.
      我把標籤連結到行動版就是方便檢選, 但有時不會顯示全部內容.

      Delete
  2. 你好,找不到dropbox的檔案網址,只有分享下載網址。

    ReplyDelete
    Replies
    1. 請問是新申請的Dropbox嗎? 新帳戶好像不能外連使用,請改用Google code吧!

      http://code.google.com/

      Delete

5 Stars - Reviews