การออกแบบและพัฒนาเว็บไซต์

ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์ 


                          การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า  Site Map  ดังภาพตัวอย่างมีการกำหนดหน้าเว็บเพจ 4 หน้า

ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ


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

ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า

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

ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า

                          เป็นขั้นตอนการออกแบบเค้าโครงหน้าตา และลักษณะด้านกราฟิกของหน้าเว็บเพจ เพื่อให้ผู้ชมเกิดอารมณ์ความรับรู้ต่อเว็บเพจตามที่เราต้องการ ดังนั้นผู้ที่ทำหน้าที่นี้จึงควรมีความสามารถทางด้านศิลปะพอสมควร โปรแกรมที่เหมาะจะใช้ในการออกแบบคือ Adobe Photoshop หรือ Macromedia Fireworks ซี่งผลที่ได้จะประกอบด้วยไฟล์กราฟิกต่างๆ ที่ใช้บนเว็บเพจ เช่น โลโก้,ภาพพื้นหลัง,ปุ่มเมนู,ไอคอนที่เป็นหัวคอลัมน์ และแบนเนอร์โฆษณา     การออกแบบเว็บเพจยังรวมไปถึงการกำหนดสีสัน และรูปแบบของส่วนประกอบต่างๆที่ไม่ใช่ภาพกราฟิก เช่น ฟอนต์ ขนาด และสีข้อความ สีพื้นบริเวณที่ว่าง สีและลวดลายของเส้นกรอบ เป็นต้น   นอกจากนี้องค์ประกอบเสริมอื่นๆของเว็บเพจก็ต้องถูกเตรียมไว้ด้วย เช่น ภาพเคลื่อนไหว Flash และโปรแกรม JavaScript ที่ใช้โต้ตอบกับผู้ชม หรือเล่นเอฟเฟ็คต์ต่างๆ ในส่วนของเนื้อหา ขั้นตอนนี้จะเป็นการนำเนื้อหาที่เลือกไว้มาปรับแก้ และตรวจทานความถูกต้อง เพื่อให้พร้อมสำหรับจะนำไปใส่เว็บเพจแต่ละหน้าตามเว็บเพจที่ออกแบบไ้ว้

ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์

                          เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บุคคลอื่น ๆื สามารถเข้าชมเว็บไซต์ของเราได้  วิธีการก็คือนำเว็บไซต์ที่เราสร้างขึ้นไปไว้บนพื้นที่  ที่ให้บริการ(Web osting) ซึ่งมีพื้นที่ ที่ให้บริการฟรี และแบบที่ต้องเสียค่าบริการ  


ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์

     หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สำหรับฝากเว็บไซต์แล้ว   โดยทั่วไปการนำเว็บไซต์ขึ้นเผยแพร่บนอินเตอร์เน็ตจะทำด้วยการอัพโหลดไฟล์ทั้งหมด คือ HTML และไฟล์อื่นๆที่เกี่ยวข้อง ขึ้นไปเก็บบนเซิร์ฟเวอร์ที่เราเปิดบริการไว้ การอัพโหลดเว็บไซต์ หรือบางครั้งเรียกว่า“พับลิช” อาจทำด้วยโปรแกรมสร้างเว็บไซต์เอง ซึ่งมีคุณสมบัตินี้ในตัว หรืออาจจะใช้โปรแกรมยูทิลิตี้ประเภท FTP  เช่น CuteFTP และ WS_FTP  หรือใช้เครื่องมืออื่นบนเว็บเซิร์ฟเวอร์ก็ได้   หลังจากนั้นเว็บไซต์ควรได้รับการทดสอบอีกครั้ง เพื่อตรวจหาปัญหาบางอย่างที่ไม่สามารถทดสอบบนเครื่องคอมพิวเตอร์ของเราได้ เช่น การลิ้งค์ของเว็บเพจกับเว็บไซต์อื่น และการทำงานของโปรแกรมสคริปต์กับฐานข้อมูล ซึ่งอาจทำไม่ได้บนเครื่องของเรา หรือบนเว็บเซิร์ฟเวอร์อาจมีสภาพแวดล้อมที่ต่างออกไป   เว็บไซต์ที่ประสบความสำเร็จ นอกจากต้องมีเนื้อหาที่ดี มีการวางโครงสร้างและการออกแบบที่เหมาะสมแล้ว ยังต้องได้รับการโฆษณา และส่งเสริมให้เป็นที่รู้จักในกลุ่มผู้ชมเป้าหมายหรือในวงกว้างออกไปอีกด้วย การส่งเสริมนี้มีกลยุทธที่ทำได้หลายวิธี ซึ่งไม่จำเป็นต้องใช้งบประมาณจำนวนมากเสมอไป โดยสามารถทำได้ตั้งแต่แบบง่ายๆ คือการแลกเปลี่ยนลิ้งค์หรือแบนเนอร์ ประกาศบนเว็บบอร์ดสาธารณะ การส่งอีเมล์ เพิ่มข้อมูลในเสิร์ชเอ็นจิ้น หรือเว็บไดเร็กทอรี่ เรื่อยไปจนถึงแบบที่ต้องใช้งบประมาณมากขึ้น เช่น การจัดงานเปิดตัว การลงโฆษณาบนเว็บไซต์อื่น ในสิ่งพิมพ์ หรือในวิทยุโทรทัศน์ เป็นต้น

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

1. HTML (ย่อมาจาก Hyper Text Markup Language)
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ     ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming  สามารถที่จะเรียนรู้ได้ง่าย

2. CSS (ย่อมาจาก Cascading Style Sheets)เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น

3. XHTML (ย่อมาจาก Extensible HyperText Markup Language)
เป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียนออนไลน์ของ enjoyday.net
- เรียนรู้ HTML
- เรียนรู้ CSS
- เรียนรู้ XHTML

ถึงแม้ว่าเราจะใช้ Software เว็บไซต์สำเร็จรูป (Web CMS) ในการสร้างเว็บไซต์หรือบล็อก เช่น WordPress,  Joomla ก็ตาม    HTML และ CSS นี้จะเป็นพื้นฐานให้เราแก้ไข code และปรับแต่งหน้าตาเว็บไซต์ให้ถูกใจเราได้

.

นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS  ในข้างต้นที่ไม่ใช่ภาษาสำหรับเขียนโปรแกรมแล้ว  เราอาจจะเคยได้ยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ   ภาษาเหล่านี้เป็นภาษา Script ที่นิยมใช้ในการสร้างเว็บเพจ

คค

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

1) Server-Side Script เช่น PHP, ASP, JSP, CGI    เป็นภาษา script ที่ประมวลผลที่ฝั่ง Server แล้วส่งผลลัพธ์ไปแสดงผลที่ฝั่ง Client ผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Firefox

2) Client-Side Script เช่น JavaScript, VBScript, JScript   เป็นภาษา script ที่ประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์  ซึ่งจะช่วยแบ่งเบาการทำงานให้กับเครื่อง Web Server ได้

ในกรณีที่ต้องการให้แอพพลิเคชันทำงานร่วมกันกับแอพพลิเคชันอื่น เช่น ฐานข้อมูล  เราจะต้องใช้ Server-Side Script  เขียนคำสั่งติดต่อกับฐานข้อมูล  โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง ( Source Code) ของ Server-Side Script เหล่านั้นได้

ต่างจากการเขียนคำสั่งแบบ Client-Side Script  ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียนด้วย Client-Side Script รวมถึง HTML, CSS  ของหน้าเว็บเพจนั้นได้  ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจนั้นๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร์

.

ถ้าอ่านคำอธิบาย แล้วไม่เข้าใจ ???  ก็ยังไม่ต้องไปสนใจมัน

แล้วมันต้องใช้มั้ยล่ะ ?
ตอบตามตรง… เว็บไซต์ส่วนใหญ่ เค้าใช้กันทั้งนั้นแหละ
แต่….เราไม่จำเป็นต้องเขียนภาษา Script เหล่านี้เองก็ได้ 

แล้วภาษา Script เหล่านี้ใช้ตอนไหนบ้าง ?
ใช้ในกรณีที่เว็บเรามีการทำงานที่เกี่ยวข้องกับฐานข้อมูล เช่น สมุดเยี่ยม, กระดานข่าว (Webboard), ระบบสมาชิก, ระบบตระกร้าสินค้า และอื่นๆ

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

โดยทั่วไปเจ้าเว็บไซต์สำเร็จรูปที่เราจะนำมาใช้นี้ ถูกพัฒนามาจากภาษา Script ไม่ตัวใดก็ตัวหนึ่ง  ส่วนใหญ่จะเป็น PHP เพราะเป็นภาษา Script แบบ Open Source  เหมือนกัน

Web Tools เครื่องมือเสริมบนเว็บ

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

สร้างภาพเคลื่อนไหวใน Adobe Photoshop

GIF ไฟล์ภาพเคลื่อนไหวประเภทหนึ่ง

การสร้างภาพเคลื่อนไหวสำหรับไว้แสดงบนเว็บไซต์ นอกเหนือจากการสร้างด้วยโปรแกรม Flash แล้ว ซึ่งจำเป็นต้องเรียนรู้การใช้งานมากพอควร อย่างไรก็ตาม การสร้างภาพเคลื่อนไหวแบบ GIF ก็เป็นอีกวิธีหนึ่งที่น่าสนใจและสามารถเรียนรู้ได้ไม่ยาก โดยมีหลักการดังนี้คือ การสร้างที่ละฉาก และกำหนดเวลาในการแสดงแต่ละฉาก จากนั้นบันทึกเป็นไฟล์ที่มีนามสกุล GIF แค่นี้เวลาเราเปิดด้วยโปรแกรม "Windows Picture and Fax Viewer" ซึ่งเป็นโปรแกรมที่มีอยู่แล้วใน Windows ก็จะสามารถเห็นไฟล์ที่เคลื่อนไหว แต่ถ้ายังหาโปรแกรมนี้ไมเจอ ก็สามารถ Insert ไฟล์ .GIF ไปแสดงที่โปรแกรม PowerPoint ก็ได้เช่นกัน

* สนใจลองทำตามตัวอย่างการสร้างภาพเคลื่อนไหว (ตัวอักษร) ด้านล่างนี้

วิธีสร้างภาพเคลื่อนไหวด้วย Photoshop CS3

1. เปิดโปรแกรม Adobe Photoshop CS3 (CS4 ก็สามารถใช้ได้เช่นกัน)
2. คลิกเมนู File เลือก New และกำหนดขนาดตามต้องการ
3. คลิกเมนู Windows เลือก Animation เพื่อให้โปรแกรมแสดงหน้าต่าง Animation
4. ทดสอบโดยการพิมพ์คำว่า "Hello" ในหน้าต่างที่สร้างขึ้น
5. พิมพ์คำว่า "World" อีกคำหนึ่ง จะเห็นว่า Hello และ World อยู่คนละ Layer ด้วย (เช็คได้ด้วยการเปิด Windows -> Layers)
6. เริ่มสร้างให้ภาพเคลื่อนไหว โดยการคลิกที่หน้าต่าง Animation ด้านล่าง เลือกหัวข้อ "Duplicates selected frames" (ไอคอนนี้จะอยู่ด้านข้างของไอคอนรูปถังขยะ)
7. จะเห็นว่ามีหน้าต่าง เพิ่มขึ้นอีกหน้าต่างหนึ่ง
8. คลิกที่หน้าต่าง Layers ให้คลิกรูป "ลูกตา" ให้หายไป สังเกตุที่หน้าต่าง Animation แต่ละหน้าต่างจะไม่เหมือนกัน
9. คลิกที่คำว่า "0 sec." เลือกเวลาที่ต้องการให้แสดง เช่น 0.5 เป็นต้น หมายถึง ให้แสดงภาพนี้นานครึ่งวินาที
10. กำหนดเวลาให้ทั้งสองหน้าต่าง (ควรกำหนดเวลาให้ต่างกันบ้าง เช่น .05 และ 1.0 เป็นต้น แล้วสังเกตุความเร็ว)
11. คลิกปุ่ม Play จะเห็นว่าภาพเคลื่อนไหวแล้ว
12. เวลาบันทึก ให้คลิกเลือกเมนู File เลือกคำสั่ง "Save for Web?& Devices"
13. ทดสอบเปิดไฟล์ดู (ดูตัวอย่างได้จากภาพด้านบน)