สวัสดีครับ ขออภัยที่ไม่ค่อยได้มาเขียนนะครับ เพราะหลังจากปิดเทอมก็ต้องรีบปั่นงานให้ทัน Deadline ไม่ได้หยุดพักกันเลยทีเดียว
วันนี้อยากจะช่วยเหลือเพื่อน ๆ ที่สนใจด้านเว็บดีไซน์แต่ไม่รู้ว่าจะใช้เครื่องมืออะไรดี ด้วยการแนะนำโปรแกรมและปลั๊กอินต่าง ๆ ที่ผมใช้ทำเว็บไซต์ครับ
บทความนี้จะแบ่งเป็นหลายส่วน ภาค 1 นี้จะพูดถึงโปรแกรมที่ใช้เขียนโค้ด HTML & CSS กันก่อนว่าผมใช้โปรแกรมอะไร ต้องขออภัยคนที่ใช้ Mac OS ด้วยนะครับเพราะผมใช้ Windows เลยจะแนะนำแค่โปรแกรม Windows ครับผม
ออกตัวไว้ก่อนว่าเว็บดีไซเนอร์แต่ละคนมีความถนัดและไม่ความชอบไม่เหมือนกัน เพราะฉะนั้นเครื่องมือที่ใช้ทำเว็บจะแตกต่างกันบ้างครับ (เช่น บางคนถนัด Dreamweaver ที่มี Preview เว็บให้ดูด้วย แต่อีกคนชอบเขียนโค้ดใน Notepad มากกว่า เป็นต้นครับ)
โปรแกรมเขียนโค้ดที่ดีควรทำอะไรได้บ้าง
- Syntax-Highlight
ใส่สีที่แตกต่างกันบนแท็ก HTML / CSS ช่วยให้โค้ดอ่านง่ายขึ้นครับ ตอนอ่านจะได้ไม่สับสน - File Explorer
หน้าต่างลิสต์โฟลเดอร์ / ไฟล์เอาไว้เลือกไฟล์ที่จะเปิดมาแก้ได้ง่าย ๆ เหมาะกับงานที่มีหลาย ๆ ไฟล์ เช่น ทำธีม WordPress - Project Management
แบ่งงานเป็นโปรเจค เหมาะกับคนที่รับทีละหลาย ๆ งาน ข้อดีคือเราจะแยกแยะได้ง่ายเวลาต้องทำโปรเจคนู้นแล้วกลับมาทำโปรเจคนี้ต่อ โปรแกรมจะเปิดไฟล์ / โฟลเดอร์ของโปรเจคนั้น ๆ ขึ้นมาให้เลย - Themes
โปรแกรมเปลี่ยนธีม (สีของ Background / สีของ Syntax-Highlight) ได้ อันนี้จริง ๆ แล้วแต่คนชอบครับ เพราะผมชอบเขียนโค้ดบน Background สีเข้ม ถ้าเป็น Background สีขาวมันดูแสบตา - Autocomplete
เป็นการเดาโค้ดได้ว่าเราจะพิมพ์อะไรต่อ แล้วเติมให้เลยครับ เช่นว่าผมจะพิมพ์ <div>บลาๆ</div> แต่แค่พิมพ์ถึง </ โปรแกรมก็รู้แล้วว่าจะพิมพ์ </div> เป็นต้นครับ
อีกตัวอย่างนึงคือ พอพิมพ์โค้ด CSS ว่า list-style: เสร็จก็จะมี properties ต่าง ๆ ที่ไว้ใส่ใน list-style:โผล่ขึ้นมาให้เห็นเลย - Multiple Files Opening
เปิดได้ทีละหลาย ๆ ไฟล์พร้อมกัน โปรแกรมส่วนใหญ่จะทำได้อยู่แล้วครับ มีประโยชน์มากสำหรับงานใหญ่ ๆ เช่นงานแนว Web Application เราก็เลือกเปิดเฉพาะไฟล์ที่เกี่ยวกับฟังก์ชั่นที่กำลังทำอยู่ก็พอครับ - Free or Affordable Price
อันนี้สำคัญที่สุดเลยครับ (สำหรับคนที่ทำงานด้านนี้จริงจัง) โปรแกรมควรจะมีราคาในระดับที่รับได้ หรือถ้าฟรีเลยก็ยิ่งดีครับ ช่วยลด Cost ในการทำเว็บดีไซน์ได้มากเลย
ใช้โปรแกรมเขียนโค้ด HTML CSS ตัวไหนมาบ้าง แต่ละตัวเป็นยังไง?
ตอนทำเว็บแรกเริ่มเลยผมใช้ EditPlus ครับ เชื่อว่าน่าจะเคยได้ยินกัน และบางคนคงใช้อยู่ด้วย แต่มันเป็นโปรแกรมเสียตังค์ครับ และฟีเจอร์ต่าง ๆ ของโปรแกรมสามารถหาได้ในโปรแกรมเขียนโค้ดแจกฟรีทั่วไปแล้วครับ (ยกเว้นเอามา Compile Java ซึ่งสะดวกดี… แต่ไม่เกี่ยวกับ HTML CSS นี่เนอะ)
ต่อมาหลังจากผมได้รู้จัก Notepad++ ก็ใช้โปรแกรมนี้ทำงานมายาวเลยครับ ข้อดีคือธีมสวย (ชอบธีม Monokai ของมันมาก) โปรแกรมเบา โหลดเร็ว ฟังก์ชั่นพร้อมมาก ๆ แต่ข้อเสียคือทำเป็นโปรเจคไม่ได้ และความสามารถด้าน Autocomplete ไม่ค่อยเวิร์กครับ (เช่นว่าไฟล์ .php จะไม่มี autocomplete โค้ด HTML ให้เลย)
หลังจากนั้นผมก็หนีไปใช้ Mac OS ชั่วคราวครับ ใช้โปรแกรมชื่อ Coda ที่อินเตอร์เฟซสวยงาม + FTP เข้าไปแก้ไฟล์ได้เลย ชอบมากครับ ก่อนจะมาเจอ Espresso ที่ชอบระบบโปรเจคของโปรแกรมนี้มากกว่า ซึ่งใช้ไปสักพักนึง Macbook พังแถม Apple ไม่แคร์ครับ เลยกลับมาใช้ Windows
แน่นอนว่าใช้ Notepad++ เหมือนเดิมครับ โปรแกรมนี้โหลดเร็วดีชอบมากครับ เปลี่ยนธีมได้ด้วย แต่ด้วยเรื่อง Autocomplete นี่แหละที่เป็นปัญหาใหญ่ (จริง ๆ ก็ไม่ใหญ่ครับ แต่ถ้า Autocomplete ได้รับรองงานเร็วกว่าเดิมมากครับ)
เพื่อนแนะนำ Dreamweaver ให้ลองใช้ครับ ส่วนตัวไม่ชอบ Dreamweaver ตรงที่ดูมันใหญ่ โหลดช้า และฝังใจมาตั้งแต่ตอนเรียนว่าโปรแกรมนี้ไว้ใช้ด้าน WYSIWYG (What you see is what you get คือตกแต่งเหมือนใน Word เลย ไม่ต้องรู้โค้ด จิ้ม ๆ เครื่องมืออย่างเดียว)
อย่างสุดท้ายที่ไม่ชอบคือ มันเปลี่ยนธีมไม่ได้ครับ ไม่ชอบเขียนโค้ดใน Background ขาวครับ (แอบ Art 55)
แต่มารู้ทีหลังว่า Dreamweaver ทำธีมเองได้นะครับ เพื่อนคนที่แนะนำทำธีมสีดำมาให้ใช้เลย ก็เลยเอาไปใช้กับโปรเจค Web Application เว็บนึงครับ ชอบมาก ๆ โปรแกรมมี File Explorer ให้พร้อม และ Autocomplete ได้เทพมาก เสียอย่างเดียวตรงที่ราคาออกจะสูงไปนิดครับ
ใช้ไปสักพักเพื่อนคนเดิมก็มาแนะนำโปรแกรมตัวใหม่ให้ครับ นั่นคือ Komodo Edit 6 ตัวนี้เป็นโปรแกรมที่ใช้อยู่ปัจจุบันเลยครับ ข้อดีคือ มันทำได้ทุกอย่างตามที่ผมลิสต์ไว้ข้างบนครับ
Autocomplete ทำได้เนี้ยบมาก แบ่งไฟล์เป็นโปรเจคจัดการได้ง่ายดี มีธีมให้เลือกใช้หลากหลายตามความชอบ โปรแกรมไม่หนักเกินไป ที่สำคัญมันฟรีด้วย ตอนนี้เอาไปใช้กับโปรเจคนึงเสร็จไปแล้ว คิดว่างานต่อ ๆ ไปก็จะใช้บริการโปรแกรมนี้ต่อครับ
สนใจ KOMODO EDIT 6 ไปหาได้ที่ไหน?
สำหรับท่านที่สนใจดาวน์โหลดโปรแกรมนี้ไปลองใช้กัน ไปที่
Komodo Edit: Free Open Source Editor
กดที่ปุ่ม Download Komodo Edit นะครับ ส่วนโปรแกรม Komodo IDE จะเป็นโปรแกรมเสียตังค์ของตระกูล Komodo ครับ เราเขียนโค้ด HTML & CSS ใช้แต่ตัว Edit ก็พอครับ
สำหรับท่านที่ต้องการดาวน์โหลดธีมสำหรับใช้ใน Komodo Edit เข้าไปโหลดที่: Kolormodo.com ได้เลยครับ มีธีมสวย ๆ ให้เลือกโหลดไปใช้กันฟรี ๆ
แล้วถ้าเขียน PHP ใช้โปรแกรมอะไรดี?
โปรแกรม Komodo Edit ไว้เขียน PHP ได้ด้วยครับ และมี Autocomplete เรียบร้อยเลย เรียกได้ว่าโปรแกรมเดียวทำได้ทั้ง Backend / Frontend เลยครับ
สุดท้ายนี้ถ้าท่านใดมีโปรแกรมที่ใช้อยู่แล้วถนัดมือ สามารถแนะนำมาได้เลยครับ ผมจะได้ไปลองแล้วเอามาเขียนบอกครับ ^^
ขอบคุณที่ติดตามอ่านมาจนจบคร้าบ ตอนต่อไปจะพูดถึงเครื่องมือไว้เทสดีไซน์ใน Browser ต่าง ๆ
แหล่งที่มา : https://www.designil.com/webdesign-toolbox-1-web-code-editor.html