Lecture

บทที่7

การออกแบบเว็บไซต์

 ให้เหมาะสมกับสิ่งแวดล้อม

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

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

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

- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น

               * Internet Explorer

               * Netscape Navigator

               * The World

               * Opera

               * Mozilla

               * Firefox

- การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์

               * เว็บไซต์สำหรับเบราเซอร์ทุกร่น

               * เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด

               * เว็บไซต์ตามความสามารถของเบราเซอร์

               * เว็บไซต์ที่มีหลายรูปแบบ

2.ระบบปฏิบัติการ (Operating  System)

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

               * การแสดงผลของ windows
จะมีขนาดใหญ่กว่า Mac เล็กน้อย

               * ความสว่างของหน้าจอบน Mac
จะมากกว่า Windows และ Unix

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

- ขนาดของจอมอนิเตอร์มีหลายขนาด
เช่น 15",17",21" และอื่นๆ

- ความละเอียดของหน้าจอ (monitor resolution)
มีหน่วยเป็น Pixel

               * ความละเอียด 640x480 หมายถึง
หน้าจอมีจุดพิกเซลเรียงตัว
ตามแนวนอน 640พิกเซล และตามแนวตั้ง 480พิกเซล

- ความละเอียดของหน้าจอจะไม่ขึ้นกับ
ขนาดของมอนิเตอร์ที่ใช้
แต่จะขึ้นกับประสิทธิภาพของการ์ด
แสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
               *EX:จอขนาด 17"สามารถตั้งค่า
ความละเอียดได้ตั้งแต่ 640x480
จนถึง 1600x1200 เป็นต้น

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

- มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกัน
ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ (video card)

- จำนวนหน่วยความจำในการ์ดจอ (video memory)
ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น

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

- ชุดสีสำหรับเว็บ (Web Palette)หมายถึงชุดสี
จำนวน 216สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ
Windows และ Mac

- ปัจจุบัน Web Palette มีความสำคัญลดน้อยลง
เนื่องจากจอของผู้ใช้
สามารถแสดงสีได้มากขึ้น แต่ใน toolต่างๆ
เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่

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

- MS  Sans  Serif  VS  Microsoft  Sans  Serif
               * MS Sans Serif เป็นฟอนต์แบบบิตแมพ
(bitmapped  font )
ที่ออกแบบขึ้นจากจุดของพิกเซล
โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
               * Microsoft  Sans  font เป็นฟอนต์ที่
มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น
(vector font)โดยมีการออกแบบเอาท์ไลน์ไว้เพียง
แบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด

- ตัวอักษรแบบกราฟิก (Graphic  Text)

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

ข้อเสีย               * ใช้เวลาในการ download มากกว่า
               * ลำบากในการแก้ไขและเปลี่ยนแปลง
          * ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย
search engine

 บทที่8

เลือกใช้สีเว็บไซต์

 

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

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

เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี

ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์

- เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ

ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการ

สื่อความหมายของเนื้อหา

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

ความลำบากในการอ่าน

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

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

ประโยชน์ของสีในเว็บ

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

- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน

- สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน

- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ

- ช่วยสร้างระเบียบให้กับข้อความต่างๆ
เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้น ๆ    

การผสมสี (Color  Mixing) มี 2 แบบ
1. การผสมแบบบวก (Additive mixing)
จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของ
วัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใดๆ
ที่ใช้แสงส่องออกมา เช่น จอโปรเจคเตอร์ ทีวี
2. การผสมแบบลบ (Subtractive  mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการ
ดูดกลืนและสะท้อนแสงของวัตถุต่างๆ สามารถนำไปใช้
ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี
เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ

ความกลมกลืนของสี

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

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

บทที่9

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

รูปแบบกราฟฟิกสำหรับเว็บ(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)