Lecture

การออกแบบกราฟฟิกสำหรับเว็บไซต์

  กราฟฟิกเป็น องค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจไห้กับผู้ไช้ รวมทั้งช่วยสร้างความสวยงามไห้กับเว็บไซต์น่าดูยิ่งขึ้น

ปัญหาที่มักจะเกิดขึ้นกับการสร้างกราฟฟิก คือ               การเลือกใช้รูปแบบที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รุจักความแตกตต่างของรูปแบบ              กราฟฟิก ส่งผลไห้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์เกินจำเป็น



 โปรแกรมกราฟฟิกสำหรับเว็บ
             ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
    - Adobe Photoshop
    - Firework
    - Gimp

ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์ , ชุดสีที่ใช้ , จำนวนสี , ระดับความสูญเสีย , ความโปร่งใส และสีพื้นหลัง

กราฟฟิกรูปแบบ GIF


1. มีไฟล์นามสกุลเป็น .gif
2 .ลักษณะเด่นของ gif คือการไม่ขึ้นกับระบบปฎิบัติการใดๆ
3 .GIF เป็นกราฟฟิกประเภทเดียวที่สามารถนำไปใช้กับบราวเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชั่น        ใดๆ
4. GIF มีคุณสมบัติในการเคลื่นไหว
5. GIF มีระบบเสียง Index เก็บข้อมูลสีได้สูงสุด 8 bit
6. คุณสมบัติ Interlaccing คือการบันทึกไฟล์ GIF เป็น 4ระดับ คือ
   ที่คุณภาพ 12.5%, 25%,50% และ 100% ตามลำดับ
  ข้อดี คือ ผู้ใช้สามารถเห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
  ข้อเสีย คือ ขนาดไฟลืจะเพิ่มขึ้นเล็กน้อย



ระบบการบีบอัดข้อมูลของ GIF
 

               GIF มีการบีบอัดข้อมมูลแบบไม่สูญเสีย(Lossless) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด GIF ใช้การบีบอัดที่เรียกว่า LZW (Lempel -Ziv-Welch) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากการซ้ำซ้อนของข้อมูล

คุณสมบัติในการเคลื่นไหว (Animated  GIF)


        รูปที่ประกอบด้วยหลายๆ เฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตาม   เฟรมต่างๆ ที่มีอยู่อย่างต่อเนยื่อง
 - ข้อดีของ Animeted GIF คือ ไม่ต้องอาศัย plug-inใดๆ เนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้

ข้อคิดในการใช้ Animeted GIF


              ใช้ภาพเคลื่นไหวในจุดที่ต้องการไห้ผู้ชมสนใจมากที่สุด
    ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป
  
   การลดขนาดไฟล์ GIF
  พยายามลดขนาดรูปหรือกราฟฟิกไห้เล็กไว้เสมอ ตัดเอาบางส่วนของรุปที่ไม่มีความจำเป็นออกไป ไช้     กราฟฟิกขนาดเล้กหลายๆรุปรวมกัน แทนที่จะใช้กราฟฟิก ขนาดไหญ่เพียงรุปเดียว

การลดขนาดไฟล์ GIF


ออกแบบโดยใช้สีพื้นเข้าไว้
- เลือกใช้สีพื้นๆ ที่ไม่ซับซ้อน แทนที่จะเป็นการไล่สีจากสีหนึ่งไปอีกสีหนึ่ง
- จำกัดปริมาณของส่วนที่มีลักษณะของรูปภาพหรือภาพถ่ายในไฟล์ GIF

 ออกแบลวดลายตามแนวนอน
- รุปลักษณะเดียวกัน 2 รูป รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์ที่เล็กกว่า

 ลดจำนวนสีที่ใช้ลง
- แม้ว่ากราฟฟิกรูปแบบ GIF มีระบบสี 8 บิต แต่เราไม่จำเป็นต้องใช้ทั้งหมดที่มีอยู่ก็ได้

คำแน่ะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ


- ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ(Web Palette)
- เลือกใช้รูปแบบที่เหมาสม
- ตัดแบ่งกราฟฟิกออกเป้นส่วนย่อย

 กระบวนการพัฒนาเว็บไซต์

                           

การ จัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบเป็นพื้นฐานในการออกแบบเว็บไซต์ที่ดี มีทั้งหมด 5 Phase 

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. ข้อมูลที่ถูกจัดอย่างเป็นระบบ 7 

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual Design) 
9. ออกแบบลักษณะหน้าตาเว็บ
10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย 
สิ่งที่ได้รับ 
1. ลักษณะหน้าตาของเว็บ
2. เว็บต้นแบบที่จะใช้ในการพัฒนา
3. รูปแบบโครงสร้างของเว็บ
4. ข้อกำหนดในการพัฒนาเว็บ 

Phase 5 : พัฒนาและดำเนินการ (Production & Operation) 
11. ลงมือพัฒนาเว็บ
12. เปิดเว็บไซต์
13. ดูแลและพัฒนาต่อเนื่อง 
สิ่งที่ได้รับ 
1. เว็บที่สมบูรณ์
2. เปิดตัวเว็บและทำให้เป็นที่รู้จัก
3. แนวทางการดูแลและพัฒนาต่อไป

จัดระบบข้อมูลในเว็บ

ปัญหาความคลุมเครือของกลุ่มข้อมูล

- การแบ่งข้อมูลต้องอาศัยพื้นฐานทางด้านภาษามาช่วยเพราะคำหนึ่งคำมีความหมายได้หลายอย่างในเหตุการณ์ต่างกัน

- การแบ่งหมวกหมู่ในเว็บมักจะเกี่ยวข้องกับสิ่งที่เป็นนามธรรม เช่น หัวเรื่องหรือข้อความ ดังนั้นจึงเป็นการยากที่จะทำให้ทุกคนเข้าใจระบบการจัดกลุ่มข้อมูลที่เราได้ออกแบบไว้

การจัดลำดับความสำคัญของข้อมูล 

       ได้แก่ การจัดกลุ่มข้อมูลการกำหนดตำแหน่งของข้อมูลและเทคนิคที่ใช้นำเสนอผู้ออกแบบควรจัดกลุ่มข้อมูลที่มีความสัมพันธ์กันให้อยู่ในกลุ่มเดียวกัน โดยรูปแบบการจัดกลุ่มข้อมูลอาจกระทำได้หลายลักษณะ หลักการออกแบบโครงสร้างระบบข้อมูลแบบลำดับชั้นควรมีจำนวน 7 บวกลบ 2 รายการในเมนูที่มีจำนวนรายการมากกว่า 10 จะสร้างความรู้สึกว่ามากเกินไปส่วนความลึกไม่ควรเกิน 4-5 ชั้น  เพราะจะทำให้ผู้ใช้อาจหมดหวังและเลิกล้มความตั้งใจได้ โครงสร้างระบบข้อมูลแบบไฮเปอร์เท็กซ์มีลักษณะคล้ายเครือข่ายโยงใยโครงสร้างระบบนี้แบ่งเป็น 2 ส่วนคือ รายการ หรือกลุ่มข้อมูลที่ถูกลิงค์กับลิงค์ที่เชื่อมโยงข้อมูลเหล่านั้นส่วนใหญ่จึง มักนำระบบนี้มาใช้เป็นส่วนเสริมให้กับโครงสร้างข้อมูลแบบลำดับชั้น

โครงสร้างข้อมูลแบบฐานข้อมูล  

        มักนิยมใช้กับเว็บขนาดใหญ่ การนำระบบฐานข้อมูลมาใช้ในเว็บจะช่วยเพิ่มความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและถูกต้อง แต่เป็นเรื่องยากที่จะเอาข้อมูลทั้งหมดมาไว้ในฐานข้อมูล