รับแบบทั่วไป

<?php

function buy($fish=0, $pig=0, $chicken=0, $cow=0){
	echo "Buy : fish x $fish, pig x $pig, chicken x $chicken, cow x $cow";
}

buy(1); // Buy: fish x 1, pig x 0, chicken x 0, cow x 0
buy(1, 2); // Buy: fish x 1, pig x 2, chicken x 0, cow x 0
buy(1, 2, 3); // Buy: fish x 1, pig x 2, chicken x 3, cow x 0
buy(1, 2, 3, 4); // Buy: fish x 1, pig x 2, chicken x 3, cow x 4
buy(1, null, 3, 4); // Buy: fish x 1, pig x , chicken x 3, cow x 4
buy(1, 0, 3, 4); // Buy: fish x 1, pig x 0, chicken x 3, cow x 4

?>

จะเห็นได้ว่าเวลาจะเรียกใช้ function นี้ เราต้องจำลำดับด้วยว่า ตัวแรกคือปลา ตัวที่สองคือหมู นอกจากนี้ สมมติอยากซื้อไก่ 5 ตัว ก็ต้องบอกด้วยว่า เอาปลา 0 ตัว เอาหมู 0 ตัว เอาวัว 0 ตัว ซึ่งไม่จำเป็นเลย … buy(0, 0, 5, 0);

เหมาะสมกับ : เมื่อพิจารณาแล้ว ผมคิดว่าเหมาะสำหรับ function ที่รับค่า parameter ไม่มาก (4 ตัวยังพอไหว ถ้ามากกว่านั้นผมว่าใช้แบบถัดไปด้านล่างจะเหมาะสมกว่าครับ) และมี parameter แบบ optional น้อยๆ

parameter แบบ optional คือ จะระบุค่าหรือไม่ก็ได้ ถึงไม่บอก function มันก็ยังทำงานได้ปกติ (ถ้าเปรียบกับส้มตำ ก็เหมือนปูอ่ะครับ ใส่หรือไม่ใส่ก็ได้)

parameter แบบ required คือ parameter ที่เราต้องส่งค่า ถ้าไม่ส่ง function มันก็จะทำงานไม่สมบูรณ์ (ถ้าเปรียบกับส้มตำ ก็เหมือนมะละกอ ถ้าไม่ใส่ จะให้เรียกว่าส้มตำได้อย่างไร)

รับในรูปแบบ array

<?php

function buy($animal){
	$animal['fish'] = isset($animal['fish']) ? $animal['fish'] : 0;
	$animal['pig'] = isset($animal['pig']) ? $animal['pig'] : 0;
	$animal['chicken'] = isset($animal['chicken']) ? $animal['chicken'] : 0;
	$animal['cow'] = isset($animal['cow']) ? $animal['cow'] : 0;
	echo "Buy : fish x $animal[fish], pig x $animal[pig], chicken x $animal[chicken], cow x $animal[cow]";
}

// Buy: fish x 1, pig x 0, chicken x 0, cow x 0
buy(array("fish"=>1));

// Buy: fish x 1, pig x 2, chicken x 0, cow x 0
buy(array("fish"=>1 ,"pig"=>2));
buy(array("pig"=>2 ,"fish"=>1));

// Buy: fish x 1, pig x 2, chicken x 3, cow x 4
buy(array("fish"=>1, "pig"=>2, "chicken"=>3, "cow"=>4));

// Buy: fish x 0, pig x 0, chicken x 3, cow x 0
buy(array("chicken"=>5));

?>

จะเห็นว่าไม่ต้องเรียงลำดับให้ถูกต้องก็ได้ และส่งค่าเฉพาะตัวที่อยากระบุ เช่น อยากได้ไก่ 5 ตัว ก็ buy(array(“chicken”=>5)); โค้ดยาวขึ้น แต่ ไม่ต้องลำดับตัวแปร ส่งเฉพาะตัวที่ต้องการได้ และอ่านเข้าใจได้ง่ายขึ้น

เหมาะสมกับ : ผมคิดว่าเหมาะกับ function ที่มี parameter เยอะๆ และก็มี parameter แบบ optional เยอะๆ ด้วย

รับในรูปแบบ query string และ array

ตัวอย่าง query string: fish=1&pig=2&chicken=3&cow=4
ในการรับค่าแบบ query string นี้ เราจะแปลง string ยาวๆ นี้ให้กลายเป็น array ดังนั้นการนำไปใช้ก็จะเหมือนกับการรับค่าแบบ array เรามาดูกันครับว่าแปลงจาก query string เป็น array อย่างไร

<?php

function buy($animal){

// ถ้าหากค่าที่ส่งมาเป็น string ให้แปลงจาก string เป็น array
if(is_string($animal)){
	parse_str($animal, $animal);
}

	$animal['fish'] = isset($animal['fish']) ? $animal['fish'] : 0;
	$animal['pig'] = isset($animal['pig']) ? $animal['pig'] : 0;
	$animal['chicken'] = isset($animal['chicken']) ? $animal['chicken'] : 0;
	$animal['cow'] = isset($animal['cow']) ? $animal['cow'] : 0;
	echo "Buy : fish x $animal[fish], pig x $animal[pig], chicken x $animal[chicken], cow x $animal[cow]";

}

// Buy: fish x 1, pig x 0, chicken x 0, cow x 0
buy(array("fish"=>1, "cow"=>2));
buy("fish=1&cow=2");

?>

เขียนแบบนี้ก็จะทำให้รับค่าได้ทั้ง array และ query string ครับ ทีเด็ดอยู่ที่ function parse_str ครับ ถ้าอยากเห็นภาพมากขึ้นว่าในชีวิตจริงเค้าใช้กันแบบใหนก็นี่เลยครับ http://codex.wordpress.org/Function_Reference/query_posts

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

Blog

รวมบทความ โดยแยกออกเป็น 2 ประเภทคือ วิชาการ และ ทั่วไป ประเภทวิชาการก็จะเป็น ความรู้ ตัวอย่าง เกี่ยวกับ WordPress, jQuery, CSS และ Code Igniter เป็นหลักครับ ส่วน ประเภททั่วไป ก็คือทุกอย่างที่มันนอกเหนือจากประเภทความรู้นะครับ

Playground

สนามเด็กเล่นเป็นที่เก็บสะสมซอร์ฟแวร์ต่างๆ ที่เราทำขึ้นมาแจกเพราะ อยากทำ เห็นว่าทำแล้วมีประโยชน์ ตัวอย่างเช่น ปลั๊กอินสำหรับ WordPress, Theme และอื่นๆ ซึ่งตอนนี้ก็มีอยู่แค่โปรเจคเดียวคือ Chameleon CSS แต่ในปีนี้จะตั้งใจทำตรงนี้ให้มากขึ้นครับ

Services

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

สุดท้ายนี้ขอขอบคุณทุกคนที่เข้ามาดู ขอให้ปีนี้เป็นปีที่ดีสำหรับทุกคนครับ
ปล. เขียนดีดี นี่มันยากจังวุ้ย

ขอบคุณฟอนต์สวยๆ จาก http://www.f0nt.com/release/layiji-mahaniyom-1-5/

สิ่งที่ต้องใช้

• jQuery จาวาสคริปส์เฟรมเวิร์ค มันมีหลายแบบนะครับ เลือกเอาตามใจชอบได้เลย แต่ถ้าหาไม่เจอก็ คลิกเพื่อดาวน์โหลด jQuery 1.4.2 minified
• jClock ปลั๊กอินของ jQuery ถ้าหาที่โหลดไม่เจอก็ คลิกเพื่อดาวน์โหลด jClock

แนวคิด

หน้าที่ของ jClock คือวาง text บ่งบอกเวลา ลงใน html element (เช่น <p> <span> <div> เป็นต้น) ที่เรากำหนด ดังนั้นสิ่งที่เราจะทำคือ สร้าง html element ขึ้นมา กำหนด css เพื่อควบคุมการแสดงผล จัดรูปแบบให้สวยงาม เมื่อพอใจแล้วก็บอกให้ jClock ใส่เวลาลงใน element ที่ต้องการครับ

เริ่มกันเลย

เริ่มจากการออกแบบก่อนนะครับ อันนี้แล้วแต่ชอบเลยครับ ส่วนผมออกแบบได้ดังรูปด้านล่างครับ

เวลาออกแบบ ให้คิดไปด้วยนะครับว่าจะวางโครงสร้าง html และ css อย่างไร เมื่ออกแบบเสร็จแล้วก็สร้างไฟล์ html และ css ได้เลยครับ

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jclock.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {

var options_time = {
format: '%H:%M' // hour : minute
}

var options_day = {
format: '%A' // day
}

var options_dmy = {
format: '%d/%m/%Y' // dd / mm / yyyy
}

$('.clock-time').jclock(options_time);
$('.clock-day').jclock(options_day);
$('.clock-dmy').jclock(options_dmy);

});
</scripts>

</head>
<body>

<div class="clock-body">
<div class="clock-content">
<div class="clock-time">12:00</div>
<div class="clock-day">Monday</div>
<div class="clock-dmy">02/03/2009</div>
</div>
</div>

</body>
</html>

• บรรทัดที่ 04: เป็นการบอกเบราเซอร์ว่า ให้อ่านค่า style sheet จากไฟล์ style.css
• บรรทัดที่ 06 – 07: เป็นการบอกว่าเราจะขอใช้งาน jQuery และ jClock นะ
• บรรทัดที่ 10: เป็นรูปแบบพื้นฐานของ jQuery ครับ เป็นการบอกว่า ถ้าเว็บเพจโหลดเสร็จแล้ว ให้ทำสิ่งต่างเหล่านี้ (บรรทัด 11 – 27)
• บรรทัดที่ 12, 16, 20: เป็นการสร้างตัวแปรเพื่อเก็บค่า option ที่ใช้กำหนดการแสดงผลของ jClock จากแบบที่เราคิดไว้ จะแบ่งได้เป็น 3 ส่วน เราจึงใช้ 3 option ครับ
• บรรทัดที่ 24 – 26: เป็นการบอกให้ jClock นำค่าเวลาในแบบต่างๆ ตาม option ที่เรากำหนด ไปใส่ไว้ใน element ครับ ถ้ายังไม่มีพื้นฐานเกี่ยวกับ jQuery Selector ลองอ่านบทความนี้ดูนะครับ

.clock-body{
background-image: url(image/clock.jpg);
background-repeat: no-repeat;
width: 224px;
height: 127px;
font-family: Tahoma;
}

.clock-content{
padding: 15px 35px 15px 35px;
color: #707070;
}

.clock-time{
font-size: 3em;
letter-spacing: 8px;
text-align: center;
margin-bottom: 10px;
}

.clock-day{
float: left;
width: 70px;
font-size: 0.8em;
}

.clock-dmy{
float: right;
width: 80px;
font-size: 0.8em;
text-align: right;
}

ข้อมูลเพิ่มเติมเกี่ยวกับ option format ของ jClock

%a ชื่อวันอย่างย่อ
%A ชื่อวันแบบเต็มๆ
%b ชื่อเดือนอย่างย่อ
%B ชื่อเดือนแบบเต็มๆ
%d วันที่ 01-31
%H ชั่วโมง 00-23
%h ชั่วโมง 01-12
%m เดือนในแบบตัวเลข 01-12
%M จำนวนนาที
%p am หรือ pm
%P AM หรือ PM
%S จำนวนวินาที
%y ปีในแบบตัวเลขสองหลัก
%Y ปีในแบบตัวเลขสี่หลัก

Obbs & Basket

เริ่มแรกเราต้องสร้างเพจที่มีกบและตะกร้าก่อนนะคับ โดยสร้างไฟล์ html ไฟล์ obb.html ซึ่งจะทำหน้าที่เป็นหน้าเว็ปเพจของเรานะคับ และสร้าง style sheet ไฟล์ ชื่อ obb.css จากนั้นผูกทั้งสองไฟล์เข้าด้วยกัน เป็นอันเสร็จพิธี

<html>

<head>
<link media="screen" type="text/css" href="obb.css" rel="stylesheet">
</head>

<body>
<div class="obb" id="1"></div>
<div class="obb" id="2"></div>
<div class="basket"></div>
</body>

</html>

จะเห็นว่าเพจของเราจะมี กบ 2 ตัว และตะกร้า 1 ใบ
<div> คือ division ปกติเราจะใช้เพื่อเป็นตัวแทนของ section ที่เราสร้างขึ้นเอง เช่นในกรณีนี้ เราอยากทำกบ เราก็จะสร้าง <div> ซึ่งมี คลาสเป็น obb ส่วน id จะใช้ในการระบุว่าเป็นกบตัวใหน ซึ่งเดี๋ยวเราจะเขียน css ขึ้นมากำหนดว่า div ที่มีคลาสเป็น obb ให้แสดงเป็นรูปกบนะ นั่นเอง

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

• style สำหรับ standard html tag เช่น <p> เป็นต้น
  
• style สำหรับ custom tag ซึ่งเราจะใช้ <div> และ <span>

ดังนั้นตัวอย่างนี้ผมก็เลยใช้ <div> ครับ ความแตกต่างของ <div> และ <span> คือ <div> จะมีลักษณะเป็น “Block Element” คือมันจะไม่เรียงต่อๆ กัน จะอยู่กันคนละบรรทัด  ส่วน <span> นั้นเป็น “Inline Element” ถ้ามีหลายๆ อันมันก็จะเรียงต่อๆ กันไปจนสุด แล้วมันก็จะขึ้นบรรทัดใหม่ครับ

ต่อด้วย obb.css นะคับ

div.obb{
background-image: url(obb.gif);
width: 40px;
height: 30px;
float: left;
margin-right: 10px;
}

div.basket{
background-image: url(basket.gif);
width: 50px;
height: 35px;
float: right;
margin-right: 300px;
}

Let’s move

เราจะใช้ JQuery + JQuery UI ซึ่งเป็น Java library ซึ่งจะทำให้เราเขียน Java scripts ไ้ด้ง่ายขึ้น
พอโหลด JQuery และ JQuery UI เสร็จแล้ว เอาไฟล์ไปไว้ใน folder ที่ต้องการ แล้วก็แก้ไข obb.html ดังนี้คับ

<html>

<head>
<link media="screen" type="text/css" href="obb.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('div.obb').draggable({revert: true});
});
</script>

</head>

<body>
<div class="obb" id="1"></div>
<div class="obb" id="2"></div>
<div class="basket"></div>
</body>

</html>

บรรทัดที่ 5: ขอใช้ jQuery library
บรรทัดที่ 6: ขอใช้ JQuery UI library
บรรทัดที่ 9-11: เป็นการบอก ถ้าเพจนี้โหลดเสร็จ ให้ทำคำสั่งนี้นะ ซึ่งก็คือ บรรทัดที่ 11 นั่นเอง
บรรทัดที่ 10: $(‘div.obb’) คือ select ซึ่งหมายถึง element div ที่มี class=”obb” นั่นเอง รายละเอียด

Catch them!

ขั้นนี้เราจะกำหนดจุดปล่อยกบ ซึ่งก็คือตะกร้า เพิ่มโค้ดเข้าไปใน obb.html

<html>

<head>
<link media="screen" type="text/css" href="obb.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('div.obb').draggable({revert: true});
$('div.basket').droppable({
accept: 'div.obb',
drop: function(ev,ui){
ui.draggable.fadeOut();
}
});
});
</script>

</head>

<body>
<div class="obb" id="1"></div>
<div class="obb" id="2"></div>
<div class="basket"></div>
</body>

</html>

• บรรทัดที่ 11: บอกว่า <div class=”basket”> เป็น drop zone
• บรรทัดที่ 12: รับเฉพาะ <div class=”obb”>
• บรรทัดที่ 13-14: เมื่อกบถูก drop ให้ทำตามนี้นะ

Conclusion

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

แนะนำตัวละคร

ผมจะอธิบายด้วยภาพนะคับ แขกรับเชิญคือกบน้อยน่ารักผู้พิทักษ์แห่งดวงจันทร์ 3 ตัว ชื่ออีแดง อีเขียว และ อีน้ำเงินนะคับ ทั้งสามตัวรักกันเหมือนพี่น้อง แต่ละตัวมีไข่ตัวละ 2 ฟอง (ถ้ารู้สึกว่าไร้สาระก็ข้ามไปเลยนะคับ – -” อันนี้ผมไม่บังคับ)

• กบแต่ละตัวก็คือ tag DIV ซึ่งมี class=”obb” จำแนกแต่ละตัวด้วย id ที่แตกต่างกันคับ
• ส่วน tag P ซึ่งมี class=”obb-word” ก็คือคำพูดของกบแต่ละตัว ไม่จำเป็นต้องมี id เพราะมันอยู่ใน DIV ซึ่งมี id แตกต่างกัน
• ส่วนไข่แต่ละฟองก็คือ tag DIV ซึ่งมี class=”egg” จำแนกไข่แต่ละฟองด้วย id จะเห็นว่าไข่ของกบแต่ละตัวมี id ซ้ำกัน แต่ไม่ใช่ปัญหาคับ เราสามารถระบุไข่ฟองใดก็ได้ เพราะแม่ของมันมี id แตกต่างกันแล้ว จะอธิบายให้เห็นภาพในภายหลังนะคับ

พื้นฐาน

ผมจะอธิบายโดยอิง jQuery Core API เป็นหลักนะคับ เรามาเริ่มกันที่ Selectors – Basic

* คือ เอาหมดเลย สมมติว่าเราโค๊ดว่า $(“*”).hide(); แบบนี้ ทุกอย่างในเว็บเพจของเราก็จะถูกซ่อนคับ

element ก็คือ tag ต่างๆ เช่น SPAN, DIV, P, B, I, U และอีกมากมาย เวลาใช้ก็ไม่ต้องใส่เครื่องหมายอะไร ใส่ชื่อ element ไปเลยเช่น ต้องการเลือกทุก DIV ก็ $(“div”) ในตัวอย่างนี้ $(“p”) จะเป็นการเลือกคำพูดกบ

. คือ คลาส เวลาใช้ก็คือ . ตามด้วยชื่อคลาส เช่นเราต้องการเลือกไข่ทั้งหมด ก็ $(“.egg”) กบทุกตัวก็ $(“.obb”) แต่ถ้าต้องการเจาะจงว่าจะเอาไข่เบอร์ 1 เท่านั้นก็

# คือ id เวลาใช้ก็เอา # ตามด้วย id ที่เราต้องการ เช่นเราต้องการเลือกเฉพาะกบแดงก็ $(“#obb-red”) อยากได้แค่กบเขียวก็ $(“#obb-green”) ในตัวอย่างจะเห็นว่า $(“#egg-1″) จะได้ไข่เบอร์หนึ่งของกบทุกตัว ถ้าเราอยากได้แค่ไข่เบอร์หนึ่งของกบแดง ก็ต้องใช้ $(“#obb-red > #egg-1″) ซึ่งจะอธิบายในบทถัดไปนะคับ

, คือ union ถ้ามองเป็นเซ็ตก็คือการเอาผลลัพธ์ของเงื่อนไขแต่ละชุดมา union กัน จากตัวอย่าง เราจะได้ กบแดง + กบน้ำเงิน + element P (ซึ่งก็คือคำพูดของกบทุกตัว) ก็จะได้ผลลัพธ์ดังรูป

เพิ่มเติม การพิมพ์เงื่อนไขติดกันหมายความว่า สิ่งที่เราต้องการนั้น มันต้องมีทั้งสองเงื่อนไข ยกตัวอย่างเช่น $(“div.obb#obb-red”) หมายความว่าเราต้องการ element DIV ที่มี class=”obb” และ id=”obb-red” ซึ่งถ้าดูตามตัวอย่างนี้ เราจะได้ผลลัพธ์เช่นเดียวกับ $(“.obb#obb-red”) = $(“#obb-red”) = $(“div#obb-red”) เป็นเรื่องที่ไม่ยาก หลายคนอาจรู้แล้ว ผมหวังว่าจะเป็นประโยชน์ต่อเด็กๆ ที่หลงเข้ามานะคับ ในบทความถัดไปจะเป็นเรื่องเกี่ยวกับ Selectors – Hierarchy คับ ถ้ามีจุดบกพร่องหรืออยากให้ผมปรับปรุงในส่วนใหนขอให้บอกนะคับ ผมจะได้นำไปแก้ไข ขอบคุณคับ

รูปแบบการเล่นเป็นแบบ Point and Click คือเอาเมาส์ไปชี้วัตถุต่างๆ คลิก แล้วตัวละครมันก็จะเข้าไปทำอะไรซักอย่างกับวัตถุนั้น ฟังดูอาจรู้สึกว่าแล้วมันจะสนุกเหรอ อันนี้ต้องลองแล้วจะรู้คับ

ผมจะยกตัวอย่างความประทับใจที่ผมได้ระหว่างที่เล่นเกมส์นี้นะคับ

นี่เป็นตัวอย่างภาพในเกมส์คับ เป็นเกมส์สองมิติ แต่ภาพสวยมาก เล่นแล้วรู้เลยว่าคนทำเค้ามีความสุขที่ได้ทำ พระเอกคือหุ่นหน้ามึนๆ ตรงสะพานอ่ะคับ เห็นนกฮูกบนเสาไฟฟ้ามั้ยคับ มันจะเลียนแบบเรา เวลาเรายืดตัวมันก็จะยืดตัวตาม เดินมันก็เดินตาม น่ารักดีนะคับ และพฤติกรรมนี้แหละคับจะนำไปสู่การแก้ปริศนา

เวลาเราทิ้งเครื่องไว้นาน หุ่นมันจะคิดถึงความหลัง ครั้งที่ได้อยู่กับแฟน แต่ตอนนี้แฟนมันโดนจับไปซะแล้ว

มีมินิเกมส์มากมายแทรกอยู่ตลอดเกมส์คับ ซึ่งผมคิดว่ามันฝึกสมองดีมากคับ ถ้าเล่นไม่ชนะก็จะติดแหงก ก็ต้องพยายามเอาคับ พอไปต่อได้มันจะรู้สึกว่า เฮ้ยเราไม่ได้โง่หนิ – -” (เวลาเล่นแล้วติด ไม่ควรดูบทสรุปนะคับ เหมือนเล่นดอทเอแล้วแฮคแมพอ่ะคับ มันสนุกนักใช่มั้ย ห๊ะะะ out pai!!! อ่าขอโทษคับ)

ยังมีสิ่งน่าประทับใจอีกมากมายนะคับ แต่ผมขี้เกียจซะแล้ว -/\- ใครที่อยากลองเล่น คลิกที่นี่เลยนะคับ ถ้าชอบขอให้ช่วยสนับสนุนลิขสิทธิ์ด้วยนะคับ ขอยอมรับว่าผมโหลดเกมส์นี้มาจากเว็บบิท แต่หลังจากเขียนบทความนี้เสร็จผมจะไปซื้อแบบถูกลิขสิทธิ์แน่นอนคับ

ที่มา

ความจริงไม่มีเหตุผลนะครับ แต่ถ้าจะเอาซักหน่อยก็คงเป็นเพราะว่าผมชอบสีเขียว ชอบดูทุ่งหญ้า ชอบดูคนค้นคน (เอ๊ะยังไง)

วัตถุประสงค์

1. รับออกแบบและจัดทำเว็ปไซต์ ครบวงจร สำหรับองค์กรหรือกลุ่มคนที่ทำเพื่อคนอื่น เราก็ยินทำเว็ปให้คุณโดยไม่คิดตังค์ครับ
2. เขียนบทความจากประสบการณ์ ทั้งมีและไม่มีสาระ

ตอนนี้เว็ปอาจจะดูโล่งๆ ไม่มีอะไร แต่จะพยายามเพิ่มบทความเรื่อยๆ ครับ
และขอถือโอกาสเปิดเว็ปอย่างเป็นทางการครับ (ทุกคนโห่ร้องแสดงความยินดี)

ขอบคุณครับ

วันเวลาค่อยๆ ผ่านไป จากวินาทีเป็นนาที จากนาทีเป็นชั่วโมง ช่างยาวนาน จะนอนก็นอนไม่หลับ จะต้องทนกับความรู้สึกนี้อีกนานเพียงใด จันทร์เจ้าเอ๋ย ตอบฉันที

วันที่ 17 กันยายน 2552 : 15.00 น. ไม่ไหวแล้วเสียดายตังค์ว่ะ โทรไปถามทางสำนักจัดหางานหน่อยละกัน

ผม: พี่ครับ คือนัดรายงานตัวครั้งที่ 2 ของผมคือวันที่ 15 กันยายน 2552 แต่ผมลืมอ่ะครับ
ผู้มีพระคุณ: งั้นน้องรีบมาเลยนะ
ผม: ขอบคุณมากครับ จะไปเดี๋ยวนี้เลยครับ

จากนั้นก็เดินทางไปที่สำนักงานจัดหางานเพื่อรายงานตัว เป็นอันจบพิธี ได้ตังค์มาใช้ ฮี่ๆ

ข้อมูลเพิ่มเติมสำหรับคนที่จะไปขอรับเงินชดเชยนะครับ

1. ก่อนอื่นเราต้องไปลงทะเบียนที่สำนักจัดหางานใกล้บ้านก่อนนะครับ แผนที่ เอกสารที่ต้องใช้คือ สำเนาบัตรประชาชน สำเนาหน้าบัญชีเงินฝาก
2. เมื่อลงทะเบียนเสร็จแล้ว เจ้าหน้าที่เค้าจะให้ใบนัดรายงานตัว
3. ไปรายงานตัวตามนัด หรือไปล่วงหน้า 1-3 วันครับ หลังจากรายงานตัว ภายใน 5 วันทำการเค้าจะโอนเงินเข้าบัญชีเราครับ

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

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

สิ่งที่ต้องมี

1. Blueprint CSS Framework ความจริงมันมีหลายเจ้านะครับ แต่ที่ผมเลือกตัวนี้เพราะว่า ผมเคยทำแต่ตัวนี้ …
2. ไฟล์ HTML 1 ไฟล์เอาไว้ลองครับ
3. หมดละครับ

เข้าใจ Blueprint

ก่อนอื่นเรามาทำความเข้าใจแนวคิดของคนทำ Blueprint ก่อนนะครับ Blueprint จะมองหน้าเว็ปเพจว่ามีความกว้าง 950 px นะครับ โดยจะถูกแบ่งเป็น Grid ซึ่งมีความกว้าง 30 px จำนวน 24 Grid แต่ละ Grid มีระยะห่างกัน 10 px ตามภาพประกอบ 1.2ก นะครับ แล้วทำไมต้องรู้ด้วย เพราะว่าเวลาเราจะวางข้อมูล เราก็จะต้องวางตาม Grid นะครับ แต่สุดท้ายเราก็สามารถปรับแต่งได้อยู่ดีครับ มันช่วยให้เราวางโครงเป็นระบบมากขึ้น ทำให้เราทำงานได้เร็วขึ้น

ลงมือปฎิบัติ

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

<html>

<head>

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen,projection"><![endif]-->
<link rel="stylesheet" href="css/mystyle.css" type="text/css" media="screen, projection">

</head>

<body>

<div class="container">
<div id="header" class="span-24">Header</div>
<div id="side_bar" class="span-6">Sidebar</div>
<div id="main_content" class="span-17 push-1 last">
<div class="span-8">Column#1</div>
<div class="span-8 last">Column#2</div>
<div id="footer" class="span-24">footer</div>
</div>

</body>
</html>

• บรรทัดที่ 5-7 : เป็นการประกาศใช้ไฟล์ css ของ Blueprint ครับ บรรทัดที่ 5 จะพิเศษหน่อยเพราะมันเอาไว้แก้ปัญหาการแสดงผลของ IE ตั้งแต่เวอร์ชั่น 7 ลงไปครับ
• บรรทัดที่ 8 : เป็นการประกาศใช้ไฟล์ css ของเราเองนะครับ Blueprint ไม่ได้ทำให้เราทุกอย่าง อะไรที่เราอยากปรับแต่งเองก็เอาใส่ไว้ในไฟล์นี้ล่ะครับ
• บรรทัดที่ 14 : จะเห็นว่าผมสร้าง DIV ซึ่งมีคลาสคือ container ครอบไว้ ที่ต้องทำแบบนี้เพราะ Blueprint เค้ากำหนดไว้ครับ ว่าคลาสต่างๆ ที่เค้าเตรียมไว้ให้นั้น มันจะมีผลก็ต่อเมื่อมันอยู่ในคลาส container
• บรรทัดที่ 15 : คลาส span-24 เป็นการบอกว่า จะให้กล่องนี้มีความกว้าง 24 ช่องนะ เราเลือกได้ตั้งแต่ span-1 ถึง span-24 ครับ ส่วนไอดี header ผมเอาไว้ให้ mystyle.css ใช้ในการปรับแต่งครับ
• บรรทัดที่ 17 : push-1 คือการขยับไปทางขวาอีก 1 ช่องด้วยการเพิ่ม margin ครับ Blueprint เค้ามีคลาสอื่นๆ ให้ใช้อีกเยอะนะครับ ดูได้ใน screen.css เลยครับ ส่วนคลาส last ใส่ไว้เพื่อให้กล่องมันลงล็อคพอดีครับ เพราะว่าคลาส span โดยปกติจะมี margin-right: 10px ซึ่งถ้าเป็นแบบนี้หมด 24 อันจะเห็นว่ามันจะกลายเป็น 24 x (30 + 10) = 960 ซึ่งมันไม่ใช่ (ดูจากรูป 1.12ก นะครับ จะเห็นว่า Grid ขวาสุดจะไม่มีขอบด้านขวา) การใส่คลาส last ก็เพื่อบอกว่ามันเป็นบล็อคขวาสุดนะ ไม่ต้องมีระยะขอบ งงมั้ยเนี่ย ถ้างงกลับไปอ่านตั้งแต่บรรทัดแรก สิบรอบ ปฎิบัติ!

/* File mystyle.css นะครับ */

#header{
background: #e9e7cf;
}

#footer{
background: #eaaaaa;
}

#side_bar{
background: #b7dcff;
}

#main_content{
background: #b7dcff;
}

#main_content_header{
background: #ecd4ba;
}

#column_1{
background: #e4c8f2;
}

#column_2{
background: #ffd7d7;
}

ไฟล์นี้คงไม่ต้องอธิบายนะครับ เพราะมันก็ไม่มีอะไรให้งง # เอาไว้บอกว่า อะไรก็ตามที่มี id นั้น ให้แสดงผลตามนี้นะ เช่น ในส่วน #header ก็คือการบอกว่า อะไรก็ตามที่มี id เป็น header ให้มีสีพื้นหลัง #e9e7cf นะ

เมื่อเรียบร้อยหมดแล้ว ลองเปิด index.html ดูก็จะได้ดังรูปนี้ครับ  จะเห็นว่าระยะแนวนอนนั้นถูกต้องแล้ว แต่ระยะแนวตั้งนั้นยังต้องปรับ ซึ่งอันนี้เป็นหน้าที่ของเราโดยตรงนะครับ ในขั้นตอนนี้เราจะจัดระยะในแนวตั้งนะครับ ด้วยไฟล์ mystyle.css นั่นแหละครับ เอามาแก้ต่อได้เลย

/* File mystyle.css นะครับ */

#header{
background: #e9e7cf;
height: 150px;  margin-bottom: 30px;
}

#footer{
background: #eaaaaa;
height: 100px;
margin-top: 20px;
}

#side_bar{
background: #b7dcff;
}

#main_content{
background: #b7dcff;
}

#main_content_header{
background-color: #ecd4ba;
margin-bottom: 15px;
}

#column_1{
background: #e4c8f2;
}

#column_2{
background: #ffd7d7;
}

เสร็จแล้วก็จะได้ตามรูปนี้ครับ  ไม่สวยเลยใช่มั้ยครับ

สรุป

พอทำมาจนจบแล้วหลายคนอาจจะเห็นว่า ไม่เห็นสวยเลย มันดียังไงเนี่ย ห๊ะะะ ที่มันไม่สวยก็เพราะหน้าที่หลักของมันคือใช้สำหรับวางโครงสร้างครับ ข้อดีมันมีมากมายนะครับ

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

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

ขอขอบคุณ

• http://wiki.github.com/joshuaclayton/blueprint-css/quick-start-tutorial
• http://dontclickonme.com/2009/01/web-development-with-the-gimp-and-blueprint-css/