บทที่ 5 ออกแบบระบบเนวิเกชั่น Designing Web Navigation
ระบบเนวิเกชั่น
ความสำคัญ
ช่วยให้ผู้ใช้ท่องเว็บได้อย่างคล่องตัวโดยไม่หลงทาง โดยทำให้ผู้ใช้สามารถรู้ได้ว่าตัวเองกำลังอยู่ที่ไหน ได้ผ่านที่ใดมาบ้างและควรจะไปทางไหนต่อ
วัตถุประสงค์
-ผู้ชมกำลังอยู่ส่วนใดของเว็บ
-สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างไร
-สามารถกลับไปยังหน้าเว็บเดิมได้อย่างไร
-หน้าเว็บเพจใดที่ได้เยี่ยมชมข้อมูลแล้ว
รูปแบบของเนวิเกชัน แบ่งเป็น4รูปแบบ
1.ระบบเนวิเกชันแบบลำดับขั้น
2.ระบบเนวิเกชันแบบโกลบอล
3.ระบบเนวิเกชันแบบโลคอล
4.ระบบเนวิเกชันเฉพาะที่
องค์ประกอบของระบบเนวิกเกชันหลัก (Main Navigation Elements)
ระบบเนวิกเกชันที่สำคัญและพบได้มากที่สุดคือ เนวิเกชันที่อยู่ในหน้าเดียวกับเนื้อหา ไม่ใช่เนวิกเกชันที่อยู่ในหน้าแรก เนื่องจากเมื่อผู้ใช้ผ่านหน้าแรกเข้าไปสู่ภายในเว็บไซท์แล้ว ก็ไม่อยากจะกลับมาเริ่มต้นใหม่ที่หน้าแรกทุกครั้งก่อนจะเข้าไปดูเนื้อหาในส่วนอื่นๆต่อ ระบบเนวิเกชันหลักทั้งแบบโกบอลและแบบโลคอล จึงช่วยให้ผู้ใช้สามารถย้ายจากหน้าใดๆ ไปสู่ส่วนอื่นในเว็บไซท์ได้อย่างคล่องตัว องค์ประกอบของเนวิกเกชันมีได้หลายรูปแบบ ได้แก่ เนวิเกชั่นบาร์ เนวิกเกชันเฟรม Pull down, menu, pop-up menu, image map และ search box
เนวิเกชันบาร์ (Nevigation Bar)
เนวิเกชันบาร์เป็นระบบพื้นฐานที่ใช้ได้หลายรูปแบบทั้งแบบลำดับชั้น แบบโกลบอล และแบบโคบอล โดยทั่วไปเนวิเกชันบาร์จะประกอบด้วยกลุ่มของลิงค์ต่าง ๆ ที่อยู่รวมกันในบริเวณหนึ่งของหน้าเว็บ โดยอาจจะเป็นตัวหนังสือหรือกราฟิกก็ได้ และถือเป็นรูปแบบของระบบเนวิเกชันที่ได้รับความนิยมมากที่สุด เนวิเกชันบาร์ระบบเฟรม (Frame-Based)
การสร้างเนวิเกชันบาร์โดยใช้ระบบเฟรมเป็นอีกวิธีที่ทำให้ผู้ใช้เข้าถึงเนวิเกชันได้ง่าย และสม่ำเสมอ คุณสมบัติของเฟรมจะทำให้คุณสามารถแสดงเว็บหลาย ๆ หน้าไว้ในหน้าต่างบราวเซอร์เดียวกัน โดยที่แต่ละหน้ายังเป็นอิสระต่อกัน
......................................................................................................
บทที่ 7 การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
Design for a variety of Web Environments
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้
2. ระบบปฏิบัติการของคอมพิวเตอร์
3. ความละเอียดของหน้าจอ
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
7. ขนาดหน้าต่างเบราเซอร์
8. ความสว่างและค่าความต่างของโทนสี
1.เบราเซอร์ที่ใช้
เบราเซอร์ที่ได้รับความนิยม Internet Explorer,Netscape Navigator,The World,Opera,Mozilla,Firefox
การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
- เว็บไซต์สำหรับเบราเซอร์ทุกรุ่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบบ
2. ระบบปฏิบัติการ
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิด และรุ่นของเบราเซอร์ที่ใช้ ระดับความระเอียดของหน้าจอ เป็นต้น
3. ความละเอียดของหน้าจอ
ความละเอียด 640*480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 พิกเซล ความละเอียดหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ด
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
- มอนิเตอร์สามารถแสดงสีที่แตกต่างกัน นอยู่กับประสิทธิภาพของการ์ดจอ
- หน่วยความจำในการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
- จำนวนสีที่การ์ดจอสามารถแสดงได้ ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth
ชุดสีสำหรับเว็บ หมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Mac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
เบราเซอร์จะแสดงฟอนต์ที่กำหนดไว้ในเว็บเพจได้ก้ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
MS Sans Serif VS Microsoft Sans Serif
- MS Sans Serif เป็นฟอนต์แบบบิตแมพที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
- Microsoft Sans Serif เป็นฟอนต์ที่มีโครงสร้างของอักขระแบบเวคเตอร์หรือลายเส้นโดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดีแต่สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี
สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอน ทั้งขนาด สี และชนิด
ผู้ชมทุกคนจะมองเห็นเหมือนกันหมด
ข้อเสีย
ใช้เวลาในการโหลดมากกว่า
ลำบากในการแก้ไขและเปลี่ยนแปลง
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
ความเร็วของเน็ตจะมีผลต่อการแสดงผลของเว็บ ซึ่งจะมีหลายระดับ
- ผู้ใช้ตามบ้านส่วนใหญ่จะใช้ความเร็ว 5 kbps
- ในหน่วยงานบางแห่งอาจจะใช้อินเตอร์เน็ตความเร็วสูง เข่น ADSL, Cable modem ซึ่งมีความเร็วตั้งแต่ 128 Kbps ถึง 10 Mbps
7. ขนาดหน้าต่างเบราเซอร์
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่จะถูกปรับเปลี่ยนเป็นเท่าไหร่ก็ได้ตามความต้องการของผู้ใช้
บทที่ 9 การออกแบบกราฟฟิกสำหรับเว็บไซต์
กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผุ้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( 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 (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
Adobe ImangeReady ลักษณะหน้าตาและเครื่องมือคล้ายคลึงกับ Photoshop แต่จะถูกพัฒนาข้นเพื่องานกราฟฟิกโดยเฉพาะ เพิ่มความสามารถในการสร้าง animation ได้
Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว การตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์ HTML
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
- GIF เป็นกราฟฟิกประเภทเดียวที่ไม่สามารถนำไปใช้เบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชันใดๆ
- GIF มีคุณสมบัติในการเคลื่อนไหว
- GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือ ที่คุณภาพ 12.5% , 25% , 50% , 100% ตามลำดับ
ข้อดี คือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
ข้อเสีย คือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
กราฟฟิกรูปแบบ JPEG
- มีนามสกุลเป็น .jpg หรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
- ไฟล์ประเภท JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
- ใช้ระบบสีขนาด 24 บิต ซึ่งจะให้สีสมจริงมากถึง 16.7 ล้านสีส่งผลให้ได้รูปที่มีคุณภาพสูง
- ระบบการบีบอัดข้อมูลในไฟล์ JPEG
เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆในบริเวณกว้างๆได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
- ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
- เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
- ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
