การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1. เบราเซอร์ที่ใช้ เบราเซอร์ คือ โปรแกรมที่ใช้เรียกดูเว็บเพจ สามารถแสดง
ผลได้ทั้งรูปแบบตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้รับความนิยม
เช่น Internet Explorer , Netscape NavigatorOpera , Mozilla , Firefox ปัจจุบัน
ได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง คือ W3C
2. ระบบปฏิบัติการ(Operating System) จะ มีผลต่อการทำงานของเบรา
เซอร์มากแต่ละระบบปฏิบัติการ จะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ
เบราเซอร์ ที่ใช้ระดับความละเอียดของหน้าจอชุดสีระบบและชนิดของตัวอักษรที่
มาพร้อมกับระบบ
3. ความละเอียดของหน้าจอ ความละเอียด 640x480 หมายถึง หน้าจอมีจุด
พิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 ความละเอียดของ
หน้าจอจะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผล
4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ จำนวนสีที่การ์ดจอสามารถแสดง
ได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth
ซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล ชุดสีสำหรับเว็บ
(Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ
Windows และ Mac
5. ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ จะแสดงฟอนต์ที่กำหนดไว้ใน
เว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
- MS SansSerif เป็นฟอนต์แบบบิตเเมพ(bitmapped font)
- Microsoft Sans Serif เป็นฟอนต์แบบเวคเตอร์หรือลายเส้น(vector font)
สามารถปรับขนาดได้อย่างไม่จำกัด
ข้อดี
1. สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิด ขนาด สี
2. สามารถมองเห็นได้โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง
3. สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
1. ใช้เวลาในการ Downlond มาก
2. ลำบากในการแก้ไขและเปลี่ยนแปลง
3. ข้อความเป็นกราฟฟิกจะไม่สามารถค้นหาได้ด้วย search engine
6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต จะมีผลต่อเวลาที่ใช้ในการแสดงผล
ของเว็บ ความเร็วของอินเตอร์เน็ตมีหลายระดับ คือ - ผู้ใช้ตามบ้าน จะใช้ความเร็ว
56 kbps
** หน่วยงานบางแห่ง จะใช้ความเร็วสูง เช่น ADSL , Cable modem ซึ่งมี
ความเร็วตั้งแต่ 128 kbpsจนถึง 10 kbps
7. ขนาดหน้าต่างเบราเซอร์
** ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้(Flexible Design)องค์
ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
ข้อดี
1.พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
2. เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
1.ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้
** ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design) ผู้ที่ต้องการควบ
คุมโครงสร้างของหน้าเว็บให้คงที่เสมอ
ข้อดี
1. เว็บเพจจะปรากฏต่อสายตาผู้ใช้เป็นรูปแบบเดียวกันเสมอ
2. สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี ทำให้ตัวอักษร
ไม่ยาวเกินไป
ข้อเสีย
1. ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล
8. ความสว่างและค่าความต่างของโทนสี
** สามารถปรับความสว่าง(Brightness) และความต่างของโทนสี
(Contrast) จากมอนิเตอร์ได้
** ต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และความ
เลือกใช้โทนสีที่ต่างกันพอสมควร
** ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง
รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ PNG)
* GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
* JPG ย่อมาจาก Joint Photogtaphic 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
- Firework
* ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์, ชุดสีที่ใช้ , จำนวนสี, ระดัความสูญเสีย, ความโปร่งใส และสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
* ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
* เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
* ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
กระบวนการพัฒนาเว็บไซต์
1. จัดระบบโครงสร้างข้อ้อมูล (Information Architecture)
• การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนด เป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบ
การจัดระบบโครงสร้าง
เป็นพื้นฐานการออกแบบเว็บไซต์ที่ดี ได้แก่ รูปแบบการนำเสนอ ระบบการทำงานแบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บดังนั้น การจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์
จัดระบบโครงสร้างข้อ้อมูล(Information Architecture)
Phase 1 : สำรวจปัจจัยสำคัญ (Research)
1.รู้จักตัวเอง-กำหนดเป้าหมายและสำรวจความพร้อม
2.เรียนรู้ผู้ใช้-ระบุกลุ่มผู้ใช้และศึกษาความต้องการการ
3.ศึกษาคู่แข่ง-สำรวจการแข่งขันและการเรียนรู้คู่แข่ง
• สิ่งที่ได้รับ
1.เป้าหมายหลักของเว็บ
2.ความต้องการของผู้ใช้
3.กลยุทธ์ในการแข่งขัน
Phase 2 : พัฒนาเนื้อหา(Site Content)
4.สร้างกลยุทธ์การออกแบบ
5.หาข้อสรุปขอบเขตเนื้อหา
• สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตและเนื้อหาการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 3 : พัฒนาโครงสร้างเว็บไซท์(Site Structure)
6.จัดระบบข้อมูล
7.จัดทำโครงสร้างข้อมูล
8.พัฒนาระบบเนวิเกชัน
• สิ่งที่ได้รับ
1.แนวทางการออกแบบเว็บ
2.ขอบเขตและเนื้อหาการใช้งาน
3.ข้อมูลที่ถูกจัดอย่างเป็นระบบ
Phase 4 : ออกแบบและพัฒนาหน้าเว็บ(Visual Design)
9.ออกแบบลักษณะหน้าตาเว็บ
10.พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย
• สิ่งที่ได้รับ
1.ลักษณะหน้าตาของเว็บ
2.เว็บต้นแบบที่ใช้ในการพัฒนา
Phase 5 : พัฒนาและดำเนินการ (Production & Operation)
11.ลงมือพัฒนาเว็บ
12.เปิดเว็บไซท์
13.ดูแลและพัฒนาต่อเนื่อง
• สิ่งที่ได้รับ
1.เว็บที่สมบูรณื
2.เปิดตัวเว็บให้เป็นที่รู้จัก
3.แนวทางการดูแลและพัฒนาต่อไป
