กระบวนการพัฒนาเว็บไซท์
Phase1:สำรวจปัจจัยสำคัญ
1. รู้จักตัวเอง
2. เรียนรู้ผู้ใช้
3. ศึกษาคู่แข่ง
สิ่งที่ได้รับ
1. เป้าหมายหลักของเว็บ
2. ความต้องการของผู้ใช้
3. กลยุทธ์ในการแข่งขัน
Phase2: พัฒนาเนื้อหา
4. สร้างกลยุทธ์การออกแบบ
5. หาข้อสรุปขอบเขตเนื้อหา
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase3: พัฒนาโครงสร้างเว็บไซท์
6. จัดระบบข้อมูล
7. จัดทำโครงสร้างข้อมูล
8. พัฒนาระบบเนวิเกชัน
สิ่งที่ได้รับ
1. แนวทางการออกแบบเว็บ
2. ขอบเขตเนื้อหาและการใช้งาน
3. ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase4: ออกแบบและพัฒนาหน้าเว็บ
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
สิ่งที่ได้รับ
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนา
Phase5: พัฒนาและดำเนินการ
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซท์
13. ดูแลและพัฒนาต่อเนื่อง
สิ่งที่ได้รับ
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เว็บเป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป
ออกแบบระบบเนวิเกชัน
ความสำคัญของระบบเนวิเกชัน
- ระบบเนวิเกชันอาจประกอบด้วยองค์ประกอบหลายอย่าง เช่น เนวิเกชันบาร์ หรือ pop-up menu ซึ่งอาจอยู่ในทุกหน้าของเว็บเพจ และอาจอยู่ในหน้าเฉพาะที่มีรูปแบบเป็นระบบสารบัญ ระบบดัชนี ที่สามารถให้ผู้ใช้คลิกผ่านโครงสร้างข้อมูลไปยังส่วนอื่นได้
- การออกแบบโครงสร้างข้อมูลที่ดีช่วยให้ผู้ใช้เข้าถึงข้อมูลได้ง่ายขึ้น ส่วนระบบเนวิเกชันเป็นส่วนเสริมในการสร้างสิ่งแวดล้อมที่สื่อความหมายเพื่อช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อ
Navigation ที่ดีจะต้องสามารถตอบคำถามหรือบรรลุวัตถุประสงค์ต่อไปนี้
1. ผู้ชมกำลังอยู่ในส่วนใดของเว็บ
2. สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
3. สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
4. หน้าเวบเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
รูปแบบของระบบเนวิเกชัน แบ่งออกเป็น 4 รูปแบบ
1. ระบบเนวิเกชันแบบลำดับชั้น ( Hierarchical )
เป็นแบบพื้นฐานคือมีหน้าโฮมเพจหนึ่งหน้าและมีลิงค์ไปยังหน้าอื่นๆ ภายในเว็บถือเป็นแบบลำดับขั้นอย่างหนึ่งแล้ว แต่มีข้อจำกัดคือเคลื่อนที่ได้เฉพาะแนวตั้ง (บน-ล่าง)
2. ระบบเนวิเกชันแบบโกลบอล ( Global )
หรือเรียกว่าแบบตลอดทั่วทั้งไซท์ เป็นระบบที่ช่วยเสริมข้อจำกัดของระบบเนวิเกชันแบบลำดับขั้น ทำให้สมารถเคลื่อนที่ได้ทั้งในแนวตั้งและแนวนอนอย่างมีประสิทธิภาพตลอดทั้งไซท์ ซึ่งอาจอยูาในรูปของเนวิเกชันบาร์ที่วางไว้ด้านบนหรือด้านล่างสุดของเว็บเพจทุกหน้าก็ได้ ผลการศึกษาตำแหน่องที่ดีที่สุดสำหรับเนวิเกชันบาร์คือด้านบนสุดหรือล่างสุดของหน้าเว็บ โดยปกติเนวิเกชันที่ด้านล่างของหน้ามักเป็นที่รวมลงค์ของข้อมูลเพิ่มเติมที่เกี่ยวกับเว็บ
3. ระบบเนวิเกชันแบบโลคอล ( Local )
สำหรับเว็บที่มีความซับซ้อนมากอาจต้องใช้ระบบแบบโลคอลหรือแบบเฉพาะส่วนเข้ามาช่วยเมื่อมีบางส่วนที่ต้องการระบบเนวิเกชันที่มีลักษณะเฉพาะตัวเช่น หัวข้อย่อยของเนื้อหาที่อยู่ภายในส่วนหลักๆ ของเว็บเพื่อความสะดวกและสื่อความหมายให้ดีขึ้น
4. ระบบเนวิเกชันเฉพาะที่ ( Ad Hoc )
เป็นแบบเฉพาะที่ตามความจำเป็นของเนื้อหาซึ่งก็คือลิงค์ของคำหรือข้อความที่หน้าสนใจซึ่งฝังอยู่ในประโยค ที่เชื่อมโยงไปยังรายละเอียดเกี่ยวกับคำนั้นๆ เพิ่มเติม เนวิเกชันรูปแบบนี้เป็นวิธีที่ดีในการนำเสนอจุดที่น่าสนใจได้อย่างไม่เด่นชัดจนเกินไป เพื่อให้ผู้สนใจคลิกเข้าไปหารายละเอียดเพิ่มเติมเองได้ขณะเดียวกันไม่รบกวนการอ่านของผู้ใช้ทั่วไปที่ไม่ต้องการข้อมูลอย่างละเอียด
ข้อเสียคือ ผู้อ่านมักมองข้ามลิงค์เหล่านี้ได้ง่ายเมื่ออ่านผ่านอย่างรวดเร็ว
วิธีแก้คือรวบรวมลิงค์เหล่านี้ไว้ในส่วนของ "แหล่งข้อมูลที่มีประโยชน์" อาจอยู่ด้านบนหรือด้านล่างของหน้านั้นก็ได้เพื่อเปิดโอกาสให้ผู้อ่านเห็นชัดขึ้นและเกิดความต่อเนื่องของเนื้อหา
การออกแบบกราฟฟิกสำหรับเว็บไซต์
รูปแบบกราฟฟิกสำหรับเว็บ ( GIF, JPG, และ PNG )
GIF ย่อมาจาก Graphic Interchange Format
ได้รับควมนิยมในยุคแรก
มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสมสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint Photographic Experts Group
มีข้อมูลสีขนาด 24 บิต ( True Color ) สามารถแสดงสีได้ถึง 16.7 ล้านสี
ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย ( lossy )
ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างอะเอียด
PNG ย่อมาจาก Portable Network Graphic
สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24 บิต
มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดความสูญเสีย ( lossless )
มีระบบการควบคุมค่าแกมม่า ( Gamma ) และความโปร่งใส ( Transparency )ในตัวเอง
ระดับการวัดขนาดของรูปภาพ
รูปภาพใช้หน่อยวัดขนาดตามหน้าจอมอนิเตอร์ นั้นก็คือ หน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆ ในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบอร์เซอร์ด้วย
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch (ppi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi ความละเอียดของรูปภาพที่ใช้ในเว็บไซท์ควรมีความบะเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
Adobe Photoshop
Firework
Gimp
ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้, จำนวนสี, ระดับความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
GIF ย่อมาจาก Graphic Interchange Format
ได้รับควมนิยมในยุคแรก
มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสมสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint Photographic Experts Group
มีข้อมูลสีขนาด 24 บิต ( True Color ) สามารถแสดงสีได้ถึง 16.7 ล้านสี
ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย ( lossy )
ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างอะเอียด
PNG ย่อมาจาก Portable Network Graphic
สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24 บิต
มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดความสูญเสีย ( lossless )
มีระบบการควบคุมค่าแกมม่า ( Gamma ) และความโปร่งใส ( Transparency )ในตัวเอง
ระดับการวัดขนาดของรูปภาพ
รูปภาพใช้หน่อยวัดขนาดตามหน้าจอมอนิเตอร์ นั้นก็คือ หน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆ ในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบอร์เซอร์ด้วย
ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch (ppi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi ความละเอียดของรูปภาพที่ใช้ในเว็บไซท์ควรมีความบะเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
Adobe Photoshop
Firework
Gimp
ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้, จำนวนสี, ระดับความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น