บทที่3การออกแบบสารสนเทศในเว็บเพจ

บทที่ 3

การออกแบบสารสนเทศในเว็บเพจ

  วัตถุประสงค์ 
1.สามารถออกแบบสารสนเทศในเว็บเพจได้
2.สามารถบอกโครงสร้างชนิดต่างๆของสารสนเทศได้

    3.1 การออกแบบโครงสร้างเว็บไซต์
        1. ระดับหน้าโฮมเพจ (Home Splash Pag)

⬛

        2. ระดับที่ 1 เป็นระดับส่วนต่างๆของเนื้อหาสาระซึ่งเป็นระดับของหัวข้อหลักเช่นเดียวกับหัวข้อหลักในส่วนต่างๆของหนังสือวารสารนิตยสารหรือหนังสือพิมพ์มีสัญลักษณ์รูปที่แสดงว่าเป็นเว็บไซต์ระดับที่ 1 ดังนี้

🔺

        3.ระดับที่ 2 เป็นระดับที่เป็นข้อมูล (Data) จัดเป็นระดับที่เพิ่มรายละเอียดของเนื้อหาเป็นเสมือนบทแต่ละบท (chapter)  ของเว็บไซต์ในแต่ละส่วนนั้นมีสัญลักษณ์รูปเป็นรูปวงกลมดังนี้

🔵

        4. ระดับที่ 3 เป็นแหล่งข้อมูล(resource)  เป็นระดับที่แสดงรายละเอียดของข้อมูลมีสัญลักษณ์เป็นรูปสี่เหลี่ยมขนาดเล็ก

⬛

        การออกแบบโครงสร้างเว็บไซต์เพื่อวางแผนทิศทางและการไหลของข้อมูลภายในเว็บไซต์จะมีรูปแบบพื้นฐาน 4 แบบ
        1. โครงสร้างเป็นแนวเส้น (linear design)  เมื่อต้องการให้มีการนำเสนอข้อมูลจากส่วนที่หนึ่งไปส่วนที่ 2 และส่วนที่ 3 ตามลำดับโดยแต่ละส่วนก็จะมีบทแต่ละบทเรียงลำดับกันไปพร้อมรายละเอียดของข้อมูลในบทนั้นๆ

รูปที่ 1.โครงสร้างเป็นแนวเส้น (linear design)

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

รูปที่  2. โครงสร้างเป็นลำดับชั้น (hierarchical structure)

        3. โครงสร้างปิรามิด (pyramidal structure)  จัดวางแหล่งข้อมูลระดับที่ 3 ไว้ในระดับเดียวกันเพื่อใช้งานโครงสร้างลักษณะนี้มีความเหมาะสมเมื่อเว็บไซต์ในทุกส่วนใช้เสียงภาพนิ่งภาพเคลื่อนไหวภาพวีดิทัศน์และปฏิสัมพันธ์ร่วมกัน

รูปที่  3. โครงสร้างปิรามิด (pyramidal structure)

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

 รูปที่4.โครงสร้างเป็นขั้ว (polar structure)

        3.2 การออกแบบเว็บเพจ
        คำแนะนำตามแบบของ Yale Style Guide (Lynch & Horton, 1999)  นำมาประยุกต์ได้ว่าเนื้อหาในเว็บเพจควรมีลักษณะสำคัญในประเด็นต่อไปนี้คือ
        1. มีความคงเส้นคงวาการออกแบบเว็บเพจแต่ละหน้าจะต้องให้มีความคงเส้นคงวา (Design Consistency)ในประการต่างๆต่อไปนี้
        -เป็นเว็บไซต์ที่มีการวางแผนอย่างมีตรรกะ
        -มีการวางรูปแบบเว็บเพจในแต่ละหน้าอย่างคงเส้นคงวาและมีตรรกะ
        -มีการวางจุดเชื่อมโยงเว็บเพจในแต่ละหน้าให้มีความคงเส้นคงวา
        -มีการใช้ภาพกราฟิกในแต่ละหน้าของเว็บเพจให้คงเส้นคงวา
        -มีการใช้ลักษณะตัวอักษรหัวข้อหลักและหัวข้อย่อยในเว็บเพจแต่ละหน้าอย่างคงเส้นคงวา
        2. มีเส้นกำกับทางเดินและความเร็วที่เหมาะสมทำให้ผู้ใช้สามารถท่องเว็บด้วยความสะดวกไม่เกิดความสับสนการสร้างเส้นทางให้ง่ายต่อผู้ใช้ควรดำเนินการดังต่อไปนี้
       -รักษาความคงเส้นคงวา
      - สร้างสารบัญของเนื้อหาสาระไว้หน้าแรก
       -วางการเชื่อมโยงกับโฮมเพจไว้ทุกหน้า
       -ตรวจดูว่าจุดเชื่อมโยงทุกจุดทำงาน
       -วางจุดเชื่อมโยงที่ส่วนบนและส่วนล่างของหน้า
       3. มีการจัดรูปแบบการพิมพ์ที่เหมาะสม(Typography)เลือกลักษณะของตัวอักษรและจัดแถววางแนวของอักษรในแต่ละหน้าของเว็บเพจโดยมีข้อควรพิจารณาดังนี้
        -ขนาดของตัวอักษรมีความคงเส้นคงวา
        -ไม่ควรใช้ตัวอักษรเกินกว่า 2 รูปแบบในภาวะปกติ
       -ไม่เจตนาเน้นความจนเกินควร
        -จัดข้อความให้อยู่ในรูปแบบที่อ่านง่าย
        -กำหนดช่องว่างหรือช่องไฟให้เหมาะสม
การออกแบบเว็บเพจรายวิชา (Web Course Design)  เพื่อให้เป็นเว็บที่ใช้เป็นสื่อกลางระหว่างผู้สอนและผู้เรียน ทั้งสารสนเทศที่เป็นประโยชน์ต่อผู้เรียนการติดต่อสื่อสารการทำงานและส่งงานที่มอบหมายและการติดตามการเรียนการสอนมีเกณฑ์ที่ควรปฏิบัติในการออกแบบโฮมเพจหรือเว็บเพจหน้าแรกดังต่อไปนี้
        -แสดงโลโก้ของสถาบัน
        -อธิบายสาระสังเขปของวิชาที่เว็บไซต์นี้ต้องการสื่อในลักษณะเป็นข้อความโดยย่อ
       -แสดงให้เห็นถึงโครงสร้างของเนื้อหาสาระอย่างชัดเจนในลักษณะคล้ายสารบัญของเว็บไซต์นี้
        -กำหนดความสัมพันธ์ของหัวข้อระดับที่ 1 กับหัวข้อย่อยโดยระดับที่เป็นส่วนหรือตอนจะนำผู้ใช้ไปยังหัวข้อหลักโดยการคลิกกลุ่มหรือบริเวณที่กำหนดให้คลิกหรือคลิ๊กจากรายการคำที่เชื่อมโยง
        -จัดให้มีส่วนที่ผู้ใช้จะติดต่อหรือแสดงความคิดเห็นได้
        3.3 การออกแบบเชื่อมโยงเว็บ
        แบ่งออกเป็น 2 ลักษณะดังนี้
        1. การเชื่อมโยงภายในเว็บไซต์เป็นการเชื่อมโยงจากบทหนึ่งไปอีกบทหนึ่งของเว็บไซต์นั้นอาจเป็นการเชื่อมโยงไปยังข้อความหรือรูปภาพเพื่อเพิ่มเติมความเข้าใจครั้งนี้คำหรือภาพที่เชื่อมโยงไปยังสารสนเทศอื่นหรือไฮเปอร์ลิงก์เช่นพลิกคำว่านกยูงแล้วมองเห็นภาพนกยูงที่คำว่าประเพณีลอยกระทงมองเห็นภาพวีดีทัศน์การลอยกระทง ได้ยินเสียงเพลงลอยกระทงเป็นต้นสิ่งสำคัญในการสร้างการเชื่อมโยงภายในเว็บไซต์ไม่ควรสร้างให้มีการเชื่อมโยงมากเกินไปจนทำให้มีจุดประสงค์ที่ไม่ชัดเจน
       2. การเชื่อมโยงภายนอกเว็บไซต์ควรจัดให้มีความยืดหยุ่นในการเชื่อมโยงไปยังเว็บไซต์ภายนอกทั้งนี้การเชื่อมโยงไปยังข้อมูลที่เกี่ยวข้องอย่างไม่มีข้อจำกัดเป็นการจัดทำเว็บไซต์ที่จูงใจให้มีผู้มาเยี่ยมชมแต่มีสิ่งที่ต้องระมัดระวังดังต่อไปนี้
        -เว็บเพจที่เชื่อมไปนั้นอาจมีการเปลี่ยนแปลงเช่นหมดอายุหรือกลุ่มไปแล้วหรือมีการปรับปรุงใหม่เป็นต้น
       -แหล่งข้อมูลที่เคยอยู่ในเว็บไซต์นั้นได้ย้ายหรือปรับปรุงเป็นเรื่องใหม่
       -ถ้าไม่ได้มีการตรวจทานการเชื่อมโยงอาจทำให้ผู้มาใช้เว็บนั้นงงๆได้
       -ไม่ควรเชื่อมโยงไปยังเว็บเพจที่มีภาพกราฟฟิกขนาดใหญ่โดยไม่มีการเตือนให้ผู้ใช้ทราบว่าข้อมูลจะปรากฏช้ามากถึงแม้ว่าผู้ใช้สามารถหยุดการปรากฏของเว็บไซต์นั้นได้แต่ก็ทำให้ผู้ใช้เสียอารมณ์ได้เช่นกัน
        3.4 การใช้องค์ประกอบมัลติมีเดียในเว็บเพจ
        1. การใช้ข้อความไม่ควรบรรจุข้อความเต็มหน้าจอเพราะทำให้ยากต่อการอ่านทำให้รู้สึกน่าเบื่อและลดความอยากเรียนรู้ลงได้
        2. การใช้เส้นขอบพื้นหลังและสีแนวทางปฏิบัติในการใช้สีขอบพื้นหลังและสีตัวอักษรมีดังนี้
        หลีกเลี่ยงการใช้สีโทนเดียว กันของขอบสีพื้นหลังและสีตัวหนังสือ
ภาพที่ 3.9 จัดข้อความให้อ่านง่ายไม่แออัด
        3. การใช้ภาพกราฟิก
        ในภาวะปกติไม่ควรต้องใช้เวลาในการรอภาพปรากฎนานกว่า 10 วินาที
       ใช้ภาพกราฟิกเพื่อเป็นส่วนนำทางผู้อ่านไปยังข้อมูลที่เกี่ยวข้อง
       ใช้ภาพกราฟิกเพื่อทำให้หัวข้อหลักน่าสนใจและสื่อความหมาย
       ใช้ภาพกราฟิกเพื่อทำให้เว็บหน้านั้นเหมาะกับเป้าประสงค์ของเว็บเพจนั้น
        4. การใช้ภาพเคลื่อนไหว
       แสดงความต่อเนื่องของภาพที่เปลี่ยนแปลงไป
       บ่งบอกขนาดและมิติในการเปลี่ยน
       แสดงความหลากหลาย
ภาพที่ 3.10 ภาพเคลื่อนไหว
        5. การใช้ภาพวีดิทัศน์
        การใช้ภาพวีดิทัศน์มีข้อดีและข้อเหมาะสมในกรณีต่อไปนี้
        เมื่อต้องการให้มีการนำเสนอในลักษณะของรายการทีวีภาพยนตร์
        เมื่อต้องการให้ผู้ชายประทับใจในบุคลิกภาพของผู้พูดและรับประสบการณ์เพิ่มขึ้น
        6. การใช้เสียง
        ประโยชน์หลักของการใช้ข้อมูลที่เป็นเสียงมีดังนี้
        ช่องของการสื่อด้วยเสียงแยกออกจากการแสดงผลในลักษณะอื่นทำให้ไม่กระทบต่อข้อมูลบนหน้าจอ
        เสียงพูดใช้เสริมการช่วยให้คำแนะนำ
        เสียงผู้ใช้แทนภาพวีดิทัศน์เพื่อช่วยให้จินตนาการถึงบุคลิกลักษณะของผู้พูด
        3.5 การเตรียมแฟ้มข้อมูลเพื่อการใช้สร้างเว็บเพจ
        1. แฟ้มข้อมูลเอกสาร
        2. แฟ้มรูปภาพ
        3. แฟ้มภาพ
เคลื่อนไหว         .
        4. แฟ้มเสียง
        5. แฟ้มภาพยนตร์และวีดิทัศน์
        6. แฟ้มสไลด์อิเล็กทรอนิกส์
        7. แฟ้มหนังสืออิเล็กทรอนิกส์
        8. แฟ้มมัลติมีเดียปฏิสัมพันธ์
   

บรรณานุกรม

1.https://goo.gl/images/V693c1

2.https://goo.gl/images/YX8gTk

3.https://goo.gl/images/hCpz4v

4.https://goo.gl/images/LHp9ne
5.https://goo.gl/images/Zkvpjr
6.บุปผชาติ ทัฬหิกรณ์.
เทคโนโลยีสารสนเทศทางวิทยาศาสตร์ศึกษา/ บุปผชาติ ทัฬหิกรณ์-- กรุงเทพฯ: สำนักพิมพ์มหาวิทยาลัย เกษตรศาสตร,์ 2546.