บทที่7การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
1.เบราเซอร์ที่ใช้
เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจโดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพและภาพเคลื่อนไหวมีเบราเซอร์หลายชนิดที่ได้รับความนิยมเช่นIE NetscapeNavigatorมอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกันขึ้นอยู่กับประสิทธิภาพของการ์ดจอ(video card)จำนวนหน่วยความจำในการ์ดจอvideo memory)ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่าbitdepthหรือcolordepthซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซลชุดสีสำหรับเว็บหมายถึงชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows และ Macปัจจุบัน Web Palette มีความสำคัญลดน้อยลงเนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้นแต่ในtool ต่าง ๆ เช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่
MSSansSerifและMicrosoftSansSerif
-MSSansSerifเป็นฟอนต์แบบบิตแมพ(bitmapped font)ที่ออกแบบขึ้นจากจุดของพิกเซลโดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
-MicrosoftSansfontเป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น(vectorfont)โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดการออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์
- เว็บไซต์สำหรับเบราเซอร์ทุกร่น
- เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
- เว็บไซต์ตามความสามารถของเบราเซอร์
- เว็บไซต์ที่มีหลายรูปแบ2.ระบบปฏิบัติการ (Operating System)
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ ,ระดับความละเอียดของหน้าจอ ,ชุดสีของระบบและชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
- การแสดงผลของ windows จะมีขนาดใหญ่กว่า Mac เล็กน้อย
- ความสว่างของหน้าจอบน Mac จะมากกว่า Windows และ Unix
3.ความละเอียดของหน้าจอ
ขนาดของจอมอนิเตอร์มีหลายขนาดเช่น15",17",21"ความละเอียดของหน้าจอมีหน่วยเป็น Pixelความละเอียด640x480หมายถึงหน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน640พิกเซล และตามแนวตั้ง 480พิกเซลความละเอียดของหน้าจอจะไม่ขึ้นกับบขนาดของมอนิเตอร์ที่ใช้แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
-EX:จอขนาด 17"สามารถตั้งค่าความละเอียดได้ตั้งแต่640x480จนถึง1600x1200
4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
5.ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้
6.ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดีสามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิด ขนาด สี ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมีตัวอักษรชนิด นั้นติดตั้งไว้ใน เครื่องสามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสียใช้เวลาในการ download มากกว่าลำบากในการแก้ไขและเปลี่ยนแปลงข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วย search engine
บทที่8เลือกใช้สีสำหรับเว็บไซต์
สีสันในเว็บเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์เราสามารถใช้สีกับทุกองค์ประกอบของเว็บเพจตั้งแต่รูปภาพตัวอักษรสีพื้นหลังการใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหาการใช้สีพื้นใกล้เคียงกับสีตัวอักษรบางครั้งอาจสร้างความลำบากในการอ่านการใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านการใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
-สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
-สีสามารถนำไปใช้ในการแบ่งบริเวณต่าง ๆ ออกจากกัน
-สีสามารถใช้ในการดึงดูดความสามารถของผู้อ่าน
-สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
การผสมสี(Color Mixing) มี 2 แบบ
1.การผสมแบบบวก(Additive mixing)จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษสามารถนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมาเช่นจอโปรเจคเตอร์ ทีวี
2.การผสมแบบลบ(Subtractive mixing)การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสงแต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆสามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสีเช่นภาพวาดของศิลปินรูปปั้นหรือสิ่งพิมพ์ต่าง ๆ
-ความกลมกลืนของสี ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงความสมดุล และความสวยงามในเวลาเดียวกันการใช้สีที่จืดชืดเกินไปจะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้ การใช้สีที่มากเกินไปก็จะดูวุ่นวายขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชมเป้าหมายในเรื่องสี คือการนำเสนอ
-เว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่ายน่าสนใจรูปแบบชุดสีพื้นฐาน(SimpleColorSchemes)
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 ย่อมาจาก GraphicInterchangeFormat
-ได้รับความนิยมในยุคแรก
-มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สี
-มีการบีบอัดข้อมูลตามแนวนอนของพิกเซลเหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้นJPG
-มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
PNG ย่อมาจาก PortableNetworkGraphicสามารถสนับสนุนระบบสีได้ทั้ง 8บิต 16บิตและ24บิตมีระบบการบีบอัดแบบที่ไม่ทำให้เกิดการสูญเสีย(lossless)มีระบบการควบคุมค่าแกมม่า และความโปร่งใสในตัวเอง
ระบบการวัดขนาดของรูปภาพ รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์นั่นก็คือหน่วยพิกเซลซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่น ๆ ในหน้าเว็บรวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย ระบบการวัดความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixelperinch (ppi)แต่ในทางการใช้งานจะนำหน่วย dotperinch(dpi)ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppiความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่72ppiก็เพียงพอแล้ว
ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ-Adobe PhotoShop
-Adobe ImangeReady
-Firework
ค่าพื้นฐานที่สามารถเลือกปรับได้คือรูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ความโปร่งใสและสีพื้นหลังคำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
-ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
-เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
-ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
