<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jQuery, Ajax, PHP, JSON, XML, Web Technologies &#187; Web Technologies</title>
	<atom:link href="http://blog.chonla.com/category/web-technologies/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.chonla.com</link>
	<description>คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า</description>
	<lastBuildDate>Tue, 17 Jan 2012 18:27:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Chonla&#8217;s Instant ก็แค่อยากลอง Instant กับเค้าบ้างน่ะ</title>
		<link>http://blog.chonla.com/2010/09/chonlas-instant-%e0%b8%81%e0%b9%87%e0%b9%81%e0%b8%84%e0%b9%88%e0%b8%ad%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%a5%e0%b8%ad%e0%b8%87-instant-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b9%80%e0%b8%84%e0%b9%89%e0%b8%b2/</link>
		<comments>http://blog.chonla.com/2010/09/chonlas-instant-%e0%b8%81%e0%b9%87%e0%b9%81%e0%b8%84%e0%b9%88%e0%b8%ad%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%a5%e0%b8%ad%e0%b8%87-instant-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b9%80%e0%b8%84%e0%b9%89%e0%b8%b2/#comments</comments>
		<pubDate>Sun, 26 Sep 2010 19:31:14 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[Chonla's Instant]]></category>
		<category><![CDATA[Google Instant]]></category>
		<category><![CDATA[Instant]]></category>
		<category><![CDATA[Youtube Instant]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=301</guid>
		<description><![CDATA[เมื่อ entry ที่แล้วเพิ่งเขียนถึง Google Instant Search ไป หลังจากนั้นไม่นาน ก็มี Youtube Instant ตามมา (http://ytinstant.com/) สร้างโดยนาย Feross Aboukhadijeh (อ่านว่าอะไรไม่รู้ เฟรอส อาบูคาดีเย่ มั๊ง) เลยนั่งนึก ๆ ดู อยากลองทำมั่งแฮะ ว่าแล้วช่วงที่ว่างก็ลองปั่นเว็บที่ทำงานแบบ Instant ออกมาเป็น Chonla&#8217;s InstantChonla&#8217;s Instant เป็นเว็บที่ทำงานเหมือน Google Instant Search คือ จะทำการค้นหาในขณะที่เรากำลังพิมพ์ไปด้วยพร้อม ๆ กัน ทำให้ประหยัดเวลาในการกด Enter หรือเอาเมาส์ไปคลิกปุ่มค้นหา จริง ๆ แล้ว Instant Search มันไม่ใช่เรื่องใหม่ ก่อนหน้านี้ Google ก็เคยทำอะไรที่ &#8220;คล้าย ๆ&#8221; กันออกมานี้แล้ว นั่นก็คือ Suggestion [...]]]></description>
			<content:encoded><![CDATA[<p>เมื่อ entry ที่แล้วเพิ่งเขียนถึง Google Instant Search ไป หลังจากนั้นไม่นาน ก็มี Youtube Instant ตามมา (<a title="Youtube Instant" href="http://ytinstant.com/" target="_blank">http://ytinstant.com/</a>) สร้างโดยนาย Feross Aboukhadijeh (อ่านว่าอะไรไม่รู้ เฟรอส อาบูคาดีเย่ มั๊ง) เลยนั่งนึก ๆ ดู อยากลองทำมั่งแฮะ ว่าแล้วช่วงที่ว่างก็ลองปั่นเว็บที่ทำงานแบบ Instant ออกมาเป็น Chonla&#8217;s Instant<span id="more-301"></span>Chonla&#8217;s Instant เป็นเว็บที่ทำงานเหมือน Google Instant Search คือ จะทำการค้นหาในขณะที่เรากำลังพิมพ์ไปด้วยพร้อม ๆ กัน ทำให้ประหยัดเวลาในการกด Enter หรือเอาเมาส์ไปคลิกปุ่มค้นหา จริง ๆ แล้ว Instant Search มันไม่ใช่เรื่องใหม่ ก่อนหน้านี้ Google ก็เคยทำอะไรที่ &#8220;คล้าย ๆ&#8221; กันออกมานี้แล้ว นั่นก็คือ Suggestion ที่สามารถบอกถึงคำค้นหาที่ใกล้เคียงกับที่เราค้นหาอยู่ พร้อมทั้งจำนวนของผลลัพธ์จากคำค้นหานั้นออกมา เพื่อให้เราเห็นและเลือกใช้ได้โดยง่าย ตัว Instant ก็ทำในทำนองคล้าย ๆ กัน เพียงแค่แทนที่จะแสดงคำค้นที่ใกล้เคียง แต่แสดงผลลัพธ์ของคำค้นที่เราพิมพ์อยู่แทน</p>
<p>Chonla&#8217;s Instant ใช้ jQuery เป็น engine หลักในการทำงานฝั่ง client และมี query interface เดียว ที่เป็น engine หลักทางฝั่ง server ที่เอาไว้สำหรับรับ keyword จาก client เพื่อไปค้นหาตาม resource ที่กำหนด วิธีนี้ ทำให้ code ที่รันทางฝั่ง client สั้นกระทัดรัด และโยนภาระที่เหลือไปทางฝั่ง server แทน</p>
<p>Service หลัก ๆ ที่ผมลองเอาไปใส่ใน Chonla&#8217;s Instant ตอนที่ทำครั้งแรก คือ Longdo Dictionary (<a title="Longdo Dictionary" href="http://dict.longdo.com/" target="_blank">http://dict.longdo.com/</a>) ซึ่งเป็น Online dictionary ที่ได้รับความนิยมในประเทศไทย ตามมาด้วย Youtube (<a title="Youtube" href="http://www.youtube.com/" target="_blank">http://www.youtube.com/</a>) โดยที่ Youtube ที่ผมใส่นั้น จะทำหน้าที่ search และเอาผลลัพธ์แค่ title, link และ thumbnail มาแสดงเท่านั้น ไม่มีส่วน clip player หลังจากที่ทดสอบและแก้ไขจนพอใจ ก็เอา Service ที่ 3 มาลง นั่นก็คือ พจนานุกรม ฉบับราชบัณฑิตยสถาน ปี พ.ศ. 2542 (<a title="พจนานุกรม ฉบับราชบัณฑิตยสถาน 2542" href="http://rirs3.royin.go.th/" target="_blank">http://rirs3.royin.go.th/</a>)</p>
<p>การทำงานฝั่ง Client หลัก ๆ ผมก็ใช้วิธี พิมพ์ปุ๊บ ก็เริ่มไปค้นหาด้วย Ajax และระหว่างที่ค้นหาอยู่ ก็ block ไม่ให้เกิดการค้นหาซ้อนจนกว่าจะค้นหาเสร็จ เมื่อค้นหาเสร็จแล้ว ถ้ามีการค้นหาซ้อนค้างอยู่ ให้ค้นต่อ แล้วเอาผลลัพธ์ที่ได้มาแสดง ส่วนทางฝั่ง Server ก็ใช้ php ไปดึงข้อมูลจาก Server ที่ให้บริการทั้ง 3 services มาเรียบเรียง แล้วส่งกลับไปให้ Ajax เพื่อแสดงผล</p>
<p>เขียนมาซะยาวเลย &#8230; ผมว่า ลองไปเล่นกันเลยดีกว่าครับ กับ <a title="Chonla's Instant" href="http://instant.chonla.com/" target="_blank">Chonla&#8217;s Instant</a> (<a title="Chonla's Instant" href="http://instant.chonla.com/" target="_blank">http://instant.chonla.com/</a>)</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2010%2F09%2Fchonlas-instant-%25e0%25b8%2581%25e0%25b9%2587%25e0%25b9%2581%25e0%25b8%2584%25e0%25b9%2588%25e0%25b8%25ad%25e0%25b8%25a2%25e0%25b8%25b2%25e0%25b8%2581%25e0%25b8%25a5%25e0%25b8%25ad%25e0%25b8%2587-instant-%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%259a%25e0%25b9%2580%25e0%25b8%2584%25e0%25b9%2589%25e0%25b8%25b2%2F&amp;title=Chonla%26%238217%3Bs%20Instant%20%E0%B8%81%E0%B9%87%E0%B9%81%E0%B8%84%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B8%B2%E0%B8%81%E0%B8%A5%E0%B8%AD%E0%B8%87%20Instant%20%E0%B8%81%E0%B8%B1%E0%B8%9A%E0%B9%80%E0%B8%84%E0%B9%89%E0%B8%B2%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B8%99%E0%B9%88%E0%B8%B0" id="wpa2a_2"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2010/09/chonlas-instant-%e0%b8%81%e0%b9%87%e0%b9%81%e0%b8%84%e0%b9%88%e0%b8%ad%e0%b8%a2%e0%b8%b2%e0%b8%81%e0%b8%a5%e0%b8%ad%e0%b8%87-instant-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b9%80%e0%b8%84%e0%b9%89%e0%b8%b2/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Hotmail โฉมใหม่ เร็วปรู๊ดดดด&#8230;!</title>
		<link>http://blog.chonla.com/2008/11/hotmail-%e0%b9%82%e0%b8%89%e0%b8%a1%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88-%e0%b9%80%e0%b8%a3%e0%b9%87%e0%b8%a7%e0%b8%9b%e0%b8%a3%e0%b8%b9%e0%b9%8a%e0%b8%94%e0%b8%94%e0%b8%94%e0%b8%94/</link>
		<comments>http://blog.chonla.com/2008/11/hotmail-%e0%b9%82%e0%b8%89%e0%b8%a1%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88-%e0%b9%80%e0%b8%a3%e0%b9%87%e0%b8%a7%e0%b8%9b%e0%b8%a3%e0%b8%b9%e0%b9%8a%e0%b8%94%e0%b8%94%e0%b8%94%e0%b8%94/#comments</comments>
		<pubDate>Tue, 04 Nov 2008 03:09:47 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Performance Tuning]]></category>
		<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[Hotmail]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=110</guid>
		<description><![CDATA[Hotmail โฉมใหม่ หรือที่ปัจจุบันกลายมาเป็น Windows Live Hotmail แล้ว ได้มีการปรับปรุงขนานใหญ่ ผมได้ข่าวนี้จาก Newsletter ของ Hotmail เองมาสักพักแล้ว และวันนี้ (4 พ.ย. 2551) ผมก็ได้ทดลองใช้ด้วยตัวเอง เข้ามาครั้งแรก ได้เจอกับข้อความแจ้งถึงการเปลี่ยนแปลงของ Hotmail ครั้งใหญ่ ที่อ้างถึง 3 สิ่งที่เปลี่ยนแปลงไป คือ รูปลักษณ์ที่เรียบง่ายที่ปรับแต่งได้เองมากขึ้น เข้าถึงอีเมลได้เร็วขึ้นถึง 70%! เข้าถึงผู้ติดต่อ Windows Live Hotmail ได้ง่ายขึ้น จากที่ได้ทดลองใช้ จะเห็นได้ว่า สิ่งที่เปลี่ยนไปอย่างเห็นได้ชัดคือกราฟิคที่เบาลง ใน Hotmail เวอร์ชั่นเดิม จะเห็นได้ว่า มีสีสันและรูปภาพกราฟิคจำนวนมาก ซึ่งเป็นปัจจัยหนึ่งที่ทำให้โหลดหน้าได้ช้า ใน Hotmail ใหม่นี้ สีสันดูสะอาดสะอ้านมากขึ้น แต่ก็ยังมีรูปแบบธีม (Theme) ของสีที่ให้มา (Default) ที่ดูขัด ๆ กันอยู่ดี นอกจากนี้แล้วยังมีธีมรูปแบบอื่น [...]]]></description>
			<content:encoded><![CDATA[<p>Hotmail โฉมใหม่ หรือที่ปัจจุบันกลายมาเป็น Windows Live Hotmail แล้ว ได้มีการปรับปรุงขนานใหญ่ ผมได้ข่าวนี้จาก Newsletter ของ Hotmail เองมาสักพักแล้ว และวันนี้ (4 พ.ย. 2551) ผมก็ได้ทดลองใช้ด้วยตัวเอง</p>
<p><span id="more-110"></span></p>
<p>เข้ามาครั้งแรก ได้เจอกับข้อความแจ้งถึงการเปลี่ยนแปลงของ Hotmail ครั้งใหญ่ ที่อ้างถึง 3 สิ่งที่เปลี่ยนแปลงไป คือ</p>
<ol>
<li>รูปลักษณ์ที่เรียบง่ายที่ปรับแต่งได้เองมากขึ้น</li>
<li>เข้าถึงอีเมลได้เร็วขึ้นถึง 70%!</li>
<li>เข้าถึงผู้ติดต่อ Windows Live Hotmail ได้ง่ายขึ้น</li>
</ol>
<p><a href="http://blog.chonla.com/wp-content/uploads/2008/11/hotmail.png"><img class="alignnone size-full wp-image-113" title="Hotmail Changes" src="http://blog.chonla.com/wp-content/uploads/2008/11/hotmail.png" alt="" width="500" height="284" /></a></p>
<p>จากที่ได้ทดลองใช้ จะเห็นได้ว่า สิ่งที่เปลี่ยนไปอย่างเห็นได้ชัดคือกราฟิคที่เบาลง ใน Hotmail เวอร์ชั่นเดิม จะเห็นได้ว่า มีสีสันและรูปภาพกราฟิคจำนวนมาก ซึ่งเป็นปัจจัยหนึ่งที่ทำให้โหลดหน้าได้ช้า ใน Hotmail ใหม่นี้ สีสันดูสะอาดสะอ้านมากขึ้น แต่ก็ยังมีรูปแบบธีม (Theme) ของสีที่ให้มา (Default) ที่ดูขัด ๆ กันอยู่ดี นอกจากนี้แล้วยังมีธีมรูปแบบอื่น ๆ ที่ให้มา ผมลองเปลี่ยนเล่นแล้วก็เห็นถึงความเปลี่ยนแปลงเพียงนิดหน่อย (นิดเดียวจริง ๆ) คือโทนสีที่เปลี่ยนไปเพียงบางจุด และรูปภาพกราฟิคที่เปลี่ยนไป</p>
<p>ผมได้ลองเรื่องความรวดเร็วในการเข้าถึงอีเมลแต่ละฉบับ ก็พบว่า เข้าถึงรวดเร็วดี น่าจะเร็วขึ้นกว่าแต่ก่อนตามที่กล่าวอ้าง แต่ผมจับเวลาไม่ได้ว่าเร็วขึ้นกี่เปอเซนต์ แต่ก็ถือว่าเร็วใช้ได้</p>
<p>นอกจากนี้แล้ว ยังมีรูปแบบวิธีการใส่อีเมลของผู้รับที่เปลี่ยนไปเล็กน้อย คือ มีฟังก์ชั่นให้ค้นหาโดยการกดปุ่ม, autocomplete ที่สวยงามมากขึ้น, การจัดการอีเมลที่พิมพ์เข้าไปแล้ว (มีกากบาทให้ลบอีเมลที่พิมพ์เข้าไปแล้วได้) ก็ถือว่าในส่วนนี้สะดวกขึ้นจริง ๆ</p>
<p>โดยรวมแล้ว ผมถือว่าเป็นพัฒนาการที่ดีขึ้นของ Hotmail ครับ แต่ถึงยังไง ผมก็ยังชอบ Gmail มากกว่าครับ</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F11%2Fhotmail-%25e0%25b9%2582%25e0%25b8%2589%25e0%25b8%25a1%25e0%25b9%2583%25e0%25b8%25ab%25e0%25b8%25a1%25e0%25b9%2588-%25e0%25b9%2580%25e0%25b8%25a3%25e0%25b9%2587%25e0%25b8%25a7%25e0%25b8%259b%25e0%25b8%25a3%25e0%25b8%25b9%25e0%25b9%258a%25e0%25b8%2594%25e0%25b8%2594%25e0%25b8%2594%25e0%25b8%2594%2F&amp;title=Hotmail%20%E0%B9%82%E0%B8%89%E0%B8%A1%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88%20%E0%B9%80%E0%B8%A3%E0%B9%87%E0%B8%A7%E0%B8%9B%E0%B8%A3%E0%B8%B9%E0%B9%8A%E0%B8%94%E0%B8%94%E0%B8%94%E0%B8%94%26%238230%3B%21" id="wpa2a_4"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/11/hotmail-%e0%b9%82%e0%b8%89%e0%b8%a1%e0%b9%83%e0%b8%ab%e0%b8%a1%e0%b9%88-%e0%b9%80%e0%b8%a3%e0%b9%87%e0%b8%a7%e0%b8%9b%e0%b8%a3%e0%b8%b9%e0%b9%8a%e0%b8%94%e0%b8%94%e0%b8%94%e0%b8%94/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Google Labs ห้องทดลองของ Google</title>
		<link>http://blog.chonla.com/2008/11/google-labs-%e0%b8%ab%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%97%e0%b8%94%e0%b8%a5%e0%b8%ad%e0%b8%87%e0%b8%82%e0%b8%ad%e0%b8%87-google/</link>
		<comments>http://blog.chonla.com/2008/11/google-labs-%e0%b8%ab%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%97%e0%b8%94%e0%b8%a5%e0%b8%ad%e0%b8%87%e0%b8%82%e0%b8%ad%e0%b8%87-google/#comments</comments>
		<pubDate>Sat, 01 Nov 2008 14:20:27 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Google]]></category>
		<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[Google Labs]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=108</guid>
		<description><![CDATA[มีโอกาสได้แวะเข้าไปดูเว็บไซต์ Google Labs เห็นของเล่นจากแล็บของ Google มากมาย หลาย ๆ ตัวก็เป็นอะไรที่ติดตลาดอยู่ในตอนนี้ แต่อีกหลาย ๆ ตัวกลับไม่ใช่ ในหน้าแรกของ Google Labs จะเห็นรายชื่อของโปรเจ็คต่าง ๆ ของ Google ที่ยังอยู่ในขั้นทดลอง (ด้านซ้าย) และเวอร์ชั่นที่ปล่อยมาให้พวกเราได้ใช้กันแล้ว (ด้านขวา ที่ Google เรียกว่า Graduates of Labs) งานส่วนใหญ่จะเกิดขึ้นจากไอเดียของคนไม่กี่คน คิด แล้วทำเป็น POC (Proof of Concept) ให้เห็นว่าทำได้จริง และทำการต่อยอดให้เป็น Product ผมชอบไอเดียนี้นะ การคิด แล้วทำ POC แล้วค่อยต่อยอดน่ะ ยิ่งเอาไปรวมกับการคิดแบบ Brainstorm เข้าด้วยแล้ว ผมว่ายิ่งสุดยอดไปเลย พูดถึงการ Brainstorm หลายคนมักจะคิดว่ามันเป็นการประชุมแบบถกเถียงกันว่าของใครแน่กว่าใคร แต่ความเป็นจริงแล้ว มันเป็นการประชุมเพื่อให้ออกความคิดเห็น และสร้างทางเลือกให้มากที่สุด (ไม่ว่าทางเลือกนั้นจะแทบเป็นไปไม่ไ่ด้ก็ตาม) [...]]]></description>
			<content:encoded><![CDATA[<p>มีโอกาสได้แวะเข้าไปดูเว็บไซต์ <a title="Google Labs" href="http://labs.google.com/" target="_blank">Google Labs</a> เห็นของเล่นจากแล็บของ Google มากมาย หลาย ๆ ตัวก็เป็นอะไรที่ติดตลาดอยู่ในตอนนี้ แต่อีกหลาย ๆ ตัวกลับไม่ใช่</p>
<p><span id="more-108"></span></p>
<p>ในหน้าแรกของ Google Labs จะเห็นรายชื่อของโปรเจ็คต่าง ๆ ของ Google ที่ยังอยู่ในขั้นทดลอง (ด้านซ้าย) และเวอร์ชั่นที่ปล่อยมาให้พวกเราได้ใช้กันแล้ว (ด้านขวา ที่ Google เรียกว่า Graduates of Labs) งานส่วนใหญ่จะเกิดขึ้นจากไอเดียของคนไม่กี่คน คิด แล้วทำเป็น POC (Proof of Concept) ให้เห็นว่าทำได้จริง และทำการต่อยอดให้เป็น Product</p>
<p>ผมชอบไอเดียนี้นะ การคิด แล้วทำ POC แล้วค่อยต่อยอดน่ะ ยิ่งเอาไปรวมกับการคิดแบบ Brainstorm เข้าด้วยแล้ว ผมว่ายิ่งสุดยอดไปเลย</p>
<p>พูดถึงการ Brainstorm หลายคนมักจะคิดว่ามันเป็นการประชุมแบบถกเถียงกันว่าของใครแน่กว่าใคร แต่ความเป็นจริงแล้ว มันเป็นการประชุมเพื่อให้ออกความคิดเห็น และสร้างทางเลือกให้มากที่สุด (ไม่ว่าทางเลือกนั้นจะแทบเป็นไปไม่ไ่ด้ก็ตาม) สุดท้ายแล้วค่อยตัดตัวเลือกที่ไม่เหมาะสมออกจนเหลือแต่ทางเลือกที่เหมาะสมกับสถานการณ์ที่สุด</p>
<p>กลับมาที่เรื่องแล็บ มันทำให้ผมรู้สึกว่า อยากได้บรรยากาศทำงานแบบนี้บ้างจัง ผมคิดว่า บริษัทที่ขายเทคโนโลยี และเทรนด์ (trend) จำเป็นต้องอาศัยความคิด และการร่วมมือจากบรรดา Technician (ผมรวมถึง Developer, SA, Project manager ฯลฯ เข้าไปด้วย) เพื่อที่จะทำให้ Product ที่จะออกมามันเกิดจากการประสานกันอย่างลงตัวระหว่าง Consumer และ Technology</p>
<p><strong>บทสรุปแบบลวก ๆ</strong></p>
<p>ถ้าคุณเป็นพนักงาน ลองคิดดูว่าตัวคุณเองเคยเคิดจะเอา Technology ที่คุณรู้มาใช้ในบริษัทบ้างหรือเปล่า หรือถ้าคุณเป็นเจ้าของกิจการ คุณเคยคิดที่จะเปิดรับ Technology ให้เข้ามาสู่กระแสการดำเนินงานของบริษัทหรือเปล่า คุณเคยให้ความสำัคัญกับคนที่เกี่ยวข้องกับสิ่งเหล่านี้มั๊ย สุดท้าย&#8230; เอาเป็นว่า อยากลองไปทำงานที่ Google บ้างจัง</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F11%2Fgoogle-labs-%25e0%25b8%25ab%25e0%25b9%2589%25e0%25b8%25ad%25e0%25b8%2587%25e0%25b8%2597%25e0%25b8%2594%25e0%25b8%25a5%25e0%25b8%25ad%25e0%25b8%2587%25e0%25b8%2582%25e0%25b8%25ad%25e0%25b8%2587-google%2F&amp;title=Google%20Labs%20%E0%B8%AB%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%97%E0%B8%94%E0%B8%A5%E0%B8%AD%E0%B8%87%E0%B8%82%E0%B8%AD%E0%B8%87%20Google" id="wpa2a_6"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/11/google-labs-%e0%b8%ab%e0%b9%89%e0%b8%ad%e0%b8%87%e0%b8%97%e0%b8%94%e0%b8%a5%e0%b8%ad%e0%b8%87%e0%b8%82%e0%b8%ad%e0%b8%87-google/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>อะฮ้า Web 3.0 เรอะ เอา Web 2.5 ให้รอดก่อนดีกว่าพี่น้อง</title>
		<link>http://blog.chonla.com/2008/10/%e0%b8%ad%e0%b8%b0%e0%b8%ae%e0%b9%89%e0%b8%b2-web-30-%e0%b9%80%e0%b8%a3%e0%b8%ad%e0%b8%b0-%e0%b9%80%e0%b8%ad%e0%b8%b2-web-25-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b8%a3%e0%b8%ad%e0%b8%94%e0%b8%81%e0%b9%88/</link>
		<comments>http://blog.chonla.com/2008/10/%e0%b8%ad%e0%b8%b0%e0%b8%ae%e0%b9%89%e0%b8%b2-web-30-%e0%b9%80%e0%b8%a3%e0%b8%ad%e0%b8%b0-%e0%b9%80%e0%b8%ad%e0%b8%b2-web-25-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b8%a3%e0%b8%ad%e0%b8%94%e0%b8%81%e0%b9%88/#comments</comments>
		<pubDate>Fri, 31 Oct 2008 07:21:17 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Web 3.0]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=101</guid>
		<description><![CDATA[วันนี้ได้มีโอกาสได้เข้าไปอ่านข้อมูลเกี่ยวกับเว็บ 3.0 (Web 3.0) ซึ่งเป็นแนวคิดที่ต่อยอดมาจาก Web 2.0 พอสรุปได้คร่าว ๆ ดังนี้ Web 1.0 คือ ผู้ให้บริการ เป็นผู้ที่ป้อนข้อมูลใก้กับผู้บริโภคเพียงฝ่ายเดียว Web 2.0 คือ ผู้บริโภคเริ่มกลายมาเป็นผู้ที่ให้ข้อมูล จนทำให้เกิดเครือข่ายทางสังคม (Social Network) ผู้ที่ให้ข้อมูลไม่จำเป็นจะต้องเป็นผู้ให้บริการเว็บไซต์นั้น ๆ ก็ได้ และบางเว็บทำตัวเป็นเพียงแค่ผู้ที่รวบรวมข้อมูลต่าง ๆ สำหรับ Social Networker เราเรียกว่าทำตัวเป็น Aggregator นั่นเอง Web 3.0 ยิ่งไปกันใหญ่ อ้างถึงการใช้เทคโนโลยีที่เลิศหรูมาเกี่ยวข้อง ไม่ว่าจะเป็น AI, Semantic Web, Web Ontology Language, SVG และอื่น ๆ [อ้างอิงจาก : http://www.idayblog.com/archives/227] จะเห็นได้ว่า Web 3.0 ดูเป็นเว็บที่น่าพิศมัยอยู่ไม่น้อย แต่ลองนึกถึงแนวโน้มของสิ่งที่กำลังเป็นไปในปัจจุบัน [...]]]></description>
			<content:encoded><![CDATA[<p>วันนี้ได้มีโอกาสได้เข้าไปอ่านข้อมูลเกี่ยวกับเว็บ 3.0 (Web 3.0) ซึ่งเป็นแนวคิดที่ต่อยอดมาจาก Web 2.0 พอสรุปได้คร่าว ๆ ดังนี้</p>
<ul>
<li>Web 1.0 คือ ผู้ให้บริการ เป็นผู้ที่ป้อนข้อมูลใก้กับผู้บริโภคเพียงฝ่ายเดียว</li>
<li>Web 2.0 คือ ผู้บริโภคเริ่มกลายมาเป็นผู้ที่ให้ข้อมูล จนทำให้เกิดเครือข่ายทางสังคม (Social Network) ผู้ที่ให้ข้อมูลไม่จำเป็นจะต้องเป็นผู้ให้บริการเว็บไซต์นั้น ๆ ก็ได้ และบางเว็บทำตัวเป็นเพียงแค่ผู้ที่รวบรวมข้อมูลต่าง ๆ สำหรับ Social Networker เราเรียกว่าทำตัวเป็น Aggregator นั่นเอง</li>
<li>Web 3.0 ยิ่งไปกันใหญ่ อ้างถึงการใช้เทคโนโลยีที่เลิศหรูมาเกี่ยวข้อง ไม่ว่าจะเป็น AI, Semantic Web, Web Ontology Language, SVG และอื่น ๆ [อ้างอิงจาก : <a title="12 เทคโนโลยี (ไม่) พร้อมใช้ใน Web 3.0" href="http://www.idayblog.com/archives/227" target="_blank">http://www.idayblog.com/archives/227</a>]</li>
</ul>
<p><span id="more-101"></span></p>
<p>จะเห็นได้ว่า Web 3.0 ดูเป็นเว็บที่น่าพิศมัยอยู่ไม่น้อย แต่ลองนึกถึงแนวโน้มของสิ่งที่กำลังเป็นไปในปัจจุบัน องค์ประกอบการพัฒนาเว็บที่ทำให้ติดตลาดนั้น หากเราใช้เทคโนโลยีที่ล้ำสมัยเกินไป เทคโนโลยีนั้นจะเป็นตัวขัดขวางการก่อให้เกิดสิ่งที่เราต้องการเสียเอง ยกตัวอย่างเช่น การนำ AI มาประยุกต์ใช้ นักพัฒนาจะต้องมีความรู้ทางด้าน AI ไม่งั้นแล้ว ก็ต้องรอคนที่มีความรู้ทางด้านนี้มาพัฒนา Framework หรือ Library เพื่อให้เรียกใช้กันอีกต่อหนึ่ง</p>
<p>หากเราแบ่งเฟส (Phase) เส้นทางการไปสู่เว็บ 3.0 ออกเป็นช่วงย่อย ๆ แล้ว คงจะต้องแบ่งกันออกเป็นอีกหลายเฟส กว่าจะไปถึงจุดหมายได้ ดีไม่ดี สิ่งที่จะเกิดขึ้น อาจจะไม่ใช่ Web 3.0 ก็ได้ แต่อาจจะกลายเป็น Web 2.0 ที่เป็นเวอร์ชั่นหวือหวามากขึ้น ด้วยเทคโนโลยี Flash ที่มี 3D เข้ามาเป็นส่วนประกอบมากขึ้น การใช้ SVG ที่เป็นที่แพร่หลายมากขึ้น การโต้ตอบระหว่างผู้ใช้กับเว็บจะเนียนมากขึ้น อาจจะมีบางอย่างจาก Web 3.0 เท่านั้นที่เอามาใช้ได้จริง จนสุดท้าย เราก็ไปได้แค่ Web 2.5 (ผมมั่วเลขเวอร์ชั่นเอง เอาเป็นว่า ไกลกว่า 2.0 แต่ไม่ถึง 3.0 ครับ)</p>
<p><strong>บทสรุป</strong></p>
<p>หนทางสู่เว็บ 3.0 ยังอีกไกล อนาคตของเทคโนโลยีจะเป็นไปในทางไหน เราได้แค่คาดการณ์ไว้ แต่มันจะบิด หรือพลิกไปเป็นแบบใด กลุ่มผู้ใช้ทั่วโลก จะเป็นผู้ให้คำตอบ เฉกเช่นการพัฒนาจาก Web 1.0 มาเป็น Web 2.0 ครับ</p>
<p>คนที่เปลี่ยนแปลงโลกแห่งอินเตอร์เน็ต และทำสามารถทำตลาดให้กลุ่มผู้ใช้ส่วนใหญ่คล้อยตามได้ ผู้นั้นคือผู้ชี้เส้นทางของอนาคตของ Web Technology ครับ</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F10%2F%25e0%25b8%25ad%25e0%25b8%25b0%25e0%25b8%25ae%25e0%25b9%2589%25e0%25b8%25b2-web-30-%25e0%25b9%2580%25e0%25b8%25a3%25e0%25b8%25ad%25e0%25b8%25b0-%25e0%25b9%2580%25e0%25b8%25ad%25e0%25b8%25b2-web-25-%25e0%25b9%2583%25e0%25b8%25ab%25e0%25b9%2589%25e0%25b8%25a3%25e0%25b8%25ad%25e0%25b8%2594%25e0%25b8%2581%25e0%25b9%2588%2F&amp;title=%E0%B8%AD%E0%B8%B0%E0%B8%AE%E0%B9%89%E0%B8%B2%20Web%203.0%20%E0%B9%80%E0%B8%A3%E0%B8%AD%E0%B8%B0%20%E0%B9%80%E0%B8%AD%E0%B8%B2%20Web%202.5%20%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%A3%E0%B8%AD%E0%B8%94%E0%B8%81%E0%B9%88%E0%B8%AD%E0%B8%99%E0%B8%94%E0%B8%B5%E0%B8%81%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%9E%E0%B8%B5%E0%B9%88%E0%B8%99%E0%B9%89%E0%B8%AD%E0%B8%87" id="wpa2a_8"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/10/%e0%b8%ad%e0%b8%b0%e0%b8%ae%e0%b9%89%e0%b8%b2-web-30-%e0%b9%80%e0%b8%a3%e0%b8%ad%e0%b8%b0-%e0%b9%80%e0%b8%ad%e0%b8%b2-web-25-%e0%b9%83%e0%b8%ab%e0%b9%89%e0%b8%a3%e0%b8%ad%e0%b8%94%e0%b8%81%e0%b9%88/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Comet ดาวหางมาแล้ววว, Two-way Web Communication!</title>
		<link>http://blog.chonla.com/2008/10/comet-%e0%b8%94%e0%b8%b2%e0%b8%a7%e0%b8%ab%e0%b8%b2%e0%b8%87%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7%e0%b8%a7%e0%b8%a7-two-way-web-communication/</link>
		<comments>http://blog.chonla.com/2008/10/comet-%e0%b8%94%e0%b8%b2%e0%b8%a7%e0%b8%ab%e0%b8%b2%e0%b8%87%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7%e0%b8%a7%e0%b8%a7-two-way-web-communication/#comments</comments>
		<pubDate>Thu, 30 Oct 2008 16:57:46 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Comet]]></category>
		<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[HTTP Server Push]]></category>
		<category><![CDATA[HTTP Streaming]]></category>
		<category><![CDATA[HTTP-Binding]]></category>
		<category><![CDATA[Reverse Ajax]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=98</guid>
		<description><![CDATA[เทคโนโลยีเว็บปัจจุบันนี้ เป็นลักษณะที่ Client ซึ่งหมายถึง เว็บบราวเซอร์ ทำการติดต่อ และส่งข้อมูลไปยัง Server ซึ่งหมายถึงเว็บเซิร์ฟเวอร์ รอเซิร์ฟเวอร์ประมวลผล และส่งข้อมูลกลับมาที่เว็บบราวเซอร์ และแสดงผลแก่ผู้ใช้ จะเกิดอะไรขึ้น ถ้า Server สามารถส่งข้อมูลมายัง Client ได้เองบ้างล่ะ? น่าตื่นเต้นไม่น้อยเลยทีเดียว ถ้าทำแบบนั้นได้จริง ๆ เมื่อมีการเปลี่ยนแปลงของข้อมูลบนเว็บเฺซิร์ฟเวอร์ เซิร์ฟเวอร์ก็จะทำการส่งข้อมูลมาให้เว็บบราวเซอร์โดยอัตโนมัติ เหตุการณ์แบบนี้ ในปัจจุบันนี้ยังทำไม่ได้ครับ ด้วยสาเหตุคือ โปรโตคอล HTTP มันเป็น Stateless Connection ครับ นั่นหมายถึง การเล่นเว็บ เมื่อเว็บบราวเซอร์ได้ข้อมูลจากเว็บเซิร์ฟเวอร์กลับมาแล้วการเชื่อมต่อ (Connection) จะถูกปิดทันที ซึ่งต่างจากโปรแกรมประเภท IRC ซึ่งเป็น Stateful นั่นหมายถึงเมื่อเกิด Connection แล้ว Connection นั้นจะเปิดค้างไว้จนกว่าจะมีการสั่งให้ปิด Connection แต่ัยังไงก็ตามเหตุการณ์ที่คล้ายคลึงกันนี้ยังสามารถทำได้ครับ ผมยกตัวอย่างกรณีของหน้าการแสดงผลการสนทนาระหว่างคนกลุ่มหนึ่งผ่านเว็บ (ไม่ว่าจะเรียกว่าอะไรก็ตาม Chatbox, Shoutbox หรือชื่ออื่น ๆ) กระบวนการอย่างหนึ่งที่เกิดขึ้นคือการ [...]]]></description>
			<content:encoded><![CDATA[<p>เทคโนโลยีเว็บปัจจุบันนี้ เป็นลักษณะที่ Client ซึ่งหมายถึง เว็บบราวเซอร์ ทำการติดต่อ และส่งข้อมูลไปยัง Server ซึ่งหมายถึงเว็บเซิร์ฟเวอร์ รอเซิร์ฟเวอร์ประมวลผล และส่งข้อมูลกลับมาที่เว็บบราวเซอร์ และแสดงผลแก่ผู้ใช้ จะเกิดอะไรขึ้น ถ้า Server สามารถส่งข้อมูลมายัง Client ได้เองบ้างล่ะ?</p>
<p><span id="more-98"></span></p>
<p>น่าตื่นเต้นไม่น้อยเลยทีเดียว ถ้าทำแบบนั้นได้จริง ๆ เมื่อมีการเปลี่ยนแปลงของข้อมูลบนเว็บเฺซิร์ฟเวอร์ เซิร์ฟเวอร์ก็จะทำการส่งข้อมูลมาให้เว็บบราวเซอร์โดยอัตโนมัติ เหตุการณ์แบบนี้ ในปัจจุบันนี้ยังทำไม่ได้ครับ ด้วยสาเหตุคือ โปรโตคอล HTTP มันเป็น Stateless Connection ครับ นั่นหมายถึง การเล่นเว็บ เมื่อเว็บบราวเซอร์ได้ข้อมูลจากเว็บเซิร์ฟเวอร์กลับมาแล้วการเชื่อมต่อ (Connection) จะถูกปิดทันที ซึ่งต่างจากโปรแกรมประเภท IRC ซึ่งเป็น Stateful นั่นหมายถึงเมื่อเกิด Connection แล้ว Connection นั้นจะเปิดค้างไว้จนกว่าจะมีการสั่งให้ปิด Connection แต่ัยังไงก็ตามเหตุการณ์ที่คล้ายคลึงกันนี้ยังสามารถทำได้ครับ</p>
<p>ผมยกตัวอย่างกรณีของหน้าการแสดงผลการสนทนาระหว่างคนกลุ่มหนึ่งผ่านเว็บ (ไม่ว่าจะเรียกว่าอะไรก็ตาม Chatbox, Shoutbox หรือชื่ออื่น ๆ) กระบวนการอย่างหนึ่งที่เกิดขึ้นคือการ Polling เพื่อให้ดู Real-Time ผมตั้งระยะห่างระหว่างการ Poll แต่ละครั้งไว้ที่ 5 วินาที แสดงว่า ใน 1 นาที จะเกิดการ Poll 12 ครั้ง โดยที่ไม่สนใจว่าจะได้อะไรกลับมาบ้าง จะมีใครคุยกันหรือไม่ นี่คือเหตุการณ์สำหรับผู้ใช้ 1 คนนะครับ ถ้ามีคนเข้ามาคุย 50 คน ก็ 600 Poll ใน 1 นาที รู้สึกเยอะหรือยังครับ มันเป็นเหตุที่ทำให้เว็บเซิร์ฟเวอร์ทำงานหนักโดยไม่ได้ Throughput (งานในช่วงเวลาหนึ่ง ๆ) ที่เหมาะสมครับ</p>
<p><strong>ได้เวลาเข้าเรื่อง Comet แล้วครับ</strong></p>
<p>Comet จะเป็นเทคนิคที่ทำให้เว็บเซิร์ฟเวอร์สามารถส่งข้อมูลกลับมาให้เว็บบราวเซอร์ได้ โดยเทคนิคแล้ว จะแบ่งได้เป็น 2 วิธีหลัก ๆ คือ การทำ Streaming และการทำ Long Polling</p>
<p><span style="text-decoration: underline;">การทำ Streaming</span></p>
<p>คือ การที่ให้ Server สร้าง Connection ไปยังเว็บเซิร์ฟเวอร์ค้างไว้ โดยที่ไม่ปิด เมื่อเว็บเซิร์ฟเวอร์เกิดเหตุการณ์อะไรขึ้น ก็จะส่งกลับมาให้เว็บบราวเซอร์ทำงานได้ทันที เทคนิคง่าย ๆ ของการทำแบบ Streaming คือการทำ IFRAME ซ่อนไว้ โดยที่ใน IFRAME นั้นจะเรียกไปยังหน้าเว็บหน้าหนึ่ง ที่ไม่มีการกำหนด Timeout ไว้ เมื่อเกิด Event อะไรก็ตามที่เว็บเซิร์ฟเวอร์ เว็บเซิร์ฟเวอร์ก็เพียงส่ง script กลับมาให้ใน IFRAME และเนื่องจากมันเป็น script เมื่อได้รับกลับมาแล้วก็จะถูกแปล และประมวลผลทันที (interprete)</p>
<p><span style="text-decoration: underline;">การทำ Long Polling</span></p>
<p>วิธีนี้ ผมเคยได้ยินครั้งแรกตอนที่หัดเขียน Jabber ในชื่อของ HTTP Binding วิธีนี้มีหลักการง่าย ๆ ว่า เพิ่มระยะเวลา Timeout ของ Request Connection ออกไปให้นานที่สุด เมื่อเกิด Event ให้เว็บเซิร์ฟเวอร์ส่งข้อมูลกลับมาที่ Connection ที่เปิดไว้นั้น และทำการปิดทันทีตามลักษณะของ Stateless Connection เมื่อเว็บบราวเซอร์ได้รับ Event กลับมา ก็ให้ทำการสร้าง Connection ใหม่ขึ้นมาอีกทันที วิธีนี้ก็เหมือนกับวิธีการ Poll เพียงแค่เรายืดเวลา Timeout ในการ Poll แต่ละครั้งออกไปให้มากขึ้น</p>
<p>การทำ Long Polling ทำได้หลายวิธี ไม่ว่าจะเป็นการใช้ Ajax, XMLHTTPRequest หรือการใช้ Script Tag Long Polling คุณสามารถอ่านเพิ่มเติมได้จากแหล่งอ้างอิงท้ายบทความครับ</p>
<p><strong>บทสรุป</strong></p>
<p>ด้วยความเห็นส่วนตัวแล้ว ผมสนใจในส่วนของการทำ Long Polling มากกว่า เพราะความง่ายในการพัฒนา ดูแล้วจะไม่ซับซ้อนมากเหมือนการทำ Streaming หรือใครมีความคิดเห็นอย่างอื่นก็แลกเปลี่ยนกันได้ครับ</p>
<p><strong>แหล่งอ้างอิง</strong></p>
<ul>
<li><a title="WIKI: COMET (Programming)" href="http://en.wikipedia.org/wiki/Comet_(programming)" target="_blank">http://en.wikipedia.org/wiki/Comet_(programming)</a></li>
<li><a title="Comet: A New Approach to Ajax Applications" href="http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications" target="_blank">http://ajaxian.com/archives/comet-a-new-approach-to-ajax-applications</a></li>
<li><a title="COMET Daily" href="http://cometdaily.com/" target="_blank">http://cometdaily.com/</a></li>
</ul>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F10%2Fcomet-%25e0%25b8%2594%25e0%25b8%25b2%25e0%25b8%25a7%25e0%25b8%25ab%25e0%25b8%25b2%25e0%25b8%2587%25e0%25b8%25a1%25e0%25b8%25b2%25e0%25b9%2581%25e0%25b8%25a5%25e0%25b9%2589%25e0%25b8%25a7%25e0%25b8%25a7%25e0%25b8%25a7-two-way-web-communication%2F&amp;title=Comet%20%E0%B8%94%E0%B8%B2%E0%B8%A7%E0%B8%AB%E0%B8%B2%E0%B8%87%E0%B8%A1%E0%B8%B2%E0%B9%81%E0%B8%A5%E0%B9%89%E0%B8%A7%E0%B8%A7%E0%B8%A7%2C%20Two-way%20Web%20Communication%21" id="wpa2a_10"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/10/comet-%e0%b8%94%e0%b8%b2%e0%b8%a7%e0%b8%ab%e0%b8%b2%e0%b8%87%e0%b8%a1%e0%b8%b2%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7%e0%b8%a7%e0%b8%a7-two-way-web-communication/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>มารู้จักกับ Google Gears, เร่งสปีดเว็บด้วย Google Gears</title>
		<link>http://blog.chonla.com/2008/10/%e0%b8%a1%e0%b8%b2%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b1%e0%b8%9a-google-gears-%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80/</link>
		<comments>http://blog.chonla.com/2008/10/%e0%b8%a1%e0%b8%b2%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b1%e0%b8%9a-google-gears-%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80/#comments</comments>
		<pubDate>Thu, 30 Oct 2008 14:06:59 +0000</pubDate>
		<dc:creator>chonla</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Gears]]></category>
		<category><![CDATA[Performance Tuning]]></category>
		<category><![CDATA[Web Technologies]]></category>
		<category><![CDATA[Google Gears]]></category>

		<guid isPermaLink="false">http://blog.chonla.com/?p=88</guid>
		<description><![CDATA[Google Gears หรือ Gears เป็นเทคโนโลยีใหม่ ที่ช่วยให้การเปิดเว็บสามารถทำไปได้อย่างรวดเร็วมากขึ้นโดยอาศัยหลักการง่าย ๆ ที่ว่า ไฟล์ต่าง ๆ ที่อยู่บนเครื่องของเรา ย่อมโหลดมาได้เร็วกว่าไฟล์ที่อยู่บนเว็บเซิร์ฟเวอร์ องค์ประกอบของ Gears Gears ประกอบด้วยส่วนประกอบต่าง ๆ ดังนี้ Database Module (ใช้ SQLite) เพื่อใช้เก็บข้อมูลต่าง ๆ ของเว็บไว้ในเครื่องของเรา WorkerPool Module ใช้สำหรับการรัน JavaScript ใน Background LocalServer Module ใช้สำหรับการเรียกใช้ไฟล์ต่าง ๆ ไม่ว่าจะเป็นภาพ หรือข้อมูลอื่น ๆ โดยไม่จำเป็นต้องมีการต่ออินเตอร์เน็ต (Offline Data) โดย LocalServer จะทำการ Cache ข้อมูลเหล่านี้ไว้บนเครื่อง และให้บริการเมื่อมีการร้องขอ Desktop Module ใช้เพื่อให้เว็บที่ใช้ Gears สามารถใช้งานคำสั่งที่เกี่ยวกับ Desktop ได้ เช่น [...]]]></description>
			<content:encoded><![CDATA[<p>Google Gears หรือ Gears เป็นเทคโนโลยีใหม่ ที่ช่วยให้การเปิดเว็บสามารถทำไปได้อย่างรวดเร็วมากขึ้นโดยอาศัยหลักการง่าย ๆ ที่ว่า ไฟล์ต่าง ๆ ที่อยู่บนเครื่องของเรา ย่อมโหลดมาได้เร็วกว่าไฟล์ที่อยู่บนเว็บเซิร์ฟเวอร์</p>
<p><span id="more-88"></span></p>
<p><strong>องค์ประกอบของ Gears</strong></p>
<p>Gears ประกอบด้วยส่วนประกอบต่าง ๆ ดังนี้</p>
<ol>
<li>Database Module (ใช้ SQLite) เพื่อใช้เก็บข้อมูลต่าง ๆ ของเว็บไว้ในเครื่องของเรา</li>
<li>WorkerPool Module ใช้สำหรับการรัน JavaScript ใน Background</li>
<li>LocalServer Module ใช้สำหรับการเรียกใช้ไฟล์ต่าง ๆ ไม่ว่าจะเป็นภาพ หรือข้อมูลอื่น ๆ โดยไม่จำเป็นต้องมีการต่ออินเตอร์เน็ต (Offline Data) โดย LocalServer จะทำการ Cache ข้อมูลเหล่านี้ไว้บนเครื่อง และให้บริการเมื่อมีการร้องขอ</li>
<li>Desktop Module ใช้เพื่อให้เว็บที่ใช้ Gears สามารถใช้งานคำสั่งที่เกี่ยวกับ Desktop ได้ เช่น การสร้าง Shortcut</li>
<li>Geolocation Module ใช้สำหรับบอกตำแหน่งที่อยู่ของผู้ใช้งานเว็บที่ใช้ Gears ณ ขณะนั้น</li>
</ol>
<p><strong>การทำงานของ Gears</strong></p>
<p>ตามที่ผมเคยอ้างไว้ในบทความ Ajax? คืออะไรกันหว่า? [<a title="Ajax? คืออะไรกันหว่า?" href="http://blog.chonla.com/?p=8" target="_blank">http://blog.chonla.com/?p=8</a>] ว่า เว็บ 1 หน้า จะแยกเป็น 3 ส่วน คือ Layout (Application UI), Data, และ Script ส่วนที่เป็น Data ที่แยกออกมานี้ เราเรียกว่า Data Layer</p>
<p>โดยปกติเว็บทั่ว ๆ ไป จะไม่มีการแยก Data Layer ออกมาจากส่วน Layout แต่จะเขียนปนกัน</p>
<div id="attachment_89" class="wp-caption alignnone" style="width: 403px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_1.jpg"><img class="size-full wp-image-89" title="การเชื่อมต่อแบบไม่มี Data Layer" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_1.jpg" alt="การเชื่อมต่อแบบไม่มี Data Layer" width="393" height="131" /></a><p class="wp-caption-text">การเชื่อมต่อแบบไม่มี Data Layer</p></div>
<p>การที่จะเก็บ Data ไว้ในเครื่องเราได้นั้น เราจำเป็นต้องแยก Data Layer ออกจาก Layout ก่อน เราเรียกขั้นตอนนี้ว่า Data Isolation เมื่อเรามองถึงเว็บที่มีการเรียกใช้ Ajax ในการแลกเปลี่ยนเฉพาะ Data ระหว่างเว็บบราวเซอร์ และเว็บเซิร์ฟเวอร์ เราสามารถพิจารณาได้ว่า Ajax นี่เองที่ทำหน้าที่เป็น Data Layer ของเว็บนั้น ๆ</p>
<div id="attachment_90" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_2.jpg"><img class="size-full wp-image-90" title="การเชื่อมต่อแบบมี Data Layer" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_2.jpg" alt="การเชื่อมต่อแบบมี Data Layer" width="500" height="112" /></a><p class="wp-caption-text">การเชื่อมต่อแบบมี Data Layer</p></div>
<p>และตรงนี้เองที่ Gears จะเข้ามามีบทบาท ลองพิจารณาดูนะครับว่า ถ้าเราเอา Module อะไรซักอย่าง ไปคั่นระหว่างส่วนเว็บบราวเซอร์กับส่วน Data Layer เพื่อใช้ในตัดสินใจว่าจะดึงข้อมูลที่เราเก็บไว้จากในเครื่องของเรา หรือจะดึงข้อมูลใหม่จากเว็บเซิร์ฟเวอร์แทน หรือจะทำทั้ง 2 อย่างดี เราเรียก Module ตัวนี้ว่า Data Switch เราสามารถมองได้ว่า Data Switch นี่ก็ทำตัวเหมือนเป็น Data Layer เหมือนกันนั่นเอง</p>
<div id="attachment_91" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_3.jpg"><img class="size-full wp-image-91" title="เพิ่ม Data Switch เข้าไป" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_3.jpg" alt="เพิ่ม Data Switch เข้าไป" width="500" height="103" /></a><p class="wp-caption-text">เพิ่ม Data Switch เข้าไป</p></div>
<p>Data Switch จะทำหน้าที่ทั้งบันทึกข้่อมูลที่ต้องการลงสู่เครื่องของเรา และดึงข้อมูลที่เราต้องการออกมา เมื่อเราเชื่อมภาพการทำงานของ Data Switch เข้าไปด้วย เราจะเห็นได้ว่า นี่แหละครับ คอนเซ์ปต์การทำงานของ Gears</p>
<div id="attachment_92" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_4.jpg"><img class="size-full wp-image-92" title="ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_4.jpg" alt="ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module" width="500" height="160" /></a><p class="wp-caption-text">ภาพการทำงานของ Gears เมื่อติดต่อกับ LocalServer และ Database Module</p></div>
<p>ตัว Data Switch เองยังสามารถที่จะกำหนดให้ทำการ Synchronize ข้อมูลกับ Server เป็นระยะได้อีกด้วย</p>
<p><strong>Gears เมื่อไม่มี Data Layer</strong></p>
<p>จะทำยังไง ถ้าเราไม่ได้ทำ Data Layer? ยังทำได้ครับ แต่ก็ยุ่งยากขึ้นมาหน่อย เราจะต้องเขียน Code ในการดักขั้นตอนของการรับส่งข้อมูลไปยัง Server เช่น ตอน Submit Form แต่การทำแบบนี้ ทำให้เราต้องทำงานหนักขึ้นอีกเยอะ สู้เอาเวลามาแยก Data Layer ออกมาน่าจะง่ายกว่าหรือเปล่า? <img src='http://blog.chonla.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong>เมื่อไหร่ที่จะควรหรือไม่ควรทำ Offline Data</strong></p>
<ul>
<li>เมื่อข้อมูลเป็นข้อมูลชั่วคราว เช่น ข้อมูลดัชนีหุ้น แบบนี้ก็ไม่ควรทำ</li>
<li>ข้อมูลบางอย่างจะมันก็ควรจะเป็น online มากกว่าที่จะเป็น offline เช่น ข้อความพูดคุยในโปรแกรม Chat แบบนี้ก็ไม่ควรทำเหมือนกัน</li>
<li>ข้อมูลที่มีการเรียกใช้บ่อย ๆ แบบนี้ควรทำอย่างยิ่ง</li>
<li>ข้อมูลที่ต้องมีการประมวลผล หรือใช้ข้อมูลมากมายมหาศาลเกินกว่าเครื่องผู้ใช้จะรับไหวได้ แบบนี้ก็ไม่ควรทำ</li>
</ul>
<p><strong>การ Synchronize Data</strong></p>
<p>จะเกิดขึ้น เพราะสาเหตุดังนี้</p>
<ul>
<li>มีการเปลี่ยนแปลงข้อมูลในขณะที่ Offline</li>
<li>มีการใช้งานข้อมูลร่วมกันกับคนอื่น (คนอื่นอาจจะเปลี่ยนแปลงข้อมูลนั้นได้)</li>
<li>มีการเรียกใช้งานข้อมูลจาก External Resource เช่นการเรียกใช้งาน Feed</li>
</ul>
<p>การทำให้ข้อมูลบนเครื่อง เหมือนกับข้อมูลบนเว็บเซิร์ฟเวอร์ เราเรียกว่าการทำ Synchronization เราสามารถทำได้ 2 วิธีคือ Manual Sync และ Background Sync</p>
<p><strong>Manual Sync</strong></p>
<p>จะทำก็ต่อเมื่อ มีข้อมูลที่ต้อง Sync ไม่มากก และผู้ใช้้ต้องการข้อมูลที่ใหม่ล่าสุดก่อนที่จะทำการเปลี่ยนไปใช้ข้อมูลแบบ Offline แต่ปัญหาของการทำ Manual Sync ก็มี เช่น เราไม่สามารถรู้ได้ว่า Network ในขณะนั้นหลุดเมื่อไหร่ เพราะผู้ใช้อาจจะอยู่ในสถานที่ที่ Network ไม่เสถียร เช่นบนรถ เป็นต้น หรือ User อาจจะลืม Sync ก่อนที่จะเข้าสู่ Offline ก็ได้</p>
<p><strong>Background Sync</strong></p>
<p>วิธีนี้จะมีข้อดีคือ ข้อมูลจะอัพเดทเสมอ และสามารถทำได้แม้เน็ตจะไม่เร็ว ข้อเสียคือ ถ้าไม่ได้ใช้ WorkerPool (ถ้าจำไม่ได้ว่าคืออะไร ให้ย้อนกลับไปอ่านข้างต้น) มันจะกิน resource ปริมาณมาก อาจจะทำให้เน็ตช้าได้</p>
<div id="attachment_93" class="wp-caption alignnone" style="width: 510px"><a href="http://blog.chonla.com/wp-content/uploads/2008/10/figure_5.jpg"><img class="size-full wp-image-93" title="Gears ภาพรวม" src="http://blog.chonla.com/wp-content/uploads/2008/10/figure_5.jpg" alt="Gears ภาพรวม" width="500" height="204" /></a><p class="wp-caption-text">Gears ภาพรวม</p></div>
<p><strong>ตัวอย่างเว็บที่ใช้ Gears</strong></p>
<p>Google (Docs, Reader, Picasa, YouTube), MySpace, WordPress 2.6</p>
<p><strong>ตัวอย่าง Gears Application</strong></p>
<ul>
<li><a title="ตัวอย่าง Gears Application" href="http://code.google.com/apis/gears/sample.html" target="_blank">http://code.google.com/apis/gears/sample.html</a></li>
</ul>
<p><strong>บทสรุป</strong></p>
<p>ตามความเห็นส่วนตัวแล้ว Gears ถือว่าเป็นเทคโนโลยีที่น่าสนใจตัวหนึ่ง ยิ่งผนวกเข้ากับ DHTML ที่นับวันยิ่งหวือหวาได้ใจด้วยแล้ว คงเอาชนะใจ Developer หลาย ๆ คนได้ไม่ยาก แต่สำหรับในเชิงการพัฒนาเพื่อธุรกิจแล้ว อาจจะทำได้ยาก เพราะความไม่แน่นอนของพฤติกรรมของผู้ใช้ อาจจะเป็นปัจจัยหลักในการตัดสินใจนำมาใช้สำหรับผู้บริหารได้</p>
<p><strong>แหล่งอ้างอิง</strong></p>
<ul>
<li><a title="Gears Architecture" href="http://code.google.com/apis/gears/architecture.html" target="_blank">http://code.google.com/apis/gears/architecture.html</a></li>
<li><a title="WIKI: Gears (Software)" href="http://en.wikipedia.org/wiki/Gears_(software)" target="_blank">http://en.wikipedia.org/wiki/Gears_(software)</a></li>
</ul>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.chonla.com%2F2008%2F10%2F%25e0%25b8%25a1%25e0%25b8%25b2%25e0%25b8%25a3%25e0%25b8%25b9%25e0%25b9%2589%25e0%25b8%2588%25e0%25b8%25b1%25e0%25b8%2581%25e0%25b8%2581%25e0%25b8%25b1%25e0%25b8%259a-google-gears-%25e0%25b9%2580%25e0%25b8%25a3%25e0%25b9%2588%25e0%25b8%2587%25e0%25b8%25aa%25e0%25b8%259b%25e0%25b8%25b5%25e0%25b8%2594%25e0%25b9%2580%2F&amp;title=%E0%B8%A1%E0%B8%B2%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A%20Google%20Gears%2C%20%E0%B9%80%E0%B8%A3%E0%B9%88%E0%B8%87%E0%B8%AA%E0%B8%9B%E0%B8%B5%E0%B8%94%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2%20Google%20Gears" id="wpa2a_12"><img src="http://blog.chonla.com/wp-content/plugins/add-to-any/share_save_171_16.gif" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.chonla.com/2008/10/%e0%b8%a1%e0%b8%b2%e0%b8%a3%e0%b8%b9%e0%b9%89%e0%b8%88%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b1%e0%b8%9a-google-gears-%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

