Lecture

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

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

1.เบราเซอร์ที่ใช้ เช่น IE,Opera,Mozilla,Firefox การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์ ต้องรองรับเยราเซอร์ทุกรุ่น

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

3.ความละเอียดของหน้าจอ มีหน่วยความจำเป็น pixel ความละเอียดของหน้าจอ 640*480 หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 640 จุด พิกเซลตามแนวตั้ง 480 จุด ความละเอียดของหน้าจอไม่ขึ้นอยู่กับขนาดมอนิเตอร์ แต่จะขึ้นอยู่กับการ์ดแสดงผลว่าทำได้ละเอียดแค่ไหน

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

• สายตามนุษย์สามารถแยกสีได้สูงสุดแค่ 16.7 ล้านสีเท่านั้น 32 บิต เพื่อกำหนดค่าความโปร่งใสของสี

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

• ความจำในการ์จอมากขึ้น ทำให้แสดงสีได้มากขึ้น

• จำนวนสีที่การ์ดจอสามารถแสดงผลได้ ขึ้นอยู่กับค่าความละเอียดของสี color depth

5.ชนิดของตัวอักษรที่มีอยู่ในเครื่องผู้ใช้ เบราเซอร์ จะแสดง font ที่กำหนดไว้ใน web page ได้ก็ต่อเมื่อ เครื่องคอมนั้นมี font อยู่

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

• ตัวอักษรแบบกราฟฟิก

ข้อดี

• กำหนดลักษณะตัวอักษรไว้อย่างแน่นอน

• ทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นไว้ในเครื่อง

• สร้างเอกลักษณ์เฉพาะตัวของ web

ข้อเสีย

• ใช้เวลาในการ download มากกว่า

• ลำบากในการแก้ไขเปลี่ยนแปลง

• ข้อความกราฟิกม่สามารถค้นหาได้โดย search engine 

6.ความเร็วในการเชื่อมต่ออินเตอร์เน็ต ต้องทำให้ไฟล์มีขนาดเล็กสุดจะได้โหลดได้เร็ว

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

1. ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้ องค์ประกอบทั้งหมดจะมีการจัดเรียงตัวใหม่

ข้อดี

• พื้นที่หน้าจอถูกใช้งานอย่างเต็มที่

• web page ถูกจัดเรียงตัวใหม่เหมาะกับหน้าจอ

ข้อเสีย

• ไม่สามารถคาดการณ์รูปแบบที่ปรากฏต่อสายตาผู้ชมได้

   2.ออกแบบเว็บเพจให้มีขนาดคงที่

ข้อดี

• เว็บจะปรากฎต่อสายตาผู้ใช้ในรูปแบบเดียวกันเสมอ

• สามารถควบคุมความยาวของตัวอักษรในบรรทัดได้ดี

ข้อเสีย

• ต้องอาศัย scroll bar ในการเลื่อนดูข้อมูล

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

เนื่องจากข้อมูลถูกบีบอัดให้อยู่ในรูป DTC ดังนั้นเบราเซอร์ต้องทำการขยายข้อมูลก่อนการแสดงผล ดังนั้นเบราเซอร์จะใช้เวลาในการแสดงรูป JPEG มากกว่า GIF

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

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

1.นำสายตาผู้อ่านไปยังทุกบริเวณในหน้าเว็บเพจ

2.ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน

3.นำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน

4.สร้างอารมณ์โดยรวมของเว็บเพจ

5.เสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

การผสมสีมี 2 แบบ

1.การผสมสีแบบบวก เป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ แม่สี ( เขียว แดง น้ำเงิน )

2.การผสมสีแบบลบ ไม่เกี่ยวข้องกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ แม่สี (แดง เหลือง น้ำเงิน )

วงล้อสี

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

สีอ่อน สีเข้ม โทนสี

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

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

ความเป็นระเบียบของสี ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงาม

รูปแบบชุดสีพื้นฐาน

1.ชุดสีร้อน  ประกอบด้วยสีครึ่งหนึ่งของวงล้อสี สร้างความอบอุ่น  สบาย รู้สึกต้อนรับแก่ผู้ชม

2.ชุดสีเย็น ตรงกันข้ามกับสีร้อน สร้างความรู้สึกเย็นสบาย สุภาพ เรียบร้อย

3.ชุดสีแบบเดียว มีค่าบริสุทธิ์เพียงสีเดียว เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ

4.ชุดสีแบบสามเส้า เป็นชุดสีอยู่ที่มุมสามเหลียมด้านเท่าทั้งสาม เป็นสีที่มีระยะห่างในวงล้อเท่ากัน มีประสิทธิภาพมากที่สุดคือ แม่สี

5.ชุดสีที่คล้ายคลึงกัน เอาสี 2 หรือ 3 สี ที่ติดกันในวงล้อ หรือเพิ่มเป็น4 หรือ 5 ก็ได้

6.ชุดสีที่ตรงกันข้าม สีคู่ที่อยู่ตรงข้ามกันในวงล้อสี เมื่อใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น

7.ชุดสีตรงกันข้ามข้างเคียง เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้เพิ่มความหลากหลาย มีความสดใส ความสะดุดตา ความเข้ากันลดลง

8.ชุดสีตรงกันข้ามข้างเคียงทั้ง 2 ด้าน ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน ถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2ด้าน ชุดสีแบบนี้เพิ่มความหลากหลาย มีความสดใส ความสะดุดตา แต่ความเข้ากันลดลง

ผลทางจิตวิทยาที่มีต่อสี

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

ข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์

1.ใช้สีอย่างสม่ำเสมอ

2.ใช้สีเพื่อสื่อความหมาย

3.ใช้สีอย่างเหมาะสม

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

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

1.GIF ย่อมาจาก  Graphic Interchange Format

· ได้รับความนิยมสูงสุด

· มีระบบสีแบบ Index มีข้อมูลสีขนาด 8 บิต มีสีมากสุด 256 สี

· มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟิกที่ประกอบด้วยสีพื้น

2.JPG ย่อมาจาก Joint Photographic Experts Group

· มีข้อมูลสีขนาด 24 บิต สามารถแสดงสีได้ 16.7 ล้านสี

· ใช้ระบบการบีบอัดที่มีลักษณะสูญเสีย

· ควรนำไปใช้กับรูปถ่ายหรือกราฟิกที่มีการไล่ระดับสีอย่างละเอียด

3.PNG ย่อมาจาก Portable Network Graphic

· สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต 24 บิต

· มีการบีบอัดแบบ Deflate ที่ไม่เกิดการสูญเสีย

· มีการควบคุมค่าแกมม่าและความโปร่งใสในตัวเอง

โปรแกรมกราฟิกสำหรับเว็บ

· Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตถึงปัจจุบัน

· Adobe Image Ready ลักษณะหน้าตาและเครื่องมือจะคล้ายคลึงกับ Photoshop แต่ถูกพัฒนาขึ้นเพื่องานกราฟิกโดยเฉพาะเพิ่มความสามารถในการสร้า animation ได้

· Macromedia Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐาน 16

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

ลักษณะเด่น คือ ไม่ขึ้นกับระบบปฏิบัติการใดๆ สามารถนำไปใช้กับเบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงกับ version ใดๆ

· มีคุณสมบัติในการเคลื่อนไหว

· มีระบบสีแบบ index เก็บข้อมูลได้สูงสุด 8 บิต

· คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือที่คุณภาพที่ 12.5%,25%,50%,100% ตามลำดับ

ระบบการบีบอัดของ GIF

· ไม่มีการสูญเสียข้อมูลภาพจาการบีบอัด

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

คุณสมบัติการเคลื่อนไหวของ GIF

· รูปแบบที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อเนื่อง

· สามารถใช้ได้ในหลายโปรแกรมเช่น Image Ready , Firework , GifBuilder

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

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

1.จำกัดขนาดของกราฟิก

· พยายามลดขนาดรูปหรือกราฟิกให้เล็กลงเสมอ

· ตัดบางส่วนที่ไม่มีความจำเป็นออกไป

· ใช้กราฟิกขนาดเล็กหลายๆรูปรวมกัน แทนที่จะใช้กราฟิกขนาดใหญ่เพียงรูปเดียว

2.ออกแบบโดยใช้สีพื้นๆเข้าไว้

· เลือกใช้สีพื้นๆที่ไม่ซับซ้อน

· จำกัดปริมาณของส่วนที่มีลักษณะของรูปภาพในไฟล์

3.ออกแบบลวดลายตามแนวนอน

กราฟิกแบบ JPEG

· ใช้การบีบอัดแบบ JFIF( JPEG File Interchange Format )

· ไม่ยึดติดกับระบบปฏิบัติการใดๆ

· ใช้ระบบสีขนาด 24 บิต ให้สีสมจริงมากถึง 16.7 ล้านสี ทำให้รูปมีคุณภาพสูง

ระบบการบีบอัดข้อมูลในไฟล์ JPEG

· สูญเสียรายละเอียดบางส่วนของภาพไป

· ปริมาณการสูญเสียบางครั้งอาจมองไม่เห็น

· ใช้วิธีการเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด8*8 pixel ให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DTC)แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน

· ประสิทธิภาพขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป ความถี่ข้อมูลต่ำ จะได้รับการบีบอัดได้ดีกว่าความถี่สูง

· บีบอัดข้อมูลในระดับสูงตั้งแต่ 10:1 จนถึง 20:1 โดยที่สายตามนุษย์ไม่อาจมองเห็นคุณภาพที่ลดลงแต่อย่างใด

การขยายข้อมูลของ JPEG