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

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

   การออกแบบเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม (Design for avariety of Web Environments)

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

1. เบราเซอร์ที่ใช้
     เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น
     Internet Explorer Netscape Navigatr Opera มาตรฐานกลางของเบราเซอร์ คือ w3c
     เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
   1.สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น
   2.เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด
   3.เว็บไซต์ตามความสามารถของเบราเซอร์
   4.เว็บไซต์ที่มีหลายรูปแบบ

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

3. ความละเอียดของหน้าจอ
    ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอิเตอร์ที่ใช้
    แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอีวดแค่ไหน การออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์

4. จำนวสีที่จอของผู้ใช้สามารถแสดงได้
    มอนิเตอร์มีความสามารถใหการแสดงสีแตกต่างกน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น
    จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซล
    ขุดสีสำหรับเว็บ (Web palette) หมายถึว ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac
    ปัจจุบัน Web palette มีความสำคัยน้อยลง เนื่องจากจอของผู้ใข้สามารถแสดงสีได้มาขึ้น

5. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง
    ชนิดของตัวอักษรมี 2 แบบ
    MS Sans Serif VS Microsoft Sans Serif
    MS Sans Serif  เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน
    Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียว
     แต่สามารถปรับขนาดได้อย่างไม่จำกัด
     ตัวอักษรแบบกราฟิก (Graphic Text)
ข้อดี
     สามารถกำหนดลัษณะของตัวอักษรได้อย่างแน่นอน ทั้งชนิด ขนาด สี
     ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกัน โดยไม่จำเป็นต้องมี
     อักษรชนิดนันติดตั้งไว้ในเรื่อง สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้
ข้อเสืย
     ใช้เวลาในการ download มากกว่า
     ลำบากในการแก้ใขและเปลี่ยนแปลง
     ข้อความที่เป็นกราฟิกจะไม่สามารกค้นหาได้

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

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

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

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

บทนี้รู้จะกล่าวถึงรายละเอียดของกราฟฟิกรูปแบบหลัก 2 ประเภทคือ GIF และ  JPG

- GIF ย่อมาจาก Graphics Interchange Format เป็นรูปแบบแฟ้มภาพและแฟ้มภาพเคลื่อนไหว รูปแบบ GIF ถูกออกแบบโดย Compuserve ซึ่งเป็นระบบเครือข่ายข่าวสารแบบออนไลน์ เพื่อให้บริการเเลกเปลี่ยนกราฟิกในรูปแบบบิตแมป ภาพแบบGIF มีข้อจำกัดอยู่ตรงด้านแผงสีแบบ Index ภาพสีแบบ 24bit (RGB) ไม่สามารถใช้ได้ แผงสีสามารถบรรจุได้ 2-256 สี ซึ่งสร้างจากข้อมูลสี 24 บิท แฟ้มแบบ GIF โดยใช้การบีบขนาด LZW แบบประยุกต์ ทำให้เปลืองพื้นที่ความจุน้อยกว่า สำหรับการออกเสียงคำว่า GIF มีการโต้เถียงกันหลายที่ ขึ้นอยู่กับภาษาที่ใช้ โดยทางผู้ผลิตได้สรุปวิธีอ่านของตัวเองไว้ ผู้ผลิตซอฟต์แวร์หลายรายกังวลเกี่ยวกับปัญหาสิทธิบัตรของแฟ้มแบบ GIF ซึ่งจดโดย Unisys ทำให้มีการสร้างรูปแบบแฟ้มภาพชนิดใหม่ที่ชื่อว่า PNG (Portable Network Graphics) ขึ้นมาทดแทน อย่างไรก็ตามสิทธิบัตรของ GIF หมดอายุแล้วเมื่อ ค.ศ. 2003 และ GIF ยังเป็นที่นิยมใช้งานต่อไปจนถึงปัจจุบัน

- JPEG (Joint Photographic Experts Group - "เจเพ็ก") คือรูปแบบการบีบอัดแฟ้มภาพแบบสูญเสีย โดยยังให้เสียความละเอียดน้อยที่สุด รูปแบบแฟ้มสำหรับวิธีการนี้ได้แก่ .jpeg, .jpg, .jpe, .jfif, .jfi (อาจจะเป็นตัวเล็กหรือตัวใหญ่ก็ได้) รูปแบบแฟ้ม JPEG นี้ เป็นรูปแบบแฟ้มที่ใช้กันในการจัดเก็บและแลกเปลี่ยนรูปภาพบนเวิลด์ไวด์เว็บมากที่สุด โดยเฉพาะภาพถ่าย เนื่องจากสามารถเก็บความละเอียดสูงได้โดยใช้ขนาดไฟล์ที่เล็ก สามารถเก็บภาพสีได้หลากหลายระดับความแม่นยำของสี(Bit Depth) ความสามารถในการย่อขนาดไฟล์ของแฟ้ม JPEG นั้นเกิดจากการใช้เทคนิคการย่อขนาดภาพแบบการบีบอัดคงข้อมูลหลัก (Lossy Compression) หรือการบีบอัดแบบมีความสูญเสียทำให้ไม่นิยมใช้กับภาพที่เป็น ลายเส้น หรือไอคอนต่าง ๆ เนื่องจากจะไม่ได้ประสิทธิภาพเท่าการเก็บในรูปแบบอื่น อย่าง PNG หรือ GIF

การบีบอัดของ JPEG นั้นจะใช้เทคนิคที่เรียกว่า DCT (Discrete Cosine Transform) ซึ่งเป็นการแปลงค่าความสว่างของภาพให้อยู่ในรูปแบบเชิงความถี่ (Frequency Domain) ทำให้สามารถเลือกแทนค่าของสัมประสิทธิ์หรือในที่นี้คือแอมพลิจูดของค่าความถี่ต่างๆ ได้โดยอาศัยตัวแปรที่มีนัยสำคัญที่ต่างกันได้ การที่สามารถลดนัยสำคัญของค่าตัวเลขลงไปได้ทำให้สามารถลดขนาดของหน่วยความจำหรือขนาดไฟล์ที่ใช้เก็บตามไปได้

- PNG ย่อมาจาก Portable Network Graphics ซึ่งเป็นรูปแบบของไฟล์รูปภาพที่ถูกพัฒนามาเพื่อใช้สำหรับการแสดงผลบนเว็บไซต์โดยเฉพาะ และเพื่อใช้แทนรูปแบบของไฟล์ GIF ด้วยเหตุผลทางด้านลิขสิทธิ์ เพราะ PNG นั้นเป็นรูปแบบของไฟล์รูปภาพที่มีลิขสิทธิ์แบบ Open Source สามารถนำไปใช้ และพัฒนาต่อได้อย่างอิสระ

     โดยที่คุณสมบัติทั่วๆไปของ PNG นั้นจะคล้ายกับ GIF คือ มีการบีบอัดไฟล์ได้โดยไม่สูญเสียคุณภาพ นอกจากนี้ PNG ยังมีข้อดีอีกหลายประการที่ไม่มีใน GIF คือ

     - รูปแบบไฟล์แบบPNG นั้นสามารถที่จะบีบอัดไฟล์ให้มีขนาดเล็กกว่า GIF ประมาณ 10-30%

     - สามารถทำพื้นหลังโปร่งใส (Transparency) ได้เหมือนกับ GIF แต่สามารถปรับค่าความโปร่งใสได้ เพราะ PNG นั้นรองรับ Alpha Transparency แต่ GIF นั้นจะรองรับเพียง Binary Transparency กล่าวคือ GIF สามารถทำให้ภาพมีพื้นหลัง 100% และไม่มีพื้นหลังเลย (พื้นหลัง 0%) แต่จะไม่สามารถทำให้พื้นหลังมีค่าที่ต่างไปจากนี้ได้ เช่นให้พื้นหลังมีค่า 50% จะไม่สามารถทำได้ เราจึงเรียกคุณสมบัตินี้ว่า Binary Transparency

     อีกอย่างหนึ่งคือ การใช้ Transparency กับไฟล์ GIF นั้น จะต้องกำหนดค่า matte เพื่อให้ขอบภาพกลืนไปกับสีของพื้นหลังที่จะนำภาพไปประกอบ ถ้าเราทำการเปลี่ยนสีพื้นหลังดังกล่าว เราก็จำเป็นที่จะต้องเปลี่ยนค่า matte ตามไปด้วย ไม่เช่นนั้นภาพก็จะออกมาในลักษณะที่ขอบของภาพแตกได้ ซึ่งถ้าเป็นไฟล์ PNG จะไม่มีปัญหาเหล่านี้ และ PNG ยังสามารถปรับค่าความโปร่งใสได้หลายระดับอีกด้วย