Lecture

Lecture

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

  ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์
         (1.) เบราเซอร์ที่ใช้ เบราเซอร์ คือ โปรแกรมที่ใช้เรียกดูเว็บเพจ สามารถแสดง
ผลได้ทั้งรูปแบบตัวอักษร รูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้รับความนิยม
เช่น Internet Explorer , Netscape NavigatorOpera , Mozilla , Firefox ปัจจุบัน
ได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง คือ W3C
         (2.) ระบบปฏิบัติการ(Operating System) จะ มีผลต่อการทำงานของเบรา 
เซอร์มากแต่ละระบบปฏิบัติการ จะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของ
เบราเซอร์ ที่ใช้ระดับความละเอียดของหน้าจอชุดสีระบบและชนิดของตัวอักษรที่
มาพร้อมกับระบบ
         (3.) ความละเอียดของหน้าจอ ความละเอียด 640x480 หมายถึง หน้าจอมีจุด
พิกเซลเรียงตัวตามแนวนอน 640 พิกเซล และตามแนวตั้ง 480 ความละเอียดของ
หน้าจอจะขึ้นอยู่กับประสิทธิภาพของการ์ดแสดงผล
         (4.) จำนวนสีที่จอของผู้ใช้สามารถแสดงได้ จำนวนสีที่การ์ดจอสามารถแสดง
ได้นั้นขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth หรือ color depth
ซึ่งก็คือ จำนวนบิตที่ใช้ในการเก็บข้อมูลแต่ละพิกเซล ชุดสีสำหรับเว็บ
(Web Palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ
Windows และ Mac
         (5.) ชนิดของตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้ จะแสดงฟอนต์ที่กำหนดไว้ใน
เว็บเพจได้ก็ต่อเมื่อคอมพิวเตอร์เครื่องนั้นมีฟอนต์เหล่านั้นติดตั้งอยู่ในเครื่อง
         - MS SansSerif เป็นฟอนต์แบบบิตเเมพ(bitmapped font)
         - Microsoft Sans Serif เป็นฟอนต์แบบเวคเตอร์หรือลายเส้น(vector font)
           สามารถปรับขนาดได้อย่างไม่จำกัด

ข้อดี
     1. สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิด ขนาด สี
     2. สามารถมองเห็นได้โดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง
     3. สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร
ข้อเสีย
     1. ใช้เวลาในการ Downlond มาก
     2. ลำบากในการแก้ไขและเปลี่ยนแปลง
     3. ข้อความเป็นกราฟฟิกจะไม่สามารถค้นหาได้ด้วย search engine

         (6.) ความเร็วในการเชื่อมต่ออินเตอร์เน็ต จะมีผลต่อเวลาที่ใช้ในการแสดงผล
ของเว็บ ความเร็วของอินเตอร์เน็ตมีหลายระดับ คือ - ผู้ใช้ตามบ้าน จะใช้ความเร็ว
56 kbps
           ** หน่วยงานบางแห่ง จะใช้ความเร็วสูง เช่น ADSL , Cable modem ซึ่งมี
                ความเร็วตั้งแต่ 128 kbpsจนถึง 10 kbps
         (7.) ขนาดหน้าต่างเบราเซอร์
           ** ออกแบบเว็บเพจให้เปลี่ยนแปลงขนาดได้(Flexible Design)องค์
                ประกอบทั้งหมดจะมีการจัดเรียงตัวกันใหม่ ตามขนาดพื้นที่ใหม่
ข้อดี
     1.พื้นที่หน้าจอทั้งหมดถูกใช้อย่างเต็มที่
     2. เว็บเพจจะถูกจัดเรียงในรูปแบบที่เหมาะสมกับหน้าจอเสมอ
ข้อเสีย
     1.ไม่สามารถคาดการณ์รูปแบบที่จะปรากฏต่อสายตาผู้ชมได้

           ** ออกแบบเว็บเพจให้มีขนาดคงที่(Fixed Design) ผู้ที่ต้องการควบ

                คุมโครงสร้างของหน้าเว็บให้คงที่เสมอ

ข้อดี

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

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

         ไม่ยาวเกินไป

ข้อเสีย

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

      

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

            ** สามารถปรับความสว่าง(Brightness) และความต่างของโทนสี

                 (Contrast) จากมอนิเตอร์ได้

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

                 เลือกใช้โทนสีที่ต่างกันพอสมควร

            ** ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง

                                                                                       

บทที่8

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

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

ประโยชน์ของสีในเว็บไซต์
•  สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในเว็บเพจ
•  สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
•  สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
•  สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
• สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
•  ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อหา
•  สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ 
การผสมสี มี 2 แบบ คือ
         1. การผสมสีแบบบวก(Addittive mixing)
จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ 
การนำไปใช้ จะนำๆผใช้ในสื่อต่างๆ ที่ใช้แสงส่องออกมาเช่นโปรเจ๊กเตอร์
ทีวี และจอมอนิเตอร์
          2. การผสมสีแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเน่องกับการดูดกลืนและ
สะท้อนแสงของวัตถุต่างๆ การนำไปใช้ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับ
การใช้วัตถุมีสี เช่นภาพวาดของศิลปิน รูปปั้นและสิ่งพิมพ์ต่างๆ
       
สีอ่อน  สีเข้ม และโทนสี (Tint,Shade and Tone)
         ** ในการผสมสีกลางเข้ากับสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย
              - สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน
              - สีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับต่างๆ
              - สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม
         ** สีอ่อน สีเข้มและโทนสีมีประโยชน์อย่างมากในการจัดชุดของสี
เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้น
       
ความกลมกลืนของสี (Color Harmony)
        ** ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงาม
ในเวลาเดียวกัน การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อและ
ไม่สามารถดึงดูดความสนใจจากผู้ชมได้ การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย
ขาดระเบียบและอาจสร้างความสับสนให้กับผู้ชม         ** เป้าหมายในเรื่องสี คือการนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่
เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม



บทที่9

ออกแบบกราฟฟิกสำหรับเว็บไซต์ (Design Web Graphics)

  

        กราฟฟิกเป็นองค์ประกอบสำคัญของเว็บเพจ ซึ่งปัญหาส่วนใหญ่ที่เกิด
ขึ้นมักจะเกิดขึ้นกับการสร้างกราฟฟิก คือการใช้ลักษณะรูปแบบกราฟฟิกที่
ไม่เหมาะสมกับลักษณะของรูป
       
กราฟฟิกรูปแบบหลัก 2 ประเภท
        1. GIF ย่อมาจาก Graphic Interchange Format
            - ได้รับความนิยมในยุดแรก
            - มีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
            - การบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่
              ประกอบด้วย สีพื้น
         2. JPG ย่อมาจาก Joint Photographic Experts Group
            - มีข้อมูลสีขนาด 24 บิต แสดงสีได้ถึง 16.7 ล้านสี
            - ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
            - ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
         3. PNG ย่อมาจาก Portable Network Graphic
            - สามารถสนับสนุนสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
            - การบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)
            - ควบคุมแกมม่า (Gamma) และความโปร่งใส(Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ

            - ใช้หน่วยวัดเป็น พิกเซล

            - ความละเอียดของภาพควรใช้ หน่วย pixle per inch (ppi)

            - การใช้งานจะนำหน่วย dot per inch (dpi) จะเหมาะสมกับเครื่องพริ้นท์

            - ควรมีความละเอียดแค่ 72 ppt