Lecture บทที่7

บทที่7

การออกแบบเว็บไซต์

ให้เหมาะสมกับสิ่งแวดล้อม

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

-เบราเซอร์คือโปรแกรมที่ใช้เรียกดูเว็บเพจ

โดยสามารถแสดงผลได้ทั้งรูปแบบตัวอักษร

รูปภาพ และภาพเคลื่อนไหว

- มีเบราเซอร์หลายชนิดที่ได้รับความนิยม เช่น

               * Internet Explorer

               * Netscape Navigator

               * The World

               * Opera

               * Mozilla

               * Firefox

- การออกแบบเว็บไซต์ตามคุณสมบัติของเบราเซอร์

               * เว็บไซต์สำหรับเบราเซอร์ทุกร่น

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

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

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

2.ระบบปฏิบัติการ (Operating  System)

-ระบบปฏิบัติการเป็นปัจจัยที่มีผลต่อการทำงาน

ของเบราเซอร์มาก

โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกัน

ในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้

ระดับความละเอียดของหน้าจอชุดสีของระบบ

และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น

             *การแสดงผลของwindowsจะมีขนาดใหญ่กว่า Mac เล็กน้อย

              *ความสว่างของหน้าจอบนMacจะมากกว่า Windows และ Unix

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

-ขนาดของจอมอนิเตอร์มีหลายขนาด

เช่น 17",21" และอื่นๆ

-ความละเอียดของหน้าจอ(monitorresolution)มีหน่วยเป็น Pixel

              *ความละเอียด640x480หมายถึงหน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน

640พิเซล และตามแนวตั้ง 480พิกเซล

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

              *EX:จอขนาด17"สามารถตั้งค่าความละเอียดได้ตั้งแต่ 640x480

จนถึง 1600x1200 เป็นต้น

4.จำนวนสีที่จอของผู้ใช้สามารถแสดงได้

-มอนิเตอร์ที่สามารถแสดงสีที่แตกต่างกันขึ้นอยู่กับประสิทธิภาพของการ์ดจอ(videocard)

-จำนวนหน่วยความจำในการ์ดจอ(videomemory)ทีมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น

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

- ชุดสีสำหรับเว็บ(WebPalette)หมายถึงชุดสีจำนวน 216สีที่มีอยู่เหมือนกันในระบบปฏิบัติการWindows และ Mac

-ปัจจุบันWebPaletteมีความสำคัญลดน้อยลงเนื่องจากจอของผู้ใช้สามารถแสดงสีได้มากขึ้นแต่ในtoolต่างๆเช่น Dreamweaver ก็ยังเห็นชุดสีเหล่านี้ปรากฏอยู่

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

-MS Sans Serif VS Microsoft Sans Serif

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

            *Microsoft Sans fontเป็นฟอนต์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น(vectorfont)โดยมีการออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัด

- ตัวอักษรแบบกราฟิก (Graphic  Text)

ข้อดี

              *สามารถกำหนดลักษณะของตัวอักษรได้อย่างแน่นอนทั้งชนิดขนาดสี

              *ผู้ชมทุกคนจะมองเห็นตัวอักษรได้เหมือนกันโดยไม่จำเป็นต้องมีตัวอักษรชนิดนั้นติดตั้งไว้ในเครื่อง

              *สามารถสร้างเอกลักษณ์เฉพาะตัวของเว็บได้จากรูปแบบของตัวอักษร

ข้อเสีย

              *ใช้เวลาในการdownloadมากกว่า

              *ลำบากในการแก้ไขและเปลี่ยนแปลง

              *ข้อความที่เป็นกราฟิกจะไม่สามารถค้นหาได้ด้วยsearch engine

บทที่ 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การผสมสี(Color Mixing) มี2แบบ

1.การผสมแบบบวก(Additivemixing)

       จะเป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ สามารถนำไปใช้ในสื่อใดๆที่ใช้แสงส่องออกมา เช่นจอโปรเจคเตอร์ทีวี

2.การผสมแบบลบ(Subtractive mixing)
     การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆสามารถนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี
เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่าง ๆ

ความกลมกลืนของสี
        -  ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงความสมดุลและความสวยงามในเวลาเดียวกัน

 การใช้สีที่จืดชืดเกินไปจะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้

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

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

รูปแบบชุดสีพื้นฐาน(SimpleColorSchemes)

1. ชุดสีร้อน (WarmColorScheme) 
         ประกอบด้วยสีม่วง,น้ำเงิน,น้ำเงินอ่อน,ฟ้า,ฟ้าเงินแกมเขียวและสีเขียวโดยจะให้ความรู้สึกเย็นสบายองค์ประกอบที่ใช้สีเย็นจะดูสุภาพเรียบร้อย

2. ชุดสีแบบเดียว(MonochromaticColorScheme)
           เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียวแต่เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ และชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียวแต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวาเพราะขาดความหลากหลายของสี

3. ชุดสีที่คล้ายคลึงกัน(AnalogousColorScheme)
         ประกอบด้วยสี 2หรือ 3สีที่ติดอยู่กันในวงล้อ สามารถเพิ่มเป็น4หรือ5สีได้แต่อาจส่งผลให้ขอบเขตของสีกว้างไป

4.ชุดสีตรงข้ามข้างเคียง(SplitComplementaryColorScheme)
          เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้ามและชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้นแต่จะมีผลให้ความสดใสความสะดุดตา และความเข้ากันของสีลดลงด้วย

5.ชุดสีตรงข้ามข้างเคียงทั้ง2ด้าน(DoubleSplitComplementaryColor Scheme)
         ดัดแปลงมาจากชุดสีตรงข้ามเช่นกันแต่สีตรงข้ามทั้ง2สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง2ด้านและชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้นแต่จะมีความสดใสและกลมกลืนของสีที่ลดลง

6. ชุดสีเย็น(CoolColorScheme)
          เว็บเพจที่ใช้โทนสีเย็นให้บรรยากาศคล้ายทะเลรู้สึกเย็นสบาย

7.ชุดสีแบบสามเส้า(TriadicColorScheme)
        เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม ซึ่งเป็นสีที่มีระยะห่างในวงล้อสีเท่ากันจึงมีความเข้ากันอย่างลงตัว

8. ชุดสีตรงข้าม(ComplementaryColorScheme)
      คือสีที่อยู่ตรงข้ามกันในวงล้อสีเมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น

บทที่ 9

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

ระบบการวัดขนาดของรูปภาพ

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

ความละเอียดของรูปภาพ

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

ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก

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

ลดขนาดไฟล์กราฟิกสำหรับเว็บ (Optimizing Web Graphic)

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

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

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

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

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

เช่น Internet Explorer , Netscape NavigatorOpera , Mozilla , Firefox ปัจจุบัน

ได้มีองค์กรกลางได้ทำการกำหนดมาตรฐานเพื่อให้เป็นมาตรฐานกลาง คือ W3C

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

มาพร้อมกับระบบ

         3. ความละเอียดของหน้าจอ ความละเอียดx480 
หมายถึง หน้าจอมีจุดพิกเซลเรียงตัวตามแนวนอน 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) จากมอนิเตอร์ได้

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

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

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