Lecture

บทที่ 7 

การออกแบบเว็บไซต์ให้เหมาะสมกับสิ่งแวดล้อม

1. เบราเซอร์ที่ใช้

ช่วยให้ผู้เข้าชมเว็บสามารถดูข้อมูลเว็บไซต์ได้

2. ระบบปฏิบัติการของคอมพิวเตอร์

ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของบราวเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกัน

3. ความละเอียดของหน้าจอ

ความละเอียดของหน้าจอจะไม่ขึ้นกับขนาดมอนิเตอร์ที่ใช้ แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน ปัจจุบันความละเอียดของหน้าจอที่ 1366*768 px

4. จำนวนสีที่หน้าจอของผู้ใช้สามารถแสดงได้

ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ ยิ่งมาก ยิ่งแสดงสีได้มากขึ้น

5. ชนิดตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้

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

6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

มีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ ต้องออกแบบเว็บให้น่าสนใจ สวยงาม และดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด

7. ขนาดหน้าต่างเบราเซอร์

มีโอกาสถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้

8. ความสว่างและค่าความต่างของโทนสี

ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทนสีเหลืองหรือสว่างจนเกินไป และควรเลือกใช้โทนสีที่ต่างกันพอสมควร

__________________________________________________________

บทที่ 8

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

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

การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน

การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้

การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น

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

ความรู้เบื้องต้นเกี่ยวกับสี

แม่สีขั้นต้น (Primary color)

- สีแดง
- สีเหลือง
- สีน้ำเงิน 

แม่สีขั้นที่ 2 

แม่สีขั้นที่ 3 

แม่สีขั้นที่4

การผสมสี (Color Mixing) มี 2 แบบ 
การผสมแบบบวก (Additive mixing) 

เป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
จะนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี

การผสมแบบลบ (Subtractive mixing) 

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


วงล้อสี (Color Wheel)

     เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้

สีกับอารมณ์ ความรู้สึก เเละความสัมพันธ์กับสิ่งต่างๆ

สีเเดง      เเสดงถึง พลัง อำนาจความโมโห ความก้าวร้าว


สีน้ำเงิน    เเสดงถึง ความซื่อสัตย์ ความมั่นคง ปลอดภัย


สีเขียว     เเสดงถึง ธรรมชาต สุขภาพ ความยินดี


สีเหลือง   เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น


สีม่วง      แสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่


สีส้ม       เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น


สีน้าตาล  เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้


สีเทา       แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง


สีขาว       เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด


สีดำ         แสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ

__________________________________________________________

บทที่ 9

ออกแบบกราฟฟิกสำหรับเว็บไซต์ ( Designing Web Graphics )

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



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


รูปแบบกราฟฟิกสำหรับเว็บ (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) ซึ่งมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย

ระบบการวัดความละเอียดของรูปภาพ

       ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย Pixel per inch(ppi) แต่ในทางการใช้งานจะนำหน่วย dot per inch(dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้แทนโดยความละเอียดของรูปภาพที่ใช้ควรมีความละเอียดแค่ 72 ppi ก้อเพียงพอแล้ว

__________________________________________________________