HTML+CSS Tools by akara

ก็ขอ re-use ของเก่านิดนึงละกันนะครับ
พอดีได้มีโอกาสไปพูดในงาน comkucamp#1 ซึ่งเป็นกิจกรรมของ
ชุมนุมนิสิตภาควิชาวิศวกรรมคอมพิวเตอร์ มหาวิทยาลัยเกษตรศาสตร์
รูปแบบงานก็คล้ายๆ barcamp นั่นแหละครับ แต่เป็นเวอร์ชั่น ม.เกษตร

หัวข้อที่ผมเอาไปพูดก็คือ Web design Tips & Technique 1.5
(ที่ต้องเป็น1.5 เพราะว่าทำ2ไม่ทัน ในslideเป็นของครั้งแรกที่พูดใน barcampbkk2 ซะครึ่งนึง)

ทีนี้ในslideก็จะมีหัวข้อนึงน่ะครับ ที่เกี่ยวกับเครื่องมือในการทำงานกับhtmlและcss
ซึ่งเดี๋ยวผมจะพูดต่อไปนี่แหละครับ ว่ามันมีเครื่องมืออะไรที่น่าใช้บ้าง
(ตกลงที่แพล่มไปตั้งนานนี่ไม่ได้เกี่ยวเลยใช่ไหม…. -_-”)

ก่อนอื่นเลยครับ ผมขอแบ่งเครื่องมือออกเป็น3ประเภทหลักๆคือ

1. เครื่องมือสำหรับการสร้าง html และ css (Creation)
2. เครื่องมือสำหรับการตรวจสอบการรับรองการทำงาานบนBrowserต่างๆ (Check Compatibility)
3. เครื่องมือสำหรับการแก้บั๊ก (Debug)

1. Creation

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

2. Check Compatibility

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

browser ที่ผมตรวจสอบนั้น ปกติแล้วก็จะมี Firefox , ie7 ,ie6 ครับ
(แต่สำหรับในเว็บนี้ ขอออกตัวไว้ก่อนเลยครับไม่ได้รับรองie6)

แต่ก็มีคำถามตามๆมาครับ ว่าแล้วจะเช็ค ie6 ยังไง ในเมื่อwindowเราลง ie7 ไปแล้ว
มันก็มีหลายๆวิธีน่ะนะครับ ทั้ง ietester , ie6 portable

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

XENOCODE สำหรับตัวนี้ไม่จำเป็นต้องลงโปรแกรมไว้ในเครื่องด้วยครับ
เพราะมันสามารถรันbrowserที่ท่านต้องการผ่านหน้าเว็บได้เลย
ซึ่งนอกจาก ie6 แล้ว xenocode ยังสามารถรันbrowserอื่นๆได้อีกด้วย (ลองไปเล่นกันดูเองละกันครับ)

3.Debug

จะมีใ้ช้ด้วยกัน2ตัวครับคือ firebug ซึ่งเป็น add-on อยู่บน firefox (คิดว่าหลายๆท่านน่าจะรู้จักกัน)

และ IE developer toolbar สำหรับ บน ie ครับ