thought snippets http://blog.u-blue.com a little bit of everything Thu, 11 Feb 2010 08:51:46 +0000 http://wordpress.org/?v=2.9.2 TH hourly 1 แสดง Stat หน้าเว็บจาก Google Analytics http://blog.u-blue.com/2010/02/10/visible-stat-with-google-analytics/ http://blog.u-blue.com/2010/02/10/visible-stat-with-google-analytics/#comments Wed, 10 Feb 2010 11:15:48 +0000 nice http://blog.u-blue.com/?p=213 getAllTimeSummery(); จากนั้นก็แสดง Counter โดยใช้โค้ท HTML ร่วมกับ CSS สามารถเปลี่ยนแปลงหน้าตาได้ตามสะดวก CSS: #vGA{ width: 100px; position: relative; font-size: 9px; font-family: ]]> จากบล๊อคที่แล้ว ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP ทำให้เกิดอยากเขียนสิ่งที่คนชอบให้เอามาไว้หน้าเว็บอีกอย่างหนึ่ง คือ Visible Stat หรือ Counter แบบเดิมๆที่เราเคยเห็นนั่นเอง ซึ่งโดยธรรมชาติของ google analytics นั้นเราไม่สามารถดึงจำนวนครั้งที่มีคนเข้าเว็บมาโชว์หน้าเว็บได้ แต่ด้วย Analytic Data Extract API ก็เลยทำให้มีวิธีดึงข้อมูลออกมาได้ เป็น counter แบบเชยๆที่คุ้นตาได้ ดังตัวอย่าง

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>
]]> http://blog.u-blue.com/2010/02/10/visible-stat-with-google-analytics/feed/ 0 ดึงข้อมูลจาก Google Analytic มาแสดงด้วย PHP http://blog.u-blue.com/2010/02/09/google-analytic-api-extract-data-php/ http://blog.u-blue.com/2010/02/09/google-analytic-api-extract-data-php/#comments Mon, 08 Feb 2010 20:30:41 +0000 nice http://blog.u-blue.com/?p=189 ปัญหามันเกิดจากบางครั้งเราทำเว็บให้คนที่ไม่ค่อยมีความรู้เรื่องคอม แล้วจะใช้ Google Analytic ในเว็บเขา ทีนี้ก็สมัคร Account ให้ เอาโค้ทมาใส่ให้ สอนให้ลอคอินเข้าไปดูสถิติในเว็บ google แต่ไม่นานก็จะเกิดงานเข้า เพราะเขาจำไม่ได้ว่าเข้าดูยังไง ภาษาอังกฤษใช้ไม่คล่อง ฯลฯ ก็เลยอยากจะเอาสถิติจาก GA มาไว้ในหน้าแรกของ backoffice เว็บเขาเลย จะได้ดูชัดๆ ง่ายๆ ก็เลยนั่งเขียน PHP class เพื่อติดต่อกับ Google Analytic Data Export API(จริงๆมันก็ยังอยู่ใน lab แต่พอใช้งานได้) และก็ใช้ Google Chart มาช่วยในการแสดงผล ได้ออกมา ดังนี้

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

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

]]> http://blog.u-blue.com/2010/02/09/google-analytic-api-extract-data-php/feed/ 1 os x: keychain, what? http://blog.u-blue.com/2010/01/27/os-x-keychain-what/ http://blog.u-blue.com/2010/01/27/os-x-keychain-what/#comments Tue, 26 Jan 2010 20:07:24 +0000 nice http://blog.u-blue.com/?p=171 ว่าด้วยอีกโปรแกรมที่มีประโยชน์ใน mac os x ที่หลายๆคนอาจจะไม่รู้ว่ามันมีอยู่ มันคือโปรแกรม keychain access นั่นเอง ซึ่งหากใครใช้ os x แล้วสังเกตซักนิดจะเห็นว่าหลายๆโปรแกรมที่สามารถเก็บรหัสผ่านไว้ในเครื่องได้นั้น มันเก็บลงไปใน keychain ของตัว os ซึ่งโดยปกติเจ้า keychain นี้มันจะผูกอยู่กับ user account และมีความปลอดภัยในการเก็บรหัสผ่านสูงมาก

แต่นอกจากใช้เก็บรหัสผ่านจากโปรแกรมต่างๆแล้ว เจ้า keychain นี้มันยังมีอีกฟังก์ชั่นที่น่าสนใจ นั่นคือ Secure Note ก็ตรงๆตามชื่อเลย คือไว้จดโน๊ตที่ต้องการความปลอดภัย เช่นเก็บไฟล์รหัสผ่านที่ไม่ค่อยได้ใช้แล้วกลัวลืม หรือเก็บเบอร์โทรกิ๊ก เป็นต้น

การใช้งานก็ง่ายๆ สไตล์ osx นั่นคือ เข้าไปที่ Application > Utility > Keychain Access

keychain in utility


หมายเหตุ: สำหรับคนที่ไม่ได้ตั้งรหัสผ่านสำหรับเข้าเครื่องแนะนำให้ตั้งก่อน ที่ System preferences > Accounts

พอเปิดขึ้นมาก็ไปคลิกที่ Secure Note จากนั้นคลิกที่เครื่องหมาย [+] ด้านล่างเพื่อเพิ่ม note

adding secure note

ง่ายๆแค่นี้ก็สามารถบันทึกข้อมูลต่างๆเก็บไว้ได้อย่างปลอดภัยแล้ว เมื่อไหร่ที่ต้องการเปิดดูก็แค่เข้ามาใน Keychain Access นี้แล้วก็ดับเบิ้ลคลิกที่ Note ที่เขียนไว้ แล้วติ๊กที่ Show note มันจะมีกล่องขึ้นมาให้ใส่พาสเวริ์ด ก็ใส่อันที่ใช้ตอนลอคอิน

viewing secure note

ถ้าไม่อยากต้องนั่งใส่พาสเวริ์ดทุกครั้งก็คลิก Always allow หรือถ้ากลัวมีคนอื่นมาใช้ลอคอินที่เปิดทิ้งไว้แล้วเปิดดูข้อมูลได้ก็คลิก allow เฉยๆ ทีนี้ทุกครั้งที่จะเปิดดูก็ต้องใส่พาสเวริ์ดไม่ว่าจะลอคอินค้างไว้หรือไม่ก็ตาม

]]> http://blog.u-blue.com/2010/01/27/os-x-keychain-what/feed/ 1 IE6 ให้(ช่องว่าง)คุณมากกว่า http://blog.u-blue.com/2010/01/22/ie6-more-for-you/ http://blog.u-blue.com/2010/01/22/ie6-more-for-you/#comments Fri, 22 Jan 2010 13:24:21 +0000 nice http://u-blue.com/blog/?p=30 ปรากฎการณ์ลึกลับที่เกิดขึ้นมากมายใน ie6 ทำให้คนทำเว็บอย่างเราๆต้องเสียเวลาไปมากในการมานั่งตามแก้ไข ซึ่งหนึ่งในปัญหาสำคัญที่เจอใน ie6 คือปัญหาที่เกี่ยวกับการใช้ float

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

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

IE8 Boxes

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

โค้ทเดิม ใน IE6


งานเข้าหล่ะสิ มันเกิดอะไรขึ้นเนี่ย กรอบขนาด 400 ใส่กล่องขนาด 200 สองชิ้น ก็รวมเป็น 400 พอดี แล้วทำไมมันตกลงมาได้ ???!

ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ 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:300px;
	float:left;
}

และ html



This is left 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


จะเห็นว่าพื้นที่ว่างที่เพิ่มมาหายไปแล้ว ทีนี้ลองมาทำในกรณีกล่องหล่นของเราบ้าง
เพิ่มโค้ท display:inlie เข้าไป

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

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

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

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

]]> http://blog.u-blue.com/2010/01/22/ie6-more-for-you/feed/ 0 android: my first app http://blog.u-blue.com/2009/10/15/android-my-first-app/ http://blog.u-blue.com/2009/10/15/android-my-first-app/#comments Thu, 15 Oct 2009 04:09:20 +0000 nice http://u-blue.com/blog/?p=23 ไม่นานมานี้ได้มีโครงการกับเพื่อนๆว่าเราอยากจะทำเกมส์กัน  แต่พอเรียนจบมาทุกคนก็แยกย้ายไปทำงานทำการ ไม่มีใครมานั่งโต้รุ่งบ้าเกมส์ด้วยกันอีกต่อไป คราวนี้กลับมาคุยกันอีกครั้งพร้อมโปรเจคใหม่ว่าอยากลองทำเกมส์บนแพลทฟอร์มอื่นดูบ้าง ที่เห็นหลักๆก็มี Java(J2ME), iPhone และ Android ก็ถกเถียงกับอยู่นานจึงได้ข้อสรุปว่า ลองทำบนแอนดรอยดีกว่า เพราะบน iPhone เขาน่าจะมี apps มากมายแล้ว ประกอบกับต้องใช้ mac เขียน ซึ่งไม่ใช่ทุกคนจะมีเครื่อง พอตกลงได้ว่าจะทำบนแอนดรอยก็ไปหาเอกสารอ่าน ซึ่งกูเกิ้ลก็ทำไว้ค่อนข้างดี แล้วก็ดาวน์โหลด SDK และ Eclipse plugin มา ก็ได้เวลาเริ่มทำแอพชิ้นแรก ซ้อมมือก่อนทำเกมส์จริงจัง โดยภาษาที่ใช้เขียนคือ Java ซึ่งพอเป็นบ้างอยู่แล้ว ทำให้ต่อยอดได้ง่ายหน่อย

ลองเกมส์ง่ายๆก่อน

สรุปว่าจะลองทำเกมส์ขำขำหนึ่งชิ้น คือ Color or Word ซึ่งมาจากทฤษฎีทางจิตวิทยาชื่อ Stroop Effect  ง่ายๆคือ แสดงอักษรภาษาอังกฤษเป็นชื่อสี และสีอักษรที่ไม่ตรงกับคำ จากนั้นให้ดูว่าคำสั่งให้เลือก Color หรือ Word ก็ให้เลือกให้ถูก ตัวเกมส์ก็ง่ายๆ ตรงไปตรงมา เขียนให้สุ่มสีสุ่มคำและสุมโจทย์ จากนั้นก็นับคะแนนไปเรื่อยๆ โดยมีเวลาในการตอบแต่ละข้อจำกัด ถ้าคะแนนมากขึ้นเวลาก็จะลดลงจนถึงระดับหนึ่ง หลังจากนั้นก็อยู่ที่สมาธิของแต่ละคนว่าจะเล่นต่อไปได้อีกนานแค่ไหน(ตอบผิดเกมส์จบ)

เริ่มเขียน

สรุปทุกอย่างได้แล้วก็เริ่มลงมือเขียน ซึ่งอินเตอร์เฟสทั้งหลายในแอนดรอยนั้นจะใช้ไฟล์ XML ในการควบคุมการแสดงผล และการโปรแกรมก็ใช้ Java แบบที่คุ้นเคย ก็เริ่มจากจัดวางอินเตอร์เฟสคร่าวๆในแต่ละหน้า ว่ามีทั้งหมด 4 หน้าหลักๆ คือ หน้าแรก, หน้าเกมส์, หน้า highscore ในเครื่อง และหน้า online highscore โดยแต่ละหน้าจะมีไฟล์ XML คนละไฟล์ทำใหควบคุมอินเตอร์เฟสแยกกันได้ง่ายๆ

เมื่อเสร็จอินเตอร์เฟสก็เขียนตัวเกมส์ หนักที่ java และ algorithm ล้วนๆ แต่ด้วยความที่เกมส์มันง่ายๆ เลยไม่เสียเวลามากนัก เขียนครึ่งหนึ่ง ทดสอบอีกครึ่งหนึ่ง โดยรันบน emulator เล่นไปเรื่อยๆได้เหมือนบนเครื่องจริง

before

before graphics

จากนั้นก็วุ่นวายอยู่กับการเก็บ highscore ในเครื่อง โดยเก็บเป็นฐานข้อมูลบน sqlite ที่มากับเครื่องอยู่แล้ว และสุดท้ายก็คือ online highscore ทำให้อัพโหลด highscore ขึ้นมาแชร์กันได้ ข้างเซิฟเวอร์นั้นใช้ php+mysql เขียนเพื่อเก็บและแสดงคะแนน ส่วนฝั่งแอนดรอยก็ใช้ Webview ที่มีมาให้อยู่แล้ว

สุดท้ายคือหางาน art สวยๆมาใส่ ก็ได้น้อง Girisan มาวาดรูปและออกแบบให้ ตั้งแต่อินเตอร์เฟส ตัวละคร ไปยันไอคอนเกมส์ ซึ่งทั้งหมดเข้ากับคอนเซปต์และดูดีมากมายเลยทีเดียว(เราคงไม่มีปัญญาทำเองแน่ๆ) เมื่อได้งาน art มาก็ทำ layout และใส่รวมลงไปกับเกมส์ จัดหน้านิดหน่อยก็ดูราศรีจับขึ้นมาเลยทีเดียว

after

after graphics

เสร็จแล้ว ยังไงต่อดี

ถึงตรงนี้แล้วยังไม่เคยได้ลองบนเครื่องจริงเลย(เพราะไม่มี) ก็เลยเอาวะ ลงทุนหน่อย เพราะโทรศัพท์เครื่องเดิมก็เก่ามากมายอยากจะเปลี่ยนมานานแล้วแต่ไม่มีแรงจูงใจ แอนดรอยนี่ก็ดูมีอนาคตดี ก็เลยไปหาเครื่อง T-Mobile G1 ถูกๆมาได้ เป็นของมือ 3-4 สภาพพอทน แต่ราคาโดนใจมาก(หลักพัน) ก็สอยมาเลยแล้วลองลงดู โอ้!เล่นได้จริงๆด้วย ตัวโทรศัพท์ก็น่าประทัปใจไม่น้อย อาจจะสู้ iPhone ไม่ได้ แต่ถ้าเทียบกับ Win…. Mo…. แล้วกินขาดแน่นอน

เมื่อทดสอบจนพอใจแล้วก็ได้เลยเวลาอัพโหลดขึ้น android market ซึ่งตรงนี้ก็ไม่ยุ่งยากอะไร พี่กูเกิ้ลเขาเตรียมไว้ให้หมดแล้ว สมัครสมาชิก รอ approve แล้วก็ไปต่อได้เลย ทำแพคเกจ .apk โดยต้องกำหนดเวอร์ชั่น แล้วใส่ release key จากนั้นก็พร้อมอัพโหลด

ผ่านไป 24 ชั่วโมง

จากรายงานของ android market ว่ามีคนโหลดไปทั้งหมด 485 คน และยัง Active อยู่ 379 คน(คือไม่ uninstall ออก) ผลตอบรับก็มีคนคอมเมนต์ดีบ้าง เกมส์เล่นสนุกแปปเดียวแล้วน่าเบื่อบ้าง ต่างๆความเห็นกันไป ส่วน highscore ที่มีคนอัพโหลดมานั้นตอนนี้แต้มสูงไปจนคนทำเกมส์เองก็เล่นไม่ชนะแล้ว(ไม่รุมันเล่นได้ไง) ก็ถือว่าเป็นเสน่ห์อีกแบบนึงของเกมส์บนมือถือ จากนี้ก็คงเริ่มทำเกมส์จริงจังซักเกมส์ตามที่วางแผนไว้ซักที

]]> http://blog.u-blue.com/2009/10/15/android-my-first-app/feed/ 0 Wave, preview http://blog.u-blue.com/2009/09/30/wave-preview/ http://blog.u-blue.com/2009/09/30/wave-preview/#comments Wed, 30 Sep 2009 06:05:11 +0000 nice http://u-blue.com/blog/?p=20 Google เตรียมเปิดตัว Wave Preview ในวันพุธที่ 1 ตุลาคมนี้ และจะแจกแอคเคาท์แก่ผู้ใช้งานจำนวน 100,000 แอคเคาท์ โดยตามบล๊อคของกูเกิ้ลเวฟ ทางกูเกิ้ลมีแผนที่จะเปิดตัวเวฟภายในสิ้นปีนี้

แก้ไข วันพฤหัสที่ 1 ตค 13:30:
ได้ Account Wave Preview มาแล้ว เขามีให้เชิญคนอื่นต่ออีก 8 คน ก็ดีเหมือนกันจะได้ชวนเพื่อนๆมาเล่นกัน ความแตกต่างจาก Sandbox คืออินเตอร์เฟสดูสมบรูณ์มากขึ้น บักน้อยลง ลื่นขึ้น แล้วที่สำคัญคือเมนูดีบักหายไปแล้ว!!

เวฟคืออะไร?

เวฟ หรือ Google Wave เป็นการติดต่อสื่อสารทางอินเตอร์เน็ตรูปแบบใหม่ที่ผสมผสานกันระหว่าอีเมลล์ แชท เอกสาร เว็บบล๊อค และการแชร์รูปภาพ โดยเรียกรูปแบบการสื่อสารนี้ว่า “hosted conversation” หรือ “wave”

ตัว Web Application ของ Google Wave นั้นยังสามารถอนุญาติให้ผู้พัฒนาทั่วไปสามารถเขียนโปรแกรมลงไปใช้ร่วมกับเวฟได้ด้วย ตามที่เคยเขียนไว้ใน Google wave: first contact ซึ่งในบล๊อคนั้นได้พูดถึงการทดลองเขียน Gadget ลงในเวฟรุ่นทดลองสำหรับ developer หรือที่เรียกกันว่า sandbox หรือ developer preview

Preview vs Sandbox?

ต่างกับ sandbox ตรงที่ใน sandbox นั้นมีไว้ให้พวก developer ได้วิ่งเล่นกัน หน้าอินเตอร์เฟสหรือเมนูต่างๆก็ยังมีความไม่สมบรูณ์มากๆอยู่ (เช่น การเพิ่ม Gadget ต้องใช้เมนู Debug > Extensions หรือแม้กระทั่งเมนู Setting ก็ยังไม่สามารถใช้งานได้) ส่วนพรีวิวที่กำลังจะเปิดในอีกไม่กี่ชั่วโมงนี้คาดว่าจะมีความสมบรูณ์มากขึ้นไม่มากก็น้อย

ใครจะได้แอคเคาท์?

  • Developers who have been active in the developer preview we started back in June (นักพัฒนาที่มีแอคเคาท์ของ wave sandbox และยังมีการใช้งานจริง)
  • The first users who signed up and offered to give feedback on wave.google.com (คนแรกๆที่ลงทะเบียนใน wave.google.com และเสนอจะให้ feedback)
  • Select customers of Google Apps (ลูกค้า Google Apps ที่ได้รับเลือก)

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

]]> http://blog.u-blue.com/2009/09/30/wave-preview/feed/ 0 จาก php ถึง ruby on rails http://blog.u-blue.com/2009/08/18/from-php-to-ruby-on-rails/ http://blog.u-blue.com/2009/08/18/from-php-to-ruby-on-rails/#comments Tue, 18 Aug 2009 15:10:13 +0000 nice http://u-blue.com/blog/?p=16 จากคนเคยหากินกับ php มาเนิ่นนานจนจำไม่ได้แล้วว่าเริ่มเมื่อไหร่ แต่ด้วยความอยากรู้อยากเห็นเลยตั้งโจทย์กับตัวเองไว้ว่าโปรเจคส่วนตัวชิ้นต่อไปจะใช้ภาษาอื่นที่ไม่ใช่ php ซะบ้าง ก็เริ่มมองหาหลายๆตัวเลือก โดยพิจารณาจริงจังที่ python, ruby on rails และ java แล้วก็ลองศึกษาดูว่ามันยังไงกันบ้างนะ ลองอ่านลองเขียนอยู่นานสุดท้ายก็มาลงเอยที่ ruby on rails ด้วยเหตุผลหลายๆอย่างที่พอมาคิดๆดูก็ไม่ค่อยมีเหตุผลเท่าไหร่ แต่เอาหล่ะ rails ก็ rails

ทำอะไร?

พอเลือกภาษาได้ก็ต้องเลือกโปรเจค พอดีเป็นช่วงที่มีงานเว็บเล็กๆเข้ามาหลายเว็บ แต่ก็ตกลงกับลูกค้าไว้ว่าจะใช้ 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 ของตัวเองให้ดีขึ้น

]]> http://blog.u-blue.com/2009/08/18/from-php-to-ruby-on-rails/feed/ 0 google wave: first contact http://blog.u-blue.com/2009/07/11/google-wave-first-contact/ http://blog.u-blue.com/2009/07/11/google-wave-first-contact/#comments Sat, 11 Jul 2009 10:40:46 +0000 nice http://u-blue.com/blog/?p=6 google wave logoหลายๆคนคงเคยเห็นวีดีโอสาธิตการใช้งาน google wave จากงาน google i/o มาแล้ว ดูแล้วก็เป็นรูปแบบของการสื่อสารที่เจ๋งไม่ใช่เล่น เพราะสามารถเห็นข้อความที่พิมพ์คุยกันได้แบบ real time ไม่ต้องนั่งมอง “He is typing…” “She is typing…” อีกต่อไป อีกทั้งยังสามารถเพิ่ม “ของเล่น” ลงไปในข้อความสนทนาได้อีกด้วย เช่น เกมส์ poll ฯลฯ และไม่นานมากนี้ก็ได้ลองเล่นจริงๆซักทีหลังจากได้รับ wavesandbox account มาจาก google

แรกพบสบตา

เมื่อลอคอินเข้าไปครั้งแรกก็ให้ความรู้สึกเหมือน gmail ที่มีกลิ่นอายการออกแบบสไตล์เดียวกัน งมๆเปิดๆเมนูต่างๆดูอยู่ซักพัก เพราะด้วยความเป็น developer preview ตัวอินเตอร์เฟสจึงยังไม่สมบรูณ์นัก หลายๆเมนูที่เกี่ยวกับการเขียน gadgets, plugins ถูกจัดไปอยู่ในหัวข้อ debug เลยด้วยซ้ำ แต่ก็ไม่เป็นไร เพราะอินเตอร์เฟสโดยรวมก็ถือว่าใช้งานได้

อธิบายเล็กน้อย

google wave  นี้จริงๆแล้วไม่ใช่แค่หน้าเว็บเหมือน twitter, facebook อย่างที่หลายๆคนเข้าใจ แต่จริงๆแล้วมันทำงานอยู่บนพื้นฐานของ wave protocol ซึ่งเป็น protocol ที่กูเกิ้ลตั้งโจทย์ว่า หากอีเมลล์ถูกสร้างในยุคนีี้ อีเมลล์จะมีหน้าตาเป็นอย่างไร และ wave นี้ก็ยังเป็น open source อีกด้วย

ส่วนประกอบ

wave: ถ้าเปรียบกับ e-mail แล้ว wave ก็คือจดหมายหนึ่งฉบับ จะเพิ่มคู่สนทนาสนทนาเข้ามากี่คนก็ได้

blip: ต่างกับอีเมลล์คือ ในแต่ละ wave สามารถมีได้หลาย blip คล้ายๆกับกระทู้ที่มีหลายๆ reply

gadget: คือ “ของเล่น” ที่สามารถเพิ่มลงไปในแต่ละ blip ได้ โดยทุกคนที่อยู่ใน wave นั้นๆจะสามารถใช้งาน gadget ที่มีคนใดคนหนึ่งใส่ลงไปใน blip ภายใน wave นั้นๆและยังมีการเก็บข้อมูลสถานะปัจจุบันไว้ด้วย

robots: เป็น extension ที่เพิ่มลงใน wave เพื่อทำงานบางอย่างให้อัตโนมัติ โดยอาจแสดงในรูปของผู้สนทนาคนหนึ่ง เช่น ในกรองคำหยาบ และ robots นี้ยังสามารถใช้ควบคุม gadget ได้อีกด้วย

ลองเล่นจริง

ความเจ๋งอย่างหนึ่งของ wave คืออะไรก็ตามที่คู่สนทนาทำจะส่งถึงกันแบบ real time ก็ต้องลองบ้างว่ามันจะจริงหรือไม่ โดยพี่ google เขาก็เข้าใจโดยให้ account มาคนละ 2 account จะได้ทดลองเล่นเองได้ง่ายๆ ก็ลองคุยกันโดยเปิด notebook และ pc พบว่าการคุยที่เห็นอีกฝ่ายพิมพ์เลยนั้นก็มีดีเลย์พอสมควร แต่ยอมรับได้ ส่วนอื่นๆก็จะเป็นพวก gadget ที่กูเกิ้ลมีไว้ให้ลองใช้ดู เช่น poll, แผนที่ เกมส์ อะไรพวกนั้น ก็ถือว่าเป็นอะไรที่แปลกใหม่ไปจากอีเมลล์หรือแชทแบบธรรมดาทั่วไป และในอนาคตหากมีคนเขียนของเล่นเหล่านี้ขึ้นมาเยอะๆก็จะเป็นสีสันในการพูดคุยกันได้มากพอควรเลยทีเดียว

เป่ายิ้งฉุบ

ไหนๆพี่กูเกิ้ลก็ใจดีให้ developer preview account มาแล้วก็ต้องลองลงมือเขียนอะไรลงไปบ้าง ศึกษาดูๆไปแล้วก็ตกลงใจจะเขียน gadget เกมส์ง่ายๆ แบบไม่เสียเวลามากมายซักอย่าง ก็เอาวะ เป่ายิ้งฉุบเนี่ยแหละ พื้นสุดๆ ส่วนภาษาที่ใช้เขียนก็ง่ายๆสไตล์คนทำเว็บเลย คือใช้ html+javascript โดยจะมีฟังก์ชั่นที่เป็น js ของ wave อยู่แล้วที่เรียกมาใช้งานได้ เช่น บันทึกข้อมูลของแต่ละคน การรีเฟรชอัตโนมัติ เป็นต้น โดยรูปแบบไฟล์ gadget extension ก็จะเหมือนการเขียน extension กับแอพพลิเคชั่นอื่นๆของกูเกิ้ล คือเป็นไฟล์ xml ที่ใส่โค้ทของเราเข้าไปเป็นเนื้อหา พอเขียนเสร็จก็ทดลองเล่นกับตัวเองโดยใช้ 2 account ดู ก็อืม ได้อีกฟิวนึง เป่ายิ้งฉุบกับตัวเอง

สรุปแล้ว

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

]]> http://blog.u-blue.com/2009/07/11/google-wave-first-contact/feed/ 0 php oop #2: สร้างและห่อหมีแพนด้า http://blog.u-blue.com/2009/05/23/php-oop-2-construct-and-encapsulate/ http://blog.u-blue.com/2009/05/23/php-oop-2-construct-and-encapsulate/#comments Sat, 23 May 2009 15:31:53 +0000 nice http://blog.u-blue.com/?p=160 จากโพสที่แล้ว php oop #1: panda class ว่าด้วยเรื่องการเขียน php oop แบบง่ายๆ แต่ดูไม่มีประโยชน์เท่าไหร่นัก เพราะถ้าดูดีๆมันก็ไม่ต่างจากเขียนฟังก์ชั่นเท่าไหร่ เลยมาว่าต่อถึงคุณสมบัติจริงๆของ object oriented บ้าง

เริ่มต้นจากอย่างแรกก่อน คือคอนเซปต์การ 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 ออกไปแล้ว ซึ่งความสามารถในการจะทำแบบนี้ได้เป็นสิ่งที่มีประโยชน์มากในการออกแบบโปรแกรมแบบต่างๆได้ ก็แล้วแต่จะพลิกแพลงกันไป

]]> http://blog.u-blue.com/2009/05/23/php-oop-2-construct-and-encapsulate/feed/ 0 จากตาราง เปลี่ยนเป็น Div http://blog.u-blue.com/2009/05/11/from-table-to-div/ http://blog.u-blue.com/2009/05/11/from-table-to-div/#comments Mon, 11 May 2009 07:34:40 +0000 nice http://blog.u-blue.com/?p=96 วิธีง่ายๆที่จะเปลี่ยนจากการเขียน html layout โดยใช้ตารางมาเป็น css/div layout สำหรับคนที่กำลังลังเลที่จะใช้ css แทนตารางแบบเดิมๆ

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

Table Layout

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






This is Header





Main Menu
-Menu1

Content goes here!
This is content!

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

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

Css Div Layout

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





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 มากมายนัก

]]> http://blog.u-blue.com/2009/05/11/from-table-to-div/feed/ 0