การเขียนโปรแกรมบนเว็บ (WEB PROGRAMMING) บทที่ 2 หลักการออกแบบและพัฒนาเว็บไซต์ ความรู้เบื้องต้นเกี่ยวกับภาษา HTML โดย อ.ปริญญา น้อยดอนไพร คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏสุราษฎร์ธานี

หลักการออกแบบและพัฒนาเว็บไซต์ กำหนดเป้าหมาย และวางแผน (Site Definition and Planning) วิเคราะห์ และจัดโครงสร้างข้อมูล (Analysis and Information Architecture) ออกแบบเว็บเพจ และเตรียมข้อมูล (Page Design and Content Editing) ลงมือสร้าง และทดสอบ (Construction and Testing) เผยแพร่ และส่งเสริมให้เป็นที่รู้จัก (Publishing and Promotion) ดูแล และพัฒนา (Maintenance and Innovation)

กำหนดเป้าหมาย และวางแผน (Site Definition and Planning) กำหนดวัตถุประสงค์ของเว็บไซต์ กำหนดกลุ่มผู้ชมเป้าหมาย เตรียมแหล่งข้อมูล เตรียมทักษะหรือบุคลากร เตรียมทรัพยากรต่างๆ ที่จำเป็น

วิเคราะห์ และจัดโครงสร้างข้อมูล (Analysis and Information Architecture) แผนผังโครงสร้างของเว็บไซต์ สารบัญ ลำดับการนำเสนอ หรือผังงาน ระบบนำทางหรือเนวิเกชั่น (Navigation) องค์ประกอบที่จะนำมาใช้บนเว็บเพจ เช่น ภาพกราฟิก เสียง วิดีโอ เป็นต้น ข้อกำหนดเกี่ยวกับลักษณะหน้าตาและรูปแบบของเว็บเพจ ข้อกำหนดของโปรแกรมภาษาสคริปต์หรือเว็บแอพพลิเคชั่น และฐานข้อมูล

ออกแบบเว็บเพจ และเตรียมข้อมูล (Page Design and Content Editing) เป็นขั้นตอนของการออกแบบเค้าโครง หน้าตา และลักษณะทางด้านกราฟิกของหน้าเว็บเพจ ผู้พัฒนาควรมีทักษะเพิ่มเติม สามารถใช้โปรแกรมทางด้านกราฟิก เช่น Adobe Photoshop หรือ Adobe Fireworks เป็นต้น ผู้พัฒนาควรมีทักษะเพิ่มเติม สามารถใช้โปรแกรมทางด้านแอนิเมชั่น คือ Adobe Flash CS3 หรือ Macromedia Flash 8 เป็นต้น นอกจากกราฟิกและต้องคำนึงถึงสีสันและรูปแบบของส่วนประกอบต่างๆ ที่ไม่ใช่รูปภาพ เช่น ฟอนต์ ขนาด และสีข้อความ สีพื้นหลัง ลวดลายของเส้นกรอบ

ลงมือสร้าง และทดสอบ (Construction and Testing) เป็นขั้นตอนที่เว็บเพจจะถูกสร้างขึ้นมา โดยอาศัยเค้าโครงและองค์ประกอบกราฟิกตามที่ได้ออกแบบไว้ นำเนื้อหาหรือข้อมูลต่างๆ มาประกอบ กำหนดส่วนเชื่อมโยงเอกสารต่างๆ หรือระบบนำทาง เลือกใช้เครื่องมือสำหรับการพัฒนาเว็บไซต์ เช่น Adobe Dreamweaver , Macromedia Dreamweaver เป็นต้น

เผยแพร่ และส่งเสริมให้เป็นที่รู้จัก (Publishing and Promotion) โดยทั่วไปการนำเว็บไซต์ขึ้นเผยแพร่บนระบบอินเทอร์เน็ต จะทำด้วยการอัพโหลดไฟล์ทั้งหมด ขึ้นไปเก็บบนเว็บเซิร์ฟเวอร์ ใช้โปรแกรมสำหรับการอัพโหลด เช่น CuteFTP , SSH File Transfer เป็นต้น หลังจากนำข้อมูลเผยแพร่แล้ว ควรมีการตรวจสอบหรือทดสอบอีกครั้ง เพื่อตรวจหาปัญหาที่อาจเกิดขึ้น เช่น ลิงค์ต่างๆ ที่เกี่ยวข้อง สคริปต์ และการติดต่อกับฐานข้อมูล การโฆษณาเพื่อให้เว็บไซต์เป็นที่รู้จัก เช่น การแลกเปลี่ยนลิงค์ ประกาศบนเว็บบอร์ดสาธารณะ การส่งอีเมล์ สื่อสิ่งพิมพ์ต่างๆ หรือวิทยุ โทรทัศน์ เป็นต้น

ดูแล และพัฒนา (Maintenance and Innovation) เว็บไซต์ที่เผยแพร่แล้วไม่ควรทิ้งขว้าง ควรดูแลโดยตลอด มีการปรับเปลี่ยน หรือเปลี่ยนแปลงหน้าเว็บ หรือเนื้อหาต่างๆ ให้เป็นข้อมูลปัจจุบัน ตรวจสอบการทำงานของลิงค์ต่างๆ ที่เกี่ยวข้อง มีการสำรองฐานข้อมูลเป็นระยะ

ทีมงานพัฒนาเว็บไซต์ Web Master คือ ผู้รับผิดชอบและดูแลเว็บไซต์ในภาพรวมหรืออาจจะมีหน้าที่ออกแบบและพัฒนาเว็บไซต์ทั้งหมดก็ได้ Web Designer คือ ผู้ออกแบบลักษณะหน้าตาความสวยงามของเว็บไซต์ทั้งหมด วางแผนโครงร่างของหน้าเว็บเพจ การเลือกสี การออกแบบกราฟิก Web Programmer คือ นักเขียนโปรแกรมซึ่งมีความสามารถในการใช้ภาษาสำหรับการพัฒนาเว็บไซต์ เช่น JavaScript, VBScript, ASP.NET และ PHP Content Writer/Editor คือ นักเขียนและบรรณาธิการที่ดูแลด้านเนื้อหาของเว็บไซต์ เป็นผู้รับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง และปรับปรุงเมื่อมีการเปลี่ยนแปลง

เนื้อหาที่ควรมีในเว็บไซต์ ข้อมูลเกี่ยวกับบริษัท องค์กร หรือผู้จัดทำ (About Us) รายละเอียดของผลิตภัณฑ์หรือบริการ (Product/Service Information) ข่าวสาร (News/Press Release) คำถาม/คำตอบ (Frequently Asked Question) ข้อมูลในการติดต่อ (Contact Information)

ส่วนประกอบของหน้าเว็บเพจ ส่วนหัว (Page Header) อยู่บนสุดของหน้า เป็นบริเวณที่สำคัญที่สุด เพราะผู้ใช้จะมองเห็นก่อนบริเวณอื่น ส่วนใหม่นิยมใช้วางโลโก้ หรือป้ายโฆษณา ส่วนของเนื้อหา (Page Body) อยู่ตอนกลางของหน้า ใช้แสดงเนื้อหาของเว็บเพจ ประกอบไปด้วย ข้อความ ภาพกราฟิก ตารางข้อมูล และอื่นๆ ส่วนท้าย (Page Footer) อยู่ด้านล่างสุดของหน้า ส่วนใหญ่นิยมใช้วางระบบนำทางแบบที่เป็นลิงค์ข้อความง่ายๆ หรือ นิยมใช้บอกชื่อเจ้าของ ผู้พัฒนา ลิขสิทธิ์ ที่อยู่ของหน่วยงาน และอีเมล์ เป็นต้น แถบข้าง (Side Bar) ในปัจจุบันนิยมออกแบบด้านข้างของเว็บเพจให้น่าสนใจ เพื่อใช้วางป้ายแบนเนอร์ หรือลิงค์แนะนำเกี่ยวกับบริการของเว็บไซต์ เป็นต้น

Q/A