บทน ำ

จากกระแสของสงคมทไดรบผลกระทบของความกาวหนาทางเทคโนโลยเครองมอสอสาร ตลอดจนสารสนเทศออนไลนตางๆ นนท าใหเกดการเปลยนแปลงในการด าเนนชวตการท างาน และการเรยนรของเราจะเหนไดวาการเรยนรของเรานนไดพงสารสนเทศออนไลนตางๆ มากยงขน ดงเชนการใชเทคโนโลยในการเรยนการสอนปจจบนทหลาคนเชอวาจะเขามาตอบโจทย ในเรองของการจดการเรยนใหมประสทธภาพอยางสงสดสอการเรยนการสอนมอยหลายประเภทดวยกน ไมวาจะเปนสอพนฐาน สอคอมพวเตอร ชวยสอนหรอสอเวบไซตทางการศกษาทหลายๆคนเชอวาจะเขามาชวยเสรมในเรองของขอจ ากดของเวลาและสถานททจะเออใหผเรยนสามารถเขามาศกษาหาความร ทไหและเวลาใดกได

โดยสอเวบไซตทางการศกษาถอ วาเปนสอการเรยนการสอนทสนบสนนใหผเรยนไดศกษาเรยนรดวยตนเอง สงเสรมปฏสมพนธผานเครอขายออนไลนทงกบผเรยนดวยกนเอง และระหวางผเรยนกบผสอน ดวยแนวคดทวาการเรยนการสอนในลกษณะนจน าไปสการสรางองคความร ใหมๆ ดวยตนเองผานสงคมแหงการเรยนรออนไลน

นอกจากนในปจจบน จะเหนได วาคณประโยชนของเวบไซต ทเปนแหลงเกบรวบรวมขอมลทกชนดไดมากมายมหาศาล รวมกบอทธพลของอนเทอรเนตทมตอการศกษาโดยเฉพาะในเรองของการขยายโอกาสทาง

ฉะนนรปแบบของการเรยนการสอนควรเนนสอนวธการเรยนใหผเรยน ไมใชสอนแตเนอหาวชาเพยงอยางเดยว (Teaching how to learn - not what to learn) และการเรยนการสอนในรปแบบนยงเปนการสงเสรมทกษะการเรยนรตลอดชวต (Lifelong learning) อกดวย

ดงนน อาจเรยกไดวา เวบไซตทางการศกษาทมคณภาพยอมสงผลใหผเรยนประสบความส าเรจและมคณภาพในการเรยนรเชนกน โดยเวบไซตทางการศกษาไดอธบายรายละเอยดเกยวกบความเปนมา ความหมาย ทฤษฎการศกษาและหลกการพนฐานส าหรบการออกแบบและพฒนาเวบไซตทางการศกษา องคประกอบ ขนตอนการออกแบบและ พฒนาเวบไซตทางการศกษา โครงสรางเวบไซตทางการศกษา และศกษาการออกแบบเวบไซตทางการศกษา ดงตอไปน

บทท 1 ควำมหมำยเวบไซตทำงกำรศกษำ

การน าเวบไซตทางการศกษาไปใชในการเรยนการสอนนนจะมการใชในรปแบบทตางๆกน ไมวาจะเปนการใชเปนสอเสรมในการเรยนการสอนแบบใชเวบชวยการใชเปนสอหลกในการเรยนการสอนแบบออนไลนและการเรยนการสอนแบบผสมผสานการศกษาออนไลนในสหรฐอเมรกา พ.ศ. 2548” (Growing by Degrees: Online Education in the United States, 2005) ของสมาคมสโลน คอนซอรเทยม (Sloan Consortium Foundation) สรปไดวา ความเปนมาของการเรยนการสอนอเลรนนง เรมจากววฒนาการ 5 ยคของการศกษาทางไกล ซงเรมตงแตยคของการใชชดเอกสารสงผานทางไปรษณย จากนนเปนชวงของการเผยแพรสอตางๆทางรายการโทรทศนการใชจานดาวเทยมเพอสงสญญาณตอมาเปนยคของการเรยนแบบใชบทเรยนการเรยนการสอนโดยใชคอมพวเตอรชวยสอน (Computer-Assisted Instruction: CAI) บทเรยนการเรยนการสอนบนเวบ (Web-Based Instruction: WBI) จนถงในยคปจจบน ซงเนนทการเรยนการสอนผานเวบหรอ อเลรนนง ทเนนในเรองของการเรยนการสอนแบบ Anyone from Anywhere and at Anytime ทไมมขอจ ากดของเวลาและสถานท เนนในเรองของเทคโนโลย WEB 2.0 Technology ทเนนการปฏสมพนธระหวางกนมากขน และเรองของ Online Learning Community หรอสงคมแหงการเรยนรอกดวย

ทฤษฎทำงกำรศกษำและหลกกำรพนฐำนส ำหรบกำรออกแบบและพฒนำเวบไซตทำงกำรศกษำ ประกอบดวย 5 สวนหลกคอ (1) ทฤษฎการเรยนร (2) ทฤษฎระบบ (3) ทฤษฎการตดตอสอสาร (4) รปแบบการเรยนการสอน (5) การศกษาทางไกล

1) ทฤษฎกำรเรยนร ทฤษฎพฤตกรรมนยม (Behaviorist Theory)

นกจตวทยาการศกษา ไดแก Thorndike (1913) Pavlov (1927) และ Skinner(1974) เชอวาการเรยนรคอการเปลยนแปลงพฤตกรรมทสามารถสงเกตเหนได เกดจากการใหสงเราจากภายนอกในสภาพแวดลอมการเรยนร นกจตวทยากลมนเชอวาพฤตกรรมทสงเกตเหนไดเปนการบงชอยางชดเจนของการเรยนรทเกดขน ไมใชสงทอยในความคดของผเรยน ดงนน แนวทางปฏบตของการนาแนวคดของนกจตวทยากลมพฤตกรรมนยมไปใช คอควรมการแจงใหทราบวาวตถประสงคของการเรยนการสอนคออะไร เพอใหผเรยนเกดความเขาใจและตงความคาดหวง จนสามารถประเมนตนเองวาจะสามารถไดรบผลการเรยนรประจ าบทเรยนนนๆหรอไม ผเรยนจะตองไดรบการประเมนผลการเรยนการสอนเพอใหทราบวา ตนเองมผลการเรยนร เปนไปตามทก าหนดไวหรอไม ทงนอาจมาจากการใหขอมลปอนกลบทเหมาะสมทงในภาพรวมและในทกๆ ขนตอนของการเรยนการสอน เพอใหผเรยนสามารถ ตรวจสอบไดวาตนเองก าลงเกดการเรยนรทถกตองหรอไม

2

ทฤษฎพทธปญญำ (Cognitive Theory)

นกจตวทยาและนกการศกษากลมพทธปญญา เชอวาการเรยนรบางเรองไมสามารถสงเกตเหนไดจากพฤตกรรมทแสดงออกและการเรยนรทเกดขนมมากกวาการวดดวยพฤตกรรมทเปลยนแปลง นกจตวทยาและนกการศกษากลมนจงศกษาเกยวกบการเรยนรทเกยวของกบการใชความจ า แรงจงใจ และการคดตลอดจนการสะทอนทแสดงใหเหนถงกระบวนการเรยนรของผเรยน ซงนกจตวทยากลมนพจารณาวาการเรยนรเปนกระบวนการทเกดขนภายในของผเรยน ตามความสามารถในการเรยนรของแตละบคคลปรมาณความสามารถ ความพยายามททมเทระหวางกระบวนการเรยนร และความซบซอนของการประมวลผล ตลอดจนโครงสรางความรเดมของผเรยน

ดงนน แนวทางปฏบตของการน าแนวคดของนกจตวทยาและนกการศกษากลมพทธปญญาไปใชไดคอ การใชกลวธทใหผเขารบการเรยนการสอนไดเขาถงสอการเรยนไดมากทสด เพอใหผเขารบการเรยนการสอนสามารถถายโอนสงทไดรบผานประสาทสมผสไปยงหนวยความจาระยะสน เชน การอาน การมอง และการสมผส นอกจากนการจดล าดบเนอหาอยางเปนระบบเรยงล าดบจากงายไปยากและแสดงถงความเชอมโยง เชน การใชผงความคดลวงหนา (Advanced Organizer) จะชวยใหผเขารบการเรยนการสอนเกดการจดจ าและระลกถงขอมลนนๆ ไดดยงขน ทฤษฎคอนสตรคตวสต (Constructivist Theory)

นกทฤษฎกลมคอนสตรคตวสตมความคดเหนในเรองการเรยนรของผเรยน โดยนกทฤษฎกลมนเหนวาผเรยนแตละคนมการแปลความหมายของขอมลทไดรบและการแปลความสงทอยรอบตวตามการรบรของแตละบคคล ซงมผสอนท าหนาทเปนผชวยสนบสนนการเรยนร และใหค าแนะน าสนบสนนการเรยนร (facilitator, coach) โดยผสอนจะเปนผใหค าแนะน ามากกวาเปนผถายทอดความร กจกรรมการเรยนจงเนนสถานการณการเรยนร ซงผเรยนจะตองประยกตใช ความรในการแกปญหา ดงนน การประยกตใชทฤษฎคอนสตรคตวสตส าหรบการเรยนการสอน คอการจดการเรยนรทใหผเขารบการเรยนการสอนมสวนรวมและวทยากร ตงค าถามหรอเสนอสถานการณปญหากระตนใหผเขารบการเรยนการสอนคดวเคราะหและคดแกปญหา วทยากรในฐานะทเปนผสนบสนนการเรยนรจะตองจดเตรยม

3

แหลงขอมลใหเพยงพอตอการเรยนรของผเขารบการเรยนการสอน อนจะน าไปสการสรางองคความรใหมตามความเขาใจของผเรยน นอกจากนการเรยนแบบรวมมอ (Collaborative learning) ยงชวยกระตนใหผเขารบการเรยนการสอนแลกเปลยนความคดเหนและรวมกนท างานใหเสรจตามทไดรบมอบหมาย และมปฏสมพนธกบผอน ซงจะน าไปสการเรยนรเพอสงเสรมการเรยนรขนสง (higher order learning) และเกดชมชนแหงการเรยนร (learning community) อกดวย

สรปไดวำ การใชความรของทฤษฎการเรยนรทง 3 กลม ไดแก พฤตกรรมนยม พทธปญญา และคอนสตรคตวสต ลวนมวตถประสงคเดยวกน คอเพอใหผเรยนบรรลเปาหมายการเรยนรทไดก าหนดไว ตามดวยลกษณะของความรและวตถประสงคทตางกน ทฤษฎทง 3 นจงเหมาะสมในสถานการณทแตกตางกนไป เชน ทฤษฎกลมพฤตกรรมนยมจะเหมาะกบการเรยนการสอนทเนนขอเทจจรง ในขณะทหลกการจาก

ทฤษฎพทธปญญาจะเหมาะกบการเรยนการสอนทเนนหลกการและกระบวนการ และหลกการ

ทฤษฎคอนสตรคตวสตจะเหมาะกบการเรยนการสอนทเนนทกษะการคดระดบสง (Ally, 2006; Waterhouse, 2005)

2) ทฤษฎระบบ (Systems Theory) ประกอบดวยองคประกอบ 2 สวนคอSystemic เชอวาผเรยนสามารถเรยนรไดด

ทสดผานการออกแบบการสอนอยางเปนระบบ(organized approach) น าไปสนวตกรรมการสอน (instruction innovation) ซงอาจอยในรปแบบของผลงานในภาพรวมหรอกระบวนการ ในขณะท Systematic พจารณาแนวคดจากนวตกรรมซงอาจอยในรปของผลงาน กฎเกณฑ หรอกระบวนการทไดน าไปเผยแพรหรอปรบใชในองคกร โดยเนนทผลลพธทไดจากนวตกรรมนนๆ

4

3) ทฤษฎกำรตดตอสอสำร (Communication Theory)

ถอเปนองคประกอบส าคญองคประกอบหนงซงจะเนนในเรองของกระบวนการสงผานและถายโอนขอมล (Message) ใหมประสทธภาพสงสดจากผสงสาร (Sender) ไปยงผรบสาร (Receiver) และผลยอนกลบ (Feedback) จากผรบสารมายงผสงสาร และการลดสงแทรกแซง (noise) ใหไดมากทสด เพอใหผรบสารไดรบขอมลทกระจางและถกตองทสด ดงนน การออกแบบสาร (Message Design) จงถอเปนองคประกอบส าคญในการออกแบบการสอนแบบออนไลนไมวาจะเปนในเรองของการออกแบบหนาเวบทเหมาะสม (webpage layout) การประยกตใชหลกการตดตอสอสาร (Communication principle) เพอสรางระบบน าทางทเหมาะสม (Navigation) ดวยการใชปม (buttons) สญลกษณรป (icon) และการเชอมโยง (hypermedia) ดวยขอความ (text) และสอรปแบบตางๆ เชน เสยง (audio) วดทศน (video) และสอประสม(multimedia) โดยแนวคดการออกแบบสารตางๆ เหลานจะชวยเพมการสงสารและการแลกเปลยนขอมลใหมประสทธภาพยงขน

4) รปแบบกำรเรยนกำรสอน (ID Models)

แบบจ าลองการออกแบบการสอน ADDIE ซงถอวาเปนแบบจ าลองแรกเรมและเปนรากฐานทส าคญ (Generic Model) ซงน าไปสแบบจ าลองอนๆ ทนยมในปจจบน เชน Dick and Carey Model, Kemp Model, Gagne Model เปนตน

แบบจ าลอง ADDIE ยอมาจาก Analysis Design Development Implementation Evaluation โดยหลกการน าไปใชคอผลลพธทไดในแตละขน จะน าไปสการด าเนนงานในขนตอๆไป โดยขนตอนของการวเคราะห (Analysis) จะเนนทวตถประสงคของกลมผชม/เปาหมาย และเนอหา การออกแบบ(Design) จะเนนทความสอดคลองกบวตถประสงคของกลมผชม/เปาหมาย พนฐานของผเรยน วตถประสงคของบทเรยนและเนอหา การพฒนา (Development) เปนการก าหนดแผนการด าเนนงานผลตอยางเปนขนตอนเพอตอบสนองวตถประสงคของเนอหา บทเรยนและการประเมนผล และรปแบบทไดออกแบบไว การน าไปใช(Implementation) คอการน าผลงานไปใชงานจรงหลงจากทไดมการทดลองน าไปใชกบกลมเปาหมายและไดปรบแกตามขอเสนอแนะแลว นอกจากนอาจรวมถงการตรวจสอบและขอค าแนะน าจากผเชยวชาญดานการออกแบบบทเรยน สดทายคอ การวดผลและการประเมน (Evaluation) ทจะตองท าอยางมระบบ โดยการประเมนประกอบดวย 2 สวนทส าคญคอ

5

การประเมนผลระหวางขนตอนพฒนา (Formative Evaluation) เพอน าไปปรบปรงแกไขในการด าเนนงานขนตอๆไป และการประเมนผลเมอพฒนาบทเรยนเรยบรอยแลว (Summative Evaluation) เพอเปนการเปดโอกาสส าหรบความคดเหนจากผใชงาน และการประเมนจากผลสมฤทธของผเรยน 5) กำรศกษำทำงไกล (Distance Education)

เปนการศกษาซงสงเสรมใหผเรยนทมขอจ ากดในเรองของเวลาและสถานทไดมโอกาสศกษาเลาเรยน โดยการศกษาทางไกลสามารถจ าแนกออกไดเปน 3 ประเภทคอ

(1) การเรยนทผเรยนอยตางสถานทและเขาเรยนตางเวลา e-mail และกระดานสนทนาจงถกใชเปนเครองมอหลกในการตดตอสอสาร

(2) การเรยนทการตดตอสอสารระหวางผเรยนและผสอนเกดขนในเวลาเดยวกน (Synchronous Communication) แตตางสถานท

เชน การเรยนผานทางระบบ teleconference การใช chat เพอการสนทนาโตตอบ

(3) การเรยนแบบไมประสานเวลา (Asynchronous) ทผเรยนและผสอนเขารวมการเรยนการสอนตางเวลากนปจจยพนฐานทส าคญส าหรบการจดการเรยนรแบบอเลรนนงทง 5 สวนนลวนมความส าคญอยางยง ซงถาผสอนหรอผออกแบบบทเรยนสามารถออกแบบไดครอบคลมทง 5 สวน จะท าใหการจดการเรยนรในรปแบบนประสบผลส าเรจยงขน

ขอดของกำรจดกำรเรยนรในรปแบบอเลรนนง คอการใชประโยชนของสารสนเทศบนฐานขอมลอนเทอรเนตและการสรางโอกาสในการศกษา อยางไรกตามการจดการเรยนรในปจจบนนยงเปนการเนนทปฏสมพนธระหวางผเรยนกบบทเรยน และผเรยนกบผสอนเปนสวนใหญ โดยปฏสมพนธระหวางผเรยนดวยกนเองยงมขอจ ากด อกทงเครองมอทใชในการปฏสมพนธระหวางการเรยนทง แบบประสานเวลาและไมประสานเวลากยงเปนปญหาอย

ดงนน จะเหนไดวาแนวโนมในอนาคตจะมการน าเทคโนโลยเวบ 2.0 มาชวยเสรมและตอบโจทยในเรองของขอจ ากดของเครองมอทใชในกาปฏสมพนธระหวางการเรยน

6

เชน บลอก(Blog) สารานกรมเสร (Wikipedia) และการสมมนาออนไลน (Webinar) จะเหนไดวาเครองมอดงกลาวจะเรมเขามามบทบาทและเปนเครองมอส าคญททาใหการจดการเรยนรมประสทธภาพและประสบความส าเรจยงขน โดยเฉพาะในเรองของการเรยนร การใฝร และการแลกเปลยนเรยนรในสงคมออนไลน (Online Learning Community)โดยสรปการจดการเรยนรแบบอเลรนนง ผสอนควรใหความส าคญกบศาสตรดานการศกษา โดยเนนการจดการเรยนรทอาศยทฤษฎการเรยนร ทฤษฎการตดตอสอสาร และรปแบบการจดการเรยนรทสงเสรมใหผเรยนสรางความรโดยการคนควาและลงมอปฏบตดวยตนเองตามความสนใจ ความถนด และความสามารถของผเรยน โดยใชเครองมอการตดตอสอสารบนออนไลนชวยในการจดกจกรรม ซงนอกจากจะชวยใหผเรยนไดพฒนาตนเองตามวตถประสงคการเรยนรทก าหนดไวแลว ยงชวยพฒนาการคด และทกษะการสอสารและการมปฏสมพนธกบเพอนและผสอนออนไลนดวย

องคประกอบของเวบไซตทำงกำรศกษำ

ประกอบดวย 3 องคประกอบพนฐาน โดยมรายละเอยดดงน

1) บทเรยนอเลกทรอนกส (courseware)เปนเนอหาสาระทน าเสนอในรปแบบอเลกทรอนกส ซงสวนใหญมลกษณะเปนสอประสม โดยเนนการออกแบบทใชวธการ กลยทธ และการใหขอมลปอนกลบแกผเรยนโดยทนทในการน าเสนอ ทกระตนใหผเรยนเกดการเรยนรตามวตถประสงคทก าหนดไว ซงผเรยนสามารถเขาถงเนอหาไดตามความตองการ ตลอดจนอาจมแบบฝกหดหรอแบบทดสอบเพอใหผเรยนสามารถตรวจสอบความเขาใจ ทงนอาจยดแนวทางของ learning object บทเรยนอเลกทรอนกส (Courseware) ในรปแบบของ Learning Objects เปนสอการสอนในลกษณะบทเรยนอเลกทรอนกสทมขนาดเลก สามารถน ากลบมาใชใหมโดยการจดเรยงล าดบเนอหาใหม เกดเปนบทเรยนใหม โดยมองคประกอบส าคญในแตละ Learning Object คอ

(1) วตถประสงคการเรยนร (2) หนวยการเรยน (3) แบบทดสอบ

7

โดยคณลกษณะเดนของ Learning Objects คอเนอหาเปนอสระภายในตวเอง สะดวกตอการน าไปใชและการปรบแก (content updated) สามารถใชซ า (reusable) แบงปนแลกเปลยนเนอหาระหวางกน (repository) ไดผานระบบบรหารการเรยนการสอน (Learning Management System) อกทงยงเปนการลดปญหาไฟลขนาดใหญและการปรบปรงแกไขเนอหาบทเรยนไดยาก (Davidson-Shivers, 2006; Waterhouse, 2005; ใจทพย ณ สงขลา, 2550; Khan, 2005)

งำนวจยในประเทศทเกยวกบรปแบบเวบไซตทำงกำรศกษำ ชอผวจย : เจนจรา อนนตกาล ปทท ำกำรวจย : 2548 วจยเรอง : รปแบบโฮมเพจเวบไซตทางดานการศกษา ระดบอดมศกษา รปแบบกำรออกแบบ : มลตมเดย : มความนาเชอถอ ผลกำรวจย

รปแบบโฮมเพจเวบไซตทางดานการศกษาระดบ อดมศกษา พบวา 1. ควำมนำเชอถอของโฮมเพจทางดานการศกษาควรมความยาวของโฮมเพจ

เมอเทยบกบจอภาพมความยาวเหมาะสมกบเนอหา มโครงสรางเปนแนวตง สญลกษณสถาบนอยดานบนกงกลางหนามแนวการวางเมนหลกแบบทงแนวตงและแนวนอนโดยแนวตง อยดานซายและแนวนอนอยดานบน มเมนหลกเปนแบบ Pop-up Menu และใชสแสดงสถานะ การเชอมโยงจากเมนหลกไปสเนอหา

2. ดำนเนอหำ จดวางเนอหาแบบจดกลาง และแสดงเนอหาแบบคอลมนเดยว จดวางองคประกอบในลกษณะมพนทสวนบนและใชพนทดานซายแคบกวาพนทดานขวา

3. ดำนส ผใชเวบไซตทางดานการศกษาใหความส าคญในเรองการใชสสวยงามสบายตา และสอความหมายไดตรงตามจดประสงค และเหนวาลกษณะพนหลงสออน ตวอกษรสเขม ใชโทนสเยนเหมาะสมส าหรบเวบไซตทางดานการศกษา

4. ดำนตวอกษร ผใชใหความส าคญกบตวอกษรทเปนแบบทอานงาย ชดเจน กลมกลนกบทกๆหนา

8

ขนาดตวอกษรภาษาไทยของหวเรองเปน 24 point ตวหนา ขนาดของเนอหา 16point ตวปกต สวนหวเรองทเปนภาษาองกฤษใชรปแบบตวอกษรแบบลายมอ

5. ดำนภำพประกอบ ใชเพออธบายเพมเตมจากตวอกษรตามความเหมาะสมของเนอหา

6. ดำนเสยงประกอบ ใชเสยงประกอบสอดคลองสมจรงเขากบเนอหาและตองการใหโฮมเพจมเสยงดนตรประกอบ ชอผวจย : ณฐพล ร าไพ ปทท ำกำรวจย : 2548 วจยเรอง : รปแบบของเวบเพจทมตอผลสมฤทธทางการเรยน รปแบบกำรออกแบบ : สวนตอประสาน : ระบบน าทาง ผลกำรวจย 1. กำรเชอมโยง

1.1 การเชอมโยงทด ไฮเพอรเทกซทใชควรจะมลกษณะทอยในรปแบบทเปนมาตรฐานทวไป

1.2 ค าทใชส าหรบการเชอมโยงจะตองเขาใจงาย มความชดเจน และไมสบสนจนเกนไป

1.3 แตละเวบเพจควรมจดเชอมโยงกลบมายงหนาแรกของเวบไซตทก าลงใชงานอยดวย

1.4 ควรก าหนดใหผเรยนไดเขาสหนาจอแรกทมค าอธบายเบองตนมการแสดงโครงสราง ภายในเวบ

ซงอาจอยในลกษณะของสารบญหรอรายการเพอผเรยนจะไดทราบถงขอบเขตทจะสบคน

9

2. ระบบน ำทำง

เนนการใชงานทเขาถงงาย จะชวยใหผเรยนรสกสบายใจตอการเรยนและสามารถท าความเขาใจกบเนอหาไดอยางเตมท ควรก าหนดปมการใชงานทชดเจน เหมาะสมโดยเฉพาะปมควบคม เสนทางการเขาสเนอหา (Navigation) ไมวาจะเปนเดนหนา ถอยหลงรวมทงอาจมการแนะน าวาผเรยนควรจะเรยนอยางไร ขนตอนใดกอนหรอหลงควรเพมความยดหยนใหผเรยนสามารถก าหนดเสนทางการเรยนรไดเอง

เชน การใชแผนผงของเวบไซต (site map) ทชวยใหผเรยนทราบวาตอนนอย ณ จดใด หรอเครองมอสบคนทชวยในการคนหาหนาทตองการ ชอผวจย : สรวงสดา ปานสกล ปทท ำกำรวจย : 2545 วจยเรอง : รปแบบการเรยนรกระบวนการแกปญหาเชงสรางสรรคแบบรวมมอในองคกรบนอนเทอรเนต รปแบบกำรออกแบบ : มลตมเดย : เนอหา

: ระบบน าทาง ผลกำรวจย 1. ดำนมลตมเดย

1.1 หลกเลยงการใชกราฟกทไมกอใหเกดประโยชนเพราะถงแมจะดสวยงาม แตจะท าใหผเรยนเสยเวลาในการรบขอมลทตองการ แตหากตองมการใชภาพประกอบ กควรใชเฉพาะทมความสมพนธกบเนอหาเทานน

1.2 การใชรปภาพเพอเปนพนหลง ไมควรเนนสสนทฉดฉาด เพราะอาจจะไปลดความเดนชดของเนอหาลง ควรใชภาพทมสออนๆ ไมสวางเกนไป รวมไปถงการใชเทคนคตางๆ

เชน ภาพเคลอนไหว หรอตวอกษรวง (Marquees) ซงอาจจะเกดการรบกวนการอานได ควรใชเฉพาะทจ าเปนจรงๆเทานน

10

1.3 ตวอกษรทน ามาแสดงบนจอภาพ ควรเลอกขนาดทอานงาย ไมมสสนหรอลวดลายมากเกนไป

1.4 ควรออกแบบหนาเวบเพจใหเปนมาตรฐานเดยวกนตลอดทง เวบไซต เพราะความสม าเสมอจะชวยใหผเรยนรสกคนเคยและสามารถคาดการณลกษณะลวงหนาของเวบได จะชวยใหการใชงานบทเรยนเปนไปอยางสะดวก แตมขอควรระวงคอความสม าเสมอน อาจน ามาซงความนาเบอได

แนวทำงแกไข คอ สรางความแตกตางทนาสนใจในแตละหนาโดยใชองคประกอบทคลายคลงกน แตมสหรอลกษณะแตกตางกนไปเลกนอยเพอท าใหเกดลกษณะพเศษเฉพาะหนานนๆ แตยงคงความสม าเสมอของเวบไซตได

2. กำรออกแบบเนอหำ ควรกระชบและทนสมย หลก เลยงการใชเวบเพจทมลกษณะการเลอนขนลง แต

ถาจ าเปนควรจะใหขอมลทมความส าคญอยบรเวณดานบนสดของหนาจอ

3. กำรออกแบบระบบน ำทำง 3.1 ควรจดโครงสรางหรอจดระเบยบของขอมลทชดเจนมาตรฐานเดยวกน จะ

ชวยใหนาใชงานและงายตอการใชงาน 3.2 ควรเพมความยดหยนใหผเรยนโดยการใหอสระในการเขาถงเนอหาผาน

ระบบนาทางทมประสทธภาพจะท าใหเขาใจเนอหาไดอยางเตมทโดยไมตองเสยเวลาอยกบการท าความเขาใจการใชงานทสบสน ชอผวจย : จตเกษม พฒนาศร ปทท ำกำรวจย : 2539 รปแบบกำรออกแบบ : มลตมเดย

: สวนตอประสาน : เนอหา : ระบบน าทาง : การเขาถงขอมล

ผลกำรวจย

11

1. ดำนมลตมเดย

1.1 การใสภาพประกอบ จะตองเลอกรปภาพทท าหนาทแทนค าบรรยายทตองการ ควรใชรปภาพทสามารถสอความหมายกบผใชไดตรงตามวตถประสงค

1.2 รปภาพทน ามาประกอบ ไมควรมขนาดใหญหรอจ านวนมากเกนไป เพราะอาจท าใหสาระของเวบเพจถกลดความส าคญลง

1.3 การใช รปภาพเพอเปนพนหลง ไมควรเนนสสนทฉดฉาด เพราะอาจไปลดความเดนชดของเนอหา ควรใชภาพทมสออนๆ ไมสวางจนเกนไป

1.4 ตวอกษร ควรเลอกขนาดทอานงาย ไมมสสนและลวดลายมากเกนความจ าเปน

2. กำรออกแบบสวนตอประสำน 2.1 เชอมโยงขอมลไปยงเปาหมายไดตรงกบความตองการมากทสดถาขอมลทนา

มาแสดงมเนอหาสาระมากเกนไป เวบเพจไมสามารถน าขอมลทงหมดมาแสดงได ควรน าแหลงขอมลนน มาเขยนเปนตวเชอมโยง ผใชจะไดสามารถคนหาขอมลไดอยางถกตองและกวางขวางยงขน

2.2 การสรางตวเชอมโยงจะสรางในรปของตวอกษรหรอรปภาพกได แตควรทจะแสดงจดเชอมโยงใหผใชสามารถเขาใจไดงาย ทนยมสรางกนสวนใหญเมอมเนอหาตอนใดเอยถงชอทเปนรายละเอยดเกยวเนองกนกจะสรางจดเชอมโยงทนท

2.3 ในแตละเวบเพจควรมจดเชอมโยงกลบไปยงหนาแรกของเวบไซตทกาลงใชงานอย ทงนเผอวาผใชหลงทางและไมทราบวาจะท าอยางไรตอไปกจะสามารถกลบมาสจดเรมตนใหม

3. กำรออกแบบเนอหำ 3.1 เนอหากระชบ สนและทนสมย 3.2 เนอหาควรเปนเรองทส าคญ หรออยในความสนใจของผคนหรอเปนเรองท

ตองการใหผใชทราบ และควรปรบปรงใหทนสมยอยเสมอ 3.3 ควรเปนมาตรฐานเดยวกน โดยอาจแบงเนอหาออกเปนสวนๆ หรอจดกลม

เปนหมวดหม 4. กำรออกแบบระบบน ำทำง

4.1 ควรมรายการสารบญ (Index) แสดงรายละเอยดของเวบเพจ

12

การทผใชจะเขาไปคนหาขอมลได ผสรางควรแสดงรายการทงหมดทเวบเพจนน มอยใหผใชทราบ โดยอาจท าอยในรปแบบของสารบญหรอตวเชอมโยง (links) จะท าใหสามารถหาขอมลไดอยางรวดเรว

4.2 เมอใดเนอหาตอนใดเอยถงชอทเปนรายละเอยดทเกยวเนองกนใหสรางตวเชอมทนท

5. กำรเขำถงขอมล 5.1 ใชงานงาย เนองจากอะไรกตามถามความงายในการใชงานแลวโอกาสทผชม

สนใจเวบไซตยอมสงตามลาดบ 5.2 สามารถโตตอบกบผใชไดอยางทนทวงท 5.3 ควรก าหนดจดทผใชสามารถแสดงความคดเหนหรอใหค าแนะน ากบผสรางได

เชน ใส e-mail ลงในเวบเพจ ในต าแหนงทเขยนควรอยบนสดหรอลางสดของเวบเพจ ไมควรเขยนแทรกไวทต าแหนงใดๆ ของจอภาพ เพราะผใชอาจหา e-mail ไมพบกได

ชอผวจย : ปทป เมธาคณวฒ ปทท ำกำรวจย : 2544 รปแบบกำรออกแบบ : มลตมเดย

: สวนตอประสาน : เนอหา : การทดสอบความนาเชอถอ

ผลกำรวจย 1.ดำนมลตมเดย

การจดท าขอความและภาพจะตองมวตถประสงค มการจดเตรยมวางแบบและขนาดของตวอกษร ส การก าหนดปมตางๆ และการใชเนอทและภาพทใชตองไมใหญเกนไปและตองไมใช เวลานานในการเชอมโยงมาสบทเรยน

2. ควรมกำรจดหนำจอภำพใหเหมำะสม

13

นาอานและใชการเชอมตอไปยงหนาถดไปมากกวาทจะใชการเลอนหนาจอภาพ และถามการเชอมโยงกบภายนอกจะตองมขอความบอกไววามการเชอมโยงกบสงใด

3. หลกเลยงกำรท ำเนอหำทยำว ตองแบงสาระอยางเหมาะสมหรอมการจดท าเปนกลม

4. กำรทดสอบกำรใชงำน ควรมการประเมน 4.1 กำรประเมนลกษณะเวบไซต ควรจะทราบไดทนทวาเมอเปดเขาไปแลว

เกยวของกบเรองใด ควรบอกลกษณะและรายละเอยดของเวบนน 4.2 กำรประเมนภำรกจ (Authority) จะตองบอกขนาดของเวบและ

รายละเอยดโครงสรางของเวบ เชน แสดงทอยและเสนทางภายในเวบและชอผออกแบบเวบ

4.3 ประเมนกำรจดรปแบบและกำรออกแบบ ความซบซอน เวลารปแบบทเปนทตองการของผใช

4.4 ประเมนกำรเชอมโยง (Links) เปนสงทจ าเปนและมผลตอการใช การเพมจ านวนเชอมโยงโดยไมจ าเปนไมเปนประโยชนตอผใช ควรใชเครองมอสบคนแทนการเชอมโยงทไมจ าเปน

4.5 กำรประเมนเนอหำ (Content) เนอหาทเปนขอความ ภาพ หรอเสยง จะตองเหมาะสมกบเวบ และใหความส าคญกบองคประกอบทกสวนเทาเทยมกน

4.6 กำรประเมนผลกำรเรยน สามารถประเมนผลระหวางเรยน การประเมนรวมหลงเรยน เพอดผลทมตอผเรยนและดผลทคาดหวงไว ซงจะน าไปปรบปรงการสอนอยางตอเนอง

5. ควำมนำเชอถอ

ควรมการจดท าสวนทายของบทเรยนมชอผจดท า และอเมล ทจะตดตอได วนทจดท า /แกไขเปลยนแปลง แนวการเลอกตางๆ เพอใหสามารถเหนภาพรวมทงหมด และจ านวนหนาทมการจดท าและตองไมยาวเกนไปหรอสนเกนไป และมการปรบปรงเวบเพจอยเสมอ

14

งำนวจยตำงประเทศทเกยวกบรปแบบเวบไซตทำงกำรศกษำ ชอผวจย : Bi ป (ค.ศ.) : 2000 กำรออกแบบ

รปแบบของเวบไซตเพอการศกษามความสมพนธกบการออกแบบการสอน การพฒนาเนอหาวชา การสงขอมลและการสงเสรมดานการจดการ สวนประกอบของการออกแบบเวบไซตเพอการศกษา คอตองมการท างานเปนทม ผลสมฤทธของการใชเทคโนโลยเวบขน อยกบความสามารถตอบสนองวตถประสงคการสอนและประโยชนทตองการจากการเรยน สวนทางดานนกเรยนทเรยนทางไกลตองการผลยอนกลบจากผสอนระหวางเรยนและผลสมฤทธทางการสอนดวยเทคโนโลยขน อยกบปฏสมพนธทหลากหลาย ชอผวจย : Paolo et al ป (ค.ศ.) : 2003 กำรออกแบบ

เสนอแนวทางในการเปลยนแปลงเวบเพจทมเนอหาทคงทและรวมอยในทเดยวกน ซงเดมหากตองการทจดทาหนาเวบเพจทมความคลายคลงกน ทาการคดลอกหนาเพจซ าๆกน เมอตองการปรบปรงเนอหาและโครงสรางของเวบเพจ กจะตองตามไปแกไขในทกๆ หนาทมผลกระทบ ซงท าใหเกดความยงยาก ดงนน การเปลยนใหเปนเวบเพจทมความยดหยนในการแกไข โดยจะมน าเอาเทคนคของการท าคลสเตอร (Cluster) จะสามารถดงดดความสนใจของผชมได กลาวคอเปนการแยกโครงสรางเวบเพจทมลกษณะคลายคลงกนออกมาเปนกลมๆ เพอใชเปนโครงสรางหลกหรอเทมเพลททจะใชรวมกนและใชเปนตวก าหนดรปแบบของสวนทแสดงเปนเวบเพจ สวนคาตวแปรตางๆ และคาของขอมลทตองการแสดงบนหนาเวบทนน จะจดเกบไวในฐานขอมล พรอมทงมสวนของแอพลเคชน ซงอยทเซรฟเวอร (Server) เพอทาการดงขอมลขนมาจากฐานขอมลและท าการรวมกบโครงสรางแลวแปลงใหเปนหนาเวบเพจทสามารถแสดงบนบราวเซอร (Browser) ได ท าใหการท างานมความเปนอตโนมตเพมมากขน และหากจะมการเปลยนแปลงจะเปนเพยงการเพม แกไข และลบขอมลในฐานขอมลเทานน

15

บทควำมในประเทศทเกยวกบรปแบบเวบไซตทำงกำรศกษำ ชอผเขยน/ ผแตง : สมคด อเนกทวผล ป : 2550 กำรออกแบบ : เวบ 2.0 รำยละเอยด 1. Google Adsense ระบบโฆษณาเปนลงคตามแตค าทผใชคนหา

2. flickr.com เวบอลบม เกบและแชรรปออนไลนทมการโยงเปนชมชน สงตอรปกนงาย Bit Torrent ระบบทผใชตางกดาวนโหลดไฟลจากกนและกนเอง

3. wikipedia.com เวบสารานกรมทผใชบญญตค ากนเอง ใหความหมายกนเอง และแกไขค าของคนอนไดตลอดเวลา

4. Blog เขยนงาย ใสรป เสยง คลปไดงายๆ เหมอนสงเมล เผยแพรสงตอไดกวางขวาง

5. SEO (Search Engine Optimization) ลงทนกบเทคนคท าใหลงคเวบบรษทตวเองไดอยหนาแรกบนๆ ใน Google, เสรชอนๆ ชอผเขยน/ ผแตง : สนตย เชรษฐาและ ชตพงษ กตตนราดร ป : (ม.ป.ป.) กำรออกแบบ : เวบ 2.0 รำยละเอยด

1. Wikipedia เปนสารานกรม Online ขนาดใหญทสด ไมวาใครกไดสามารถสราง แกไข และปรบปรงเนอหาอยางแทบไมมขดจ ากด

2. flickr.com ซงเปนเวบไซตทเปดใหผใชสามารถสงรปภาพอะไรกไดขนระบบ 3. Blog คอเวบไซตสวนตวส าเรจรป ทผใชเพยงสมครสมาชกกบผใหบรการและ

เขยนขอความทตองการลงไป พรอมใหใครกไดเขามาอานทนท 4. Feed คอระบบทสงขอมลขน หนาจอคอมพวเตอรอยางอตโนมตทกครงทม

การเพมเตมหรอเปลยนแปลงขอมล 5. digg สามารถใหคะแนนเนอหาทผใชคนอนสงขนระบบไดอยางอสระ

16

บทควำมตำงประเทศทเกยวกบรปแบบเวบไซตทำงกำรศกษำ ชอผเขยน/ผแตง : Khan ป : 2005 กำรออกแบบ

: สวนตอประสาน : เนอหา : ระบบน าทาง : การเขาถงขอมล : การทดสอบ

ผลกำรศกษำ 1. กำรออกแบบสวนตอประสำน

1.1 หนาจอเวบไซตแสดงผลปกตหรอไมเมอเปดใชกบโปรแกรมคนหาเวบ (Internet Explorer, Netscape หรอโปรแกรมคนหาอนๆ)

1.2 องคประกอบตอไปนทชวยใหเนอหาบทเรยนมความสมบรณ (ระบทกองคประกอบทชวยใหเนอหาบทเรยนสมบรณ ไดแก ภาพและวตถ เสยง วดโอ ภาพเคลอนไหว)

1.3 ควรเวนชองวางอยางเหมาะสมหรอประมาณ 20% เพอชวยใหผอานผอนคลายสายตาในขณะอาน

1.4 หนาหลก/โปรแกรมนาสนใจและดงดดดวยภาพหรอเสยง (แตละคนอาจชอบสและรปแบบอกษรตางกน)

1.5 ขอความในเวบไซตอานไดงายและชดเจน 1.6 สพนหลงและสสวนหนาทใชในการน าเสนอเวบไซตกลมกลนกน 1.7 เวบไซตมรปแบบการน าเสนอเหมอนเอกสารประกอบบทเรยนจะท าให

ผเรยนสามารถเชอมโยงระหวางบทเรยนออนไลนและเอกสารประกอบบทเรยน 1.8 องคประกอบในการน าเสนอ เชน ชอเรอง เนอหา การเชอมโยงและอนๆ ใช

รปแบบเดยวกน

17

1.9 ใชรปแบบอกษรมาตรฐานทวไป โดยแบบอกษรจะไมเปลยนแปลงเมอแสดงผลบนจอคอมพวเตอรหรอโปรแกรมคนหาเวบอนๆ (เชน Arial ส าหรบภาษาองกฤษ)

1.10 มโครงสรางการใชส ต าแหนงการวางชอเรองและเนอหารปแบบเดยวกน 1.11 ภาพและวตถชวยใหผเรยนบรรลวตถประสงคของบทเรยน 1.12 ความเรวในการแสดงขอมลและแสดงผลบนหนาจอ (ภาพหรอวตถขนาด

ใหญใชเวลานานในการดาวนโหลดและแสดงผลบนหนาจอ นอกจากนในการถายขอมลและแสดงผลแตกตางกนไปตามความเรวของอนเทอรเนตของผใชงาน)

1.13 มการอางองผออกแบบและพฒนาบทเรยน 1.14 มการเชอมโยงเวบไซตไปยงเวบไซตของหนวยงานอนๆ 1.15 เวบไซตมการเชอมโยงไปยงหนาประวตของผสอน 1.16 ภาพและวตถทมสสนตางๆ มความชดเจนเมอพมพแบบขาว-ด า1.17 แตละ

หนาสามารถพมพออกมาไดขนาดพอดในหนงหนาเอกสาร 2. กำรออกแบบเนอหำ

2.1 บทเรยนใชกลวธเพอกระตนความสนใจของผเรยน ไดแก ภาพเคลอนไหว (ภาพเหตการณสนๆ) วตถเคลอนไหว (เชน วตถสกล .gif) ภาพประกอบ ความแตกตางระหวางวตถและสวนประกอบอนๆ ใชส เสยงและสญลกษณทเกยวของกบเนอหา

2.2 ในบทเรยนมการใชกลวธเพอพฒนาความคงทนในการเรยน ไดแก หนาจอการน าเสนอจดเปนล าดบ เนอหา จดเปนระบบ เกยวของกนอยางมความหมาย มบทเกรนน าเขาสเนอหา ใชรปแบบโครงสรางการน าเสนอเดยวกนของแตละหนาการน าเสนอ เชน การวางชอเรอง ภาพ บทความและสวนประกอบอนๆ มเครองมอทแบงเนอหาออกเปนสวนๆอยางเหมาะสม มค าน าและบทสรป

2.3 บทเรยนน าเสนอใจความส าคญเพยงประเดนเดยวในหนงยอหนา 2.4 บทความแบงออกเปนชวงๆ และสามารถอานแบบกวาดสายตาเพอความ

เขาใจ (หวขอหลกและหวขอยอยในบทเรยนควรสน กะทดรดและสอดคลองกนอยางมความหมายเพอใหผอานอานกวาดสายตาหาใจความส าคญได)

18

2.5 บทเรยนใชองคประอบของสอประสม ไดแก ขอความ ภาพและวตถ ภาพ เคลอนไหว เสยง วดโอ และการผสมผสานของสอประสมเออให เกดการเรยนรบทเรยนได อยางมประสทธภาพ

2.6 สอประสมทใชในบทเรยนมประสทธภาพในการสรางการเรยนรอยางมความหมายมากนอยเพยงใด

2.7 บทเรยนมการน าเสนอองคประกอบทางภาษาอยางถกตอง (ไวยากรณ เครองหมายวรรคตอน การสะกดค า)

2.8 บทเรยนมการน าเสนอองคประกอบสอประสมอยางเหมาะสมและสอดคลองกน (ขอความ ภาพและวตถ ภาพเคลอนไหว เสยง วดโอ)

2.9 บทเรยนสามารถพมพส าหรบผเรยนและผสอนไดสะดวก 3. กำรออกแบบระบบน ำทำง

3.1 บทเรยนมโครงสรางเนอหา เชน หนวยการเรยนร สาระความร กจกรรมการเรยนรและอนๆ เพอน าทางใหผเรยนศกษาบทเรยน

3.2 บทเรยนมแผนผงเวบไซต เชน ภาพรวมของบทเรยนเพอน าทางใหผเรยนศกษาบทเรยน

3.3 บทเรยนควรถามใหผเรยนถายโอนขอมลขนาดใหญ เชน เสยง วดโอ และภาพขนาดใหญลงในหนวยความจ าหลกกอน เพอหลกเลยงปญหาตดขดขณะเรยน

3.4 การเชอมโยงมสญลกษณและบอกจดหมายในการเชอมโยงแกผเรยนเพอใหผเรยนตดสนใจในการเลอกการเชอมโยง

3.5 บทเรยนทมการเชอมโยงภายในเวบไซตมากเกนไปอาจท าใหผเรยนสบสน 3.6 บทเรยนทมการเชอมโยงภายนอกมากเกนไปอาจท าใหผเรยนสบสน 3.7 เลอกใชสญลกษณทผเรยนคนเคย มความชดเจนสอดคลองกบเนอหาท

ตองการเชอมโยง 3.8 มการใชสรปแบบเดยวกนเพอแสดงการเชอมโยงทผเรยนไดเขาถงและยง

ไมไดเขาถง สมาตรฐานในการแสดง การเชอมโยง สฟาส าหรบการเชอมโยงทผเรยนยงไมไดเขาถง และสแดงหรอสมวงส าหรบการเชอมโยงทผเรยนไดเขาถงแลว

3.9 บทเรยนมความยดหยนในการเรยนผานค าสงในบทเรยน โดยผเรยนมทางเลอกตางๆ ในการศกษาบทเรยน

19

3.10 บทเรยนมการแนะน าแนวทางการเรยน (ผเรยนมกจะด าเนนการศกษาบทเรยนตามการเชอมโยงทปรากฏในบทเรยน

ดงนน ควรมการวางแผนการเชอมโยงหลายมตอยางมประสทธ ภาพเพอเปน

แนวทางแนะน าการศกษาบทเรยนแกผเรยน 3.11 ควรมการน าทางเขาสบทเรยนทงาย ผเรยนสามารถเชอมโยงหนาตางๆ ได

สะดวก ไมสบสนหรอหลงทาง 3.12 ควรหลกเลยงการเชอมโยงบทเรยนไปยงเวบไซตทไมสมบรณ 3.13 ควรมชองทางการคนหาขอมลทงภายในเวบไซตและภายนอกเวบไซต 3.14 ควรใชรปแบบสญลกษณและค าเดยวกนเพอชวยน าทางในบทเรยน 3.15 ทกหนาควรมการเชอมโยงกลบมายงหนาหลก 3.16 การเชอมโยงภายในบทเรยนควรมการเชอมโยงไปยงหนาตางๆ ทถกตอง 3.17 การเชอมโยงภายนอกบทเรยนควรมการเชอมโยงทถกตอง 3.18 ไมควรมการเชอมโยงหลายมตในบทเรยนมากเกนไป 3.19 คณภาพระบบเสยงและวดโอโดยตรงจากเวบไซตควรมประสทธภาพ

4. กำรทดสอบกำรใชงำน 4.1 ทดลองใชกบกลมผเรยนกลมตวอยาง 4.2 ผเรยนตอบค าถามตางๆ ในบทเรยนไดภายในเวลาทก าหนด 4.3 ผเรยนรวาก าลงอยต าแหนงใดในบทเรยนและน าทางการเรยนไดโดยไมตอง

คาดเดา 4.4 การใชค าศพทเฉพาะในบทเรยนสามารถท าความเขาใจไดงาย 4.5 ผเรยนเหนตวอยางบทเรยนทจะศกษา 4.6 เวบไซตออกแบบมาเพออ านวยความสะดวกใหผเรยนเขาถงเนอหาเฉพาะท

ตองการไดอยางสะดวก ภายในการเชอมโยงไมเกน 3 ครง

5. กำรเขำถงขอมล 5.1 เวบไซตออกแบบมาใหผเรยนจ านวนมากเขาถงบทเรยนไดมากนอยเพยงใด

20

5.2 บทเรยนควรมขอความส ารองอธบายภาพและวตถ (ขอความส ารองอาจไมใชขอความตวอกษร สามารถใชโปรแกรมถายทอดขอมลไดดวยเสยง ซงเปนสงจ าเปนส าหรบผบกพรองทางการมองเหน)

5.3 บทเรยนควรมขอความบรรยายประกอบการฟง (ผบกพรองทางการไดยนสามารถอานขอความบรรยายประกอบการฟงได)

5.4 หนาจอสามารถปรบขนาดใหเหมาะกบผบกพรองทางสายตา 5.5 สามารถมองเหนความแตกตางของสทใชในการน าเสนอบทเรยนอยางชดเจน

เพออ านวยความสะดวกแก ผบกพรองทางสายตา 5.6 ผเรยนสามารถใชแปนพมพอกษรแทนการใชเมาส หรออปกรณเคลอน

ต าแหนงในการน าทางศกษาบทเรยน 2) กำรตดตอสอสำร (Communication)

เครองมอในการตดตอสอสารเปนเครองมอทชวยใหผเรยนไดตดตอสอบถามปรกษาหารอ และแลกเปลยนความคดเหนระหวางผเรยนและผสอน และระหวางผเรยนกบเพอนรวมชนเรยนคนอนๆ โดยเครองมอทใชในการตดตอสอสารอาจแยกไดเปน 2 ประเภท คอ

แบบประสำนเวลำ (Synchronous) แบบไมประสำนเวลำ (Asynchronous)

เครองมอพนฐานทใชในการตดตอสอสารออนไลนทเปนทนยมกนอยางแพรหลายตงแตอดตและยงคงไดรบความนยมอยางแพรหลายในปจจบน ไดแก แชทไปรษณยอเลกทรอนกส กระดานอภปรายและกระดานประกาศ ภายหลงไดรบอทธพลดวยเครองมอตดตอสอสารตางๆของ WWW 2.0 เทคโนโลย เชน

บลอก วก ท าใหการตดตอสอสารมความเปนพลวฒน (Dynamic) มากยงขน รายละเอยดตางๆ ดงน (จนตวร คลายสงข และประกอบ กรณกจ, 2552)

แชท (Chat) เปนการสอสารแบบประสานเวลา ซงเหมาะกบการแลกเปลยนสารสนเทศในกลมเดยวกน และสามารถทบทวนไฟลการสนทนาของกลมได

ไปรษณยอเลกทรอนกส (e-mail) เปนการสอสารแบบไมประสานเวลา ซงเปนเครองมอทชวยใหผเรยนสามารถตดตอสอสารกบผสอนหรอเพอนรวมชน เรยนไดโดยสง

21

ขอความในรปจดหมาย พรอมทง แนบไฟลไปยงพน ทสวนตวของผรบ จงสามารถน าไปประยกตใชไดกบการปรกษารายบคคล การสงงานและการใหขอมลปอนกลบแกผเรยน

กระดำนอภปรำยและกระดำนประกำศ (Discussion Board and Bulletin Board) เปนการสอสารแบบไมประสานเวลา ซงสนบสนนใหผสอนและผเรยนประกาศขอความ ไฟล และสารสนเทศ ในพนททผสอนเตรยมไวใหและผสอนและผเรยนสามารถโตตอบหรอดาวนโหลดไฟลเหลานนได ซงผเรยนสามารถตดตามการสนทนาโตตอบในประเดนทตองการได

บลอก (Blog) เปนการสอสารแบบไมประสานเวลา ซงสนบสนนใหผเรยนเขยนบนทกการเรยนรประจ าวน และเปดโอกาสใหผสอนและเพอนรวมชน เรยนสามารถใหขอมลปอนกลบ เสนอขอคดเหนหรอค าแนะน าแนบไปกบบนทกนนได

วก (Wiki) เปนการสอสารแบบไมประสานเวลา โดยสนบสนนใหผเรยนและกลมสามารถสรางและแกไขเอกสารรวมกน ซงสนบสนนการเรยนแบบรวมมอ ทงนกลมผเรยนสามารถบนทกและรวมกนท างานในพนทสวนกลางรวมกน โดยผสอนอาจใชเครองมอการตดตอสอสารอนรวมดวย เพอใหสมาชกในกลมไดรวมอภปรายและตกผลกความคดได

บทควำมตำงประเทศทเกยวกบรปแบบเวบไซตทำงกำรศกษำ

ชอผเขยน/ ผแตง : Tim and John ป (ค.ศ.) : 2009 กำรออกแบบ : เวบ 2.0 รำยละเอยด Google AdSense, Flickr, Bit Torrent, Napster, blogging, upcoming.org and EVDB, search engine optimization, cost per click, web services, participation, wikis, tagging ("folksonomy"), syndication ชอผเขยน/ ผแตง : Paul ป (ค.ศ.) : 2006

22

กำรออกแบบ : เวบ 2.0 รำยละเอยด Flickr, YouTube, MySpace, Wikipedia, and the entire blogosphere, share digital การพฒนาเวบไซตส าหรบการเรยนการสอน ตามแนวทางของ ADDIE Instructional Design Model ซงประกอบดวยขน ตอนดงน

1) กำรวเครำะห (Analysis) ฝายผผลต/ผดแลเวบไซต (Webmaster) : การวเคราะหวตถประสงคของเวบไซต กลมผชม/เปาหมาย เนอหา และศกษาแหลงขอมลตางๆ ฝายผสอนและ/หรอนกออกแบบการเรยนการสอน : การวเคราะห (Analysis)

คอการวเคราะหวตถประสงคของบทเรยนผเรยนพนฐานของผเรยน เนอหา แหลงความร และสอทเหมาะสม

2) กำรออกแบบ (Design)

ฝายผผลต/ผดแลเวบไซต (Webmaster) : การออกแบบ (Design) คอการก าหนดโครงสรางเวบไซต (Site Structure) รายละเอยดหนาเวบเพจ ทงน เพอใหสอดคลองกบวตถประสงคของเวบไซต กลมผชม/เปาหมาย และเนอหา โดยพจารณาถง การจดระบบขอมลสารสนเทศ (Chunking information) เพอเออ แกผเขาชมเวบไซตและ/หรอผเรยน เวบไซตสวนใหญจะมการจดล าดบเนอหาโดยเรยงล าดบตามความส าคญมากไปนอย หรอหลกการโดยภาพรวมลงไปสรายละเอยดปลกยอย (hierarchy of importance) ในอกลกษณะหนงคอรปแบบการจดล าดบตามความสมพนธ (Relations) โดยน าเสนอขอมล สารสนเทศจากการคาดเดาใจผเขาชมวาอะไรคอสงทผชมคาดหวงวาจะเจอกอนหลง อาจเรมจากขอมลทผเขาชม/ผเรยนมความคนเคยมากไปนอย เพอใหผชมสามารถเขาถงขอมลทตองการได

23

บทท 2

หลกกำรออกแบบเวบไซตทำงกำรศกษำ

หลกการพนฐานในการออกแบบจงเขามามบทบาทส าคญทผออกแบบเวบไซตทางการศกษาควรพจารณา คอ การเนนขอความส าคญความตรงกนขาม ความสมดล การวางแนว การท าซ า การเลอกใชส และการเลอกใชภาพนอกจากหลกการออกแบบในขางตนแลวยงมขอควรพจารณา คอ หลกการเพมเตมส าหรบการออกแบบเวบไซตทางการศกษา ไดแก ความเรยบงาย ความสม าเสมอ ระบบน าทางคณภาพในการออกแบบ การออกแบบหนาจอ ความละเอยดของจอภาพ และการน าเสนอเนอหา

1. หลกกำรพนฐำนในกำรออกแบบเวบไซตทำงกำรศกษำ

1.1 กำรเนนขอควำมส ำคญ แนวทางในการพจารณาการเนนขอความส าคญคอ ใหผออกแบบถามตนเองดงน

1). สวนใดทเราดเปนสวนแรก สวนทสอง สวนทสาม 2). การทเราดสงนน กอนเปนเพราะอะไร 3). ผออกแบบมเทคนควธอะไรในการจดล าดบองคประกอบตางๆในหนากระดาษ

เชน - ส - ขนำดพนผว - ต ำแหนง

4). จะเนนการจดขอมลใหเปนระเบยบอยางไร

เนองจากการเนนเขามามบทบาทส าคญในการออกแบบเพอใหผอาน/ผเขาชมเวบไซตเขาใจงายขน เนนความส าคญของสวนประกอบส าคญ ท าใหเปนจดสนใจของผเขาชมเวบไซต และท าใหผอานเขาใจในสงทเราตองการสอไดงาย สามารถดงดดผอานไดมากทสดหลงจากนน เนนค าหรอประโยคทคดวามนสามารถดงดดความสนใจของผอานได โดยการก าหนล าดบของการมอง สวนประกอบส าคญในการมองคอสงกระตน

หรอดงดดความสนใจของผอานมากทสดหรอไม มการก าหนดกลมเปาหมายทชดเจนคอกลมผทสนใจศกษาเกยวกบการเรยนการสอนอเลรนนงดานบนในสวนของแบนเนอร (สวนทส าคญทสด) มชอของมหาวทยาลยชดเจน ในเวบไซตมการเชอมโยงไปยงแหลงขอมล update ตางๆ และบทเรยนใหผเยยมชมสามารถเขามาศกษาได นอกจากนยงมระบบ log-in สาหรบสมาชกเพอเขาไปศกษา และแลกเปลยนความร (สวนไอคอนตางๆ เปนสวนทส าคญท 2 สวนใหญคอคอลมนซายของหนาจอ) สวนกลางของหนาจอมการโพสตประกาศส าคญและประชาสมพนธตางๆ อาจกลาวไดวาวธการเนนสามารถท าไดหลายวธ เชน ท าใหมขนาดใหญ ท าใหหนา ท าใหสวาง การเพมลกษณะพเศษใหกบสวนประกอบส าคญ เชน การใสรปแบบทแตกตางจากขอความในหนานนๆ เชน การเพมเงาและความหนานน (Shadow & Bevel) ในกรณทเปนภาพ การเนนภาพใหเดนดวยการวางภาพบนพนขาว การใชสตรงกนขาม การเพมเงา ท าใหเอยงเมอสวนประกอบส าคญอนเปนแนวนอน ท าใหเขมเมอทกสงรอบๆ เปนสจางท าใหสวางถาทกสงทกอยางมด ท าใหชดถาทกสงทกอยางไมชด เปนตน

ดงนน อาจสรปไดวา หลกการของการเนน คอ การตดสนใจเลอกขอมลทส าคญทสดของสารนนๆ ซงในทนคอเวบไซต และน ามาท าใหเดนชดทสด ในกรณทมสวนส าคญของขอมลมากกวาหนง จะตองมการวางแผนการก าหนดล าดบขนการมอง ก าหนดสวนทส าคญทสด ก าหนดสวนทส าคญรองลงมา หลงจากนน ท าการเนนความส าคญตามล าดบ

ขอดของการใชการเนนความส าคญในงานคอ การชวยใหขอมลเดนชดขนและเออกบความสะดวกในการใชงานของผใช

1.2 ควำมตรงกนขำม แนวทางในการพจารณาความตรงกนขามคอ 1). การเนนความแตกตางระหวางองคประกอบทางสายตา 2). ความตรงกนขามของขนาด ส พนผว น าหนก (ตวหนา,ตวบาง) โดยหลกความ

ตรงกนขามเปนอกหนงหนทางทงายทสด และเรวทสดในการดงความสนใจของผอานมายงสารนนๆ (หนาเวบเพจ) หลกความตรงกนขามน ามาใชรวมกบหลกการเนนย า

25

(The principle of Emphasis) เพอจดองคประกอบของหนาเวบเพจไมใหดเหมอนกนมากจนเกนไป และใชหลกการเนนย าตามองคประกอบทางสายตา เมอทกอยางบนหนาเวบเพจดเหมอนกน เพราะถาขาดการเนนย า และความตรงกนขาม หนาเวบเพจกดเหมอนขาดรสชาต นาเบอ และขาดแบบแผนอนเปนระบบทชดเจน และเมอทกอยางดมความส าคญเทากน ผดผชมจะทราบถงองคประกอบทส าคญและสงแรกทตองมองกอนไดอยางไรความตรงกนขามเกดขน เมอมสององคประกอบหรอมากกวาแตกตางจากอกอนหนง หนทางทจะเกดความตรงกนขามประกอบ คอ การเนนความแตกตางระหวาง องคประกอบทางสายตา เชน การวางองคประกอบเลกๆ พรอมกบองคประกอบใหญ เชนตวอกษรตวเลกกบตวอกษรตวใหญ หรอรปภาพเลกกบรปภาพใหญ การใชสโทนรอนกบสโทนเยน รปทรงเรขาคณต หรอพนผวมองทะลผานพนสเดยวกน การใชตวอกษรทมลกเลนอยตดกบตวอกษรเรยบๆพนๆ การใชตวอกษรตวหนาหรอมเสนกบตวอกษรปกตหรอมเสน โดยการใชหลกการเนนย า ชวยคณจดขอมลใหเปนระบบระเบยบ และเรมท าใหเกดความแตกตางตามทปรากฏแกสายตา ในขณะทการใชหลกการตรงกนขามจะเนนความแตกตางทางสายตาระหวางองคประกอบทางสายตา สรปไดวา หลกการเนนย า และหลกการตรงกนขามมกจะใชควบคกนเสมอ

1.3 ควำมสมดล แนวทางในการพจารณาความสมดลคอ

1). หลกเลยงการปลอยพนทในหนากระดาษบางสวนใหวางเปลา หรอใสอะไรตางๆ ทมากเกนความจ าเปน

2). การจดสมดลแบบสมมาตร (Symmetrical Balance) และแบบไมสมมาตร (Asymmetrical Balance)

3). พยายามจดองคประกอบให balance ซาย กลาง ขวา 4). การเลอกรปภาพมาใสใหสงเสรมขอความ 5). การใสเงาหลงองคประกอบตางๆ จะชวยใหงานมมตขนได 6). การบดหรอหมนภาพหรอขอความตางๆ ชวยเพมชวตชวาใหกบงานได

26

ทงน การออกแบบทสมดล คอ การทน าหนกทางสายตาขอองคประกอบภายในหนงหนามการจดวางอยางเทากน น าหนกทางสายตาคอ สงทแสดงถงน าหนกทางกายภาพภายในหนาหนงๆ

ตวอยางเชน หวขอทเปนตวหนา กจะมน าหนกทางสายตามากกวาขอความทมขนาดเลกในบรรทดอนๆ หรอรปสแดงสดกจะมน าหนกทางสายตาทมากกวารปเดยวกนแตเปนสเทา ในขณะเดยวกน รปภาพทนาสนใจตางๆกจะมน าหนกทางสายตาทมากกวาตวอกษรลวนๆ เนองจากคนเรามแนวโนมทจะดรปภาพกอนทจะไปดทตวอกษร โดยไมวาจะเปนขนาด ส หรอลวดลายขององคประกอบตางๆ กลวนมผลตอการรบรคาน าหนกทางสายตาทงสน

กอนทเราจะสามารถจดสมดลไดดนน เราจะตองเลอกวาค า ขอความ หรอรปภาพใด ทเราควรจะเนน และสวนใดควรจะจดเอาไวดวยกน จดสงทเกยวของกนเอาไวดวยกน เมอเราไดจดขอมลเอาไวดวยกนชดหนงแลว สงทจะตองทากคอการสรางสมดลในสวนอนๆ ของหนาดวยขอมลหรอองคประกอบอนๆ โดยรปแบบการจดวางทเปนแบบสมดลทสมมาตรกน

แบบสมดลทสมมาตรกน (Symmetrical Balance)จะเปนรปแบบทมองคประกอบทางสายตาจะสมมาตรกน ไมวาจะเปนดานขางทงสอง หรอดานบนและดานลาง เราสามารถสรางรปแบบของการสมดลทสมมาตรกนไดโดยการสรางเสนสมมต (เสน Guide & Grid) ขนทกงกลางของหนา จากนน จงจดวางองคประกอบทมความคลายกนลงไป จดใหอยกลางหนาโดยอาศยไกดจากเสนสมมตทสรางขน ซง วธนเปนวธการออกแบบงายๆ ทนกออกแบบมอใหมนยมใช ซงกไมถอวาผดแตอยางใด

อยางไรกตามการจดวางหนาเชนนจะท าใหชนงานของเราดเปนทางการ เรยบและแขงจนเกนไป ขาดอารมณของการเคลอนไหวและพลงทางสายตา การออกแบบโดยการจดสมดลแบบสมมาตรนน เหมาะกบงานทคอนขางทางการ และเรยบๆ ในทางตรงกนขาม หากเราตองการงานทดมชวตชวามากขน เราอาจจะตองหนไปใชการออกแบบโดยการจดสมดล

แบบไมสมมาตร (Asymmetrical Balance) โดยในการจดสมดลแบบไมสมมาตรนน ค าประโยคและรปภาพตางๆ จะไมถกจดวางใหเทากนในแตละดานของเสนสมมตตรงจดแกนกลาง ในการจดBalanceแบบสมมาตรนน หากตรงมมลางซายของหนามรปภาพอย ทางดานขวากจะถกจดใหเกดการสมดลขน โดยการวางรปภาพขนาดเดยวกน

27

เอาไว แตส าหรบการจดสมดลแบบไมสมมาตรแลวรปภาพนน จะถกท าใหเกดสมดลขน โดยการวางตวอกษรรปภาพทมขนาดตางๆ กน การไลส ใสลวดลาย หรอการรวมรปภาพเลกๆเอาไวดวยกน ซงการออกแบบโดยการจดใหเกดสมดลแบบไมสมมาตรนมความทาทายเปนอยางมากเนองจากขนาด สสน และสดสวนขององคประกอบตางๆจะตองถกจดวางและมน าหนกทางสายตาทเหมาะสม

การจดองคประกอบตางๆ ภายในหนาใหสมดลกนนนขน อยกบการทเราสามารถหาขนาดทเหมาะสมหรอสดสวนขององคประกอบภายในหนาจะตองพอด เราจะตองตดสนใจใหไดวาสวนใดควรจะถกเนนเพอใหรวาเปนสวนทส าคญทสด แตการทเราจะตดสนใจไดวาแตละสวนมขนาดพอดแลวหรอไมนน กถอเปนเรองยาก ซงในเรองนการฝกฝนเทานน จงจะชวยเราได สงทเราควรฝกบอยๆ ใหช านาญกคอในเรองของการพจารณาการจดวางขององคประกอบทางสายตาในแตละหนา

ภำพท 1 เปนกำรจดวำงทเหมำะสมสมดลกน

28

ภำพท 2 เปนกำรจดวำงทไมสมสมดลกน ทฤษฎส

กำรเลอกใชส แนวทางในการเลอกใชสคอ 1). เลอกใชสทเหมาะสมเพอใหเกดความนาสนใจ ดงดด สอความหมายไดชดเจน

เนองจากวา สมพลงเกยวกบการรบร การเลอกสเพอใชกบสอตางๆ จะชวยท าใหเกดความนาสนใจ ดงดดและสามารถสอความหมายไดอยางชดเจนส าหรบคนทท างานเกยวกบการใชสนน จะตองมหลกในการเลอกสทด เพอใหงานออกมาลงตว ซงถาหากขาดหลกในการเลอกใชสแลว กจะท าใหดไมสอดคลองกบการออกแบบผลงานหรอดซบซอน สอความหมายไดไมชดเจน ระหวางทอยในขนตอนของการเลอกสทจะใชจะตองพยายามเลอกสเพอใหงานออกมาดด จากผทศกษาเรองน กลาววา การใชสพนๆธรรมดาๆ กสามารถชวยดงดดความสนใจจากผอานใหสนใจขอความนนๆได โดยจากการทดสอบเรองสพบวาหนากระดาษทมสจะชวยสรางความสนใจไดมากกวาทไมมส อกหนงวธทจะสรางความสนใจใหกบงานไดนน คอ การเพมสสนใหหนากระดาษ เพราะสมผลตอการรบรและชวยในการสอความหมายตางๆ บนหนากระดาษ โดยการเลอกใชสทผดอาจสงผลกระทบตอการสอความหมายทผดตามไปดวย โดยสตางๆนน สามารถถายทอดอารมณ ความรสกไดตางกน เชน

สแดง เปนสทใหความรสกรอนรนแรง กระตน ทาทาย ตนเตน เราใจ มพลง ความอดมสมบรณ ความมงคง แดงเขมเลอดนก ใหความรสก นากลว อนตราย นาขยะแขยง ในขณะทสแดงสวางๆ กจะท าใหนกถงความรก

29

สเหลอง จะใหความรสกแจมใส ความสดใสราเรง สทอง แสดงถงความหรหรา และสเงน แสดงถงเทคโนโลยสมยใหม

ดงนน การออกแบบเวบไซตและการเลอกใชสนน จงควรค านงถงกลมเปาหมายและวตถประสงคของเวบไซตดวย เมอพจารณาจากโทนสรอน (แดง มวงแกมแดง สม เหลอง และเขยวอมเหลอง) สเหลานจะสรางความรสกอบอน (ตอนรบผเขาชม) สะดวกสบาย และดงดดความสนใจ ในทางตรงกนขาม โทนสเยน (มวง น าเงน ฟา น า เงนแกมเขยว และเขยว) สเหลานจะสรางความรสกสบาย สภาพเรยบรอย มความช านาญ (Professional look) แตอาจขาดความดงดดความสนใจ และรสกหดห ซมเศรา

ภำพท 3 เวบไซตโทนสรอน

ภำพท 4 เวบไซตโทนสเยน

30

สและคอมพวเตอร

สมความสมพนธกบคอมพวเตอร เนองจากการออกแบบบนหนาคอมพวเตอร สทปรากฏใหเหนบนหนาจอเปนการผสมสโดยใชระบบ RGB ซงเปนระบบทใชกนทวไปในจอคอมพวเตอร จะท างานไดดและมองดเปนธรรมชาต ประกอบดวย 3 ส คอ แดง เขยว น ำเงน

ซงแตกตางจากการออกแบบสาหรบงานพมพตางๆ ใชสระบบ CMYK ประกอบดวย Cyan (สฟำ) Magenta (สแดง) Yellow (สเหลอง) Black (สด ำ) เทคนคของการใชสควรใชสทดงดดความสนใจเพอสรางความส าคญใหกบขอความหรอภาพนน การเลอกสทเขากบหวขอในการออกแบบงานชนนนการดงความสนใจจากผอาน ใหเหนความส าคญของขอมลบนหนากระดาษ สามารถท าไดโดยใชสทสวาง ในกรณทงานทใชกระดาษหลายๆหนา เชน เวบไซต ควรใชสทใชแตละคอลมนเปนสเดม เชน ใช Banner เปนสเดยวกน การเลอกใชภาพสสวางเปนภาพพนหลงเพอเพมความนาสนใจใหกบชนงาน ส าหรบผทเรมตน ควรศกษาการเลอกใชสทอยในธม (theme) เดยวกน เชน การศกษา website ของ Adobe Kuler (http://kuler.adobe.com) ส าหรบการเลอกใชสสาหรบเวบไซต VisiBone Web Design Color References (http://www.visibone.com/color) เปนเวบรปแบบสทชวยออกแบบเวบไซต Colourlovers Website (http://www.colourlovers.com/about) ส าหรบชวยในการไลเฉดสในการออกแบบ และสดทายคอการเรยนรจากผอนวามวธการใชสในงานอยางไร

ภำพท 5 Adobe Kuler (http://kuler.adobe.com)

31

คณภำพในกำรออกแบบ

เวบจะมคณภาพ และนาเชอถอไดนน ควรใหความส าคญกบการออกแบบอยางมาก เชนเดยวกบสอประเภทอนๆ ทตองออกแบบและเรยบเรยงเนอหาอยางรอบคอบ เวบทท าขนอยางลวก ไมมมาตรฐานการออกแบบและการจดระบบขอมลนน เมอมขอมลเพมขนเรอยๆ กจะเกดปญหาและไมสามารถสรางความเชอถอจากผใชได

กำรออกแบบหนำจอ การออกแบบหนาจอทสมดลกนระหวางเมน รายการเลอก เนอหา ภาพประกอบ

จะชวยใหผใชสนใจเนอหาไดมาก โดยมากมกจะแบงจอภาพเปนสวนๆ ไดแก - สวนแสดงหวเรอง - สวนแสดงขอควำมประชำสมพนธ - สวนแสดงเนอหำ - สวนแสดงภำพประกอบ - สวนประกอบเสรมอนๆ (โดยเฉพำะเวบไซตส ำหรบ E-Learning)

เชน - สวนควบคมบทเรยน - สวน log-in - หมำยเลขเฟรมลำดบเนอหำ เปนตน

ควำมละเอยดของจอภำพ

ปจจบนความละเอยดของจอภาพทนยมใช จะมสองคา คอ 800x600 pixel และ 1024 x 768 pixel ดงนน ควรพจารณาถงความละเอยดทจะดทสด เพราะหากออกแบบหนาจอ ส าหรบจอภาพ 1024 x 768 pixel แตน ามาใชกบจอภาพ 800x600 pixel จะท าใหเนอหาตกขอบจอได แตถาหากจดท าดวยคา 800x600 pixel หากนาเสนอผานจอ 1024 x 768 pixel จะปรากฏพนทวางรอบเฟรมเนอหาทน าเสนอ การน าเสนอเนอหา การน าเสนอเนอหาทเปนขอความ สงทควรค านงถงคอ ฟอนตทน ามาใชงาน ควรเปนฟอนตมาตรฐาน (ถาเปนภาษาองกฤษ นยมใช Sans Serifs เชน Arial Cordia News และหลกเลยงตวอกษรแบบ Serifs เชน Times New Roman) และตวอกษรควรมรปแบบทชดเจนม

32

การก าหนดขนาดทเหมาะสมกบกลมเปาหมาย น าเสนอดวยขอความน าแบบสนๆ เพอดงเขาเนอ หาจรง หลกเลยงการน าเสนอแบบจดกงกลาง ควรน าเสนอภาพพอประมาณ ไมมากหรอนอยเกนไป จดเนนใหใชการตกรอบส หรอเนนดวยสตวอกษรดวยสโทนรอน

33

บทสรป

การออกแบบเวบไซตส าหรบการเรยนการสอนนน นอกจากการค านงถงกลมเปาหมาย ความสะดวกในการใชงานของผใชแลวนน ความสวยงามและสนทรยภาพของเวบไซตกมความส าคญเชนกน ดงนน หลกการออกแบบ (Design Principles) จงเขามามบทบาทส าคญทผออกแบบเวบไซตควรพจารณา กลาวคอ

1). กำรเนนขอควำมส ำคญ (Emphasis) 2). ควำมตรงกนขำม (Contrast) 3). ควำมสมดล (Balance) 4). กำรวำงแนว (Alignment) 5). กำรท ำซ ำ (Repetition) 6). กำรเลอกใชส (Colors) 7). กำรเลอกใชภำพ (Images)

นอกจากหลกการออกแบบดงกลาวแลว ยงมขอควรพจารณาเพมเตมส าหรบการออกแบบเวบไซตทาง การศกษาคอความเรยบงาย (Simplicity) ความสม าเสมอ (Consistency) ระบบน าทางทใชงานงาย (User-Friendly Navigation) คณภาพในการออกแบบ (Design Stability) การออกแบบหนาจอ (Screen Design) รวมถงความละเอยดของจอภาพและการน าเสนอเนอหาดวย

บรรณำนกรม

กรมวชาการ. (2544). ควำมรเกยวกบสอมลตมเดยเพอกำรศกษำ. กรงเทพฯ: ศนยพฒนา หนงสอ, กรมวชาการ กระทรวงศกษาธการ.

จตเกษม พฒนาศร. (2539). เรมสรำงโฮมเพจดวย HTML. กรงเทพฯ: วตตกรป. จนตวร มนสกล. (2551). เอกสำรประกอบกำรสอนวชำกำรออกแบบเวบไซตส ำหรบอเลรนนง.

หลกสตรผเชยวชาญอเลรนนง. โครงการมหาวทยาลยไซเบอรไทย ส านกงาน คณะกรรมการอดมศกษา กระทรวงศกษาธการ.

จนตวร คลายสงข และประกอบ กรณกจ. (2552). PEDAGOGY-BASED HYBRID LEARNING: จำกแนวคดสกำรปฏบต. วารสารครศาสตร (ผานการพจารณาจาก ผทรงคณวฒแลว อยในระหวางตพมพ)

จนตวร คลายสงข. (2553). โครงกำรวจยรปแบบเวบไซตและรปแบบบทเรยนอเลกทรอนกส ทเหมำะสมส ำหรบกำรเรยนกำรสอนแบบอเลรนนงในระดบอดมศกษำ. ส านกงานคณะกรรมการการอดมศกษา กระทรวงศกษาธการ.

เจนจรา อนนตกาล. (2548). กำรศกษำรปแบบโฮมเพจเวบไซตทำงดำนกำรศกษำระดบ อดมศกษำทตรงตำมควำมตองกำรของผใช. วทยานพนธปรญญามหาบณฑต สาขาวชาคอมพวเตอรและเทคโนโลยสารสนเทศ คณะครศาสตรอตสาหกรรม และเทคโนโลย มหาวทยาลยเทคโนโลยพระจอมเกลาธนบร.

ใจทพย ณ สงขลา. (2547). กำรออกแบบกำรเรยนกำรสอนบนเวบในระบบกำรเรยน อเลกทรอนกส. กรงเทพฯ: ศนยต าราและเอกสารทางวชาการ คณะครศาสตร จฬาลงกรณมหาวทยาลย.

_____________. (2550). วธวทยำกำรออกแบบกำรเรยนกำรสอนอเลกทรอนกส. กรงเทพฯ: โรงพมพแหงจฬาลงกรณมหาวทยาลย.

ณฐพล ร าไพ. (2548). รปแบบของเวบเพจทมตอผลสมฤทธทำงกำรเรยนของนกศกษำ ระดบปรญญำตร. วทยานพนธปรญญามหาบณฑต สาขาเทคโนโลยการศกษา มหาวทยาลยเกษตรศาสตร.

ถนอมพร เลาหจรสแสง. (2545). Designing e-learning หลกกำรออกแบบและกำรสรำงเวบ เพอกำรเรยนกำรสอน. เชยงใหม : องคการคาครสภา.

ปราวณยา สวรรณณฐโชต และจนตวร มนสกล. 2550. กำรจดกำรเรยนกำรสอนแบบ ผสมผสำนดวยระบบบรหำรจดกำรเรยนร Blackboard ของสำขำวชำเทคโนโลย กำรศกษำสำหรบนสตระดบปรญญำตร คณะครศำสตร. เอกสารประกอบ การประชมวชาการคณะครศาสตร วนท 10 - 11 กรกฎาคม 2550

ปทป เมธาคณวฒ. (2544). เทคโนโลยสำรสนเทศเพอกำรบรหำรสถำบนอดมศกษำ. กรงเทพฯ: โรงพมพแหงจฬาลงกรณมหาวทยาลย.

ปยพจน ตณฑะผลน . (2009). Web 2.0 tools. (ออนไลน). เขาถงใน http://lms.thaicyberu.go.th/officialtcu/main/advcourse/presentstu/course/ bm521/kurokung_2/kurokung-web2/index.html (20 มนาคม 2553).

ไพฑรย ศรฟา. (2542). Webpage. วำรสำรเทคโนโลยสอสำรกำรศกษำ. 6(4)(พฤษภาคม) : หนา 97-99.

สรวงสดา ปานสกล. (2545). กำรน ำเสนอรปแบบกำรเรยนรกระบวนกำรแกปญหำเชง สรำงสรรคแบบรวมมอในองคกรบนอนเทอรเนต. วทยานพนธปรญญาดษฎบณฑต

สาขาวชาเทคโนโลยและสอสารการศกษา จฬาลงกรณมหาวทยาลย. สนตย เชรษฐาและชตพงษ กตตนราดร. Web 2.0 กบกำรกำรเรยนรเพอสรำงปญญำ

สำธำรณะ. Thai RuralNet (TRN). [ออนไลน]. เขาถงใน http://www.trnlab.org/data/web2.0-whitepaper.pdf. (20 มนาคม 2553).