Lecture

บทที่7

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

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

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

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

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

               * Internet Explorer

               * Netscape Navigator

               * The World

               * Opera

               * Mozilla

               * Firefox

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

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

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

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

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

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

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

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

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

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

-ขนาดของจอมอนิเตอร์มีหลายขนาด
เช่น 15",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. ความละเอียดของหน้าจอ ความละเอียด 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) จากมอนิเตอร์ได้
            ** ต้องระวังไม่ให้หน้าเว็บมีโทนสีมืดหรือสว่างจนเกินไป และความ
                 เลือกใช้โทนสีที่ต่างกันพอสมควร
            ** ต้องหลีกเลี่ยงตัวหนังสือสีส้มบนพื้นแดง