พื้นฐานการทำเว็บไซต์

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

รวมเครื่องมือสำหรับใช้ทำเว็บไซต์ในหลายๆงานที่จำเป็น มีทั้งฟรีและไม่ฟรีให้เลือกใช้กัน

เครื่องมือแต่ละตัวมีความสามารถหลากหลายและทำงานได้หลายอย่าง เครื่องมือที่แนะนำต่อไปนี้จะเน้นการใช้งานร่วมกับ 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 อย่างหนึ่งนั่นเอง ดังนั้นเราจึงควรเครื่องมือดีๆมาอำนวยความสำดวกให้เราเพื่อประหยัดเวลาในการทำงาน สำหรับเครื่องมือที่เราแนะนำมีดังนี้

- Atom เป็นเครื่องมือฟรีตัวนึงที่แนะนำให้ลองใช้ดูนะครับฟังก์ชันการใช้งานครบถ้วนสามารถปรับได้ตามใจเรา นอกจากนี้ยังมี plugin เสริมต่างเพิ่มความารถให้รอบด้านอีกต่างหากและที่สำคัญสุดคือฟรี https://atom.io/

- 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/sea/products/dreamweaver.html

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

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

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

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

4. Web Browser Testing

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

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

ในส่วนของเครื่องมือตัวนี้นำครับตอนนี้อาจไม่ค่อยมีความจำเป็นมากแล้วสำหรับในปัจจุบันเพราะ browser แสดงผลได้ใกล้เคียงกันเป็นส่วนใหญ่แล้วครับ

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

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

6. โปรแกรมจัดการเวอร์ชันไฟล์

การพัฒนาเว็บไซต์นั้นหรือการเขียนโปรแกรมนั้นเราจะต้องแก้ไขเปลี่ยนแปลงตลอดเวลา และยังต้องทำงานร่วมกันกับนักพัฒนาคนอื่นอีกด้วย ดังนั้นหากเราไม่มีเครื่องมือในการจัดการไฟล์ที่ดีแล้วละก็ไฟล์ทั้งหมดจะผสมกันมั่วไปหมดจนเราไม่รู้ว่าอันไหนเป็นของใหม่อันไหนของเก่า อันไหนแก้เมื่อไหร่คนไหนแก้ แก้ไปแล้วเพิ่มส่วนไหนมาบ้าง ดังนั้นเราจึงจำเป็นนต้องมีโปรแกรมอย่าง git สำหรับมาจัดการเรื่องทั้งหมดสามารถอ่านรายละเอียดได้ที่นี่ https://git-scm.com/

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

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

- XAMPP เหมาะสำหรับคนที่ต้องการเปลี่ยนมาใช้ maria db https://www.apachefriends.org/index.html

- WAMP เหมาะสำหรับคนที่ใช้หลายเวอร์ชันของ PHP เพราะเครื่องมือตัวนี้สามารถเปลี่ยน version ของ PHP ได้ง่ายดังใจ http://www.wampserver.com/en/

- MAMP สำหรับผู้ที่ใช้ macOS https://www.mamp.info/en/


เลื่อนขึ้นด้านบน