หน้าเว็บ

WellCome To Blog HassaPol

Lecture




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

          การจัดระบบโครงสร้างข้อมูล คือการพิจารณาว่า เว็บควรจะมีข้อมูลและการทำงานใดบ้าง โดยเริ่มจากการกำหนดเป้าหมาย กลุ่มผู้ใช้เป้าหมาย เนื้อหาและการใช้งานที่จำเป็น นำมาจัดกลุ่มให้เป็นระบบเป็นพื้นฐานในการออกแบบเว็บไซต์ที่ดี มีทั้งหมด 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. แนวทางการดูแลและพัฒนาต่อไป








การเลือกใช้สีสำหรับเว็บไซต์



สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้  เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็น จากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจตั้งแต่รูปภาพตัวอักษรสีพื้นหลังการใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
 การใช้สีพื้นใกล้เคียงกับสีตัวอักษรบางครั้งอาจสร้างความลำบากในการอ่าน การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
การผสมสี (Color  Mixing) มี2แบบ
    1. การผสมแบบบวก (Additive mixing)จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์  ทีวี  
   2. การผสมแบบลบ (Subtractive  mixing)  การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่าง ๆ สามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน   รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ
ความกลมกลืนของสี
 - ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงความสมดุลและความสวยงามในเวลาเดียวกัน
 การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชมการใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผู้ชมได้
 -เป้าหมายในเรื่องสี คือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่ายน่าสนใจและสื่อความหมายได้อย่างเหมาะสม
รูปแบบชุดสีพื้นฐาน (Simple  Color  Schemes)
  - ชุดสีร้อน (Warm  Color  Scheme) ประกอบด้วยสีม่วง , น้ำเงิน , น้ำเงินอ่อน , ฟ้า ,ฟ้าเงินแกมเขียวและสีเขียวโดยจะให้ความรู้สึกเย็นสบายองค์ประกอบที่ใช้สีเย็นจะดูสุภาพเรียบร้อย
  - ชุดสีแบบเดียว  (Monochromatic  Color  Scheme) เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียวแต่เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่าง ๆและชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียวแต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวาเพราะขาดความหลากหลายของสี
  - ชุดสีที่คล้ายคลึงกัน (Analogous  Color  Scheme)  ประกอบด้วยสี 2 หรือ 3 สีที่ติดอยู่กันในวงล้อสามารถเพิ่มเป็น 4 หรือ 5 สีได้แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
  - ชุดสีตรงข้ามข้างเคียง (Split  Complementary  Color  Scheme)  เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม   และชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น   แต่จะมีผลให้ความสดใส  ความสะดุดตา  และความเข้ากันของสีลดลงด้วย
 -ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) ดัดแปลงมาจากชุดสีตรงข้ามเช่นกันแต่สีตรงข้ามทั้ง 2สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2ด้านและชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น  แต่จะมีความสดใสและกลมกลืนของสีที่ลดลง
  -ชุดสีเย็น (Cool  Color  Scheme) เว็บเพจที่ใช้โทนสีเย็นให้บรรยากาศคล้ายทะเลรู้สึกเย็นสบาย
  - ชุดสีแบบสามเส้า (Triadic  Color  Scheme)  เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสามซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
  -ชุดสีตรงข้าม (Complementary  Color  Scheme)  คือสีที่อยู่ตรงข้ามกันในวงล้อสี   เมื่อนำสีทั้งสองมาใช้คู่กัน   จะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น
ประโยชน์ของสีในเว็บไซต์
    - สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้       
    - สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
    - สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
    - สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
    - สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
    - ช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
    - สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ 



รูปแบบกราฟฟิกสำหรับเว็บ 
(GIF ,JPG และ PNG)

  GIF  ย่อมาจาก  Graphic Interchange  Formatมีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สีได้รับความนิยมในยุคแรก มีการบีบอัดข้อมูลตามแนว
นอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
  JPG  ย่อมาจาก  Joint  Photogtaphic  Experts  Groupใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy) มีข้อมูลสีขนาด 24 บิต (True Color)สามารถแสดงสีได้ถึง 16.7 ล้านสี ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
  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    
  • ค่าพื้นฐานที่สามารถเลือกปรับได้คือ  รูปแบบไฟล์,  ชุดสีที่ใช้ ,  จำนวนสี,  ระดัความสูญเสีย,  ความโปร่งใส และสีพื้นหลัง

ไม่มีความคิดเห็น:

แสดงความคิดเห็น