<?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>Vai Vai Soft</title>
	<atom:link href="http://www.vaivaisoft.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.vaivaisoft.com</link>
	<description>ไวไวซอฟท์: ละมุน ละไม ไว</description>
	<lastBuildDate>Fri, 01 Feb 2013 17:44:35 +0000</lastBuildDate>
	<language>th</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<item>
		<title>Vai Vai Soft ช่วยปรับแต่งเว็บไซต์เทศกาลภาพยนตร์ทดลองกรุงเทพ</title>
		<link>http://www.vaivaisoft.com/2011/04/bangkok-experimental-film-festival/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=bangkok-experimental-film-festival</link>
		<comments>http://www.vaivaisoft.com/2011/04/bangkok-experimental-film-festival/#comments</comments>
		<pubDate>Sat, 16 Apr 2011 20:12:32 +0000</pubDate>
		<dc:creator>vaivaisoft</dc:creator>
				<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.vaivaisoft.com/?p=395</guid>
		<description><![CDATA[เว็บไซต์ของเทศกาลครั้งนี้ (http://www.beffbeff.com) ใช้ระบบ WordPress เป็นจัดการเนื้อหา และ Vai Vai Soft ได้ช่วยปรับแต่งธีมจากธีม v-nakorn อันเป็นหนึ่งในธีมพื้นฐานที่ Vai Vai Soft ได้ผลิตแจกจ่ายให้ผู้สนใจใช้งานมาพอสมควรแล้ว]]></description>
				<content:encoded><![CDATA[<p>เทศกาลภาพยนตร์ทดลองกรุงเทพปี 2544 (Bangkok Experimental Film Festival) จัดขึ้นครั้งนี้เป็นครั้งที่หก ซึ่งจะเปิดตัวในกรุงเทพช่วงเดือนธันวาคม 2554</p>
<p>เว็บไซต์ของเทศกาลครั้งนี้ (http://www.beffbeff.com) ใช้ระบบ WordPress เป็นจัดการเนื้อหา และ Vai Vai Soft ได้ช่วยปรับแต่งธีมจากธีม <a href="http://www.imenn.com/files/v_nakorn_0.5.zip">v-nakorn</a> อันเป็นหนึ่งในธีมพื้นฐานที่ Vai Vai Soft ได้ผลิตแจกจ่ายให้ผู้สนใจใช้งานมาพอสมควรแล้ว</p>
<div id="attachment_400" class="wp-caption aligncenter" style="width: 610px"><img src="http://www.vaivaisoft.com/wp-content/uploads/2011/04/beff-screenshot-600x464.jpg" alt="หน้าแรกเว็บไซต์ เทศกาลภาพยนตร์ทดลองกรุงเทพ ใช้ธีม v_nakorn" title="beff-screenshot" width="600" height="464" class="size-medium wp-image-400" /><p class="wp-caption-text">หน้าแรกเว็บไซต์ เทศกาลภาพยนตร์ทดลองกรุงเทพ ใช้ธีม v_nakorn</p></div>
<p>เนื้อหาของเว็บไซต์ประกอบด้วยบทความ 2 ภาษา (ไทย/อังกฤษ) ที่น่าสนใจมากมายจากศิลปิน นักวิชาการ ภัณฑารักษ์ในวงการภาพยนตร์อาทิ</p>
<ul>
<li><a href="http://beffbeff.com/beff-catalogue-texts/apichatpong-weerasethakul-talks-with-rirkrit-tiravanija-on-art-film-etc/">บทสัมภาษณ์อภิชาติพงศ์ วีระเศรษฐกุล</a></li>
<li><a href="http://beffbeff.com/beff-catalogue-texts/three-questions-on-the-beff-5-core-program-thai/">คำถามจากศาสตราจารย์ เบนเนดิก แอนเดอร์สัน</a></li>
<li><a href="http://beffbeff.com/archives-diary/home-movies-our-history-the-thai-film-archive-th/">บทความเกี่ยวกับ&#8221;หนังบ้าน&#8221;ในหอภาพยนตร์</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.vaivaisoft.com/2011/04/bangkok-experimental-film-festival/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Vai Vai Soft กับงานที่ปรึกษาเว็บ Siam Intelligence</title>
		<link>http://www.vaivaisoft.com/2011/03/siam-intelligence/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=siam-intelligence</link>
		<comments>http://www.vaivaisoft.com/2011/03/siam-intelligence/#comments</comments>
		<pubDate>Fri, 04 Mar 2011 13:51:27 +0000</pubDate>
		<dc:creator>vaivaisoft</dc:creator>
				<category><![CDATA[News]]></category>

		<guid isPermaLink="false">http://www.vaivaisoft.com/?p=381</guid>
		<description><![CDATA[ทีม Vai Vai Soft เป็นที่ปรึกษาร่วมมือกับทีม SIU ในแผนปรับปรุงระยะยาว และในชั้นต้นนี้ ได้ปรับโฉมเว็บไซต์ Siam Intelligence รูปแบบใหม่ และเปิดตัวในวงกว้างไปเมื่อวันที่ 4 มีนาคม 2554]]></description>
				<content:encoded><![CDATA[<p>เว็บไซต์ <a href="http://www.siamintelligence.com/" rel="nofollow">Siam Intelligence</a> เป็นเว็บไซต์สื่อออนไลน์ ของบริษัท <a href="http://siu.co.th/" rel="nofollow">Siam Intelligence Unit</a> (SIU) มุ่งเน้นเนื้อหาข่าวและบทวิเคราะห์เชิงลึก รวมถึงการสัมภาษณ์บุคคลที่โดดเด่นในสาขาต่างๆ ซึ่งได้เปิดตัวมาและเคลื่อนไหวมาตลอดหลายปี จนเป็นที่รู้จักในแวดวงออนไลน์ทั้งทาง<a href="http://www.siamintelligence.com/" rel="nofollow">เว็บไซต์</a> และ Social Media อย่าง <a href="http://facebook.com/siamintelligence"  rel="nofollow">Facebook</a> และ <a href="http://twitter.com/siu_thailand" rel="nofollow">Twitter</a></p>
<p>ช่วงไตรมาสที่สามของปีที่แล้ว (2553) ทีมงาน SIU ได้วางแผนปรับปรุงเว็บไซต์ Siam Intelligence ครั้งใหญ่ ทั้งในเชิงเทคนิคด้านเว็บและแนวทางการผลิตเนื้อหา</p>
<p>ทีม Vai Vai Soft ได้ร่วมมือกับทีม SIU เป็นที่ปรึกษาในแผนปรับปรุงช่วงปี 2554 และในชั้นต้นนี้ ได้ปรับโฉมเว็บไซต์ Siam Intelligence รูปแบบใหม่ และเปิดตัวในวงกว้างไปเมื่อวันที่ 4 มีนาคม 2554</p>
<p>ติดตามรายละเอียดเพิ่มเติมในข่าว <a href="http://www.siamintelligence.com/new-siam-intelligence/" rel="nofollow">ข่าวการปรับปรุงโฉมหน้าเว็บไซต์ siam Intelligence</a></p>
<div id="attachment_383" class="wp-caption aligncenter" style="width: 461px"><img src="http://www.vaivaisoft.com/wp-content/uploads/2011/03/www.siamintelligence.com-2011-03-04-451x875.jpg" alt="เว็บไซต์ Siam Intelligence โฉมใหม่" title="www.siamintelligence.com-2011-03-04" width="451" height="875" class="size-large wp-image-383" /><p class="wp-caption-text">เว็บไซต์ Siam Intelligence โฉมใหม่</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.vaivaisoft.com/2011/03/siam-intelligence/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Vai Vai Soft ที่งาน WordPress Developer Night ครั้งที่ 1</title>
		<link>http://www.vaivaisoft.com/2011/02/wordrpess-developer-night/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=wordrpess-developer-night</link>
		<comments>http://www.vaivaisoft.com/2011/02/wordrpess-developer-night/#comments</comments>
		<pubDate>Sun, 06 Feb 2011 21:21:23 +0000</pubDate>
		<dc:creator>vaivaisoft</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.vaivaisoft.com/?p=368</guid>
		<description><![CDATA[งาน WordPress Developer Night ครั้งแรกเป็นงานรวมตัวกันระหว่างผู้สนใจพัฒนาระบบด้วย Wordpress เพื่อแบ่งปันแลกเปลี่ยนความรู้ระหว่างกัน จัดขึ้นที่ร้านกาแฟวาวี เอกมัย โดยในงานมีผู้สนใจเข้าร่วมราวสามสิบคน เม่นและวรงค์ได้เข้าร่วมเป็นวิทยากรในงาน]]></description>
				<content:encoded><![CDATA[<p>5 ก.พ. 2554 &#8211; งาน <a href="http://www.wpdevnight.com/">WordPress Developer Night</a> ครั้งแรกเป็นงานรวมตัวกันระหว่างผู้สนใจพัฒนาระบบด้วย WordPress เพื่อแบ่งปันแลกเปลี่ยนความรู้ระหว่างกัน จัดขึ้นที่ร้านกาแฟวาวี เอกมัย โดยในงานมีผู้สนใจเข้าร่วมราวสามสิบคน</p>
<div id="attachment_373" class="wp-caption aligncenter" style="width: 610px"><img src="http://www.vaivaisoft.com/wp-content/uploads/2011/02/imenn-wpdwvnight-600x400.jpg" alt="" title="imenn-wpdwvnight" width="600" height="400" class="size-medium wp-image-373" /><p class="wp-caption-text">เม่นขณะบรรยายการสร้าง Theme ใน WordPress Developer Night</p></div>
<p>ทีม Vai Vai Soft ร่วมเป็นวิทยากรในงานนี้ 2 หัวข้อคือ</p>
<ul>
<li>WordPress Theme Design โดย <a href="http://twitter.com/iMenn">@imenn</a> และ</li>
<li>WordPress Plugin Development โดย <a href="http://twiter.com/warong">@warong</a></li>
</ul>
<p>ท่านที่สนใจดูรายละเอียดการบรรยายในงานได้ที่ <a href="http://www.slideshare.net/iMenn/wordpress-theme-design-2011-thai">การสร้างธีม</a> และ <a href="http://smallpad.org/wpdevnight-5">ปลั๊กอินเบื้องต้น</a></p>
<div id="attachment_374" class="wp-caption aligncenter" style="width: 610px"><img src="http://www.vaivaisoft.com/wp-content/uploads/2011/02/warong-wpdevnight-600x400.jpg" alt="" title="warong-wpdevnight" width="600" height="400" class="size-medium wp-image-374" /><p class="wp-caption-text">วรงค์บรรยายช่วงการสร้างปลั๊กอิน</p></div>
<p>ส่วนรายละเอียดการบรรยายจะนำมาเรียบเรียงเป็นบล็อกใน Vai Vai Soft ต่อไป</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vaivaisoft.com/2011/02/wordrpess-developer-night/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>กรณีศึกษา: เว็บ one2car กับปัญหาการแสดงผลในการเชื่อมต่อช้า &#8220;ตามหาหญิงคนรักรอบโลก เพื่อจะพบว่าเธออยู่ข้างบ้านนี่เอง&#8221;</title>
		<link>http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=one2car-and-the-slow-connection</link>
		<comments>http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/#comments</comments>
		<pubDate>Wed, 11 Aug 2010 18:20:31 +0000</pubDate>
		<dc:creator>warong</dc:creator>
				<category><![CDATA[Knowledge]]></category>

		<guid isPermaLink="false">http://www.vaivaisoft.com/?p=268</guid>
		<description><![CDATA[กรณีศึกษาจากเว็บ one2car.com ความน่าสนใจอยู่ที่ปัญหาความช้าเมื่อใช้การเชื่อมต่อความเร็วต่ำ วิธีการทดสอบจนพบทางแก้นั้น ใช้เวลามากกว่าที่คาดหมาย สุดท้ายเมื่อพบวิธีแก้ กลับเป็นเรื่องง่ายๆ ที่มองข้ามไปแต่แรก]]></description>
				<content:encoded><![CDATA[<p>กรณีศึกษาครั้งนี้ เราเข้าไปแก้ปัญหาให้ลูกค้าเว็บไซต์รถมือสองเจ้าดัง <a href="http://www.one2car.com" rel="nofollow">one2car.com</a> สิ่งที่น่าสนใจคือปัญหาของเว็บ one2car เป็นเรื่องที่เจ้าของเว็บหลายๆ ท่านอาจจะไม่ให้ความสนใจนัก แต่ในเงื่อนไขธุรกิจที่แตกต่างกันไปของผู้ประกอบการแต่ละราย ทำให้จำเป็นต้องให้ความสนใจรายละเอียดที่ต่างกัน</p>
<div id="attachment_297" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/one2car-frontpage/" rel="attachment wp-att-297"><img src="http://www.vaivaisoft.com/wp-content/uploads/2010/08/one2car-frontpage-600x431.png" alt="" title="one2car-frontpage" width="600" height="431" class="size-medium wp-image-297" /></a><p class="wp-caption-text">หน้่าเว็บ one2car.com เว็บไซต์รถมือสองยอดนิยม</p></div>
<h2>รูปแบบธุรกิจของ one2car</h2>
<p>ท่านที่สนใจซื้อขายรถมือสองโดยใช้ช่องทางเว็บไซต์ น่าจะคุ้นเคยกับเว็บ one2car.com เป็นอย่างดี เว็บไซต์นี้เป็นการยกระดับธุรกิจรถมือสอง จากการประกาศโฆษณาทางสิ่งพิมพ์ (เช่นนิตยสาร) มาสู่ช่องทางอินเทอร์เน็ท ความต้องการพื้นฐานก็คือการเชื่อมถึงกันระหว่างเต๊นท์รถกับลูกค้าที่ต้องการซื้อรถมือสอง</p>
<p>พลังของการเชื่อมต่อและกระจายข้อมูลทางอินเทอร์เน็ท นอกจากจะมีประสิทธิภาพกว่าสิ่งพิมพ์อย่างมากแล้ว เมื่อเพิ่มการพัฒนาโปรแกรมเข้าไป เพื่อความสามารถทางการจัดการข้อมูลรถ การแสดงรูปภาพ การค้นหา การเรียงลำดับรถ ทำให้ช่องทางเว็บไซต์สามารถตอบสนองความต้องการทั้งของเต๊นท์รถและลูกค้าที่ต้องการซื้อรถได้มากกว่าสื่อสิ่งพิมพ์อย่างมหาศาล</p>
<p>เนื่องจากเป็นธุรกิจแหล่งรายได้ใหญ่ ย่อมมีผู้สนใจเข้ามาแข่งขันกันมาก โจทย์ของเว็บไซต์ซื้อขายรถมือสองจึงต้องขับเคี่ยวกันที่ความสามารถในการตอบสนองความต้องการของลูกค้าได้อย่างสะดวก เช่น</p>
<blockquote>
<ul>
<li>การเข้าถึงรถที่ลูกค้่าต้องการได้โดยเร็ว โดยกรองตามประเภทรถ รุ่น สี ราคา</li>
<li>การแสดงภาพประกอบในมุมต่างๆ ของรถให้ครบถ้วนที่สุด</li>
</ul>
</blockquote>
<p>เว็บ one2car.com ได้ปรับปรุงพัฒนาความสามารถเรื่อยมา และเพื่งจะปรับโฉมไปเมื่อไม่นานมานี้ การออกแบบและการสร้างหน้าตาเว็บเป็นไปตามวิธี XHTML/CSS ซึ่งเป็นวิธีที่ทรงพลังและได้รับความนิยมในการสร้างเว็บสมัยใหม่ และเปี่ยมด้วยประสิทธิภาพในการค้นหารถและแสดงภาพรถ</p>
<div id="attachment_303" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/one2car-functionality-2/" rel="attachment wp-att-303"><img src="http://www.vaivaisoft.com/wp-content/uploads/2010/08/one2car-functionality1-600x548.png" alt="" title="one2car-functionality" width="600" height="548" class="size-medium wp-image-303" /></a><p class="wp-caption-text">one2car.com หน้าการแสดงรถโดยแบ่งตามประเภท รุ่น สี ช่วงราคา ฯลฯ ตามความต้องการของลูกค้า</p></div>
<h2>ปัญหาที่พบในเครื่องที่เชื่อมต่ออินเทอร์เน็ทช้า</h2>
<p>จากการพัฒนามาถึงระดับนี้ เว็บ one2car.com ก็น่าจะทันสมัยทั้งด้านการออกแบบและเทคนิคอยู่แล้ว อย่างไรก็ดี กลุ่มลูกค้าของ one2car.com จำนวนมากใช้งานในเครื่องคอมพิวเตอร์ที่การเชื่อมต่่อช้า และลูกค้ากลุ่มนี้พบปัญหาว่า เมื่อเรียกเว็บ กลับขึ้นเป็นหน้าขาวอยู่นานราวเกือบครึ่งนาที จึงจะแสดงผลหน้าออกมา ซึ่งทำให้ลูกค้าจำนวนไม่น้อยเข้าใจว่าเว็บมีปัญหา และไปใช้บริการเว็บไซต์อื่นแทน</p>
<p>ความต้องการของเว็บไซต์ต่างๆ ขึ้นอยู่กับเงื่อนไขเฉพาะตัวของผู้ประกอบการแต่ละเจ้า ในปัจจุบัน คนที่ใช้อินเทอร์เน็ทความเร็วสูงจะไม่ตระหนักถึงปัญหานี้เอาด้วยซ้ำ แต่การเอาใจใส่ต่อกลุ่มลูกค้านี้เอง ทำให้พบปัญหา และเกิดโจทย์ของงานนี้ ก็คือการแก้ปัญหาให้เว็บแสดงหน้าตาออกมาก่อน ไม่ใช่ทิ้งเป็นหน้าขาวเป็นเวลานาน</p>
<div id="attachment_309" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/one2car-white-page/" rel="attachment wp-att-309"><img src="http://www.vaivaisoft.com/wp-content/uploads/2010/08/one2car-white-page-600x431.png" alt="" title="one2car-white-page" width="600" height="431" class="size-medium wp-image-309" /></a><p class="wp-caption-text">one2car.com เมื่อใช้การเชื่อมต่อที่ช้า ปัญหาการเรียกหน้าแรกแล้วเป็นจอขาว โดยใช้ Firebug จับเวลา</p></div>
<h2>การทดสอบและแก้ปัญหา</h2>
<p>งานประเภทนี้เป็นงานให้คำปรึกษาและแก้ปัญหาเฉพาะ ซึ่งแตกต่างไปจากงานประเภทสร้างเว็บที่เรารู้กระบวนการดีอยู่แล้ว ปัญหาอย่างแรกคือการประเมินเวลาและค่าใช้จ่าย</p>
<p>เมื่อเราทำเว็บมาจนถึงระดับหนึ่ง เราจะเข้าใจกระบวนการไปจนถึงการประเมินเวลาได้ง่าย แต่ปัญหาประเภท one2car.com นี้ หากไม่มีประสบการณ์มาก่อน ต้องใช้การค้นคว้าและลองผิดลองถูก ในเบื้องต้น เราจึงได้ประเมินเวลาเป็นการทดสอบทุกๆ ส่วนของโครงสร้างเว็บ อันได้แก่</p>
<blockquote>
<ul>
<li>โค้ด HTML อันเป็นโค้ดในการแสดงหน้าตาของเว็บโดยตรง</li>
<li>โค้ด javascript คือโค้ดเพื่อเสริมทำงาน ทำให้หน้าเว็บมีลูกเล่นมากขึ้นกว่าเดิม</li>
<li>โค้ดฝั่งเครื่องเซิร์ฟเวอร์ของ one2car.com คือโค้ดที่เขียนขึ้นที่เครื่องเซิร์ฟเวอร์ประมวลผลของ one2car.com ซึ่งมีความเป็นไปได้ที่จะทำให้เกิดความล่าช้าเช่นกัน</li>
<li>ตัวเซิร์ฟเวอร์ของ one2car.com เอง</li>
</ul>
<p>และคุณเม่นเองคาดเดาว่าปัญหาอาจจะมาจากการประกอบโค้ด HTML ที่ไม่เหมาะสม จึงวางแผนสร้างหน้า HTML ให้ใหม่หมดด้วย <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_eek.gif' alt='8-O' class='wp-smiley' />
</p></blockquote>
<p>วิธีประเมินค่าใช้จ่ายโดยคาดเดาเวลาเช่นนี้นับว่ามีความไม่แน่นอนอยู่มากอยู่มาก เพราะเป็นตัวแปรที่เราไม่ทราบอยู่หลากหลาย เช่นหากการตรวจสอบพบปัญหาตั้งแต่ขั้นตอนแรก ย่อมเป็นการประเมินค่าใช้จ่ายเกินเลยไปมาก <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>แต่หากทดสอบจนขั้นตอนสุดท้ายก็ยังไม่พบวิธีแก้ นั่นก็คงเข้าใกล้หายนะเช่นกัน <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<p>อย่างไรก็ดี ภายใต้ข้อจำกัดของความไม่รู้เหล่านี้ เราก็ได้แต่ทดสอบไปตามแผนที่วางเอาไว้ ด้วยใจระทึก <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<h2>การแก้ปัญหาที่เปรียบเสมือนการตามหาหญิงคนรักด้วยการเดินทางตามหาไปรอบโลก</h2>
<p>เราทดลองหาวิธีตามแผนการ เริ่มต้นด้วยการหาตัวจำลองให้การเชื่อมต่อของเราเป็นการเชื่อมต่อที่ช้า และโชคดีมากที่พบตัวแจกฟรีอยู่ตัวหนึ่ง ชื่อว่า <a href="http://www.dallaway.com/sloppy/">Sloppy</a></p>
<div id="attachment_304" class="wp-caption aligncenter" style="width: 511px"><a href="http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/one2car-sloppy/" rel="attachment wp-att-304"><img src="http://www.vaivaisoft.com/wp-content/uploads/2010/08/one2car-sloppy.png" alt="" title="one2car-sloppy" width="501" height="453" class="size-full wp-image-304" /></a><p class="wp-caption-text">Sloppy โปรแกรมสำหรับจำลองการเชื่อมต่อช้า</p></div>
<p>หลังจากนั้นเราก็เริ่มปรับเปลี่ยนตำแหน่งของโค้ดต่างๆ เพื่อหาดูว่า ส่วนใดเป็นสาเหตุของการหน่วงการแสดงผล โดยใช้ Sloppy เป็นตัวปรับความเร็วการเชื่อมต่อ และใช้ Firebug ช่วยในการจับเวลา</p>
<div id="attachment_310" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/one2car-firebug/" rel="attachment wp-att-310"><img src="http://www.vaivaisoft.com/wp-content/uploads/2010/08/one2car-firebug-600x431.png" alt="" title="one2car-firebug" width="600" height="431" class="size-medium wp-image-310" /></a><p class="wp-caption-text">one2car.com การทดสอบจับเวลาโดยใช้ Sloppy ร่วมกับ Firebug จับเวลาในแถบด้านล่าง</p></div>
<p>เราทดลองปรับโค้ด HTML ปรับแล้ว ปรับเล่า ก็เพิ่มความเร็วได้เพียงเล็กน้อยเท่านั้น จึงลองเปลี่ยนไปศึกษา javascript ดู ก็ยังคงพบว่า javascript ที่เขียนขึ้นนั้น ไม่ใช่ต้นเหตุแห่งความช้าอยู่ดี</p>
<p>ครั้นลองขยับไปตรวจโค้ดฝั่งประมวลผลของ one2car.com ก็พบว่าช่วยเพียงจุดไม่ใช่นัยสำคัญ เช่นเดียวกันกับการตรวจสอบเซิร์ฟเวอร์เช่นกัน</p>
<p>ขณะที่ีทดลองมาจนครบตามแผน ก็ยังไม่พบสาเหตุ (และเวลาก็งวดเข้าทุกที <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_confused.gif' alt=':-?' class='wp-smiley' /> ) แผนการที่ผ่านมา เกิดจากประสบการณ์ที่เคยพบ ดังนั้น เมื่อไม่พบปัญหาจากการทดสอบเหล่านี้ แสดงว่าเป็นปัญหาใหม่ ขั้นตอนต่อไปในการทดสอบ ก็ต้องใช้วิธีสังเกตเอาจากลักษณะที่ไม่เคยพบมาก่อน</p>
<blockquote><p>บางครั้งเราถึงกับเปรียบเปรยว่า เราสุ่มทดลองแก้ปัญหา เหมือนการตามหาหญิงสาวคนรักไปรอบโลก</p></blockquote>
<h2>สาเหตุของปัญหา: เมื่อการตามหาหญิงคนรักรอบโลก แล้วพบว่าเธออยู่ข้างบ้านนี่เอง</h2>
<p>เมื่อต้องเลิกยึดหาสาเหตุตามประสบการณ์ที่คาดมา เราก็ต้องมานั่งดูกราฟแสดงการโหลดอย่างละเอียด ไม่ให้คลาดสายตาในทุกๆ ส่วนประกอบ แล้วในที่สุด เราก็พบลักษณะที่น่าตื่นเต้น! <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_surprised.gif' alt=':o' class='wp-smiley' /> </p>
<div id="attachment_313" class="wp-caption aligncenter" style="width: 610px"><a href="http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/one2car-the-solution/" rel="attachment wp-att-313"><img src="http://www.vaivaisoft.com/wp-content/uploads/2010/08/one2car-the-solution-600x431.png" alt="" title="one2car-the-solution" width="600" height="431" class="size-medium wp-image-313" /></a><p class="wp-caption-text">one2car.com ในที่สุดก็พบปัญหา จาก Firebug เมื่อใดโหลดส่วน &lt;head&gt;...&lt;/head&gt; เสร็จ เมื่อนั้นเว็บขึ้นโครงหน้า</p></div>
<p>กราฟจาก Firebug แสดงให้เห็นว่าส่วนหน้าเว็บจะเรื่มขึ้นโครงเมื่อโหลดไฟล์ต่างๆ ในส่วน &lt;head&gt;&#8230;&lt;/head&gt; หมดนั่นเอง</p>
<p>เมื่อลองเปรียบเทียบโค้ดในส่วน &lt;head&gt;&#8230;&lt;/head&gt; เราก็จะพบว่า ไฟล์ในหน้าแรก one2car.com ประกอบด้วยไฟล์จำนวนไม่น้อย อันได้แก่ไฟล์ stylesheet และ ไฟล์ javascript</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:610px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;App_Themes/default/ie.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;App_Themes/default/stylesheet.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
<br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/form.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/hover.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/jquery.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/main.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/vscrollarea.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/ErrorLogFile.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;/js/jpage.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></div></td></tr></tbody></table></div>
<p>เพราะการมีไฟล์จำนวนมากเช่นนี้ นอกจากจะมีขนาดใหญ่ อันนำมาซึ่งการเสียเวลาโหลดนานแล้ว ยังทำให้เกิดการหน่วงเวลาพยายามโหลดพร้อมกันด้วย ดังนั้น เมื่อลองพยายามปรับแก้ ให้มีการโหลดในส่วน &lt;head&gt;&#8230;&lt;/head&gt; ให้น้อยลง โดยพยายามให้เกิดการโหลดพร้อมๆ กัน (concurrent) ได้มากที่สุด เราก็พบว่า หากเราแบ่งไฟล์ stylesheet ออกเป็นสองไฟล์ แล้วย้ายส่วน javascript ไปไว้ในส่วน &lt;body&gt;&#8230;&lt;/body&gt; ไกลไกล เว็บก็ขึ้นโครงได้ด้วยเวลาที่น้อยลงกว่า 3 เท่า!</p>
<div class="codecolorer-container html4strict default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:610px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;App_Themes/default/ie.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;App_Themes/default/style.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;App_Themes/default/stylemore.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span></div></td></tr></tbody></table></div>
<h2>สรุปการเรียนรู้</h2>
<p>จะเห็นได้ว่า การแก้ปัญหานั้นง่ายแสนง่าย เพียงแบ่งไฟล์ stylesheet เป็นสองไฟล์ และย้ายตำแหน่งการโหลด javascript ไปไว้ในส่วน &lt;body&gt;&#8230;&lt;/body&gt; เท่านั้นเอง</p>
<p>อย่างไรก็ดี การพบวิธีแก้ปัญหาแล้ว ย่อมง่ายที่จะมองข้ามความลำบากในตอนที่ยังอยู่ในช่วงยังไม่พบวิธีแก้ ปัจจุบัน กลุ่มผู้พัฒนาเว็บไซต์ส่วนมากใช้อินเทอร์เน็ทความเร็วสูงกันหมดแล้ว ปัญหาที่เกิดขึ้นนี้อาจไม่ใช่ปัญหาที่จะพบได้ในหมู่นักพัฒนาทั่วไปจนเกิดการแบ่งปันความรู้จนเป็นประสบการณ์กันได้&#8230;หรือไม่ก็เป็นปัญหาพื้นๆ สำหรับนักพัฒนาส่วนมาก เสียจนไม่ใช่เรื่องราวที่พูดถึงกัน&#8230;และประจวบเหมาะที่เราไม่ทราบ <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_lol.gif' alt=':lol:' class='wp-smiley' /> </p>
<p>และต้องถือว่าเราโชคดีที่พบลูกค้าที่เข้าใจกระบวนการเหล่านี้ มากกว่าจะตัดพ้อว่าเป็นการแก้ปัญหาที่แสนง่าย <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<blockquote><p>
เด็กหนุ่มชาวธอร์ซา ผู้เดินทางออกจากหมู่บ้านเล็กๆ ของตนเพื่อเสาะหาภรรยา เขาใช้เวลาหลายปีเพื่อเดินทางไปทั่วโลกเพื่อค้นหาหญิงสาวผู้สมบูรณ์แบบ แต่ก็หาไม่พบ ท้ายที่สุด เขากลับมายังหมู่บ้านตัวคนเดียว ระหว่างทางกลับมานั้น เขาเห็นผู้หญิงคนหนึ่ง และว่า &#8220;อา.. ฉันพบภรรยาของฉันแล้ว&#8221;</p>
<p>แมนเดลาบอกว่า เรื่องมันกลับกลายเป็นว่าหญิงสาวคนนั้นอาศัยอยู่ในกระท่อมข้างบ้านของเขามาตลอดเวลา ผมถามว่า &#8220;นิทานเรื่องนี้สอนว่า คุณไม่จำเป็นต้องเดินทางไกลแสนไกลเพียงเพื่อค้นหาสิ่งที่ต้องการ เพราะมันอยู่ตรงหน้าคุณนั่นเอง ใช่ไหมครับ? หรือว่าบางทีคุณจะต้องมีประสบการณ์และความรู้อันกว้่างไกลเสียก่อน เพื่อจะสามารถรับรู้คุณค่าของสิ่งที่อยู่ใกล้ตัวและคุ้นเคยกับเราเองมากที่สุด&#8221;</p>
<p>ท่านนิ่งคิดอยู่ครู่หนึ่ง ก่อนจะพยักหน้า และว่า &#8220;แปลได้หลายอย่าง อาจจะถูกทั้งสองทางก็ได้&#8221;</p>
<p>บางตอนจากหนังสือ <strong>วิถีแมนเดลา</strong>
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.vaivaisoft.com/2010/08/one2car-and-the-slow-connection/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>ทำเว็บเหมือนสร้างบ้าน</title>
		<link>http://www.vaivaisoft.com/2010/07/%e0%b8%97%e0%b8%b3%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%9a%e0%b9%89%e0%b8%b2%e0%b8%99/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=%25e0%25b8%2597%25e0%25b8%25b3%25e0%25b9%2580%25e0%25b8%25a7%25e0%25b9%2587%25e0%25b8%259a%25e0%25b9%2580%25e0%25b8%25ab%25e0%25b8%25a1%25e0%25b8%25b7%25e0%25b8%25ad%25e0%25b8%2599%25e0%25b8%25aa%25e0%25b8%25a3%25e0%25b9%2589%25e0%25b8%25b2%25e0%25b8%2587%25e0%25b8%259a%25e0%25b9%2589%25e0%25b8%25b2%25e0%25b8%2599</link>
		<comments>http://www.vaivaisoft.com/2010/07/%e0%b8%97%e0%b8%b3%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%9a%e0%b9%89%e0%b8%b2%e0%b8%99/#comments</comments>
		<pubDate>Thu, 15 Jul 2010 12:37:31 +0000</pubDate>
		<dc:creator>menn</dc:creator>
				<category><![CDATA[Knowledge]]></category>

		<guid isPermaLink="false">http://www.vaivaisoft.com/?p=203</guid>
		<description><![CDATA[ผมมักจะเปรียบเทียบให้ลูกค้าหรือคนที่อยากทำเว็บฟังว่า การทำเว็บนั้น ก็เหมือนกับการสร้างบ้าน เพียงแต่สัดส่วนค่าใช้จ่ายอาจจะถูกกว่า การสร้างบ้านมีการคิดและการลองผิดลองถูกมายาวนาน ขณะที่การทำเว็บนั้นเพิ่งจะเริ่มได้ไม่นาน ทำให้ความรู้เกี่ยวกับการทำเว็บยังไม่เป็นสูตรสำเร็จเหมือนการสร้างบ้าน]]></description>
				<content:encoded><![CDATA[<p>ที่มา: <a href="http://www.usably.net/?p=394">Usuably.net</a></p>
<p>ผมมักจะเปรียบเทียบให้ลูกค้าหรือคนที่อยากทำเว็บฟังว่า การทำเว็บนั้น ก็เหมือนกับการสร้างบ้าน เพียงแต่สัดส่วนค่าใช้จ่ายอาจจะถูกกว่า กระนั้น แบบแผนในการทำงานที่ควรคำนึงก็คือ</p>
<h3>บ้านทั้งหลาย มีการออกแบบก่อน แล้วจึงลงมือทำ</h3>
<p>คนอยากมีเว็บ กลับไม่ค่อยอยากวางแผน คิดแต่ว่าเอาข้อมูลใส่ลงไป แล้วมันจะเป็นเว็บ เลยกลายเป็นว่า เค้าก็ทำไปเรื่อยๆ ทุบไปเรื่อยๆ รื้อท้ิง ทำใหม่ เปลี่ยนสี เปลี่ยนโฉม ทำ 2 ปีแล้วก็ยังไม่เสร็จ (ตัวอย่างนะ มีจริงหรือเปล่าไม่รู้ <img src='http://www.vaivaisoft.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> ) ย้ายห้องนี้ไปไว้ห้องนั้น เดี๋ยวก็วางห้องด้านหน้าเป็นห้องประชุม (Forum) แล้วก็เปลี่ยนใจ จะเอาร้านขายของมาตั้ง (Catalog) คิดไปอีกที อยากจะเอาป้ายประชาสัมพันธ์บ้านอื่นมาแปะเต็มหน้า (Link) จนคนไม่รู้ว่าบ้านใครหว่า</p>
<p>เวลาทุบตึก เราอาจจะยอมรับได้ว่า มันมีค่าใช้จ่าย แต่พอรื้อเว็บ เรากลับรู้สึกว่า &#8220;เฮ้ย นิดเดียวน่า ช่วยหน่อยน่า&#8221; ซึ่งเมื่อไม่รู้ แน่นอนว่างานก็ย่อมไม่เสร็จโดยง่าย</p>
<p>แต่ผมไม่ได้ต่อต้านการเปลี่ยนแปลงนะ ตราบใดที่เราเห็นว่ามันตอบโจทย์ เช่น ขายของได้, ดึงดูดคนเข้ามาง่าย, แสดงสินค้าเด่นๆ ได้ดี ฯลฯ ก็ย่อมควรลงทุนเปลี่ยนเแปลงตามโอกาส เหมือนที่ลงทุนตกแต่งร้านกันได้เรื่อยๆ แต่หากการเปลี่ยนแปลงนั้นเป็นไปเพราะ &#8220;เห็นเว็บตัวเองแบบเดิมมา 1 เดือนแระ เบื่อ&#8230;&#8221; กระผมก็จะพยายามโน้มน้าวทันทีว่า &#8220;พี่เบื่อ คนอื่นเค้ายังไม่ทันเห็นเลยพี่&#8221;</p>
<h3>บ้านทั้งหลาย มีพื้นฐานบางอย่างที่ &#8220;เค้าคิดมาดีแล้วว่าควรจะมี&#8221;</h3>
<p>ระหว่างชั้นต้องมีบันได, โต๊ะ เก้าอี้ ควรสูงเท่าไหร่, ห้องควรกว้างอย่างน้อยเท่าไหร่? ห้องน้ำควรอยู่ใกล้ลิฟท์ (จะได้เดินท่อได้ทีเดียว) ฯลฯ ซึ่งเรื่องพวกนี้ เราคุ้นชินจนไม่คิดว่าเป็นการ &#8220;ลอก&#8221;</p>
<p>แต่เว็บเป็นเรื่องใหม่ คนทั่วไปอาจไม่คิดว่า &#8220;คิดมาแล้ว/Best Practice&#8221; มันไม่ใช่การลอก เลยพาลเห็นว่า พอทำอะไรก็จะไปคล้ายเว็บนู้นเว็บนี้ไปหมด</p>
<p>เช่น ตำแหน่งโลโก้ในเว็บ ถามจริงๆ เถอะว่ามันจะวางได้กี่ที่เชียว, ตำแหน่งแถบเมนู หรือ Navigation มันก็มีที่ให้วางได้ไม่กี่ที่, ระยะระหว่างคอลัมภ์หรือกรอบ ก็ควรเท่าๆ กัน (ผมเพิ่งมาพบว่า 20px เป็นระยะที่กำลังงาม ซึ่งก็ใช้ใน 960.gs ด้วยน้า), Dropdown Menu มันก็มีเหมือนกันมหาศาล ฯลฯ</p>
<p>ซึ่งเมื่อเปลี่ยนจุดสนใจไปที่เนื้อหาแทน เว็บที่องค์ประกอบอะไรคล้ายๆ กัน ก็อาจกลายเป็นคนละเรื่องกันเลย</p>
<p>(ตัวอย่างหนึ่งที่ผมเห็นว่าขำดีก็คือ รถราคา 7 แสน กับราคา 7 ล้านนั้น อาจจะเหมือนกันมากกว่าเว็บ 2 เว็บที่ใช้ธีมเดียวกันเสียอีก)</p>
<h3>บ้านทั้งหลาย มีแผนผังที่ชัดเจน รู้เรื่อง</h3>
<p>ห้องแต่ละห้อง เปิดดูก็รู้ว่าเอาไว้ทำอะไร เผลอๆ ไม่ต้องเปิดประตู ยังรู้ว่าห้องอะไร!</p>
<p>แต่พอทำเว็บ เรากลับอยากให้ทุกอย่างอยู่ร่วมกัน อยากจะให้แผนผังเว็บเราไม่เหมือนใครในโลก มี Navigation สุดคูล สุดประหลาด และไปไม่ถูก, มี link ของทุกอย่าง อยู่ในทุกหน้า, มีป้ายโฆษณาเยอะจนไม่รู้ว่าหน้านั้นเอาไว้ทำอะไร</p>
<p>ซึ่งหากมันมีอยู่ไม่กี่เว็บในโลก คนก็อาจจะเดินดูเล่น จินตนาการเพลินๆ ได้ (ว่าหน้านี้เอาไว้ทำอะไรหว่า?) แต่เมื่อเว็บมันมีมหาศาล เมื่อเค้าหาของไม่เจอ เค้าก็ไม่อยู่ต่อแล้ว</p>
<h3>ผู้รับเหมาทุกคน แย่หมด</h3>
<p>น้อยมากที่จะเห็นคนทำบ้าน (โดยเฉพาะครั้งแรก) ชื่นชมผู้รับเหมา เพราะ &#8220;คนทั่วไปนั้นไม่รู้ว่าตัวเองต้องการอะไร&#8221; พอเห็นพื้นสีนี้สวย ก็เลือกมาใส่ เห็นวอลเปเปอร์อันนี้คูล ก็เอามาต่อ กลายเป็นมั่ว แต่ถ้าอยากจะจ้างสถาปนิกมาออกแบบ ก็เห็นว่าเรื่องง่ายๆ ตนเองก็ทำได้ ก็เลยทำให้การทำงานนั้นบานปลายเสมอ (แย่กว่านั้นคือ ถึงมีสถาปนิกออกแบบ ก็ยังไม่ชอบอยู่ดี ขอเปลี่ยนก๊าบ)</p>
<p>และผู้รับเหมาที่ไม่เจ๊งไปก่อนนั้น เมื่อเจอลูกค้าเปลี่ยน Requirement บ่อย ก็ต้องชิ่งไวเสมอ</p>
<p>ซึ่งก็เหมือนกับการจ้างคนทำเว็บ เมื่อผู้ว่าจ้างไม่รู้ว่ามันควรจะออกมาหน้าตาอย่างไร (และยิ่งถ้าคิดว่า ทำอะไรก็ลอก! ยิ่งไม่รู้จะออกมายังไง) ก็ทำให้ Requirement เปลี่ยนไปเรื่อยๆ และผลสุดท้าย ก็ ไม่มีใครทำเว็บได้ดั่งใจเลย</p>
<p>คนทำเว็บทุกคน ก็เลยแย่หมด</p>
<p>แต่ยังมีสิ่งที่แย่กว่า นั่นก็คือ คนจ้างทำเว็บ ไม่รู้ว่ามันมี &#8220;ผู้รับเหมาทำเว็บ&#8221; กับ &#8220;สถาปนิกทำเว็บ&#8221; และ &#8220;ผู้รับเหมาทำเว็บ&#8221; ทุกคน ดันนึกว่าตนเองเป็น &#8220;สถาปนิกทำเว็บ&#8221;</p>
<p>เพราะอย่างที่คุณประชา สุวีรานนท์ เคยกล่าวว่า วงการออกแบบนั้น เป็นพื้นที่ทับซ้อนของมือสมัครเล่นและมืออาชีพ เลยไม่รู้ว่าใครฝีมือขนาดไหน</p>
<p>ผู้ว่าจ้างก็ไม่รู้เรื่อง คนทำก็ไม่รู้เรื่อง สุดท้ายก็มีแต่รื้อใหม่ ทำใหม่กันไปเรื่อยๆ</p>
<h3>บ้านสำเร็จรูป ย่อมถูกกว่าบ้านที่ออกแบบมาโดยเฉพาะ (แต่ขายดีนะ!)</h3>
<p>เมื่อเห็นว่าการทำเว็บเหมือนสร้างบ้าน เราก็จะเริ่มเห็นแนวโน้มของ &#8220;บ้านสำเร็จรูป&#8221; / &#8220;เว็บสำเร็จรูป/CMS/Theme&#8221; กันมากขึ้น นั่นคือ การทำเว็บที่เร็ว ราคาถูก โดยแลกเปลี่ยนกับ &#8220;ความคล้ายๆ กัน&#8221; ของงานออกแบบ</p>
<p>ซึ่งก็คล้ายกับเสื้อผ้าสำเร็จรูป หรือสินค้าตามสั่งอื่นๆ คือ มันจะพัฒนาไปสุดทาง 2 แบบ ถ้าหากไม่สำเร็จรูปไปเลย (ง่าย, เร็ว, ถูก ฯลฯ) ก็ต้องมีเอกลักษณ์ไปเลย (เจาะจง,​ สวยงาม, สะท้อนตัวตนคนใส่, สะท้อนตัวตนคนออกแบบ ฯลฯ) ใครก็ตามที่อยู่กลางๆ ก็ย่อมอยู่ลำบากในอนาคต</p>
<h3>บ้านยังต้องอยู่ เว็บยังต้องเปิด</h3>
<p>คนซื้อบ้านต่างก็รู้ว่า เมื่อทำบ้านเสร็จ เค้าจะต้องดูแล ตัดหญ้า, เช็คจดหมาย, เปลี่ยนผ้าม่าน, หรืออาจต้องต่อเติมบางอย่าง เมื่อมีการใช้งานมากขึ้น</p>
<p>แต่คนทำเว็บ เมื่อเว็บเปิดแล้ว กลับไม่มีการดูแล อัพเดทข้อมูล เพิ่มเติมเนื้อหาต่างๆ ปล่อยให้เว็บที่อุตส่าห์สร้างกันมาเนิ่นนาน ทิ้งไว้จนไม่มีคนเข้า</p>
<p>แล้วท้ายที่สุด ก็ค่อยคิดว่า</p>
<p>&#8220;ทำเว็บใหม่ก่าาาาาา&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vaivaisoft.com/2010/07/%e0%b8%97%e0%b8%b3%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b9%80%e0%b8%ab%e0%b8%a1%e0%b8%b7%e0%b8%ad%e0%b8%99%e0%b8%aa%e0%b8%a3%e0%b9%89%e0%b8%b2%e0%b8%87%e0%b8%9a%e0%b9%89%e0%b8%b2%e0%b8%99/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
