Firebug – อุปกรณ์คู่ใจ Web Developer และอื่นๆที่เกี่ยวข้อง by

31
Mar
0

เป็น blog ในเดือนแรกที่เขียนลง levelup ในขณะฝึกงานครับ
โดยบทความนี้ขอเสนอ Add-on คู่ใจ web developer, facebook developer และ อื่นๆมากมาย

Firebug ซึ่งเป็น Add-on ที่มีให้ใช้ใน Firefox Browser เป็นหลัก
แต่ Browser อื่นๆก็สามารถ Download version lite มาใช้ได้
แต่จะมี feature ไม่ครบเหมือนใน Firefox นะครับ

เวปไซต์ http://getfirebug.com
หน้าดาวโหลด http://getfirebug.com/downloads หรือ search หา add-on บน Firefox
ดาวโหลดไปใช้ใน Browser อื่น http://getfirebug.com/firebuglite
Extension เสริม  http://getfirebug.com/wiki/index.php/Firebug_Extensions

โดยรุ่นล่าสุดจะอยู่ที่ 1.7 สำหรับ Firefox 4.0 (31/3/2011)

เมื่อติดตั้งและทำการเริ่ม Browser ใหม่แล้ว
เราสามารถเรียกใช้ Firebug ได้โดยง่ายๆเพียงแค่คลิ๊กขวาบนหน้าเพจ
ในบริเวณที่เราต้องการทราบ source code หรือต้องการ debug
แล้วเลือก Inspect Element ก็จะมีpanelด้านล่างโผล่ขึ้นมา
พร้อมโค้ตต่างๆในทั้งหน้าเวป โดยจะ mark ส่วนที่เราเลือกไว้
ยังมีลูกเล่นต่างๆที่เราสามารถลองดูได้
ซึ่ง UI ก็ถูกออกแบบมาให้ง่ายต่อนักพัฒนาเวปกันอยู่แล้ว

ddd

ฟีเจอร์และเทคนิคต่างๆของ Firebug
ล้วนแล้วแต่เป็นประโยชน์ต่อการทำงานและพัฒนาบนเวปไซต์อย่างยิ่ง
ฉะนั้นจึงควรรู้จักและหัดใช้ให้เกิดประโยชน์จะช่วยลดระยะเวลาได้เป็นอย่างดี
ฉะนั้นอย่าลืมเลยที่จะลง Firebug คู่กับ Firefox 4 กันนะครับ

concept เบื้องต้นเกี่ยวกับ html กับ php by

31
Mar
2

เนื่องจากผมเป็นเด็กฝึกงานใหม่ของ levelup และไม่มีพื้นฐานการเขียนเว็บมาก่อนเลย ดังนั้นเรื่องที่จะนำเสนอในคราวนี้ก็น่าจะเป็นเรื่องที่โปรแกรมเมอร์ส่วนใหญ่รู้ดีกันอยู่แล้ว (แต่ใหม่สำหรับผม 55) นั่นก็คือการเขียนเว็บด้วย html กับ php

เว็บไซต์ในปัจจุบันที่เราเปิดด้วย Web Browser ต่างๆ เช่น Firefox,IE  นั้น ส่วนใหญ่จะใช้ภาษา html (hypertext markup language) ในการแสดงผล  ซึ่งหากใช้ html ในการเขียนเว็บเพียงอย่างเดียว(สมัยก่อน) เราจะไม่สามารถให้บริการอะไรต่างๆแก่ user ได้นอกจากแสดงผลหรือนำเสนอข้อมูลเพียงอย่างเดียว (เรียกว่า Brochure Web) แต่ปัจจุบัน เว็บไซต์สามารถทำอะไรได้หลายอย่าง เช่น google สามารถ search หาข้อมูลได้ เป็นต้น ซึ่งการที่เว็บไซต์จะสามารถทำอะไรได้หลายๆอย่างมากกว่าแค่แสดงผลเฉยๆ จำเป็นต้องมีตัวช่วย ซึ่งในที่นี้ก็คือ php นั่นเอง

PHP เป็นภาษาจำพวก scripting language คำสั่งต่างๆจะเก็บอยู่ในไฟล์ที่เรียกว่า สคริปต์ (script) และเวลาใช้งานต้องอาศัยตัวแปรชุดคำสั่ง ตัวอย่างของภาษาสคริปก็เช่น JavaScript, Perl เป็นต้น ลักษณะของ PHP ที่แตกต่างจากภาษาสคริปต์แบบอื่นๆ คือ PHP ได้รับการพัฒนาและออกแบบมา เพื่อใช้งานในการสร้างเอกสารแบบ HTML โดยสามารถสอดแทรกหรือแก้ไขเนื้อหาได้โดยอัตโนมัติ ดังนั้นจึงกล่าวว่า PHP เป็นภาษาที่เรียกว่า server-side หรือ HTML-embedded scripting language เป็นเครื่องมือที่สำคัญชนิดหนึ่งที่ช่วยให้เราสามารถสร้างเอกสารแบบ Dynamic HTML ได้อย่างมีประสิทธิภาพและมีลูกเล่นมากขึ้น ง่ายๆคือ php จะทำการประมวลผลที่ฝั่ง server นั่นเอง ส่วนการใช้ php นั้นสามารถแทรกโค้ด php ลงไปในโค้ด html ได้ทันที โดยจะต้องมีเครื่องหมาย<? ?> คร่อมโค้ดส่วนที่เป็น php เอาไว้ เช่น

<html>

<body>

woww<br>

<?php $a=”woww”;

echo $a?>

</body>

</html>

OUTPUT

woww

woww

เพื่อง่ายต่อการเข้าใจมาดูภาพประกอบกันดีกว่า

ภาพจาก: www.noklek.com/wiki/index.php/PHP_&_MySQL_Bible

ภาพจาก: www.noklek.com/wiki/index.php/PHP_&_MySQL_Bible

จากภาพจะเห็นว่าเมื่อ user หรือ client ทำการร้องขอหน้าเว็บเพจที่เป็นแบบ php ไปยังเซิร์ฟเวอร์  เซิร์ฟเวอร์ก็จะเรียก  PHP  engine  ขึ้นมาแปลไฟล์  PHP  และติดต่อกับฐานข้อมูล  แล้วส่งผลลัพธ์ที่ได้จากการแปลและประมวลผลเป็นภาษา  html เพื่อนำไปแสดงผลให้ผู้ใช้ได้นำไปใช้งานต่อไป (ส่วนแสดงผลจะเป็นภาษา html ทั้งหมด)

จบไปแล้วสำหรับบทความเกี่้ยวกับ concept เบื้องต้น(มากๆ) ของ html กับ php ก็หวังว่ามันคงมีประโยชน์สำหรับผู้อ่านนะครับ  ขอบคุณที่อ่านครับ  -/\-

reference

http://203.172.220.170/opart/php/chapter1.html

http://www.rightsoftcorp.com/?name=news&file=readnews&id=11

การเปลี่ยนโค้ดจาก MX Compenent (Flex 3) มาเป็น Spark Component (Flex 4) by

30
Mar
0

จากครั้งที่แล้วที่ผมได้อธิบายถึงการเปลี่ยนโค้ดจาก Flex 3 มาใช้ใน Flex 4 นะครับซึ่งจะเป็นรูปแบบของโค้ดหรือการทำงาน ซึ่งในครั้งนี้ผมจะอธิบาย Component ต่างๆที่ส่วนมากจะถูกเปลี่ยนมาใช้กับ Spark ใน Flex 4 กันนะครับ

แท็กที่ถูกเปลี่ยนจาก MX มาใช้แบบ Spark

MX Component (Flex 3) Spark Component (Flex 4)
<mx:Button> <s:Button>
<mx:ButtonBar> <s:ButtonBar>
<mx:CheckBox> <s:CheckBox>
<mx:ComboBox> <s:DropDownList>
<mx:HorizontalList> <s:List>*
<mx:HRule> <s:Line>
<mx:HScrollBar> <s:HSlider>
<mx:List> <s:List>**
<mx:NumericStepper> <s:NumericStepper>
<mx:RadioButton> <s:RadioButton>
<mx:RadioButtonGroup> <s:RadioButtonGroup>
<mx:TextArea> <s:TextArea>
<mx:TabBar> <s:TabBar>
<mx:TextInput> <s:TextInput>
<mx:TileList> <s:List>***
<mx:ToggleButtonBar> <s:ButtonBar>
<mx:VideoDisplay> <s:VideoPlayer>
<mx:VRule> <s:Line>
<mx:VScrollBar> <s:VScrollBar>
<mx:VSlider> <s:VSlider>
<mx:Application> <s:Application>
<mx:Window> <s:Window>
<mx:WindowedApplication> <s:WindowedApplication>
<mx:Canvas> <s:Group>
<mx:HBox> <s:HGroup>
<mx:Panel> <s:Panel>
<mx:Tile> <s:Group>***
<mx:VBox> <s:VGroup>

*กำหนด Layout เป็น HorizontalLayout โดยใช้แท็ก <s:layout>

**กำหนด Layout เป็น VerticalLayout โดยใช้แท็ก <s:layout>

***กำหนด Layout เป็น TileLayout โดยใช้แท็ก <s:layout>

ตัวอย่างการใช้แท็ก Layout

<s:List>

<s:layout>

<s:TileLayout />

</s:layout>

</s:List>

แล้วอย่าลืมเปลี่ยน namespace อย่างที่ได้อธิบายใน การนำโปรเจ็คแอปพลิเคชั่นใน Flex Builder 3 ไปใช้งานใน Flash Builder 4 ไว้แล้วนะครับ เท่านี้ก็สามารถเปลี่ยน MX component ที่ใช้ใน Flex 3 มาเป็น Spark component ของ Flex 4 ได้แล้วล่ะครับ

Test Driven Development (TDD) by

30
Mar
2

ผมไปฟังพี่ @roofimon ในวัน Bug Day มา เลยเอามาแชร์ต่อ เนื่องจากปัญหาการ Develop งานแบบเก่าอาจเกิดปัญหาดังต่อไปนี้

  • ฝั่ง Programmer เขียน code มาแล้วส่งมาให้ Tester ปรากฏว่า Bug ตรึม Tester ก็โวยวายใส่ Programmer
  • Tester รายงานว่ามี Bug อะไรบ้างกลับไปให้ Programmer แล้วปรากฏว่า Programmer แก้ bug ตัวใหม่เสร็จ Bug ตัวเก่ากลับปรากฏขึ้นมาซ้ำทั้งๆ ที่แก้ไปแล้ว
  • เมื่อ Bug เกิดขึ้นหนึ่งครั้ง หาต้นตอของ Bug ยาก ไม่รู้เริ่มผิดตั้งแต่ตรงไหน ต้องมาพิมพ์ print ไล่ code ทีละส่วน
  • “เครื่องผมไม่เห็น bug เลย ทำไมเครื่องคุณ bug ล่ะ Test ยังไงเนี่ย”
  • “เมื่อวานยังไม่ Bug เลย ทำไมวันนี้มันพังตอน present ให้หัวหน้าดูได้(วะ)เนี่ย”
  • เมื่อเกิดปัญหาเช่น performance หรือต้องมีการแก้ไข Code ส่วน Core หลักที่ใช้งานทุกๆ ที่ จะไม่สามารถมั่นใจได้เลยว่าแก้ไปแล้ว Code เก่าที่อื่นจะ Bug หรือไม่
  • อื่นๆ อีกมากมาย

Test Driven Development (ต่อไปนี้ขอเรียก TDD) จะเข้ามาช่วยแก้ปัญหา หรือบรรเทาปัญหาเหล่านี้ลงได้ ซึ่งต้องมีการเขียน Unit Test (การทดสอบการทำงานของ Code ด้วย Code ทำให้สามารถสั่งรันแบบ automatic ได้) โดยมีหลักการดังนี้

Goal,Mission,Quest ระบบที่ Social Game ต้องมี by

30
Mar
0
Goal, Mission, Quest ทั้งหมดนี้เ็ป็นระบบคล้ายๆกันแหละครับ แค่แต่ละเกมเรียกกันคนละอย่าง
และอาจมีแตกต่างกันบ้างในเรื่องรายละเอียดเล็กๆน้อยๆ
รูปแบบหลักๆคือ เป็นระบบที่ช่วยชี้นำให้ผู้เล่นไปทำอะไรซักอย่างในเกม โดยที่ไม่ใช่เป็นการบังคับ
ประโยชน์ใช้สอยมีหลายอย่างครับ เช่น
  • ทำให้ผู้เล่นไม่ต้องคิดว่าจะทำอะไรดี
  • เป็น Tutorial สอนใช้ระบบอื่นๆในเกมได้
  • จุดปล่อย Events ต่างๆได้ เช่น Valentine ให้ตามหาดอกไม้ให้ครบ10ดอก
ตัวอย่าง
Goal ในเกม Cityville
Mission ในเกม Mafia war
Quest ในเกม Raven wood fair
กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ