การออกแบบเว็บไซต์ให้เหมือนกับสิ่งแวดล้อม
Design for a variety of Web
Environments
ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
· เบราเซอร์ที่ใช้
-
เบราเซอร์คือโปรแกรมที่เรียนใช้ดูเว็บเพจ
โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร,รูปภาพและภาพเคลื่อนไหว
· ระบบปฏิบัติการของคอมพิวเตอร์
-
ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงานของเบราเซอร์มาก
โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้,ระดับความละเอียดของหน้าจอ,ชุดสีของระบบ
และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น
· ความละเอียดของหน้าจอ
-
ความละเอียดของหน้าจอจะไม่ขึ้นอยู่กับขนาดของมอร์นิเตอร์ที่ใช้
แต่จะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ละเอียดแค่ไหน
· จำนวนสีที่จอของผู้ใช้สามารถแสดงได้
-
มอร์นิเตอร์มีสามารถแสดงสีที่แตกต่างกัน
ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ
-
จำนวนหน่วยความจำในการ์ดจอที่มากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
-
จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น
ขึ้นอยู่กับค่าความละเอียดชองสีที่เรียกว่า bit depth หรือ color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล
· ชนิดของตัวอักษรที่อยู่ในเครื่องของผู้ใช้
-
เบราเซอร์จะแสดงฟ้อนที่กำหนดไว้ในเว็บเพจได้ก็ต่อเมื่อ
คอมพิวเตอร์เครื่องนั้นมีฟ้อนเหล่านั้นติดตั้งอยู่ในเครื่อง
-
MS Sans Serif เป็นฟ้อนแบบบิตแมพ
ที่ออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
-
Microsoft Sans Serif เป็นฟ้อนที่มีโครงสร้างของอักขระเป็นแบบเวกเตอร์หรือลายเส้น
โดยมีการออกแบบไว้ที่ลายเพียงแบบเดียว แต่สามารถปรับขนาดได้อย่างไม่จำกัด
-
ตัวอักษรแบบกราฟฟิก
· ความเร็วในการเชื่อมต่ออินเตอร์เน็ต
-
ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ
-
ความเร็วของอินเตอร์เน็ตทีหลายระดับ
-
สิ่งที่เราสนใจในการออกแบบเว็บเพจให้ผู้ชมส่วนใหญ่สามารถเข้าถึงเว็บได้อย่างรวดเร็ว
-
ในฐานะผู้ออกแบบเว็บไซต์จึงเป็นเรื่องที่ท้าทายที่จะต้องออกแบบเว็บให้สวยงาม
น่าสนใจและดาวน์โหลดได้เร็ว โดยทำให้ไฟล์มีขนาดเล็กที่สุด
· ขนาดหน้าต่างบราวเซอร์
-
ขนาดหน้าต่างของเบราเซอร์มีโอกาสที่ถูกปรับเปลี่ยนเป็นขนาดเท่าไหร่ก็ได้ตามความประสงค์ของผู้ใช้
-
ออกแบบเว็บเพจให้สามารถเปลี่ยนแปลงขนาดได้
-
ออกแบบให้เว็บเพจมีขนาดคงที่
· ความสว่างและค่าความต่างของโทนสี
-
นอกเหนือจากค่าแกมม่าที่ม่ผลต่อความสว่างของหน้าจอแล้ว
ตัวผู้ใช้เองยังสามารถปรับระดับความสว่าง และความต่างของโทนสีจากมอร์นิเตอร์ได้
-
ผู้ออกแบบเว็บเพจต้องระวังไม่ให้หน้าเว็บมีโทรสีมืดหรือสว่างจนเกินไป
และควรเลือกใช้โทรสีที่ต่างกันพอสมควร
การออกแบบกราฟฟิกสำหรับเว็บไซต์
Designing Web Graphich
· กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ
ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้
รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
· ปัญหาที่มักเกิดขึ้นกับกราฟฟิกคือ
การเลือกใช้กราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปกราฟฟิก
ส่งผลให้รูปที่ได้มีลักษณะไม่สมบรูณ์และมีไฟล์ใหญ่เกินจำเป็น
· กราฟฟิกรูปแบบ GIF
-
GIF ย่อมาจาก Graphic
Interchange Format
-
มีระบบสีแบบ index ซึ่งมีข้อมูลสีขนาด 8 บิต
ทำให้มีสีมากสุด 256 สี
-
มีการบีบบอัดข้อมูลตามแนวของพิกเซล
เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
-
ลักษณะเด่น คือ
ไม่ขึ้นอยู่กับระบบปฏิบัติการใดๆ
· กราฟฟิกรูปแบบ JPG
-
ย่อมาจาก Joint Photographic Group
-
มีข้อมูลสีขนาด 24 บิต ทำให้มีสีมากสุด 16.7 ล้านสี
-
ใช้ระบบบีบอัดที่มีลักษณะที่สูญเสีย
-
ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ้ายหรือการฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
· กราฟฟิกรูปแบบ PNG
-
PNG ย่อมาจาก Protable
Network Graphic
-
สามารถสนับสนุนระบบสีได้ทั้ง
8 บิตและ 24 บิต
-
มีระบบการบีบอัดแบบ
Deflate ที่ไม่ทำให้เกิดการสูญเสีย
-
มีระบบการควบคุมค่าแกมม่า
และความโปร่งใสในตัวเอง
· ระบบการวัดขนาดของรูปภาพ
-
รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอร์นิเตอร์
นั่นก็คือ หน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆ
ในหน้าเว็บ รวมถึงขนาดของหน้าต่างบราวเซอร์ด้วย
-
ระบบความละเอียดของรูปภาพที่แสดงบนจอมอร์นิเตอร์ควรใช้หน่วย
pixel per inch (ppi)
-
แต่ในทางการใช้งานจะนำหน่วย
dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน
ppi
-
ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่
72 ppi ก็เพียงพอแล้ว
· โปรแกรมการฟฟิกสำหรับเว็บ
-
ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
Ø Adobe Photoshop
Ø Firework
Ø Gimp
-
ค่าพื้นฐานที่สามารถเลือกปรับได้คือ
รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใส
และสีพื้นหลัง
· คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
-
ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ(Web Palette)
-
เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม
GIF หรือ JPEC
-
ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อยๆ
(Slices)
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
Typography on the web
· ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
· ตัวอักษรมีหลายชนิด
ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ
· ส่วนประกอบของตัวอักษร
-
Ascender : ส่วนบนของตัวอักษรพิมพ์เล้กที่สูงกว่าความสูง
x-height ของตัวอักษร
-
Descender : ส่วนล่างของตัวอักษรพิมพ็เล็กที่ต่ำกว่าเส้น
baseline
-
Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
-
Cap height ความสูงจากเล้น
baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
-
X-height ความสูงของตัวอักษร
x ในแบบพิมเล็ก
ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
· รูปแบบตัวอักษร
-
ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง
(Proportional Font) หรือตัวอักษรที่มีขนาดไม่คงที่
-
ตัวอักษรที่มีขนาดคงที่
· ประเภทของตัวอักษร
-
ตัวอักษรประเภท Serif
Ø ตัวอักษรประเภทนี้จะมีเส้นเพิ่มขึ้นที่ส่วนปลาย
Ø เหมาะที่จะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา
Ø ไม่เหมาะกับการใช้เป็นตัวหนา
-
ตัวอักษรประเภท Sans-Serif
Ø ไม่มีลายเส้นตกแต่งอยู่ที่ตัวอักษร
Ø เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
Ø ไม่เหมาะกับการใช้เป็นตัวหนา
· ความสะดวกในการอ่าน
-
หลีกเลี่ยงการใช้คำที่เป็นตัวอักษรพิมพ์ใหญ่ทั้งหมดเพราะจะทำให้อ่านยาก
และลดความสะดุดตาลง
-
การตัวอักษรพิมพ์เล็กทั้งหมดในประโยค
จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบูรณ์ของเนื้อหา
-
การใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรตัวแรกของแต่ละคำในประโยคควรใช้อย่างจำกัด
· การจัดข้อความในหน้าเว็บ
-
การจัดตำแหน่ง
-
ระยะห่างระหว่างบรรทัด
-
ความยาวของหน้าเว็บ
-
ขนาดของตัวอักษร
-
ดึงดูดความสนใจด้วยตัวอักษรขนาดใหญ่
-
การเน้นข้อความให้เด่นชัด
-
การใช้สีกับตัวอักษร
-
การกำหนดขอบแบบ Aliased และ Anti-aliased
· คำแนะนำในการใช้ตัวอักษรในเว็บเพจ
-
ไม่ควรใช้ตัวอักษรที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆ
· ข้อควรระวังในการใช้ตัวอักษรในเว็บเพจ
-
ระบุชนิดตัวอักษรให้ครอบคลุม
-
กำหนดลักษณะของตัวอักษรที่มีอยู่ในทุกช่องของตาราง
-
การระบุขนาดของตัวอักษร
-
ใช้ Cascading Style Sheets (CSS)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น