เอนทรีในวันนี้จริง ๆ ก็คิดอยู่ว่าหลาย ๆ คนคงทราบอยู่แล้ว เกี่ยวกับปลั๊กอินต่าง ๆ ที่ช่วยให้เว็บบราวเซอร์หมาไฟของเราเหมาะกับการทำงานเว็บดีไซน์ยิ่งขึ้น แต่ก็กลัวว่าอาจมีบางคนที่พลาดเรื่องนี้ไป ก็เลยรวบรวมปลั๊กอินต่าง ๆ เอามาแนะนำกันครับ ใครไม่เคยใช้ Mozilla Firefox แนะนำให้ลองอ่านครับ (มีทั้งเวอร์ชั่น Mac และ Windows) ถึงมันจะอ้วนกว่า Google Chrome แต่ความสามารถเหนือชั้นกว่าเยอะเลยครับ!

1) Web Developer

ปลั๊กอินตัวนี้ไม่มีไม่ได้ครับ ตัวนี้ทำได้ทุกอย่างตั้งแต่ซ่อนรูป ปรับขนาดจอ ตรวจ HTML ไปจนถึงการแก้ไข CSS แบบ Real-Time (คือแก้ใน Sidebar ข้าง ๆ เสร็จ จะเห็นผลบนหน้าจอทันที แถมเซฟได้ด้วย) ถ้าใครไม่มีรีบไปโหลดมาเลยครับ ถ้าใครมีแล้วก็ลองเล่นคำสั่งต่าง ๆ ของมันดู ปลั๊กอินตัวนี้ซ่อนลูกเล่นไว้เยอะกว่าที่คิดมาก!

2) Firebug

ปลั๊กอินตัวนี้ความสามารถคล้าย ๆ ตัวข้างบนเลยครับ คือแสดง HTML/CSS ของหน้านั้น และแก้ได้แบบ Real-Time แต่ผมก็ลงไว้ทั้ง Firebug และ Web Developer นะครับ เพราะว่าตัว Firebug นี่ดีตรงมีใส่สี syntax ทำให้ตอนอ่านโค้ดไม่ปวดหัว ดูจาว่าสคริปต์ได้ มีตัว  Element Inspector ที่ถ้าเราเอาเม้าส์ไปชี้ตรงส่วนไหนของหน้า มันจะแสดงโค้ด HTML ตรงส่วนนั้นขึ้นมาทันที และแสดง CSS ที่เกี่ยวข้องกับส่วนที่เราชี้อยู่ให้ดูด้วย สะดวกมาก ๆ ครับ นอกจากนั้นยังมีปลั๊กอินของ Firebug อีกที เช่น FirePHP ที่เอาไว้ช่วยดีบั๊กโค้ด

3) ColorZilla

เครื่องมือเกี่ยวกับสีนี่เป็นสิ่งจำเป็นสำหรับการดีไซน์เว็บเลยครับ เช่น บางทีลูกค้าส่งหน้าเว็บตัวอย่างมาบอกว่าอยากได้โทนสีแบบนี้ แทนที่เราจะเข้า Photoshop ไปไล่หาสีที่ลูกค้าต้องการ เราก็เอาตัวดูดสีใน ColorZilla ไปดูดเลย จะได้โค้ดสีทั้งแบบ RGB: 0-255 หรือแบบ RGB: 0-100% หรือแบบ #RRGGBB พร้อมมีคำสั่งก็อปปี้โค้ดสีโดยอัตโนมัติด้วย นอกจากนั้นถ้าเราอยากได้สีอะไรสักสี แต่ขี้เกียจเปิด Photoshop เพื่อใช้แต่หน้าเลือกสี ปลั๊กอินตัวนี้ก็มีหน้าเลือกสีมาให้ด้วย ทีนี้ก็ไม่ต้องเปลี่ยนโปรแกรมไปมาบ่อย ๆ แล้ว

4) MeasureIt

ปลั๊กอินตัวนี้ทำงานตามชื่อเลยครับ เอาไว้วัดความยาวของสิ่งต่าง ๆ นั่นเอง เพราะบางครั้งเราต้องการวัดขนาดของบางส่วนในหน้าเว็บ แทนที่จะใช้วิธีจับภาพหน้าจอแล้วเอาไปใส่ Photoshop แล้ววัดอีกที สู้เอาปลั๊กอินตัวนี้วัดจะสะดวกกว่ามากครับ เหมาะกับเว็บดีไซน์เนอร์ตรงที่เอาไว้วัดขนาดพวกกล่อง div บนหน้าเว็บ เอาไว้คอยเช็คว่าความกว้างความยาวมันถูกต้องมั้ย หรือว่ามีพื้นที่ว่างเหลืออีกกี่ pixel เป็นต้นครับ

5) IE Tab

เคยมั้ยครับที่ตอนออกแบบเว็บไซด์ต้องเปิดเว็บเราทั้งใน Internet Explorer และ Firefox พร้อมกัน แล้วเปลี่ยนโปรแกรมสลับไปสลับมา ปลั๊กอินตัวนี้ช่วยให้เราเปิดหน้าเว็บไซด์ด้วย IE แต่แท็บจะโผล่ใน Firefox ของเราครับ ทำให้เราไม่ต้องคอยสลับโปรแกรม แค่เปลี่ยน Tab ก็พอ เสียดายที่ใช้ไม่ได้ใน Mac OS ครับ (เพราะมันไม่มี IE ลงในเครื่อง)

6) Dust-Me Selectors

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

7) Pencil

ปลั๊กอินตัวนี้เอาไว้ออกแบบ Prototype ของหน้าเว็บครับ ซึ่งส่วนใหญ่ในทำงานเว็บดีไซน์เล็ก ๆ เราจะไม่ค่อยได้ทำส่วนนี้ สำหรับ Prototype ของเว็บจะเอาไว้ให้ลูกค้าดูก่อนเริ่มทำงานจริง ๆ ครับ เผื่อว่าลูกค้าชอบไม่ชอบส่วนไหนยังไงจะได้แก้ไขกันทัน (อาจใช้วิธีวาดร่างในกระดาษเอา หรือทำจาก Powerpoint/Keynote ก็ได้ครับ) ปลั๊กอินตัวนี้จะมีเครื่องมือต่าง ๆ สำหรับออกแบบมาให้อยู่แล้ว แค่เราลากของที่ต้องการไปใส่ในหน้ากระดาษก็พอ ลองไปโหลดมาใช้กันดูครับ

รวบรวมปลั๊กอินมาได้ทั้งหมด 7 ตัวครับ

ถ้าใครมีปลั๊กอินตัวไหนจะแนะนำก็คอมเม้นท์ทิ้งไว้ได้เลยครับ ขอบคุณครับ!

บทความ Web Design น่าอ่าน

• [Free PSD] แจก 30 เว็บไซต์ดาวน์โหลดไฟล์ PSD - Photoshop เว็บดีไซน์ฟรี ๆ!!
• Free WordPress Theme แห่งปี 2011 !! รวมธีมฟรี สวย น่าใช้งาน มาให้เลือกโหลดกัน
• รวมโปรแกรมสำหรับเขียน HTML & CSS Editor บน Windows !!
• [Free Download] แจก 20 โปรแกรม Portable สำหรับเว็บดีไซน์เนอร์~!!
• [CSS Tips] อยากใช้ CSS3 ใน IE6 ทำไง + Validate CSS ตระกูล -moz- ยังไงให้ผ่าน?