เตรียมเครื่องมือสำหรับทำเว็บไซต์

ต้องขอบอกก่อนว่าบทความนี้ความยากอยู่ในระดับหนึ่ง หากไม่เข้าใจในข้อใดก็ไม่ต้องกังวล เพราะเครื่องมือที่กล่าวถึงในหัวข้อนี้นั้นส่วนใหญ่จะถูกใช้งานโดยมืออาชีพ เครื่องมือแต่ละตัวมีความสามารถหลากหลายและทำงานได้หลายอย่าง สำหรับมือใหม่อาจมีบางเรื่องที่ไม่เข้าใจ หากสงสัยสามารถโพสถามได้ในเว็บบอร์ด เครื่องมือที่แนะนำต่อไปนี้จะเน้นการใช้งานร่วมกับ HTML , CSS , PHP , MySQL , Javascrip เป็นหลัก

ก่อนอื่นก็จะแบ่งประเภทของเครื่องมือที่ใช้ในการทำเว็บไซต์ได้ดังนี้

1.เครื่องมือในการย้ายไฟล์จากเครื่องของเราไปยังเครื่อง server วิธีการที่ใช้คือ FTP นั่นเอง

2.เครื่องมือสำหรับแก้ไข code

3.เครื่องมือสำหรับแก้ไขภาพ แต่งภาพ

4.Web Browser โปรแกรมสำหรับเปิดเว็บไซต์เช่น IE , Firefox , Chrome

5.เครื่องมือจัดการฐานข้อมูล

6.โปรแกรมจัดการไฟล์ และการปรับปรุงแก้ไขไฟล์

7.โปรแกรมจำลองเครื่องของเราให้เหมือนกับ web server

1. เครื่องมือย้ายไฟล์ด้วยวิธี FTP

การย้ายไฟล์จากเครื่องของเราไปยังเครื่อง server เป็นเรื่องที่ต้องทำเป็นประจำอยู่แล้วสำหรับนักพัฒนาเว็บไซต์เพราะการพัฒนา เว็บไซต์นั้นจะเริ่มจาก การพัฒนาบนเครื่องคอมพิวเตอร์ของเราก่อน หลังจากนั้นจึงจะย้ายไปยังเครื่อง server เพื่อเปิดให้ผู้อื่นได้เข้าชมต่อไป ดังนั้นการย้ายไฟล์จึงมีความสำคัญมาก หากไฟล์ถูกย้ายไปไม่หมด หรือตกค้างระหว่างการย้าย จะมีผลทำให้เว็บไซต์ไม่สามารถใช้งานได้ตามที่เราได้ออกแบบไว้ ในหัวข้อนี้จะพูดถึงเครื่องมือที่ใช้ในการย้ายไฟล์ที่มีประสิทธิภาพกัน

- FileZilla สามารถอ่านรายละเอียดการใช้งานและวิธีการดาวน์โหลดจาก หัวบทความนี้้ มีหัวข้อที่สำคัญที่ควรรู้ในการใช้งานโปรแกรม FTP ทั้งหลายคือ โปรแกรมส่วนใหญ่จะมีวิธีให้เลือกในการส่งข้อมูลอยู่ด้วยกัน 2 วิธีคือ

1.ASCII ใช้สำหรับส่งข้อความที่เป็นตัวอักษร

2.Binary ใช้สำหรับส่งข้อความไม่ใช่ัตัวอักษร เช่นไฟล์ภาพ

ถ้าเลือกใช้ผิดวิธีจะส่งผลต่อไฟล์ที่เราส่งไปได้ แต่สำหรับโปรแกรม FileZilla จะทำการเลือกให้เราโดยอัตโนมัติโดยที่เราไม่ต้องเข้าไปยุ่งในส่วนนี้

2. เครื่องมือสำหรับแก้ไข Code (Code Editing)

พูดได้ว่าเป็นเครื่องมือที่สำคัญมากในการทำเว็บไซต์ เพราะเว็บไซต์นั้นประกอบด้วย code ต่างๆมากมาย ไม่ว่าจะเป็น HTML , PHP , Javascript CSS ถ้าจะพูดเปรียบเปรยก็พูดได้ว่า การทำเว็บไซต์นั้นก็เป็นการเขียน code อย่างหนึ่งนั่นเอง ดังนั้นเราจึงควรเครื่องมือดีๆมาอำนวยความสำดวกให้เราเพื่อประหยัดเวลาในการ ทำงาน สำหรับเครื่องมือที่เราแนะนำมีดังนี้

- Eclipse เป็นเครื่องมือฟรีที่มีผู้ใช้งานและผู้ร่วมพัฒนามาก มีความสามารถมากมาย ฟังก์ชันหลากหลาย เหมาะสำหรับมืออาชีพที่ต้องการเครื่องมือที่มีสามารถหลากหลาย สามารถเพิ่มความสามารถให้กับโปรแกรมได้โดยโหลด plugin เข้ามาเพิ่มเติม สามารถดูรายละเอียดและดาวน์โหลดโปรแกรมได้ที่เว็บไซต์ http://eclipse.org/ จากความสามารถที่หลากหลายทำให้มีข้อเสียคือใช้ทรัพยากรณ์เครื่องมาก

- Aptana Studio เครื่องมือตัวนี้ก็เป็นตัวฟรีอีกเช่นเดียวกัน โดยมีให้เลือกทั้งแบบที่เป็น plugin ของ Eclipse และแบบที่เป็นโปรแกรมแยกออกมา ข้อดีของโปรแกรมนี้คือ ไม่หนักเครื่องมาก มีรูปแบบสวยงาม ไม่ซับซ้อน รองรับภาษาไทยได้ดี สามารถดูรายละเอียดและดาวน์โหลดโปรแกรมได้ที่ http://www.aptana.com/ สำหรับผู้ใช้งาน php แนะนำให้โหลดเวอร์ชัน 3 เป็นต้นไปมาใช้งาน

- Komodo Edit ตัวนี้เป็นตัวที่นักพัฒนาของเรา คุณ saxford ใช้อยู่และติดใจมากครับ สำหรับผมไม่เคยมีประสบการณ์กับโปรแกรมนี้มากนัก หากต้องการทราบรายละเอียดต้องติดต่อกับคุณ saxford ผ่านทางเว็บบอร์ดนะครับ อ่านรายละเอียดและดาวน์โหลดโปรแกรมจากทีนี่ครับ http://www.openkomodo.com/ โปรแกรมนี้มีทั้งแบบฟรีและไม่ฟรีนะครับ

- Dreamweaver เครื่องมือตัวนี้ถ้ากล่าวถึงส่วนใหญ่น่าจะรู้จักกันทุกคนทีเดียว เป็นเครื่องมือชื่อดังใช้สำหรับพัฒนาเว็บไซต์ ด้วยความสามารถที่หลากหลาย สามารถทำให้ผู้ใช้ที่ไม่รู้วิธีการเขียน HTML ก็สามารถทำเว็บไซต์ขึ้นมาเองได้ แน่นอนว่าไม่ฟรีและมีราคาสูงมากด้วย ดูรายละเอียด และโหลดโปรแกรมทดลองใช้งานได้ที่ http://www.adobe.com/products/dreamweaver/

3. เครื่องมือสำหรับแก้ไขภาพ แต่งภาพ

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

- Gimp เป็นโปรแกรมฟรีที่มีประสิทธิภาพมาก มีผู้พัฒนาคอยแต่งเติมความสามารถให้กับโปรแกรมโดยตลอด สามารถใช้งานในการแต่งภาพได้ไม่ดี ต้องบอกว่าตอนนี้โปรแกรมนี้เป็นโปรแกรมฟรีที่มาแรงมาก แต่ทาง hellomyweb ยังไม่มีบทความเกี่ยวกับโปรแกรมตัวนี้มากนัก ในโอกาสต่อไปเราจะพยายามนำเสนอบทความเกี่ยวกับโปรแกรมนี้ให้มากขึ้น

- Photoshop โปรแกรมชื่อดังของ Adobe โปรแกรมนี้เป็นที่นิยมมีหนังสือสอนใช้งานมากมายในท้องตลาด แทบจะเรียกได้ว่าเป็นโปรแกรมแต่งภาพอันดับหนึ่งตอนนี้ก็ได้ อ่านรายละเอียดเพิ่มเติม และดาวน์โหลดโปรแกรมตัวทดลองได้ที่ http://www.adobe.com/products/photoshop/family/

4. Web Browser

ปัจจุบันมีหลากหลายให้เลือกใช้มากมาย ทำให้เป็นปัญหากับผู้พัฒนาเป็นอย่างมาก เพราะต้องพัฒนาเว็บไซต์ของตัวเองให้เหมาะสม และเปิดได้กับ Web browser ที่มีอยู่ในท้องตลาด แน่นอนว่าตอนนี้ IE6 มีผู้ใช้งานอยู่มาก แต่ผู้ใช้ที่ลง IE7 , IE8 ไปแล้วก็ไม่สามารถกลับไปใช้งาน IE6 ได้ เป็นปัญหากับผู้พัฒนาเว็บไซต์มาก

ดังนั้น Hellomyweb แนะนำให้เข้าไปที่เว็บไซต์ http://spoon.net/browsers/ จะมี Web browser ให้เราใช้แทบทุกรุ่น แต่จำเป็นต้องลง plugin ของ spoon ก่อน จากนั้นเมื่อคลิกที่รายชื่อของ spoon จะโหลด browser ที่เราเลือกขึ้นมาให้ใช้ และไม่จำเป็นต้องลง browser ตัวนั้นจริงๆในเครื่องของเรา Hellomyweb ขอแนะนำให้ลองใช้ดู

5. เครื่องมือจัดการฐานข้อมูล

สำหรับผู้ที่เขียนโปรแกรมบนเว็บไซต์ ที่จำเป็นจะต้องมีฐานข้อมูลด้วยนั้น จำเป็นต้องใช้เครื่องมือสำหรับจัดการฐานข้อมูลอย่างแน่นอน สำหรับโปรแกรมที่ไดัรับความนิยมมากนั่นคือ phpMyAdmin นั่นเอง ด้วยความที่เป็นโปรแกรมฟรี ทำงานคู่กับภาษา PHP , MySQL ได้เป็นอย่างดีจึงเป็นที่นิยมมากนั่นเอง สำหรับ phpMyAdmin จะมาคู่กับ XAMPP อยู่แล้วจึงไม่ขอแสดงลิงก์ไว้ในที่นี้

6. โปรแกรมจัดการไฟล์

เว็บไซต์บางเว็บไซต์ที่มีขนาดใหญ่มากจำเป็นที่จะต้องใช้ผู้พัฒนาหลายคน ดังนั้นจึงต้องมีโปรแกรมคอยจัดการไฟล์เพื่อให้ผู้พัฒนาแต่ละคนสามารถทำงาน ร่วมกันได้ โปรแกรมนี้จะทำหน้าที่ตรวจสอบการเปลี่ยนแปลงของไฟล์ต่างๆ เพื่อให้ผู้ใช้งานทราบว่ามีใครมาอัพเดทไฟล์นี้เมื่อไหร แก้อะไรไปบ้าง ผู้ที่นำไฟล์นี้ไปใช้ต่อไปจะได้ทำงานต่อได้ และยังทำให้ผู้ใช้งานไฟล์แต่ละคนสามารถแยกพัฒนาในส่วนของตัวเอง และนำมารวมกันภายหลังได้ เนื่องจากโปรแกรมตัวนี้มีความซับซ้อนมาก ไม่เหมาะกับมือใหม่ จึงไม่ขอแนะนำในที่นี้ แต่ขอแนะนำไว้เพื่อให้รู้จักกัน

7. โปรแกรมจำลองเครื่องของเราให้เหมือนกับ Web Server

สำหรับการพัฒนาเว็บไซต์ เราจำเป็นต้องพัฒนาบนเครื่องของเราก่อนที่จะส่งไฟล์ไปยังเว็บไซต์ เพื่อความรวดเร็วในการทำงานและ ความสะดวกของเราเอง ดังนั้นเราจำเป็นต้องจำลองเครื่องของเราให้เหมือนกับ Web server โดยการจำลองนั้นก็จะทำให้เครื่องของเราสามารถใช้งานภาษา PHP และฐานข้อมูล MySQL เพื่อการเขียนโปรแกรมบนเว็บไซต์ได้ นอกจากนั้นยังมีโปรแกรม phpMyAdmin เพื่อจัดการฐานข้อมูลอีกด้วย สำหรับโปรแกรมที่แนะนำคือ

- XAMPP มีวิธีการลงและ วิธีการใช้งานทั้งหมดอยู่ในบทความนี้ http://www.hellomyweb.com/index.php/main/content/136

โปรแกรมสำหรับจำลองเครื่องของเราให้เหมือนกับ Web server มีประโยชน์สำหรับผู้ที่ต้องการจะเขียนโปรแกรมบนเว็บไซต์ สำหรับผู้ที่เขียนเว็บทั่วไปอาจไม่จำเป็นต้องดาวน์โหลดไปใช้ก็ได้

Aptana Download

Aptana (โปรแกรมสร้างเว็บ โปรแกรมออกแบบเว็บ พัฒนาเว็บไซต์) : โปรแกรม Aptana เป็น โปรแกรมสร้างเว็บ หรือ เอาไว้ช่วยในการพัฒนาเว็บไซต์ ต่างๆ โดยคุณสามารถสร้างเว็บไซต์ หรือเว็บแอพพลิเคชั่น (Web Application) ต่างๆ ผ่าน โปรแกรมสร้างเว็บ ตัวนี้ได้ สำหรับการใช้งานของ โปรแกรมสร้างเว็บ ก็แสนจะง่ายดายคล้ายกับโปรแกรม IDE อื่นๆ ในตลาดทั่วไป แต่ โปรแกรมสร้างเว็บ Aptana มีดีที่ความสามารถ ซึ่งเหมาะกับผู้เริ่มต้น พัฒนาเว็บไซต์ หรือว่าในระดับสูง ก็สามารถใช้ โปรแกรมสร้างเว็บ Aptana นี้ได้ นอกจากนี้ โปรแกรมสร้างเว็บ Aptana ยังรองรับเทคโนโลยีใหม่ๆ อีกด้วยอย่างเช่น ไม่ว่าจะเป็น การเขียนโค้ดด้วยภาษา HTML5 การออกแบบเว็บขั้นเทพด้วยภาษา CSS3 หรือแม้แต่ JavaScript Ruby หรือแม้แต่ PHP และ Python ที่กำลังมาแรง และเป็นที่นิยมในวงการเขียนเว็บ

Program Features (คุณสมบัติและความสามารถของ โปรแกรมสร้างเว็บ Aptana พัฒนาเว็บไซต์ เพิ่มเติมอย่างละเอียด)

• ตัวช่วยในการเขียนโค้ดในหลากหลายภาษา โดยจะมีข้อมูลเกี่ยวกับ API รวมถึงการอธิบายแต่ละ Element ด้วย ไม่ว่าจะเป็น

  • ภาษา HTM

  • ภาษา CSS

  • ภาษา JavaScript

  • ภาษา PHP

  • ภาษา Ruby

  • และภาาาอื่นๆ อีกมากมาย

• รองรับการอัพโหลดไฟล์ขึ้นเครื่องเว็บเซิร์ฟเวอร์ (FTP Server) หรือ เซิร์ฟเวอร์เก้บไฟล์ ได้หลากหลายรูปแบบ ทั้งแบบ

  • FTP

  • SFTP

  • FTPS

  • Capistrano

• เครื่องมือในการ Debugger โค้ด เช่น ตััง Set Breakpoint, ตรวจความถูกต้องของตัวแปร และควบคุมการ Execute ของโปรแกรม

• Git Integration ช่วยให้คุณทำงานร่วมกับเพื่อนร่วมงานได้อย่างไร้รอยต่อ และยังสามารถส่งโค้ดไปยัง Github ได้อีกด้วย

• รันผ่าน Command Line ใน Terminal สำหรับการ Excute คำสั่งของระบบปฏิบัติการ

• โปรแกรมสร้างเว็บ สามารถปรับแต่ง IDE ได้ตามความถนัดของตัวเอง

• มีระบบช่วยพัฒนาโค้ดให้สมบูรณ์แบบ ลดข้อผิดพลาดที่เกิดขึ้นมากมาย

• แจกฟรี 100% ไม่มีค่าใช้จ่ายใดๆ แอบแฝงทั้งสิ้น

• สามารถใช้งานได้ทั้งกับระบบปฏิบัติการ Windows และ Mac OSX