[Webdesign Tools] ปลั๊กอินเด็ด ๆ สำหรับเว็บดีไซน์เนอร์!!

[woratana]

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

--------------------------

เวอร์ชั่นมีรูปประกอบ + ลิงค์คลิกไปดาวน์โหลดปลั๊กอินได้เลย ใครสนใจเรื่องเว็บดีไซน์แวะไปเยี่ยมได้ครับ  :
http://www.designil.com/webdesign-tools-must-have-firefox-addons.html

[MaMa.Killer]

จัดไปครับ!!

[sugar]

  สูดยอดครับ + ให้แล้วครับ ถ้าไม่ดีเดี่ยวกลับมาลบ ยูสเลย 

[woratana]

สูดยอดครับ + ให้แล้วครับ ถ้าไม่ดีเดี่ยวกลับมาลบ ยูสเลย 

อ่านก่อน + ก็ได้ครับ  

[ริคาร์โด้กาก้า]

ขอบคุณครับ ชอบมากใช้ FF ประจำ +1แล้วเด้อ 

[เบจีต้าคุง]

แอบ อีก ขอบคุณครับ

[garnice]

  แจ่ม

[TBZS]

แจ่ม

[PR10]

แหล่มเลยคับ

+1 ( ติดไว้ก่อนคับ )