Tag Clounds คือกลุ่มของคีย์เวิร์ดต่างๆภายในเว็บไซต์ ซึ่งจะมีลิงก์เชื่อมโยงไปยังบทความหรือหน้าต่างๆที่มีความสัมพันธ์กับคำนั้นๆ เราจะพบ Tag Clounds ได้กับเว็บทั่วๆ อย่างเช่นเว็บที่ผมเข้าประจำคือ http://video.mthai.com/ ซึ่งก็มีเจ้า Tag Clounds นี้อยู่ทางด้านขวามือล่างเว็บ (คำค้นยอดนิยมนั่นล่ะ)

Animation Tag Clounds ประมาณเมื่อปีสองปีที่ผ่านมา หลายท่านคงยังจะจำได้กับ Tag Clounds ชนิดหนึ่งที่สร้างมาจาก Flash ซึ่งเป็นสามารถเคลื่อนไหวไปตามเมาส์ของเรา ซึ่งสร้างความน่าตื่นตาตื่นใจ แต่ถึงอย่างนั้น จุดด้อยของเจ้า Flash นี้ก็คือ ระบบ Search Engine ยังไม่สามารถทำความเข้าใจกับมันได้ดีเท่าไหร่ มีของ Google ที่สามารถตรวจสอบเนื้อหาภายใน  Flash นั้นได้แต่ก็ใช้เวลานานมากกว่า Tag Clounds ประเภทข้อความลิงก์ธรรมดาและเพื่อเป็นการแก้ปัญหานี้ รวมทั้งภาษาใหม่ๆอย่าง HTML5 ที่มีคุณสมบัติการแสดงผลเอฟเฟกเพิ่มเข้ามา TagCanvas จึงถือกำเหนิดขึ้น

TagCanvas เป็นคำสั่งภาษา HTML5 ที่เอาความสามารถของคำสั่ง Canvas มาประยุกตืใช้ให้เกิดเป็น Animation Tag Clounds ซึ่งในขณะนี้มีให้เราได้ใช้งานกันสองแบบคือ แบบธรรมดา และใช้งานผ่าน jQuery

การใช้งานและการติดตั้ง

1. ก่อนอื่นเราจะต้องทำการดาวน์โหลดไฟล์  tagcanvas.js version 1.11 / [Minified] หรือถ้าจะใช้งานแบบ jQuery ให้ดาวน์โหลด  jquery.tagcanvas.js version 1.11.1 / [Minified] แทน

2. ทำการเรียกใช้งานไฟล์ผ่านคำสั่ง

หรือแบบ jQuery

3. เพิ่มคำสั่ง canvas ลงไปยังส่วนที่ต้องการบนหน้าเว็บไซต์ของเรา ทั้่งนี้เราจะต้องกำหนดความกว้างและสูงด้วย 

Anything in here will be replaced on browsers that support the canvas element

4. ทำการวางคีย์เวิร์ด หรือ Tag ที่เราต้องการเข้าไปตามตัวอย่างครับ

In Internet Explorer versions up to 8, things inside the canvas are inaccessible!


	

		

			Google
		

			Fish
		

			Chips
		

			Salt
		

			Vinegar
	

สำหรับผู้ที่ใช้งานแบบ jQuery ให้ใช้คำสั่งแบบนี้แทนครับ

ถ้าหากการตั้งค่าถูกต้อง เท่านี้เราก็จะได้ Animation Tag Clounds เท่ๆเอาไว้ติดบนเว็บไซต์ แถมยังช่วยในเรื่องของ SEO อีกด้วยครับ

* หากเลือกใช้แบบ Minified ตัวนี้จะถูกบีบอัดด้วยเทคโนโลยีของ  Yahoo! YUI Compressor