วิธีการใช้งานก็แค่ดาวน์โหลดชุด Webfont ของฟอนต์ใดๆด้านล่าง และเมื่อแตกไฟล์ออกมาจะมีไฟล์ index.html ซึ่งภายในจะมีวิธีการติดตั้งฟอนต์ลงในเว็บไซต์ไว้เรียบร้อย

ไฟล์ที่ให้ดาวน์โหลดนั้นเป็นชุดของไฟล์ฟอนต์ที่แปลงเป็น Webfont เรียบร้อยแล้ว สำหรับใช้งานในการทำเว็บไซต์เท่านั้น หากต้องการฟอนต์เพื่อติดตั้งลงในเครื่องคอมพิวเตอร์ สามารถดาวน์โหลดได้ที่เว็บ f0nt.com

ฟรีดาวน์โหลด 13 ฟอนต์ไทยแห่งชาติ ในรูปแบบ Webfont

TH Bai Jamjuree CP

ตัวอย่าง | ดาวน์โหลด

TH Chakra Petch

ตัวอย่าง | ดาวน์โหลด

TH Charm of AU

ตัวอย่าง | ดาวน์โหลด

TH Charmonman

ตัวอย่าง | ดาวน์โหลด

TH Fah Kwang

ตัวอย่าง | ดาวน์โหลด

TH K2D July8

ตัวอย่าง | ดาวน์โหลด

TH KoHo

ตัวอย่าง | ดาวน์โหลด

TH Kodchasan

ตัวอย่าง | ดาวน์โหลด

TH Krub

ตัวอย่าง | ดาวน์โหลด

TH Mali Grade 6

ตัวอย่าง | ดาวน์โหลด

TH Niramit AS

ตัวอย่าง | ดาวน์โหลด

TH Sarabun PSK

ตัวอย่าง | ดาวน์โหลด

TH Srisakdi

ตัวอย่าง | ดาวน์โหลด

ข้อควรระวังในการนำไปใช้งาน

1. การแสดงผลฟอนต์นั้นอาจจะไม่เหมือนกัน ในแต่ละบราวเซอร์และระบบปฎิบัติการ ดังนั้นควรจะมีการทดสอบให้มากเท่าที่จะทำได้
2. ไม่ควรใช้ขนาดตัวอักษรเล็กเกินไป และควรจะใช้สีอักษรให้ต่างกับสีพื้นหลังให้มาก เพื่อการแสดงผลที่ดีที่สุดในทุกๆ บราวเซอร์
3. ในวินโดวส์และบราวเซอร์รุ่นเก่าๆ ฟอนต์บางฟอนต์อาจจะแสดงผลได้แย่มากๆ โดยเฉพาะในเครื่องที่ไม่ได้เปิดใช้งาน ClearType
4. อาจจะมีบางฟอนต์ที่มีรูปแบบของฟอนต์ไม่ครบ เช่น ไม่มีตัวหนาหรือตัวเอียง ซึ่งหากนำไปใช้ในเว็บไซต์และมีการสั่งให้แสดงผลในรูปแบบที่ไม่มีมา อาจจะทำให้การแสดงฟอนต์ไม่สวยเท่าไหร่นัก ทั้งขึ้นอยู่กับบราวเซอร์และระบบปฎิบัติการด้วย

• คอมพิวเตอร์อ่านไม่ออก ไม่รู้ว่าเป็นตัวหนังสือ
• ทำให้เว็บมีขนาดใหญ่ ใช้เวลาโหลดนานขึ้น
• ก๊อปปี้ตัวหนังสือไม่ได้
• แก้ไขข้อความยาก ต้องเสียเวลาทำภาพใหม่
• ฯลฯ

แต่ข้อจำกัดเหล่านี้ก็กำลังจะหมดไป ด้วยคุณสมบัติใหม่ของ CSS3 @font-face ที่จะทำให้เราสามารถนำตัวฟอนต์สวยๆมาใส่ในเว็บไซต์ได้ และจะยังมคุณสมบัติเหมือนตัวหนังสือทั่วไปทุกประการ

Update: โพสใหม่ รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์ สำหรับคนที่ต้องการฟอนต์ที่ดาวน์โหลดแล้วใช้งานได้เลย

วิธีการใช้ @font-face

วิธีใช้จริงๆแล้วไม่ได้ยากมากมาย เนื่องจาก @font-face นี้เป็นหนึ่งในไม่กี่อย่างของ CSS3 ที่สามารถใช้งานใน IE ได้แม้กระทั่งใน IE6 เลยทีเดียว โดยขั้นแรกก็เอาฟอนต์ที่เราชื่นชอบมาแปลงเป็นชุดของฟอนต์สำหรับใช้ในเว็บเสียก่อน โดยเครื่องมือที่ใช้ง่ายที่สุดได้แก่ @font-face Kit Generator โดย Font Squirrel ซึ่งวิธีการตั้งค่าสำหรับฟอนต์ไทยจะต้องใช้โหมด EXPERT ดังภาพ

ส่วนที่สำคัญคือตั้ง Subsetting เป็น No Subsetting เพื่อให้ใช้ภาษาไทยได้

โดยฟอนต์ที่ใช้เป็นตัวอย่างนี้คือฟอนต์ TH Mali Grade 6 (ด.ญ. มะลิ ป.6) ออกแบบโดย คุณสุดารัตน์ เลิศสีทอง มาจากชุด 13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA)13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA)

เมื่อตั้งค่าเรียบร้อยก็กด Download ด้านล่าง และจะได้ไฟล์มาดังนี้

โดยการนำไปใช้งานก็ไม่ยาก เพียงแค่นำไฟล์สกุล eot, woff, ttf และ svg ใส่ในโฟลเดอร์ใดๆในเว็บ และคัดลอกโค้ทจากไฟล์ stylesheet.css ไปยังไฟล์ stylesheet หลัก จากนั้นก็เปลี่ยน  path ที่อยู่ของไฟล์ฟอนต์ให้ถูกต้อง เช่น

@font-face {
 font-family: 'THMaliGrade6Regular';
 src:url('/path/th_mali_grade6-webfont.eot');
 src:url('/path/th_mali_grade6-webfont.eot?iefix') format('eot'),
     url('/path/th_mali_grade6-webfont.woff') format('woff'),
     url('/path/th_mali_grade6-webfont.ttf') format('truetype'),
     url('/path/th_mali_grade6-webfont.svg#webfontCXAunSZT')
     format('svg');
 font-weight: normal;
 font-style: normal;
}
body{
  font-family: THMaliGrade6Regular, Tahoma, sans-serif;
}

ดูตัวอย่างการนำไปใช้งานจริง

จากนี้ไปส่วนที่สำคัญคือการทดสอบในเว็บบราวเซอร์ต่างๆ เนื่องจากแต่ละฟอนต์จะแสดงผลในแต่ละบราวเซอร์ได้ไม่เหมือนกัน

การใช้ Google Font API

นอกจากการทำฟอนต์ดังที่กล่าวมาแล้ว ยังมีวิธีง่ายๆอีกอย่าง คือการใช้ฟอนต์จาก Google Font API โดยไปที่ http://www.google.com/webfonts คลิกยังฟอนต์ที่ต้องการ และคลิก Use this font จากนั้นทำการคัดลอกโค้ทมาไว้ภายใน เช่น

เมื่อต้องการนำไปใช้ก็เพียงแค่เพิ่มฟอนต์ลงใน CSS เช่น

h1 {
   font-family: 'Michroma', arial, serif;
}

แต่ฟอนต์จาก Google Font API นี้ยังใช้ภาษาไทยไม่ได้ หากต้องการจะใช้ฟอนต์สำหรับภาษาไทยและอังกฤษแตกต่างกันก็ทำได้ง่ายๆโดยเพิ่มฟอนต์ทั้งสองลงใน Font Stack โดยให้ฟอนต์ภาษาอังกฤษมาก่อน เช่น

h1 {
   font-family: 'Michroma','THMaliGrade6Regular', serif;
}

เมื่อบราวเซอร์เรียกใช้งานก็จะพยายามเรียกฟอนต์ Michroma ก่อน และหากพบตัวหนังสือภาษาไทย และฟอนต์ดังกล่าวไม่สามารถแสดงผลได้ มันก็จะทำการเรียกฟอนต์ต่อไป ซึ่งก็คือ THMaliGrade6Regular มาใช้ในการแสดงผลภาษาไทยนั้นเอง

เพียงเท่านี้ก็สามารถใช้งานฟอนต์สวยๆในเว็บไซต์ได้ โดยไม่ต้องทนอยู่ในข้อจำกัดของ Web Safe Font อีกต่อไป

Update: โพสใหม่ รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์ สำหรับคนที่ต้องการฟอนต์ที่ดาวน์โหลดแล้วใช้งานได้เลย

Mertic Time Clock Download

(เฉพาะ Chrome, Firefox, Safari)

Mertic Time Clock Download

*Metric time คือความพยายามที่จะสร้างหน่วยเวลาใหม่ในรูปแบบฐานสิบ โดยในหนึ่งวันจะมี 10 ชั่วโมง

วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้

โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง ว่าไปเยอะแล้ว มาดูโค้ทบ้าง

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

ในส่วนของ HTML ก็จะใช้ unordered list ตามปกติ สามารถใส่ซ้อนกันไปได้เรื่อยๆ เช่น

<ul>
  <li>Home
    <ul>
      <li>Product
          <ul>
            <li>Computer</li>
            <li>Printer</li>
            <li>Scanner</li>
          </ul>
      </li>
      <li>Client</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </li>
</ul>

จากนั้นในส่วนของ css ก็จะเขียนให้มาควบคุมการแสดงผล โดยนอกจาก css แล้วยังได้ใช้รูป gif อีกทั้งหมด 4 รูปเพื่อให้ลากเส้นของโครงสร้างต้นไม้ ดังนี้

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}

/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}

สุดท้ายก็ใช้ javascript hack สำหรับ ie โดยในที่นี้ใช้ ie-css3 ร่วมกับ jquery ประมาณนี้

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->

*ไม่ต้องใช้ hack ก็ยังสามารถดู sitemap ได้ใน ie แต่เส้นที่ลากอาจจะผิดเพี้ยนไปบ้าง

แค่นี้ก็ได้ sitemap ง่ายๆ โดยไม่ต้องเสียเวลาไปกับมันมากอีกต่อไป!

ใครสนใจสามารถดาวน์โหลดโค้ททั้งหมดได้ -> download usitemap

GA Visible Stat

วิธีใช้ก็ง่ายๆ ดังนี้

1. โหลด GAAPI (เพื่อนบอกว่าอ่านว่า กะปิ -*-) ที่เขียนไว้จากบล๊อคที่แล้วก่อน ซึ่งไฟล์ที่เราจะนำมาใช้มีไฟล์เดียวคือ gaapi.class.php
2. เรียกคลาสมาใช้ โดยข้อมูลที่จะนำมาแสดงคือ All Time Page Views (คือจำนวนหน้าที่ถูกเรียกดูทั้งหมด)

   include_once('gaapi.class.php');
   $ga=new gaApi('google username','password','ga:site id');
   $allTimeSummery=$ga->getAllTimeSummery();

3. จากนั้นก็แสดง Counter โดยใช้โค้ท HTML ร่วมกับ CSS สามารถเปลี่ยนแปลงหน้าตาได้ตามสะดวก
   CSS: 

   #vGA{
   	width: 100px;
   	position: relative;
   	font-size: 9px;
   	font-family: Verdana, Verdana, Geneva, sans-serif;
   	padding-bottom: 15px;
   	background: url(poweredBy.gif) no-repeat bottom left;
   }
   #vGA div{
   	text-align: right;
   	border: 2px solid #4f6db0;
   	color: #555;
   	line-height: 15px;
   }
   #vGA #vGALabel{
   	background: #4f6db0;
   	text-align: center;
   	color: white;
   	float: right;
   	padding: 0 0 0 2px;
   	margin: 0 0 0 2px;
   }

   HTML:

   
   <?= $allTimeSummery['ga:pageviews'] ?>
          Views
   
   

4. เซฟรูป Powered By Google นี้ไปไว้ในโฟลเดอร์เดียวกับไฟล์อื่น
   

   Powered By

เท่านี้ก็ได้ Visible Stat จาก Google Analytic อย่างง่ายๆแล้ว ซึ่งหากต้องการให้แสดงข้อมูลอื่นๆนอกจาก Pageviews ก็สามารถทำได้โดยดูวิธีใช้งาน gaapi คลาสได้จากบล๊อคที่แล้ว ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP

เอาโค้ทมารวมกัน

<html>
<head>
<style type="text/css">
#vGA{
	width: 100px;
	position: relative;
	font-size: 9px;
	font-family: Verdana, Verdana, Geneva, sans-serif;
	padding-bottom: 15px;
	background: url(poweredBy.gif) no-repeat bottom left;
}
#vGA div{
	text-align: right;
	border: 2px solid #4f6db0;
	color: #555;
	line-height: 15px;
}
#vGA #vGALabel{
	background: #4f6db0;
	text-align: center;
	color: white;
	float: right;
	padding: 0 0 0 2px;
	margin: 0 0 0 2px;
}
</style>
</head>
<body>
<?
include_once('gaapi.class.php');
$ga=new gaApi('google username','password','ga:site id');
$allTimeSummery=$ga->getAllTimeSummery();
?>

<?= $allTimeSummery['ga:pageviews'] ?>
       Views


</body>
</html>

Screenshot:

Google Analytic Data Export API with PHP

เขียน PHP Class โดยใช้ cURL เพื่อติดต่อกับ Google โดย

• การ auth นั้นจะทำโดย post ไปและหากลอคอินผ่านจะได้ token มาเก็บไว้
• จากนั้นการดึงข้อมูลรายงานจะใช้ get โดยส่ง url ที่มีค่าที่ต้องการไป และส่ง token ไปด้วย
• รูปแบบของรายงานที่ Google ส่งกลับมานั้นจะเป็น XML ก็ใช้ DOMDocument ค่อยๆ parse ค่าออกมา
• นำค่ามาแสดง โดยหากต้องการใช้กราฟก็จะเรียกใช้ Google Graph

วิธีนำไปใช้งาน

ดาวน์โหลดโค้ทตัวเต็มได้ที่นี่ -> GAAPI

สร้างและเรียกใช้คลาส
โดยการ include ไฟล์ class เข้ามา และสร้างโดยต้องใส่ username, password และ site id(ดูได้จากใน google analytic account สังเกต id=xxxxxxxx ใน url)

include_once('gaapi.class.php');
$ga=new gaApi('google username','google password','ga:site id');
//e.g. ('myname@gmail.com','myPassword','ga:1234567');

Site ID ใน Google Analytic URL

Analytic ID

เรียกข้อมูลรายงาน
อันนี้ต้องเข้าใจเรื่อง Dimension และ Metric ของ Google Analytic Data Extract API ก่อน โดยหลักๆมันคือการเอา Dimension และ Metric มาผสมกันทำให้ได้ตารางรายงานออกมา โดยให้เรียกใช้ผ่าน method genReport(array) เช่น

$params = array ('metrics' 		=> 'ga:visits',
				'dimensions'	=> 'ga:source',
				'start-date' 	=> '2010-01-01',
				'end-date' 		=> '2010-02-09',
				'max-results' 	=> '5',
				'filter'		=> 'ga:source != (direct)',
				'sort'			=> '-ga:visits');
$result=$ga->genReport($params);
print_r($result);

สิ่งที่จะได้ออกมาก็จะเป็นชุดของ array หน้าตาประมาณนี้

Array
(
    [0] => Array
        (
            [ga:source] => google
            [ga:visits] => 5029
        )
    [1] => Array
        (
            [ga:source] => xxxxxxx.com
            [ga:visits] => 162
        )
    [2] => Array
        (
            [ga:source] => search
            [ga:visits] => 49
        )
)

แต่หากไม่อยากไปเรียนรู้อะไรของ Google มาก ในคลาสที่เขียนก็มีฟังก์ชั่นมาตรฐานไว้ให้ ดังนี้

$now=date("Y-m-d");
$lastmonth=date('Y-m-d', strtotime('-30 days'));

//Summery: visitors, unique visit, pageview, time on site, new visits, bounce rates
$summery=$ga->getSummery($lastmonth,$now);

//All time summery: visitors, page views
$allTimeSummery=$ga->getAllTimeSummery();

//Last 10 days visitors (for graph)
$visits=$ga->getVisits($lastmonth,$now,10);

//Top 10 search engine keywords
$topKeywords=$ga->getTopKeyword($lastmonth,$now,10);

//Top 10 visitor countries
$topCountries=$ga->getTopCountry($lastmonth,$now,10);

//Top 10 page views
$topPages=$ga->getTopPage($lastmonth,$now,10);

//Top 10 referrer websites
$topReferrer=$ga->getTopReferrer($lastmonth,$now,10);

//Top 10 visitor browsers
$topBrowsers=$ga->getTopBrowser($lastmonth,$now,10);

//Top 10 visitor operating systems
$topOs=$ga->getTopOs($lastmonth,$now,10);

โดยผลลัพท์ของแต่ละ method ก็จะออกมาเป็นชุดของ array มี key เป็นชื่อ dimension และ metric ตามตัวอย่างข้างต้น
*การเรียกใช้ให้ดูเทียบกับตัวอย่างที่นำไปสร้างเป็นตารางในโค้ทที่ให้จะเข้าใจง่ายขึ้น

ดาวน์โหลดโค้ทตัวเต็มได้ที่นี่ -> GAAPI

ใครโหลดไปแล้วเจอบักหรือต้องแก้ไขตรงไหนก็รบกวนแจ้งด้วยน๊า

กรณีศึกษา “กล่องหล่น”
ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels

เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้

IE8 Boxes

แต่ถ้าดูใน ie6 หล่ะ?

โค้ทเดิม ใน IE6

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า

มาดูโค้ทกันก่อน อันแรกเป็น css

div#container{
	width: 400px;
	border:1px solid black;
}
div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
}
div#right{
	background: green;
	width:200px;
	float:left;
}

และ html

This is left content
This is right content

จะเห็นว่ามีกรอบ ขนาด 400 pixels และใส่กล่องเข้าไป 2 กล่อง คือ
- left ขนาด 195px รวมระยะห่างจากขอบ 5px เป็น 200px
- และ right ขนาด 200px

ถึงตอนนี้หลายๆคนอาจจะกลับมานั่งบวกลบคูณหารใหม่(แล้วก็แอบคิดว่าเราตกเลขหรือเปล่า) แต่คำนวนยังไงมันก็ไม่ผิดนี่หว่า แล้วมันเกิดอะไรขึ้น?

สิ่งที่เกิดก็คือ เมื่อมีการใช้คำสั่ง float แล้วให้มีช่องว่าง(margin) ในด้านที่ float ไป เจ้า ie6 จะทำการเบิ้ลช่องว่างนั้นไปอีกเท่าตัวโดยไม่มีสาเหตุ หรือที่รู้จักกันในนามว่า Double Margin Bug

ช่องว่างระหว่างเรา
ทดลองดูปัญหากันแบบชัดๆ ลองเขียน css ดังนี้

div#foo {
   float: left;
   border: 1px solid red;
   width: 50px;
   height: 50px;
   margin: 50px;
}

คือ สร้างกล่อง ขนาด 50×50 กรอบสีแดง และให้มีช่องว่างขนาด 50 pixel รอบๆกล่อง

จากนั้นก็เอาไปใส่ใน html แบบนี้

ดูๆโค้ทแล้วก็ไม่น่าจะมีอะไร แต่ลองเปิดดูใน ie6 เทียบกับ ie8

IE8

IE6

จะเห็นว่าใน ie6 มีช่องว่างเพิ่มขึ้นมาทางด้านซ้ายอีก 50 pixels หรืออีกเท่าตัวของที่ตั้งไว้

แก้ยังไงหล่ะ?
วิธีแก้ไขนี้ไม่ยาก แต่ขัดใจพอสมควร ก็คือการเพิ่ม display:inline เข้าไปยังกล่องที่มีปัญหา ดังนี้

div#foo {
   width: 50px;
   height: 50px;
   margin: 50px;
   float:left;
   border: 1px solid red;
   display:inline;
}

ผลลัพท์ใน ie6

IE6 after display:inline

div#left{
	background: red;
	width:195px;
	margin-left:5px;
	float:left;
	display:inline;
}

ลองดูผลลัพท์

IE6 กล่องไม่หล่นแล้ว!

สรุป
จะเห็นว่าปัญหาที่เกิดมันดูไม่มีที่มาที่ไป และวิธีแก้ก็ไม่ค่อยถูกต้องตาม standard เท่าไหร่นัก(ตามหลักแล้ว element ที่ float จะไม่เป็น inline และจะไม่กำหนดความกว้างของ element ที่เป็น inline) แต่การรู้ปัญหาอย่างชัดเจนก็น่าจะช่วยให้แก้ปัญหาที่เจอได้อย่างมีหลักการมากขึ้นและเสียเวลาน้อยลง ซึ่งเจ้ากล่องหล่นนี้ไม่ใช่ปัญหาเดียวที่พบบ่อยใน ie6 ถ้าจะเอาทั้งหมดมาเขียนก็รวมกันได้เป็นมหากาพย์เลยทีเดียว ก็ได้แต่หวังว่าจำนวนผู้ใช้ ie6 ในบ้านเราจะลดลง(อย่างรวดเร็ว) เหมือนบ้างเมืองอื่นเขาซักที

ทำอะไร?

พอเลือกภาษาได้ก็ต้องเลือกโปรเจค พอดีเป็นช่วงที่มีงานเว็บเล็กๆเข้ามาหลายเว็บ แต่ก็ตกลงกับลูกค้าไว้ว่าจะใช้ php ส่วนบางงานก็ต้องเขียนเผื่อคนอื่นมาใช้ต่อ สรุปว่าต้องตัดไป งานรับจ้างชาวบ้านจะมาใช้ภาษาแปลกๆไม่ได้ เกิดเราไปสะดุดยอดหญ้าที่ไหนตายไปเค้าคงหาคนทำต่อลำบาก

งั้นก็ต้องเป็นโปรเจคส่วนตัว ที่คิดไว้ว่าอยากทำก็มีอยู่มากมายมหาศาลทำเอาเลือกลำบากเหมือนกัน ก็เลยคิดว่าจะเลือกโปรเจคที่มีความซับซ้อนมากประมาณหนึ่ง เพราะถ้าเริ่มแบบที่ง่ายไปเวลาเรียนรู้ลองทำก็จะชิวเกิน ไม่กดดัน สรุปก็เลือกทำโปรเจคที่คุยกับเพื่อนไว้นานแล้วว่าอยากทำ คือทำเว็บสเปกสินค้าไอทีแบบเอาสินค้าต่างๆมาเปรียนเทียบกันตัวต่อตัว ฟังก์ชั่นต่อฟังก์ชั่นได้ ตั้งโจทย์เพิ่มเติมว่าจะต้องสามารถเปรียบเทียบข้ามสายพันธ์ได้ เช่น จะต้องเอา เลเซอร์ปริ้นเตอร์ อิงค์เจ็ท และดอทแมทริกซ์ มาเปรียนเทียบความเร็วในการพิมพ์ได้ และข้อมูลที่ลงจะต้องย่อยมาแล้ว คนเข้ามาใช้เว็บจะได้ไม่เกิด information overload

ยังไงดี?

พอเลือกโปรเจคได้ก็ลงมือศึกษา ruby on rails อย่างเต็มตัว ในตอนที่เริ่มนั้นบ้านเรายังหาหนังสือ ruby และ rails ไม่ค่อยได้(ตอนนี้เห็นมี 3-4 เล่มในตลาด) จะสั่งซื้อหนังสือจาก amazon ก็ไม่อยาก เพราะช่วงนั้นสั่งหนังสือ(ไร้สาระและมีสาระ)ไปหลายเล่ม ออกแนวเกินงบ ก็เลยใช้วิธีโหลดหนังสือเป็น pdf มา ก็อ่านลำบากหน่อย แต่ประโยชน์สูง ประหยัดสุด สรุปรวมๆอ่านไปสี่ห้าเล่มเห็นจะได้ บางเล่มก็อ่านไปลองทำไป บางเล่มก็อ่านผ่านๆ เพราะตัวอย่างเป็นเวอร์ชั่นเก่าและใน rails นั้นการเขียนโค้ทของแต่ละเวอร์ชั่นมีความต่างกันค่อนข้างมาก สรุปว่าใช้เวลาประมาณเดือนนึงเห็นจะได้ในการเรียนรู้อย่างลงเอียดก่อนลงมือเขียนจริง

เอาจริงหล่ะ

ตอนเอาจริงก็มีรายละเอียดมากมายที่ต้องตกลงกับตัวเอง เริ่มจาก text editor ก่อน ด้วยความที่ rails จำเป็นต้องใช้งาน text editor คู่ไปกับ console และเราเป็นคนที่ชอบ online editor คือ แก้ไฟล์ที่อยู่บนเซิฟเวอร์เลย ที่สำคัญคือใช้ทำงานบน mac ไม่ใช่ pc จึงจำกัดตัวเลือกลงบ้าง มองไปมองมาสรุปว่าเลือก coda เพราะสามารถอ่าน ruby ออกบ้าง ช่วย highlight โค้ทได้บางส่วน มี remote ssh และ preview ในตัวเลย ก็ถือว่าครบถ้วนกระบวนความ

จากนั้นก็ต้องดูเรื่องเซิฟเวอร์ ในมือก็มีอยู่หลายตัว ก็เลือกใช้ WHM/cPanel server ด้วยเหตุผลว่ามี plugin ให้ลง rails แบบง่ายๆไม่ปวดใจนัก ใช้เวลาไม่นานก็สามารถรัน rails app บนเซิฟเวอร์ได้โดยไม่ต้องออกแรงมากมายอะไร

รายละเอียดเรื่องเทคนิคครบถ้วน ก็ใช้เวลาร่วมสองเดือนเหมือนกันในการทำทุกอย่างขึ้นมา ตั้งแต่ design ไปจนถึง database ค่อยๆบรรจงเขียนไปวันละหน่อย ช่วงไหนงานเข้าก็เขียนได้น้อย งานไม่มีก็เขียนได้มาก(แต่ตังน้อย) กว่าจะปั้นจนเสร็จได้ก็แทบลากเลือกเหมือนกัน หลักๆเลยก็เพราะมันไม่มี sql ให้ query เหมือนสมัยเขียน php เมื่อทำฐานข้อมูลมาซับซ้อนมากๆก็ต้องใช้เวลาซักพักในการทำตัวให้คุ้นเคยกับ active record แต่พอเคยมือแล้วก็รู้สึกว่าใช้ง่ายดีเหมือนกัน จนบางครั้งกลับมาเขียน php ยังคิดถึง active record ของ rails บ้างเป็นครั้งคราว ส่วนเรื่องความต่างอื่นๆก็จะเป็นเรื่องของ mvc model, rest architecture และอะไรอื่นๆอีกยิบย่อยที่ต้องปรับตัวและเรียนรู้กันใหม่

สรุปเมื่อเสร็จ

พอเขียนเสร็จสมบรูณ์ก็กลับไปมองที่ทำลงไป มันก็ไม่ได้ดีอะไรเท่าไหร่และบางอย่างก็ยังไม่ best practice เท่าที่ควร แต่ก็ทำใจเพราะเป็นเว็บแรก ตัวเว็บนี่ไม่พอใจเท่าไหร่ แต่ความรู้ที่ได้จากการเขียน rails นี้ถือว่าคุ้มค่าพอสมควรทีเดียว ทั้ง MVC, REST, OOP และอื่นๆอีกมากมาย ก็ถือว่าได้เปิดหูเปิดตาจากการเขียน php อย่างเดียวมาเป็นเวลานาน รายละเอียดทางเทคนิคอื่นๆที่พบเจอหรือเป็นอุปสรรคในการเปลี่ยนจาก php มาเขียน ruby นั้นมีอีกมากพอสมควร ไว้มีเวลาเมื่อไหร่จะมาเขียนไล่ทีละตัว ส่วนตอนนี้ขอสรุปง่ายๆเกี่ยวกับตัว ruby ว่าเป็นภาษาที่เจ๋งมาก เขียนได้สนุกและยืดหยุ่น ส่วน rails นั้นก็เป็น framework ที่ออกแบบเป็นอย่างดีและ implement MVC model ได้อย่างลงตัวมากๆ แต่ยังไง php ก็ยังเป็นเครื่องมือหลักที่จะยึดหากินต่อไป โดยเอาความรู้ที่ได้จาก rails มาพัฒนาการเขียน php ของตัวเองให้ดีขึ้น

เริ่มต้นจากอย่างแรกก่อน คือคอนเซปต์การ encapsulation หรือขอเรียกง่ายๆว่า การห่อ ซึ่งก็เป็นเหมือนการซ่อนข้อมูลภายในคลาสไว้ไม่ให้สามารถเข้าถึงได้โดยตรงจากส่วนอื่นๆของโปรแกรม ลองดูโค้ทกันเลยน่าจะง่ายกว่านั่งอธิบายให้ยืดยาว

class Panda{
   private $name;
   function eat(){
       echo "eating bamboo leaf";
   }
}

ก็เล่นกันง่ายๆเลย คือเปลี่ยนตัวแปร name ให้เป็น private ซะ คราวนี้การเรียกถึงตัวแปรแบบตรงๆอย่างที่เห็นในตัวอย่างที่แล้วก็จะไม่สามารถทำได้อีกต่อไป แต่เมื่อต้องการเรียกใช้เราก็อาจจะเพิ่ม method เข้าไป เช่น

function setName($pname){
   $this->name=$pname;
}
function getName(){
   return $this->name;
}

โดย method setName จะรับค่า name มาใน parameter ด้วย ส่วน getName จะไม่ทำอะไรนอกจาก return ค่าในตัวแปร name แล้วเวลาเรียกใช้ก็จะใช้วิธีเรียกหา method เช่น

$p1 = new Panda();
$p1->setName("Lin Hui");
echo $p1->getName();

จะเห็นว่า ถ้าเราไม่เขียน method get,set ขึ้นมาซะอย่าง ใครๆก็ไม่สามารถเข้าถึงข้อมูลภายในคลาสของเราได้ ซึ่งในแง่ของความปลอดภัยแล้ว การทำ encapsulation ถือว่ามีประโยชน์มากเลยทีเดียว

อีกเรื่องหนึ่งต้องรู้ในการเขียนโปรแกรมเชิงวัตถุใน php คือ การสร้าง constructor ของคลาส หรือมันก็คือการสร้าง method ที่จะทำงานตอนเราสร้างวัตถุจากคลาสนั้นๆเท่านั้น ซึ่งใน php นี้จะมีการใช้คำสั่งที่ต่างจากจาวาซักหน่อย คือ

class Panda{
   private $name;
   function __construct($pname){
      $this->name=$pname;
   }
}

ตามโค้ทก็คือ เมื่อมีการสร้างวัตถุจากคลาสนี้ method construct จะถูกเรียกใช้(และในวัตถุนี้จะไม่สามารถเรียกใช้ method construct ได้อีก) และรับค่า ชื่อหมี($pname) มาใส่ไว้ในตัวแปร name ดังนั้นตอนสร้างวัตถุก็ต้องมีการใส่ชื่อไปด้วย ดังนี้

$p1 = new Panda("Lin Hui");

คราวนี้เราเอาทั้งการ encapsulation และ constructor มารวมกัน โดยจะเขียนให้สามารถตั้งชื่อได้ครั้งเดียว และไม่สามารถเปลี่ยนได้ แต่ยังเอาไปใช้งานได้อยู่

class Panda{
   private $name;
   function __construct($pname){
      $this->name=$pname;
   }
   function getName(){
      return $this->name;
   }
}

$p1 = new Panda("Lin Hui");
echo $p1->getName();

จะเห็นว่าตอนสร้าง object เราจะต้องใส่ค่า(ชื่อ) ไปเลย และเมื่อตั้งชื่อไปตอนสร้างแล้วจะเปลี่ยนค่าไม่ได้ เพราะเราเอา method setName ออกไปแล้ว ซึ่งความสามารถในการจะทำแบบนี้ได้เป็นสิ่งที่มีประโยชน์มากในการออกแบบโปรแกรมแบบต่างๆได้ ก็แล้วแต่จะพลิกแพลงกันไป

ก่อนอื่นดูตารางก่อน

Table Layout

โค้ทของตาราง

This is Header



Main Menu
-Menu1

Content goes here!
This is content!

ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css

ออกมาจะหน้าตาเป็นแบบนี้

Css Div Layout

ก็คล้ายๆกัน ดูเผินๆก็ไม่มีอะไรต่าง แต่ทีนี้มาดูโค้ทกันบ้าง
ส่วนของ html จะเห็นว่าโค้ท html จะไม่ยุ่งยากเหมือนตอนทำตาราง ซึ่ง search engine จะชอบมากกว่า

This is Header
Main Menu
-Menu1
Content goes here!
This is content!

ส่วนของ css

div#container{
	width:350px;
	margin:0 auto;
	background:#cccccc;
}
div#header{
	text-align:center;
	background: #eeeeee;
}
div#menu{
	width:100px;
	float:left;
	background: #999999;
}
div#content{
	width:250px;
	float:left;
	background: #cccccc;
}

สองส่วนนี้เท่านั้น เป็นอันจบ ไม่เจ็บปวดอย่างที่คิด ตอนเอามาประกอบรวมกันก็สามารถทำได้ 2 แบบ คือ

1. ใส่โค้ท css ไว้ในส่วน head ของ html ใต้ tag

2. แยกโค้ท css ไว้ในไฟล์ .css แล้วทำลิงค์ไปหา โดยใช้ tag

ซึ่งการแยกโค้ทออกไปนั้นมีประโยชน์หลายอย่าง เช่น

1. ลดเวลาโหลดหน้าต่อๆไป ประหยัดแบนด์วิธ เนื่องจากบราวเซอร์จะเก็บ cache ของไฟล์ css ไว้ในเครื่อง
2. สามารถแก้ไขได้ง่ายถ้านำไปใช้หลายๆหน้า html เพราะจะแก้ที่ไฟล์ css ที่เดียว
3. อีกทั้งในส่วน media=”xxx” นั้นสามารถกำหนดได้หลายอย่าง เช่น print,screen เพื่อเปลี่ยน layout สำหรับการดูแบบต่างๆ

การทำตารางไปเป็น div นั้นเป็นแค่การเริ่มต้นให้เห็นภายเท่านั้นว่าถ้าไม่มีตารางจะทำ layout อย่างไร ซึ่งถ้าใช้จริงๆแล้วตัว css จะสามารถใช้ทำหน้าเว็บได้อย่างอิสระมากกว่าใช้ตาราง และ powerful กว่ามากในแง่ของการออกแบบ ซึ่งมันแจ่มมาก และหากใช้คล่องๆแล้วจะพบว่ามันง่ายกว่าใช้ table มากมายนัก