1.1  กระบวนการพัฒนาเว็บไซต์
                สิ่งแรกที่นักพัฒนาเว็บควรทำเมื่อเริ่มต้นพัฒนาเว็บไซต์  คือ  กำหนดกรอบกระบวนการทำงาน  (Framework)  ที่แสดงให้เห็นถึงขั้นตอนของการพัฒนาเว็บ  และรายละเอียดของงานในแต่ละขั้นตอน  ตั้งแต่เริ่มต้นกระบวนการจนกระทั่งสิ้นสุดกระบวนการ  เพื่อให้การพัฒนาเว็บเป็นไปอย่างมีแบบแผน  ถึงแม้ว่าการกำหนดกรอบการทำงานจะเป็นขั้นตอนที่มีความยุ่งยากแต่ก็เป็นเครื่องมือสำคัญที่ช่วยให้การพัฒนาเว็บสำเร็จลุล่วงตรงตามวัตถุประสงค์ได้  เพราะกรอบการทำงานจะช่วยป้องกันความผิดพลาด  และความสับสนในระหว่างการพัฒนาเว็บ  โดยนักพัฒนาเว็บสามารถย้อนกลับมาตรวจสอบงานตามกรอบการทำงานในภายหลังได้
                กรอบการทำงานหรือแบบจำลองกระบวนการ  (Process Model)  ที่ใช้เพื่อพัฒนาเว็บมีหลายรูปแบบ  ยกตัวอย่าง  เช่น  แบบจำลองกระบวนการในรูปแบบ  Agile Process (XP, Scrum, DSDM, FDD  และ  AM)  แบบจำลองลำดับเชิงเส้น  (Linear Sequential Model : LSM)  เป็นต้น  สำหรับในที่นี้จะขอแบบจำลองกระบวนการที่พัฒนาขึ้นโดย  Jesse  James  Garrett  ซึ่งจำแนกกระบวนการพัฒนาเว็บออกเป็น  5  ขั้นตอน  ได้แก่  การสร้างกลยุทธ์ในการออกแบบ  (Strategy  Plane)
                การกำหนดขอบเขตของข้อมูล  (Scope Plane)  การทำโครงสร้างข้อมูล  (Structrue Plane)  การออกแบบโครงร่างเว็บเพจ  (Skeleton Plane)  และการออกแบบรูปลักษณ์ของเว็บเพจ (Surface Plane)



การสร้างกลยุทธ์ในการออกแบบ  (Strategy Plane)  เป็นขั้นตอนการวิเคราะห์ปัจจัยหลัก  3  ประการ  คือ  ผู้ใช้  องค์กร  และคู่แข่ง  เพื่อทราบเป้าหมายหรือแนวทางในการพัฒนาเว็บไซต์  โดยปัจจัยทั้ง  3  ประการ  มีรายละเอียดดังนี้
                - ผู้ใช้  (User)  เป็นการวิเคราะห์ความต้องการของผู้ใช้  โดยการศึกษาหรือทำการสำรวจจากผู้ใช้ที่เป็นกลุ่มเป้าหมายเพื่อตอบคำถามว่า  เมื่อผู้ใช้เข้ามายังหน้าเว็บแล้ว  ต้องการได้รับข้อมูลใดกลับไปบ้าง  มีฟังก์ชันหรือการใช้งานรูปแบบใดบนเว็บไซต์ที่ผู้ใช้ต้องการ  และปัญหาหรือข้อบกพร่องที่เกิดจากการใช้งานเว็บที่ได้พบ
                -  องค์กร  (Organization)  เป็นการวิเคราะห์เป้าหมายทางธุรกิจ  (Business  Goal)  ทั้งในส่วนเงินทุน  บุคลากร  และความเป็นไปได้ที่จะพัฒนาเว็บไซต์ขึ้นมาเพื่อใช้งาน  รวมทั้งการเก็บรวบรวมข้อมูลขององค์กรที่จำเป็นต่อการออกแบบหน้าเว็บ  เช่น  โลโก้  (Logo)  แบนเนอร์  (Banner)  หรือการโฆษณาประชาสัมพันธ์เว็บไซต์  เหล่านี้จะช่วยให้ผู้ใช้จดจำเว็บไซต์ได้ง่ายขึ้น
                -  คู่แข่ง  (Competitor)  เป็นการประเมินขอบเขตข้อมูล  รูปแบบนำเสนอ  และเป้าหมายทางการค้าของบริษัทคู่แข่ง  เพื่อพิจารณาจุดอ่อนและจุดแข็งของการออกแบบเว็บ  แล้วนำมาประยุกต์ใช้ในการพัฒนาเว็บของบริษัทต่อไป
                การกำหนดขอบเขตของข้อมูล  (Scope  Plane)  เป็นการสรุปขอบเขตของข้อมูลที่ควรมีบนหน้าเว็บให้ชัดเจนขึ้น  เนื่องจากผู้ออกแบบบางคนอาจมีเทคนิคนำเสนอข้อมูลที่ชื่นชอบ  หรือมีแนวทางพัฒนาเว็บหลายวิธีจนทำให้เกิดความสับสนขั้นตอนนี้จึงเป็นการสรุปแนวทางพัฒนาเว็บ  โดยพิจารณาขอบเขตข้อมูลให้สอดคล้องกับเป้าหมายที่ได้จากการวิเคราะห์  ปัจจัย  3  ประการในขั้นตอนแรก  สามารถจำแนกข้อมูลบนเว็บไซต์ออกเป็น  2  ประเภท  ดังนี้
                - เนื้อหา  (Content Requirements)  เป็นข้อมูลทั่วไปที่นำเสนอให้กับผู้ใช้งาน  เช่น  ข้อความบรรยาย  รูปภาพ  หรือ  เสียงเพลง เป็นต้น
                -  การใช้งาน  (Functional Specfications)  เป็นระบบการทำงานหรือการใช้งานบนหน้าเว็บ  ซึ่งมักจะเป็นงานที่ต้องมีการปฏิสัมพันธ์โต้ตอบกับผู้ใช้  เข่น  การับส่ง  E-mail  การประมวลผลค่าข้อมูลของแบบฟอร์ม  โปรแกรมสนทนาระหว่างผู้ใช้  เป็นต้น



การจัดทำโครงการสร้างข้อมูล  (Structrue Plane)    ภายหลังจากที่ได้กำหนดขอบเขตข้อมูลแล้ว  ก็เริ่มต้นกำหนดความสัมพันธ์ระหว่างเนื้อหาและหน้าที่งานบนเว็บไซต์โดยขั้นตอนนี้ประกอบด้วยงาน  2  ลักษณะ  ดังนี้
                - การออกแบบส่วนปฏิสัมพันธ์กับผู้ใช้  (Interaction  Design) เป็นการออกแบบหน้าเว็บสำหรับงานที่มีลักษณะโต้ตอบกับผู้ใช้  เช่น  การสั่งซื้อสินค้า  การกรอกแบบฟอร์ม  และการรับส่ง  E-mail  เป็นต้น 
               - สถาปัตยกรรมข้อมูล  (Information Architecture)  เป็นการกำหนดโครงสร้างของเนื้อหาทั้งหมดที่จะนำเสนอบนเว็บไซต์  โดยเชื่อมโยงเว็บเพจแต่ละส่วนไว้ด้วยกันตามความสัมพันธ์ของระบบงาน  เพื่อให้ข้อมูลเคลื่อนที่อย่างเป็นระบบจนผู้ใช้งานไม่รู้สึกสะดุดหรือข้ามขั้นตอนเมื่อเรียกใช้หน้าเว็บนั้น  โครงสร้างการนำเสนอเนื้อหาของเว็บมี  4  ชนิดได้แก่  Linear  Structrue, Hierarchical Structure, Grid Structure และ Network Structure 



                1. โครงสร้างเชิงเส้น (Linear  Structrue)  เป็นโครงสร้างเนื้อหาที่จัดเรียงลำดับหน้าเว็บเพื่อเข้าถึงข้อมูลไว้ตายตัวโดยผู้ใช้จะต้องเข้าถึงหน้าเว็บในแนวเส้นตรง  กล่าวคือ  เข้าถึงหน้าเว็บทีละหน้าตามลำดับขั้นตอนไปจนถึงหน้าเว็บปลายทางที่ต้องการ  ข้อดีของการจัดวางโครงสร้างเนื้อหาลักษณะนี้  คือ  การออกแบบไม่ยุ่งยากและข้อมูลเป็นระเบียบ  แต่ข้อเสีย  คือ  ต้องใช้เวลามากกว่าจะเข้าถึงหน้าเว็บที่ต้องการได้  เพราะต้องผ่านหน้าเว็บที่ไม่จำเป็นหลายขั้นตอน
                2.  โครงสร้างแบบลำดับขั้น  (Hierarchical Structure)  เรียกอีกชื่อหนึ่งว่า  “โครงสร้างต้นไม้ (Tree Structure) ”   เป็นโครงสร้างที่นิยมใช้งาน  โดยจัดลำดับการเข้าถึงข้อมูลตามความสัมพันธ์จากหัวข้อใหญ่ไปจนถึงหัวข้อย่อยแตกออกไป  ข้อดีของการจัดวางโครงสร้างเนื้อหาลักษณะนี้  คือ  ข้อมูลถูกจัดวางอย่างเป็นระบบ  ทำให้มองความสัมพันธ์ของข้อมูลแต่ละส่วนได้เป็นอย่างดี  ข้อเสีย  คือ  การออกแบบมีความซับซ้อนเพิ่มขึ้น  และต้องการออกแบบให้โครงสร้างต้นไม้มีความสมดุล
                3.  โครงสร้างแบบตาราง  (Grid Structure)  เป็นโครงสร้างเนื้อหาที่เพิ่มเส้นทางการเชื่อมโยงข้อมูลมากขึ้น  เพื่อให้การเข้าถึงเว็บเพจมีความยืดหยุ่น  กล่าวคือ  ผู้ใช้สามารถเปลี่ยนทิศทางการเข้าถึงผ่านข้อมูลทางหน้าเว็บอื่นๆได้  จึงนับเป็นข้อดีประการสำคัญของโครงสร้างลักษณะนี้  แต่ข้อเสีย  คือ  การออกแบบมีความซับซ้อนสูง  และต้องระวังผู้ใช้หลงเส้นทางการเชื่อมโยงด้วย
                4.  โครงสร้างเครือข่าย  (Network Structure)  เป็นโครงสร้างเนื้อหาที่มีความยืดหยุ่นในการเข้าถึงข้อมูลมากที่สุดเพราะทุกเว็บเพจถูกเชื่อมโยงไว้ด้วยกัน  ดังนั้นผู้ใช้สามารถเข้าถึงข้อมูลผ่านทางหน้าเว็บใดๆ  ไปยังหน้าเว็บปลายทางที่ต้องการได้  ข้อดีของการจัดวางโครงสร้างเนื้อหาลักษณะนี้  จึงเป็นความยืดหยุ่นที่ผู้ออกแบบกำหนดให้กับผู้ใช้งาน  แต่ข้อเสีย  คือ  การออกแบบมีความซับซ้อนมาก  จึงต้องอาศัยความเชี่ยวชาญของผู้ออกแบบสูง

การออกแบบโครงสร้างเว็บเพจ  (Skeleton Plane)  เป็นการจัดแบ่งพื้นที่บนหน้าเว็บ  เพื่อใช้วางองค์ประกอบส่วนต่างๆ  และเริ่มต้นออกแบบส่วนอินเตอร์เฟสกับผู้ใช้  โดยสร้างระบบนำทาง  (Navigation System)  เพื่อเชื่อมโยงการทำงานทุกส่วนเข้าไว้ด้วยกันโดยขั้นตอนนี้ประกอบด้วยกิจกรรมย่อย  3  กิจกรรม  คือ
                - การออกแบบส่วนอินเตอร์เฟส  (Interface  Design)  เป็นการออกแบบส่วนติดต่อระหว่างผู้ใช้กับเว็บไซต์  เพื่อการนำเสนอ  รับชม  และใช้งานข้อมูลบนเว็บนั้นด้วยการโต้ตอบกับคอมพิวเตอร์  การออกแบบอินเตอร์เฟสบนเว็บไซต์ที่ดี  มุ่งเน้นประสิทธิภาพหรือความสามารถในการใช้งานเว็บ  (Web Usability)  เป็นสำคัญ  โดยจะต้องสามารถใช้งานได้ง่าย  ใช้งานจริง  และให้ผลลัพธ์เป็นที่พอใจของผู้ใช้งาน
                -  การออกแบบระบบนำทาง  (Navigation Design)  เป็นการออกแบบเส้นทางการเชื่อมโยงบนเว็บไซต์  เพื่อให้ผู้ใช้งานสามารถท่องเที่ยวไปในไซต์ได้อย่างสมบูรณ์แบบและไม่หลงทาง  โดยใช้เครื่องมือนำทางรูปแบบต่างๆ  เช่น  รายการเมนูเชื่อม  (Navigation Bar)  ส่วนค้นหา  (Search) หรือ Drop-Down Menu  เป็นต้น  ซึ่งระบบที่ดีต้องช่วยเหลือผู้ใช้งาน  โดยสามารถบอกตำแหน่งที่ผู้ใช้อยู่ในปัจจุบัน  การเข้าถึงข้อมูลปลายทาง  ข้อมูลใดที่เคยผ่านการเข้าถึงแล้ว  และเส้นทางที่จะกลับไปยังตำแหน่งเดิมได้  (ศึกษารายละเอียดเพิ่มเติมได้ในบทที่  5  ระบบนำทาง)
                -  การออกแบบส่วนข้อมูล  (Information Design)  เป็นงานที่เกี่ยวข้องกับการตัดสินใจเลือกใช้วิธีนำเสนอข้อมูลอย่างไรจึงจะเหมาะสมกับชนิดข้อมูลนั้น  และทำให้ผู้ใช้เข้าใจได้ง่ายที่สุด  ยกตัวอย่างเช่น  ตัวเลขทางสถิติควรเลือกนำเสนอด้วยรูปแบบตาราง  กราฟ  หรือแผนภูมิ  ภาพสินค้าเคลื่อนไหว  ควรเลือกนำเสนอด้วยรูปถ่าย  วิดีโอ  คลิป  หรือแอนิเมชัน  เป็นต้น    (ศึกษารายละเอียดเพิ่มเติมได้ในบทที่  3  การออกแบบส่วนข้อมูล)  นอกจากนั้นการออกแบบส่วนข้อมูลที่เห็นได้ชัดเจน  คือ  การจัดกลุ่มข้อมูลภายในฟอร์ม  

การออกแบบรูปลักษณ์ของเว็บเพจ  (Surface Plane)  หรือเรียกการออกแบบในขั้นตอนนี้ได้อีกอย่างหนึ่งว่า  “Visual Design”  เนื่องจากการออกแบบส่วนอินเตอร์เฟสในขั้นตอนที่  4  จะมุ่งเน้นประสิทธิภาพด้านความสามารถในการใช้งาน  และการจัดวางองค์กรประกอบบนหน้าเว็บเพื่ออำนวยความสะดวกให้กับผู้ใช้มากกว่าการตกแต่งหน้าเว็บให้มีความสวยงาม  ดังนั้น  งานในขั้นตอนสุดท้ายนี้  จึงเป็นการเพิ่มความสวยงามและความน่าสนใจให้กับหน้าเว็บ  โดยเป็นการตกแต่งหน้าเว็บให้มีรูปลักษณ์ที่พร้อมจะนำเสนอต่อผู้ใช้งาน  ซึ่งรูปลักษณ์ของหน้าเว็บที่สวยงาม  พิจารณาจากปัจจัยด้านต่างๆ  ได้แก่  การเลือกใช้โทนสี  รูปแบบตัวอักษร  พื้นหลัง  และอื่นๆ 



 
;