Ø บทที่ 2 กระบวนการพัฒนาเว็บไซด์
การจัดระบบโครงสร้างข้อมูลเป็นพื้นฐานในการออกแบบเว็บไซท์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ ดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมี ข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
Phase 1: สำรวจปัจจัยสำคัญ(Research)
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
1. รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2. เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการ
3. ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
Phase 2: พัฒนาเนื้อหา(Site Content)
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
Phase 3: พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
Phase 4: ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
Phase 5:พัฒนาและดำเนินการ (Production & Operation)11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
Ø บทที่ 5 ออกแบบระบบเนวิเกชัน
ü ความสำคัญของระบบเนวิเกชัน
การออแบบโครงสร้างข้อมูลที่ดี ช่วยให้ผู้ใช้ “เข้าถึงข้อมูลได้ง่ายขึ้น” ระบบเนวิเกชันเป็นส่วนเสริมเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดย“ไม่หลงทาง”
เนวิเกชัน ที่ดีต้องสามารถตอบคำถามหรือบรรลุวัตถุประสงค์ต่างๆ ดังนี้...
1. ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2. สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
3. สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
4. หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
ü คุณสมบัติการนำทางของบราวเซอร์
Open URL เป็นช่องว่างสำหรับกรอกที่อยู่เว็บ
History แสดงรายชื่อเว็บที่เคยเข้าไปย้อนหลัง
Bookmark ทำให้บราวเซอร์จำที่อยู่ของเว็บ
Status Bur แสดงรายละเอียด URL
***สีมาตรฐษนของลิงค์ คือ สีน้ำเงิน , ม่วง
ü รูปแบบของระบบเนวิเกชัน
1. ระบบเนวิเกชันแบบลำดับชั้น (Hierarchicai)
เป็นแบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน้าและมีลิงค์ไปยังหน้าอื่น ๆ ภายในเว็บ
เป็นแบบพื้นฐาน คือ มีหน้าโฮมเพจหนึ่งหน้าและมีลิงค์ไปยังหน้าอื่น ๆ ภายในเว็บ
2. ระบบเนวิเกชันแบบโกลบอล (Global)
หรือแบบตอลดทั่วทั้งไซด์ สามารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอนอย่างมีประสิทธิภาพตลอดทั้งไซด์
หรือแบบตอลดทั่วทั้งไซด์ สามารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอนอย่างมีประสิทธิภาพตลอดทั้งไซด์
3. ระบบเนวิเกชันแบบโลคอล (Local)
มีความซับซ้อนมาก เป็นแบบเฉพาะส่วนจะช่วยเมื่อมีบางส่วนที่ต้องการระบบเนวิเกชันที่มีลักษณะเฉพาะตั
มีความซับซ้อนมาก เป็นแบบเฉพาะส่วนจะช่วยเมื่อมีบางส่วนที่ต้องการระบบเนวิเกชันที่มีลักษณะเฉพาะตั
4. ระบบเนวิเกชันเฉพาะที่ (Ad Hoc)
เป็นลิงค์ที่ฝังอยู่ในข้อความ เป็นแบบเฉพาะที่ตามความจำเป็นของเนื้อหา คือ ลิงค์ของคำ หรือ ข้อความที่น่าสนใจ
เป็นลิงค์ที่ฝังอยู่ในข้อความ เป็นแบบเฉพาะที่ตามความจำเป็นของเนื้อหา คือ ลิงค์ของคำ หรือ ข้อความที่น่าสนใจ
ü องค์ประกอบของระบบเนวิเกชันหลัก
1. เนวิเกชันบาร์ ประกอบด้วยกลุ่มของลิงค์ต่างๆ ที่อยู่รวมกันในบริเวณหนึ่งของหน้าเว็บ
2. เนวิเกชันบาร์ระบบเฟรม สามารถแสดงเว็บหลายๆ หน้าในหน้าต่างบราวเซอร์เดียวกัน ปรากฏอยู่คนที่เสมอ ผู้ใช้เข้าถึงระบบเนวิเกชันได้ตลอดเวลา คงความสม่ำเสมอทั่วทั้งไซด์
3. Pull Down Menu ใช้พื้นที่น้อย ช่วยให้ผู้ใช้เลือกรายการย่อยเข้าไปสู่เป้าหมายได้อย่างสะดวก เหมาะกับข้อมูลประเภทเดียวกันที่มีจำนวนมาก
4. Pop up Menu ผู้ใช้สามารถเลื่อนเมาส์ไปเลือกรายการต่างๆ ที่ปรากฏขึ้นได้ ช่วยให้หน้าเว็บดูไม่รกเกินไป ช่วยประหยัดพื้นที่
5. Image Map ใช้รูปกราฟิกเป็นลิงค์ แต่ไม่ควรใช้เป็นระบบเนวิเกชันเดียวในเว็บ เพราะอาจมีผู้ใช้บางคนไม่รู้ว่ารูปกราฟฟิกสามารถคลิกไปยังข้อมูลอื่นได้
6. Search Box ระบบสืบค้นข้อมูลภายในเว็บ ทำให้ผู้ใช้ค้นหาสิ่งที่ต้องการได้อย่างรวดเร็ว
ü การออกแบบระบบเนวิเกชัน
§ สร้างระบบเนวิเกชันหลัก
§ สร้างระบบเนวิเกชันแบบกราฟฟิก vs ตัวอักษร
§ สร้างระบบเนวิเกชันแบบกราฟฟิกพร้อมคำอธิบาย
§ พื้นฐานของระบบเนวิเกชัน
§ เพิ่มความคล่องตัวในการเคลื่อนที่
§ การออกแบบระบบเนวิเกชัน
ü ระบบเนวิเกชันที่มีประสิทธิภาพ ควรมีคุณสมบัติ ดังนี้
1. เข้าใจง่าย
2. สม่ำเสมอ
3. ตอบสนอง
4. พร้อมและเหมาะสม
5. นำเสนอหลายทางเลือก
6. มีขั้นตอนสั้นและประหยัดเวลา
7. สื่อความหมาย
8. มีคำอธิบายชัดเจน
9. เหมาะสมกับวัตถุประสงค์ของเว็บ
10. สนับสนุนเป้าหมาย
Ø บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซด์
รูปแบบกราฟฟิกสำหรับเว็บ
รูปแบบหลักมี 2 ประเภท คือ GIF และ JPG
1. GIF ย่อมาจากคำว่า Graphic Interchange Format ได้รับความนิยมในยุคแรก มีระบบสีแบบIndex ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
2. JPG ย่อมาจากคำว่า Joint Photographic Experst Group มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียดระบบการวัดความละเอียดของรูปภาพ ระบบการวัดความละเอียดของรูปภาพที่แสดงผลบนมอนิเตอร์ควรใช้หน่วย pixel por inch (ppi) การใช้งานจะนำหน่วย dor per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi
ไม่มีความคิดเห็น:
แสดงความคิดเห็น