บทที่ 1
ศัพท์เทคนิคที่สำคัญ
ศัพท์เทคนิคที่สำคัญ
Web Page คือ เอกสารที่เราเปิดดูใน Web ส่วนใหญ่สร้างจากภาษา HTML
Web Site คือ ชื่อเครื่องคอมพิวเตอร์ที่เก็บเว็บเพจ เมื่อเราต้องการดูข้อมูลเว็บเพจเราต้องใช้โปรแกรมเบราเซอร์เป็นเครื่องมือ
Home Page คือ แต่ละเว็บไซต์ จะประกอบด้วยเว็บเพจหลายหน้า แต่ต้องมีการกำหนดไว้ว่า จะไห้หน้าใดเป็นหน้าแรก เว็บเพจ ที่เป็นหน้าแรกนี้ เรียกว่า "Home Page"
Link คือ เป็นคุณสมบัติที่ทำไห้เว็บเพจมีความแตกต่างจากเอกสารทั่วไป และเป็นปัจจัยหนึ่งที่ทำไห้www ประสบความสำเร็จ
Web Browser คือ โปรแกรมที่เป็นประตูสู่wwwในปัจจุบันมีไห้เลือกหลายตัว เช่น InternetExplorer Safari FireFox เป็นต้น
URL คือ ตำแหน่งเฉพาะเจาะจงที่เราต้องระบุ เมื่อเราต้องการเรียกดูข้อมูล เรียกตำแหน่งนั้นว่า URL
บทที่ 2
กระบวนการพัฒนาเว็บไซต์
กระบวนการพัฒนาเว็บไซต์
phase 1 : สำรวจปัจจัยสำคัญ
1.รู้จักตัวเอง
2.เรียนรู้ผู้ใช้
3.ศึกษาคู่แข่ง
สิ่งที่ได้รับ
1.เป้าหมายหลักของเว็บ
2.ความต้องการของผู้ใช้
3.กลยุทธ์ในการแข่งขัน
phase 2 : พัฒนาเนื้อหา
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตเนื้อหาและการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
phase 3 : พัฒนาโครงสร้างเว็บไซต์
6.จัดระบบข้อมูล
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตเนื้อหาและการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
phase 4 : ออกแบบและพัฒนาหน้าเว็บ
9.ออกแบบลักษณะหน้าตาเว็บ
10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1.ลักษณะหน้าตาของเว็บ
2.เว็บต้นแบบที่จะใช้ในการพัฒนา
3.รูปแบบโครงสร้างของเว็บ
4.ข้อกำหนดในการพัฒนาเว็บ
phase 5 : พัฒนาและดำเนินการ
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซต์
13.ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1.เว็บที่สมบูรณ์
2.เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3.แนวทางการดูแลและพัฒนาต่อไป
บทที่ 3
การออกแบบเพื่อผู้ใช้
การออกแบบเพื่อผู้ใช้
กำหนดกลุ่มผู้ใช้เป้าหมายการทำเว็บไซต์จำเป็นต้องรู้กลุ่มผู้ใช้เป้าหมายที่จะเข้ามาใช้บริการในเว็บไซต์อย่างชัดเจน เพื่อที่จะตอบสนองความต้องการของผู้ใช้ได้อย่างถูกต้อง
สิ่งที่ผู้ใช้ต้องการจากเว็บไซต์
1. ข้อมูลและการใช้งานที่เป็นประโยชน์
2. การตอบสนองต่อผู้ใช้
3. ความบันเทิง
4. ของฟรี
ข้อมูลหลักที่ควรมีอยู่ในเว็บไซต์
1. ข้อมูลเกี่ยวกับบริษัท (About the company)
2. รายละเอียดผลิตภัณฑ์ (Product information)
3. ข่าวความคืบหน้าและข่าวจากสื่อมวลชน (News/Press releases)
4. คำถามยอดนิยม (Frequently asked questions)
5. ข้อมูลในการติดต่อ (Contact information)
บทที่ 5
ออกแบบระบบเนวิเกชั่น
ออกแบบระบบเนวิเกชั่น
ความสำคัญของระบบเนวิเกชั่น
การออกเเบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชั่นเป็นส่วนเสริมในการสร้าง
สิ่งเเวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัว โดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างเเละควรจะไปไหนต่อ
เนวิเกชั่นที่ดี จะต้องบรรลุวัตถุประสงค์ต่อไปนี้
1.ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2.สามารถเข้าถึงข้อมูลได้อย่างไร
3. สามารถกลับไปยังหน้าเดิมได้อย่างไร
4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลเเล้ว
รูปแบบของระบบเนวิเกชั่น เเบ่งออกเป็น 4 รูปแบบ
1.ระบบเนวิเกชั่นเเบบลำดับขั้นเป็นเเบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน่าเเละมีลิงค์ไปยังหน้าอื่นๆ
ภายในเว็บถือเป็นลำดับขั้นอย่างหนึ่งแล้ว
2.ระบบเนวิเกชั่นเเบบโกลบอลเป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชั่นเเบบลำดับขั้นทำให้สามารถเคลื่อนที่ได้ทั้งในเเนวตั้งเเละเเนวนอนอย่างมีประสิทธิภาพ
3. ระบบเนวิเกชั่นเเบบโลคอลสำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบเเบบโลคอลหรือเเบบเฉพาะส่วน
4. ระบบเนวิเกชั่นเฉพาะที่เป็นเเบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำที่ฝั่งอยู่ในประโยค เเต่ไม่ควรใช้มากจนเกินไป เพราะผู้ใช้อาจ มองข้ามไปทำให้ไม่สนใจ
องค์ประกอบของระบบเนวิเกชั่นหลัก
ระบบเนวิเกชั่นที่สำคัญเเละพบมากที่สุด คือเนวิเกชั่นที่อยู่หน้าเดียวกับเนื้อหา ไม่ใช่เนวิเกชั่นที่อยู่ภายในเว็บ
ซึ่งได้แก่ เนวิเกชั่นบาร์ เนวิเกชั่นระบบเฟรม
pull down
pop up menu
image map
searchbox
เนวิเกชั่นบาร์ เป็นพื้นฐานที่ใช้ได้หลายรูปแบบ ทั้งเเบลำดับขั้น เเบบโกบอลเเละเเบบโลคอล โดยทั่วไปเนวิเกชั่นบาร์จะประกอบด้วยกลุ่มของลิงค์ต่างๆที่อยู้รวมกันในหน้าเว็บ
วิเกชั่นระบบเฟรม คุณสมบัติของเฟรมจะทำให้ไม่สามารถเเสดงเว็บหลายๆหน้าต่างเบราวเซอร์เดียวกัน โดยเเต่ละหน้าจะเป็นอิสระต่อกัน
ข้อเสีย
เสียพื้นที่ไปในบางส่วนเเสดงผลช้าใช้การออกแบบที่ซับซ้อน pull downmenuเป็นส่วนประกอบของฟอร์มที่มีลักษณะเด่น คือ มีรายการให้เลือกมากมาย ใช้พื้นที่น้อยเหมาะสำหรับข้อมูลที่มีข้อมูลประเภทเดียวกัน pop up menu เป็นเมนูอีกรูปแบบหนึ่งที่มีลักษณะคล้าย pull down menu เเต่รายการย่อยของเมนูจะปรากฏขึ้นเองเมื่อผู้ใช้นำเมาส์ไปวาง
ข้อดี
ช่วยให้หน้าเว็บไม่รกจนเกินไป image Map การใช้รูปกราฟิกเป็นลิงค์ในเเบบ image map ได้รับความนิยมนำมาใช้กับระบบเนวิเกชั่นมากขึ้น โดยบางบริเวณสามารถลิงค์ได้ด้วย
ข้อเสีย คือ ไม่ควรใช้มากจนเกินไปเพราะผู้ใช้อาจไม่รู้ว่าภาพเหล่านั้นสามารถลิ้งค์ได้ search Box การจัดเตรียมระบบสืบค้นข้อมูล ภายในเว็บเป็นระบบเนวิเกชั่นสำหรับเว็บที่มีข้อมูลปริมาณมากทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็ว
การออกแบบระบบเนวิเกชั่น
สร้างระบบเนวิเกชั่นหลัก การออกแบบที่ดีควรเริ่มจากการทีโครงสร้างลำดับขั้นของข้อมูลที่เหมาะสม รายการหลักในกลุ่มข้อมูลชั้นเเรกเป็นตัวกำหนดว่าระบบเนวิเกชั่่นเเบบโกบอลจะต้องมีอะไรบ้าง รายการหลักจะถูกลิงค์ให้เข้าถึงได้ทุกหน้าในเว็บเเละเป็นต้นเเบบให้กับระบบเนวิเกชั่นเเบบโลคอลเเละเเบบเฉพาะทีต่อไปทุกลำดับขั้นข้อมูลที่สูงกว่า
เนวิเกชั่นเเบบกราฟฟิก VS ตัวอักษร
จะเลือกใช้เเบบใด้ก็ได้ขึ้นอยู่กับผู้ออกแบบ โดยปรกติรูปแบบกราฟิกจะดูสวยกว่าเเบบตัวอักษรอยู่เเล้ว เเต่อาจทำให้การเเสดงผลช้าลง
เนวิเกชั่นเเบบกราฟิกพร้อมคำอธิบาย
เนวิเกชั่นเเบบกราฟิกหรือไอคอนเพื่อเพิ่มความน่าสนใจของลิงค์ ควรใส่คำอธิบายควบคู่กับกราฟิกด้วย
พื้นฐานของระบบเนวิเกชั่น
หลักการออกแบบเนวิเกชั่นคือการอำนวยความสะดวกตามเป้าหมายของผู้ใช้ เพื่อให้รู้ว่าตอนนี้กำลังอยู่ที่ไหน มีหลายสิ่งที่ทำให้รู้สถานที่ได้โดยเร็วไม่ว่าจะเป็นเเผนที่ ป้ายบอกทาง เสียง อากาศ เพิ่มความคล่องตัวในการเคลื่อนที่สามารถเข้าถึงได้ในทุกๆหน้า ควรจะมีลิงค์อย่างน้อยที่สุด 1 ลิงค์เพื่อกลับไปยังหน้า Home เเละป้องกันปัญหาการเกิดหน้าทางตันที่ไม่มีลิงค์ไปสู่ส่วนใดๆในเว็บ
ระบบเนวิเกชั่นที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้
1. เข้าใจง่าย
2. มีความสม่ำเสมอ
3. มีการตอบสนองต่อผู้ใช้
4. มีความพร้อมเเละเหมาะสมต่อการใช้งาน
5. นำเสนอหลายทางเลือก
6. มีขั้นตอนสั้นเเละประหยัดเวลา
7. มีรูปแบบที่สื่อความหมาย
8. มีคำอธิบายที่ชัดเจนเเละเข้าใจได้ง่าย
9. เหมาะสมกับวัตถุประสงค์ของเว็บ
10. สนับสนุนเป้าหมายเเละพฤติกรรมของผู้ใช้
บทที่ 6
การออกเเบบหน้าเว็บไซต์
การออกเเบบหน้าเว็บไซต์
หลักสำคัญในการออกเเบบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้ เเนวคิดในการออกเเบบหน้าเว็บ
เรียนรู้จากเว็บไซต์ต่างๆประยุกต์รูปแบบจากสื่อพิมพ์ใช้เเบบจำลองเปรียบเทียบ (Metaphor)ออกแบบอย่างสร้างสรรค์ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
เรียนรู้จากเว็บไซต์ต่างๆประยุกต์รูปแบบจากสื่อพิมพ์ใช้เเบบจำลองเปรียบเทียบ (Metaphor)ออกแบบอย่างสร้างสรรค์ใช้เเบบจำลองเปรียบเทียบ (Metaphor)
การใช้เเบบจำลองเปรียบเทียบ คือ การใช้สิ่งที่คุ้นเคยในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็นรูปภาพจากสิ่งพิมพ์หรือ
รูปแบบของร้านขายของสิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย
เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor) คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น
เว็บโรงภาพยนตร์
3. จำลองลักษณะที่มองเห็น (Visual metaphor) คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่คุ้นเคยของคนทั่วไป
หลักการออกเเบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกและสไตล์รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้นบุคลิก
เว็บแต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาและเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก ชนิดเเละการจัดตัวอักษรชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิคสามารถใช้ css กำหนดได้เพื่อให้เป็นมาตรฐานเดียวกัน
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นอนจนเกินไป
7.ใช้กราฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้
1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของการจัดระบบที่คุ้นเคย
เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น
2. จำลองการใช้งาน (Functional metaphor) คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น
เว็บโรงภาพยนตร์
3. จำลองลักษณะที่มองเห็น (Visual metaphor) คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลักษณะที่คุ้นเคยของคนทั่วไป
หลักการออกเเบบหน้าเว็บ
1.สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ
2. สร้างรูปแบบ บุคลิกและสไตล์รูปแบบ การเลือกรูปแบบเว็บที่เหมาะสมจะช่วยสร้างความเข้าใจของผู็ใช้ได้ดีขึ้นบุคลิก
เว็บแต่ละประเภทอาจมีบุคลิกลักษณะแตกต่างกันขึ้นอยู่กับเนื้อหาและเป้าหมายในการนำเสนอสไตล์ คือ ลักษณะการจัดโครงสร้างของหน้า รูปแบบกราฟิก ชนิดเเละการจัดตัวอักษรชุดสีที่ใช้ รวมถึงองค์ประกอบอื่นๆ ซึ่งไม่ควรสร้างตามใจชอบ
3.สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิคสามารถใช้ css กำหนดได้เพื่อให้เป็นมาตรฐานเดียวกัน
4.จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย
1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร
2.ชื่อหัวเรื่อง
3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ
4.ระบบเนวิเกชั่น
5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน
6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นอนจนเกินไป
7.ใช้กราฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอน ปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด
