ก่อนที่เราจะเริ่มเขียนเว็บ เราก็ต้องมีโปรแกรมที่เอาไว้่เขียนก่อนจริงมั้ย
ซึ่งเจ้าโปรแกรมที่สามารถใช้เขียนเว็บได้นั้นก็มีเยอะซะเหลือเกิน ถ้าต้องเอามาพูดทุกตัววันนี้ก็คงไม่จบ
ดังนั้น...
เราจะเลือกมาเฉพาะโปรแกรมที่ใช้อยู่หรือเคยใช้ผ่านมือมาบ้างก็แล้วกัน
หรือใครมีตัวที่ถนัดมืออยู่แล้วก็ใช้ตัวนั้นไปก็ได้ไม่ว่ากัน
Notepad
 |
| จืดชืด ไร้สีสัน ทำไรไม่ค่อยได้มากสมกับเป็นของที่ Windows ให้ฟรีมา |
ข้อดีอย่างเดียวคือมันมากับเครื่องแล้วเปิดไฟล์ได้ครอบจักรวาล อืม...คงไม่มีใครไม่รู้จักมันนะ งั้น ข้าม!!
Notepad++
 |
| การมี ++ หมายความว่ามันต้องมีอะไรดีขึ้นล่ะน่า |
(อ่านว่าโน๊ตแพ็ด พลัสพลัส) เครื่องหมาย ++ เป็นเสมือนสิ่งเพิ่มความไฮโซให้ของข้างหน้ามัน จริงๆ ก็ไม่เข้าใจเหมือนกันว่ามี+ตัวเดียวไม่ได้เหรอ โน๊ตแพ็ดที่อัพเกรดขึ้นมาจากโน๊ตแพ๊ดอีกที แต่พูดๆ ไปความสามารถโดยรวมก็ไม่ได้ทิ้งห่างNotepadเวอร์ชั่นoriginalเท่าไหร่หรอกแต่อย่าดูถูกไป เพราะแค่นั้นก็เพียงพอที่จะใช้ทำงานได้แล้ว!!
ล้อเล่นนะครับ...ความจริงมันดีกว่าNotepadธรรมดามาก มีฟีเจอร์ที่ช่วยอำนวยความสะดวกให้คนเขียนเยอะแยะไป อย่างเช่น
การแบ่งสีโค้ดให้ ไม่ต้องตาลายแบบโน๊ดแพ็ดธรรมดาที่มีแต่ตัวหนังสือสีดำ
หรือการเช็คcodeสองเวอร์ชั่นว่ามีอะไรที่เหมือนหรือต่างกันแค่ไหน (version control)
ตลอดจนการsyncไฟล์ในเครื่องเรากับเครื่องserver
Sublime Text 2
เป็น Editor ที่เกิดมาสำหรับพวกชอบเขียนโปรแกรมจริงๆ ฟีเจอร์ค่อนข้างเยอะ ใช้ไม่หมด รวมถึงพวก Short-Cut คำสั่งอีกเพียบ (ไม่ค่อยได้ใช้อะไรมาก แต่รู้ว่ามันดี เป็นหนึ่งในตัวเลือกแรกๆ ที่เราจะใช้ 555) แต่ประเด็นคือมันเหมือนจะเป็นโปรแกรมฟรีแต่ไม่ฟรีจริงเท่าไหร่ คือมันยอมให้คุณโหลดมาใช้ได้โดยไม่เสียเงินแต่ใช้ๆ ไปก็จะเจอ dialog ชักชวนให้คุณไป Register กับมันเด้งขึ้นมาให้รำคาญใจอยู่บ่อยๆ
Netbeans
บางคนที่เขียน Java มาแล้วอาจจะคุ้นๆ กับชื่อ Editor ตัวนี้เพราะความสามารถหลักของมันไม่ใช่เขียนเว็บแต่เป็นเขียนโปรแกรมภาษาJava
อย่างไรก็ตาม...มันก็ใช้เขียนเว็บได้เหมือนกัน ฟีเจอร์ช่วยเขียนของมันก็มีเยอะ ใช้ประโยชน์ได้ดี ลองใช้ดูนะ recommended ให้เลยแล้วคุณอาจจะติดใช้กับฟังก์ชั่น Refactor, Remote-server, code-hint, history & version control และอื่นๆ อีกมากมาย
Adobe Dreamweaver
Adobe Dreamweaver สุดยอดโปรแกรมเขียนเว็บที่ตอนนี้เวอร์ชั่นล่าสุดคืออะไรก็ไม่รู้เพราะคนเขียนไม่เคยใช้ 55+
ขอดีของdreamweaverคือเรา “ลาก-แปะ” ได้ (ที่เขียนว่าdrag and dropอ่ะนะ) ที่เหลือไปหาเอาเองเพราะคนเขียนไม่รู้จะโฆษณาอะไรต่อดีเพราะไม่ได้ใช้ แต่ที่แน่ๆ คือโปรแกรมนี้มันไม่ฟรี!!
แล้วจะใช้ตัวไหนดีล่ะ?
4 โปรแกรมแรกที่แนะนำให้เป็นโปรแกรมจำพวก Text Editor ซึ่งชื่อก็บอกอยู่แล้วว่ามันเป็นตัวหนังสือพิมพ์ๆ เอา การใช้งานจำต้อง “พิมพ์” “พิมพ์” และ “พิมพ์เอง”
Notepad++, Sublime และ Netbeans นั่นก็คงพอจะได้เพราะมันถูกสร้างเอามาใช้พิมพ์ๆ อะไรพวกนี้อย่างเดียวอยู่แล้ว แต่คงไม่มีคนคิดจะใช้ Notepad ธรรมดาเขียนหรอกจริงมั้ย (ถ้าไม่จำเป็นจริงๆ)
ส่วนโปรแกรมสุดท้าย Dreamฯ เป็นโปรแกรมจำพวก WYSIWYG (What You See Is What You Get หรือคุณเห็นอะไร พิมพ์อะไรลงไป ผลลัพท์ก็ออกมาให้เห็นแบบนั้นแหละ)
ส่วนใหญ่developerแต่ละคนจะมีโปรแกรมที่ถนัดของตัวเองไม่เหมือนกัน
บางคนติดฟีเจอร์ของโปรแกรมนี้เลยไม่ยอมเปลี่ยนซะที
อีกคนอาจจะบ้าแบรนด์ประมาณว่าถ้าโปรแกรมมาจากค่ายที่ตัวเองชอบ จะดีไม่ดีไม่รู้ขอใช้ไว้ก่อน
สำหรับบางคนเขาก็ห่วงประสิทธิภาพการทำงาน ขอโปรแกรมเบาๆ ไม่กินทรัพยากรเครื่องมากนักอะไรแบบนี้
ดังนั้น...
อยากจะให้ทุกคนลองหา Editor ประจำตัวเอาไว้สักตัวสองตัว ใช้ให้คล่องก็เพียงพอแล้ว
แต่ถ้าถามว่าเราใช้อะไรก็ตอบว่าแล้วแต่งานละกัน โปรเจคใหญ่ๆ ส่วนมากจะใช้ Netbeans ส่วนงานเล็กๆ ไม่ต้องทำอะไรซับซ้อนมันจะใช้ Sublime รองลงไปคือ Notepad++
ถ้าถามว่าทำไมไม่ใช้ Dreamweaver ก็ขอตอบว่ามันเหมาะกับ Designer มากกว่า การให้โปรแกรมสร้าง code ให้จากการที่เราลากปะมันจะเป็น code ที่ค่อนข้างเละและไม่เป็นระเบียบ ซึ่งเป็นสิ่งที่โปรแกรมเมอร์ต้องเข้าไปเขียน script เพิ่ม ... ซึ่งมันไม่สนุกเลย
นอกจากนี้ก็ยังมี Addons ด้วยนะ
เวลาเราเขียนเว็บ ก็ไม่ใช่ว่าเราเขียนปุ๊บออกปั๊บทุกอย่างเป็นไปได้ดังใจ .. ปกติเขียนไปก็มีปัญหาโปรแกรมติดบั๊กบ้างอะไรบ้าง ซึ่งส่วนใหญาจะหรือไม่พ้น
- เขียน javascript แล้วผลไม่ออกมาแบบที่ต้องการ
- Layout เพี้ยน อยากปรับ position width height margin padding
- อยากลองว่าใส่ CSS หลายๆ แบบแล้วผลมันออกมายังไง (โดยไม่ต้องไปแก้งาน กดsave แล้วกลับมา refreshหน้าใหม่เพื่อดูผลลัพธ์)
- ตรวจจับการทำงานของ Ajax ที่เช็กยากเหลือเกินว่า Server ตอบอะไรกลับมา
- อยากดู cookie และข้อมูล header ไฟล์ต่างๆ
และอีกหลายๆ อย่างที่เป็นสารพัดปัญหา ซึ่งวันนี้เรามี Tool ดีๆ มาเสนอและ Recommended เป็นอย่างยิ่งให้ให้นักเขียนเว็บที่ยังไม่เคยใช้มัน จงใช้ซะแล้วมันจะทำให้ชีวิตคุณดีขึ้น
สำหรับเครื่องมือตัวแรกนั้นคือ Firebug ซึ่งใช้กับ FireFox (สำหรับ Google Chrome จะเป็น Developer Tool)
ก่อนที่เราจะใช้มันได้ เราก็ต้องไปโหลดเจ้า Firebug นี้มาติดตั้งให้ FireFox เสียก่อน
ซึ่ง Firebug นี้ก็เป็น Plug-in หรือโปรแกรมเสริมที่ช่วยทำให้ browser ของเราทำงานได้มากขึ้นนั่นแหละ
วิธีการติดตั้งก็แค่ไปที่ https://addons.mozilla.org/en-us/firefox/addon/firebug/ แล้วก็กดปุ่ม Add To Firefox รอมันดาวน์โหลดแป๊ปนึงก็เป็นอันเสร็จ
จากนั้น เพื่อจะเรียกใช้งานให้กดไอค่อนรูปแมลง (อี๊~!) หรือกดปุ่ม F12 ก็จะมีแถบโผล่ขึ้นมาประมาณนี้
ตัว Firebug จะมี main tabs หลักๆ เป็น
- Console - ใช้เพื่อดูการทำงานของ script ที่รันอยู่ รวมถึงแสดง log และแจ้ง error ที่เกิด ดูการรับ-ส่งของมูลตอนเรียก Ajax รวมไปถึงการสั่งรัน javascript สดๆ แบบ realtime ตอนนั้นได้เลย
- HTML - ใช้ดูลำดับและการจัดเรียง HTML ของหน้านี้ ซึ่งข้อดีคือเราสามารถจิ้มที่ HTML หรือ CSS เพื่อแก้ไขและดูผลได้ทันที
- CSS - ดู css (ซึ่งไม่ค่อยได้ใช้เพราะทั้แท็บ HTML ก็ถูกแบ่งครึ่งนึงให้แสดงค่า CSS ควบไปอยู่แล้ว)
- Script - ดู javascript ของหน้านี้
- DOM - ดูโครงสร้าง Document Object Model ทั้งส่วนของ HTML และ JSON
- Net - ดูการโหลดหน้าเพจและ resource ทั้งหมดซึ่งมันจะแสดงผลออกมาเป็นกราฟแท่งให้เลย
- Cookies - ดูคุกกี้ที่ browser เก็บอยู่ตอนนี้
ด
สำหรับคนที่ใช้ Chrome เป็นหลังก็ใช่ว่าจะไม่มีเครื่องมือแบบนี้ให้ใช้ซึ่งสามารถเรียกได้เลยโดยไม่ต้องติดตั้ง Plug-in เพิ่มเลย
เราสามารถเรียกมันใช้ได้ที่เมนู Menu > Tools > Developer Tool
หรือกด Ctrl + Shift + I
และถึงแม้ว่าการจัดวางและตำแหน่งของ panel จะไม่เหมือนของ Firebug แต่ฟังก์ชั่นการทำงานหลักๆ ก็ทำได้พอๆ กัน
