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