Lacture

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

(Disign for a variety of Web Environments)

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

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

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

                Internet Explorer
                Netscape
                Chrome
                Opera
          มาตรฐานกลางของเบราเซอร์ คือ w3c เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้
                - สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น

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

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

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

2. ระบบปฏิบัติการของคอมพิวเตอร์

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

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

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

4. จำนวนสีที่จอของผู้ใช้

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

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

              ชนิดของตัวอักษรมี 2 แบบ คือ

                      1. MS Sans Serif  

                             เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน

                      2. Microsoft Sans Serif 

                            เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก (Graphic Text

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

              ความเร็วของอินเตอร์เน็ตจะมีผลต่อเวลาที่ใช้ในการแสดงผลของเว็บ

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

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

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

(Designing Web Colors)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การผสมสี (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 ออกแบบกราฟฟิกสำหรับเว็บไซต์

(Disigning Web Graphics)

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

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

           -  ได้รับความนิยมในยุคแรก           
           -  มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิตทำให้มีสีมากกว่า 256 สี
           -  มีการบีบอัดข้อมูลตามแนวนอนของพิกเซลเหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

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

           -  มีข้อมูลสีขนาด 24 บิต (True Color)สามารถแสดงสีได้ถึง 16.7 ล้านสี
           -  ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
           -  ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

     3. 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
          *ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดับความสูญเสีย,ความโปร่งใสและสีพื้นหลัง

คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ

         1.  ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ(Web Palette)
         2.  เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
         3. ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย(Slices)