Theory development and design Website

ผจดท ำ นำยปยะนนท เอยมพจตร 533410080439 นำงสำวจฬำลกษณ จมพล 533410080405 นำงสำวปภสรำ โสมำบตร 533410080411 นำงสำวประภำศร ค ำทม 533410080412

สำขำคอมพวเตอรศกษำ ป 4 หม 4

ผสอน อำจำรยปวรศ สำรมะโน

คณะครศำสตร

มหำวทยำลยรำชภฏมหำสำรคำม

ค ำน ำ หนงสอเลมเลกเลมนจดท ำขนเพอใชประกอบในกำรท ำเวบไซต เนอหำภำยในประกอบดวย ควำมหมำยของเวบไซต องคประกอบของกำรออกแบบเวบไซต ทฤษฏส (Theory of Colors) หลกกำรออกแบบเวบไซต ขนตอนกำรพฒนำเวบไซต สวนประกอบของเวบไซต องคประกอบของเวบเพจ ขอควรหลกเลยงในกำรท ำเวบไซต ควำมหมำยของบทเรยนผำนเวบ รปแบบของบทเรยนผำนเวบ กำรประชำสมพนธ กำรประเมนเวบไซต ซงทำงผจดท ำไดรวบรวมและสรปออกมำในแตละเนอหำทคดวำจะมประโยชนตอผทสนใจศกษำเรองกำรท ำเวบไซต ขอขอบพระคณ อำจำรยปวรศ สำรมะโน ทใหค ำปรกษำและควำมรในกำรจดท ำหนงสอเลมเลกจนประสบควำมส ำเรจในครงน หำกมขอผดพลำดประกำรทำงผจดท ำกขออภย ณ โอกำสนดวย

ผจดท ำ

สำรบญ

เรอง หนำ ควำมหมำยของเวบไซต……………………………………………………………… 1 องคประกอบของกำรออกแบบเวบไซต………………………………………… 2 ทฤษฏส (Theory of Colors)…………………………………………………….. 4 หลกกำรออกแบบเวบไซต…………………………………………………………… 11 ขนตอนกำรพฒนำเวบไซต………………………………………………………….. 14 สวนประกอบของเวบไซต…………………………………………………………… 16 องคประกอบของเวบเพจ…………………………………………………………… 19 ขอควรหลกเลยงในกำรท ำเวบไซต………………………………………………. 21 กำรประเมนเวบไซต…………………………………………………………………… 28 ควำมหมำยของบทเรยนผำนเวบ ………………………………………………… 29 ประเภทของบทเรยนผำนเวบ……………………………………………………… 30 รปแบบของบทเรยนผำนเวบ………………………………………………………. 31 กำรประชำสมพนธ…………………………………………………………………….. 32 สรป………………………………………………………………………………………… 32 อำงอง

ควำมหมำยของเวบไซต(Web site) เวบไซต (องกฤษ: website, web site, Web site) หมำยถง หนำเวบเพจหลำยหนำ ซงเชอมโยงกนผำนทำงไฮเปอรลงก สวนใหญจดท ำขนเพอน ำเสนอขอมลผำนคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนำแรกของเวบไซตทเกบไวทชอหลกจะเรยกวำ โฮมเพจ เวบไซตโดยทวไปจะใหบรกำรตอผใชฟร แตในขณะเดยวกนบำงเวบไซตจ ำเปนตองมกำรสมครสมำชกและเสยคำบรกำรเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทำงวชำกำร ขอมลตลำดหลกทรพย หรอขอมลสอตำงๆ ผท ำเวบไซตมหลำกหลำยระดบ ตงแตสรำงเวบไซตสวนตว จนถงระดบเวบไซตส ำหรบธรกจหรอองคกรตำงๆ กำรเรยกดเวบไซตโดยทวไปนยมเรยกดผำนซอฟตแวรในลกษณะของ เวบเบรำวเซอร

ตวอยำงเวบไซตมหำวทยำลยนรำธวำสรำชครนทร

1

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

ควำมหมำยของเวบเพจ (Web Page) เวบเพจ (Web Page) หมำยถง หนำเอกสำรของบรกำร WWW ซงตำมปกตจะถกเกบอยในรปแบบไฟล HTML (Hyper Text Markup Language) โดยไฟล HTML 1 ไฟลกคอเวบเพจ 1 หนำนนเอง ภำยในเวบเพจอำจประกอบไปดวยขอควำม ภำพ เสยง วดโอ และภำพเคลอนไหวแบบมลตมเดย นอกจำกนเวบเพจแตละหนำจะมกำรเชอมโยงหรอ “ลงค” (Link) กน เพอใหผชมเรยกดเอกสำรหนำอนๆ ทเกยวของไดสะดวกอกดวย

องคประกอบของกำรออกแบบเวบไซต มดงนคอ 1) ควำมเรยบงำย ไดแก มรปแบบทเรยบงำย ไมซบซอน และใชงำนไดสะดวก ไมมกรำฟก หรอตวอกษรทเคลอนไหวอยตลอดเวลำ ชนดและสของตวอกษรไมมำกจนเกนไปท ำใหวนวำย 2) ควำมสม ำเสมอ ไดแก ใชรปแบบเดยวกนตลอดทงเวบไซต เชน รปแบบของหนำ สไตลของกรำฟก ระบบเนวเกชนและโทนส ควรมควำมคลำยคลงกนตลอดทงเวบไซต

3) ควำมเปนเอกลกษณกำรออกแบบเวบไซตควรค ำนงถงอตลกษณและลกษณะขอองคกรเพรำะรปแบบของเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกรนนๆเชนถำเปนเวบไซตของทำงรำชกำร จะตองดนำเชอถอไมเหมอนสวนสนก ฯลฯ 4) เนอหำทมประโยชน เนอหำเปนสงทส ำคญทสดในเวบไซต ดงนนควรจดเตรยมเนอหำและขอมลทผใชตองกำรใหถกตอง และสมบรณ มกำรปรบปรงและเพมเตมใหทนเหตกำรณอยเสมอ เนอหำไมควรซ ำกบเวบไซตอนจงจะดงดดควำมสนใจ 5) ระบบเนวเกชนทใชงำนงำย ตองออกแบบใหผใชเขำใจงำยและใชงำนสะดวก ใชกรำฟกทสอควำมหมำยรวมกบค ำอธบำยทชดเจน มรปแบบและล ำดบของรำยกำรทสม ำเสมอ เชน วำงไวต ำแหนงเดยวกนของทกหนำ 6) ลกษณะทนำสนใจ หนำตำของเวบไซตตองมควำมสมพนธกบคณภำพขององคประกอบประกอบตำงๆ เชน คณภำพของกรำฟกทจะตองสมบรณ กำรใชส กำรใชตวอกษรทอำนงำย สบำยตำ กำรใชโทนสทเขำกน ลกษณะหนำตำทนำสนใจนนขนอยกบควำมชอบของแตละบคคล 7) กำรใชงำนอยำงไมจ ำกดผใช สวนใหญสำมำรถเขำถงไดมำกทสดเลอกใชบรำวเซอรชนดใดกไดในกำรเขำถงเนอหำสำมำรถแสดงผลไดทกระบบปฏบตกำรและควำมละเอยดหนำตำงๆ กนอยำงไมมปญหำเปนลกษณะส ำคญส ำหรบผใชทมจ ำนวนมำก 8) คณภำพในกำรออกแบบ กำรออกแบบ และ กำรเรยบเรยงเนอหำอยำงรอบคอบสำมำรถสรำงควำมรสกวำเวบไซตมคณภำพถกตองและเชอถอได 9) ระบบกำรใชงำนทถกตอง กำรใชแบบฟอรมส ำหรบกรอกขอมลตองสำมำรถกรอกไดจรงใชงำนไดจรงลงคตำงๆจะตองเชอมโยงไปหนำทมอย

2

3 2

จรงและถกตองระบบกำรท ำงำนตำงๆในเวบไซตจะตองมควำมแนนอนและท ำหนำทไดอยำงถกตอง

ทฤษฏส (Theory of Colors) แมส อำจจ ำแนกออกไดเปน 3 ประเภทคอ แมสจตวทยำ หมำยถง เปนสในกลมทมอทธพลตอควำมรสก และมผลตอจตใจของมนษย กลำวคอสทเรำพบเหนจะสำมำรถโนมนำวชวนใหรสกตนเตน โศกเศรำ โดยมำกมกใชในกำรรกษำคนไขได เชนโรคประสำท หรอโรคทำงจต แมสจตวทยำส 4 สประกอบดวย สแดง สเหลอง สเขยว และสน ำเงน แมสวทยำศำสตร หมำยถง แมสวทยำศำสตรเปนสทเกดจำกกำรสรำงหรอประดษฐขนจำกกระบวนกำรทำงวทยำศำสตรเชน สของหลอดไฟ สทผำนแทงแกวปรซม ทเกดจำกกำรสะทอนและกำรหกเหของแสง แมสในกลมนประกอบดวย สแสด สเขยวมรกต และสมวง แมสศลปะ หมำยถง แมสศลปะหรอบำงครงเรยกวำ แมสวตถธำต หมำยถงสทใชในกำรวำดภำพ หรอสรำงสรรคผลงำนทำงศลปะทวๆ ไปซงเมอน ำมำผสมกนในปรมำณตำงๆทตำงอตรำสวนกนจะเกดสตำงๆมำกมำยใหเรำไดเลอกหรอน ำมำใชในกำรสรำงสรรค ผลงำนทสวยงำมได แมสในกลมนประกอบดวย สแดง สเหลอง และสน ำเงน

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

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

สขนท1 (สขนตนหรอแมส) (Primary Color) ประกอบดวย ส แดง สเหลอง และสน ำเงน สขนท 2 (Binary Color) เกดจำกกำรน ำเอำสขนท 1 (แมส) มำผสมในอตรำสวนเทำๆกนประกอบดวยส สเขยว เกดจำกกำรน ำเอำ สเหลอง กบ สน ำเงน มำผสมกนในอตรำสวนเทำๆกน สม เกดจำกกำรน ำเอำ สเหลอง กบ สแดง มำผสมกนในอตรำสวนทเทำๆกน

4 5

สมวง เกดจำกกำรน ำเอำ สน ำเงน กบ สแดง มำผสมกนในอตรำสวนทเทำๆกน สขนท 3 (Intermediate Color) เกดจำกกำรน ำเอำสขนท 2 ผสมกบสขนตนทอยใกลเคยงกนไดสแตกตำงออกไป ไดแก สเหลองแกมเขยว เกดจำก กำรผสมกนระหวำงสเหลองกบสเขยวอยำงละเทำๆกน สน ำเงนแกมมวง เกดจำกกำรผสมกนระหวำงสน ำเงนกบสมวงอยำงละเทำๆกน สแดงแกมมวง เกดจำกกำรผสมกนระหวำงสแดงกบสมวงอยำงละเทำๆกน สแดงแกมสม เกดจำกกำรผสมกนระหวำงสแดงกบสสมอยำงละเทำๆกน สเหลองแกมสม เกดจำกกำรผสมกนระหวำงสเหลองกบสสมอยำงละเทำๆกน สน ำเงนแกมเขยวเกดจำกกำรผสมกนระหวำงสน ำเงนกบสเขยวอยำงละเทำๆกน

วรรณะของส จำกทไดศกษำเรอง แมส ในกลมตำงๆ และเรองวงจรส คงพอท ำใหมพนฐำนทำงกำรใชสในงำนศลปะทรำบหรอไมวำสทผสมออกมำทง 12 สนน สำมำรถแยกออกเปนสองกลมตำมคำควำมเขมของส หรอทเรยกวำวรรณะของส (Tone of color) วรรณะของสคอ คำควำมแตกตำงของสแตละดำนของวงจรสทแสดงถงควำมรสกทแตกตำงกน ซงถำเปรยบเทยบกบเสยงเพลงหรอเสยงดนตรกคอเสยงสง เสยงต ำ ทแสดงออกทำงอำรมณ ทมกำรเคลอนไหว มชวตชวำ หรอเศรำโศกหรอรนทดใจสทอยในวรรณะรอน (Warm tone color) ไดแก สเหลองสม สสม สแดง และสมวงแดง

สทอยในวรรณะเยน(Cool tone color) ไดแก สเขยว สฟำ สมวงครำม

ภำพท 2.2 ภำพกลมสวรรณะรอนและวรรณะเยน สทงสองวรรณะอำจจะไมใชสทสดดงเชนในวงจรส เพรำะควำมจรง

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

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

6 7 8

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

ประเภทของส 1. คำควำมเขมหรอน ำหนกของส

สตำงๆ ทเกดขนในวงจรส หำกน ำมำเรยงน ำหนกควำมออนแกของส หลำยสเชน มวง น ำเงน เขยวแกมน ำเงน เขยว และเหลองแกมเขยว หรอ มวง แดง แดงสม สม สมแกมเหลอง และเหลอง หรอเรยกวำคำในน ำหนกของสหลำยส (Value of different color) ส ำหรบคำควำมเขมอกประเภทหนงเกดจำกกำรน ำสใดสหนงเพยงสเดยวแลวน ำมำไลน ำหนกออนแกในตวเอง เรยกวำคำน ำหนกสเดยว (Value of single color) ซงถำฝกฝนไดเปนอยำงดแลว สำมำรถน ำควำมรจำกกำรไลคำน ำหนกนไปใชใหเกดประโยชนไดมำกในกำรสรำงงำนจตรกรรม

2. สตดกน หรอสตรงขำม สตดกนหรอสตรงขำมกคอสทอยตรงขำมกนในวงจรสนนเอง กำรท

จะทรำบวำสคใดเปนสตรงขำมกนอยำงแทจรงหรอไม ใหน ำเอำสคนนมำผสมกนด ถำผลกำรผสมกนออกมำเปนสกลำงนนหมำยถงวำสคนนเปนคสตดกนอยำงแทจรงวธกำรใชสตรงขำมหรอสตดกนมหลกกำรดงน 1.ปรมำณของสทตดกนกบวรรณะของสทงหมดในภำพตองอยำเกน 10% ของเนอทในภำพเขยน 2.ในลกษณะกำรน ำไปใชในทำงประยกตศลปควรใชตำมหลกเกณฑดงน 2.1 กำรใชสตรงขำมหรอสตดกน ตองใชสใดสหนงจ ำนวน 80% อกฝำยหนงตองเปน 20% จงจะมคณคำทำงศลปะ 2.2 หำกจ ำเปนตองใชสคใดคหนงปรมำณเทำๆกน ควรตองลดคำของคสลง 2.3 หำกภำพเปนลำยเลกๆ เชน ภำพทเตมไปดวยตนไมใบไมเลก กำรใชสตดกนอยำงสดๆ สลบกน ผลคอจะผสมผสำนกนเอง 2.4 หำกจ ำเปนตองใชสตดกนในภำพใหญๆหรอพนทภำพมำกๆและสคนนตดกน ควรใชเสนด ำมำคนหรอตดเสนดวยสด ำ เพอลดควำมรนแรงของภำพและคสได 3. สเอกรงค คอส สเดยวหรอสทแสดงออกมำเดนเพยงสเดยว ซงเหมอนวำจะคลำยคลงกบสสวนรวมหรอสครอบง ำ แตทจรงแลวสทงสองชนดมวธกำรทแตกตำงกนออกไป สสวนรวมนนสทใชอำจเปนสสด หรอสทลดคำลงไปแลว

9 10 8

แตสเอกรงคตองใชสใดสหนงเปนสสดยนพนเพยงสเดยวแลวลดคำ น ำหนกออนแก ในระยะตำงๆ เปนตน หลกเกณฑคอ เมอเอำสทสดใสเปนจดเดนของภำพแลว สทเปนสวนประกอบรอบๆตองลดคำควำมสดลงแลวน ำเอำสทจดเดนนนไปผสมดวยบำงทกๆแหงในภำพ ขอส ำคญคอ สทจะน ำมำประกอบนนจะใชกสกตำม แตโดยมำกนยมใชไมเกน 5 ส โดยน ำเอำมำจำกวงจรสดำนหรอวรรณะใดวรรณะหนง ไมนยมน ำมำจำกสองวรรณะ รวมทงสทตองกำรใชเปนสยนพน(เอกรงค)ดวย เพรำะสทอยในดำนหรอวรรณะเดยวกนจะผสำนกลมกลนกนงำยกวำ ตวอยำงเชน ถำเลอกสมำ 6 สจำกวงจรสคอ เหลอง สม แสด แดงชำด แดงเลอดนก และมวงแดง เมอนกเรยนจะท ำเอกรงคของสเหลอง กใชสเหลองเปนหลกหรอสเดน วำงจดใดจดหนงของภำพแลวน ำสอนๆขำงตนมำลดคำหรอควำมสดใสลง(neutralized) โดยกำรน ำเอำสตรงขำงของแตละคมำผสมลงไปพอสมควร เมอจะระบำยกน ำเอำสเหลองทเปนสยนพนเขำมำผสมดวยเลกนอยกจะไดสเอกรงคของสเหลองตำมทเรำตองกำร กำรสรำงสรรคงำนศลปะดวยสเอกรงคนจะไดผลงำนทงดงำม เพรำะโครงสรำงสจะดไมรนแรง เพรำะวำจะมมเรองสตดกนเขำไปผสม และสแตละวรรณะกไมเขำไปปะปนซงกนและกน นบวำเปนงำนศลปะทมโครงสรำงประณต ผลงำนชนเดนๆของโลกกใชวธกำรนเชนกนขอดอกอยำงหนงของสเอกรงคคอ โครงสจะละเมยดละไม ไมเบองำยเหมอนกบกำรใชสหลำยสมำผสมผสำนกน 4. สสวนรวม สสวนรวมหรอสครอบง ำหมำยถงสใดสหนงทมจ ำนวนมำกกวำสอนในพนทหรอภำพนนๆ เชน ภำพตนไมทเรำมองเหนเปนสเขยว แตควำมจรงแลวในสเขยวของตนไมนนอำจมสอนประกอบอยดวย เชน ส เขยวออน ส

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

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

10

11 10

4. ควำมเรยบงำย อำนงำยสบำยตำ เวบไซตทมรปแบบทเรยบงำย ไมซบซอน และใชงำนไดอยำงสะดวก กำรจดหมวดหมใหกบขอมลภำพกรำฟกหรอตวอกษร และใชสอยำงเหมำะสม จะไดเปรยบเวบทสบสนวนวำย 5. ควำมสม ำเสมอ เวบเพจในเวบไซต ตองเปนทศทำงเดยวกนตลอดทงเวบไซต อำจจะใชรปแบบเดยว หรอแตกตำงบำงระหวำงหนำหลกกบหนำทวไป 6. เนอหำดมประโยชน เนอหำถอวำเปนสงส ำคญทสดส ำหรบเวบไซต ดงนนคณควรจดเตรยมเนอหำใหกบเวบไซตของคณ โดยน ำเสนอเนอหำทถกตอง ครบถวนและสมบรณ และควรมกำรปรบปรงใหทนตอเหตกำรณอยเสมอ 7. มควำมเปนเอกลกษณ รปแบบของเวบไซตสำมำรถสะทอนถงเอกลกษณ และ ลกษณะขององคกรนนได เชน กำรใชชดส ชนดตวอกษร รปภำพและกรำฟก ทเปนสขององคกรนน ๆ เชน เวบไซตกำรบนไทยจะเนนสชมพ น ำเงน มวง ซงเปนสสญลกษณขององคกร เปนตน 8. มระบบเนวเกชนทด (Navigator bar) เนวเกชน หรอระบบน ำทำงในเวบไซตทกทศมทไปมเครองหมำยใหตดตำม เพอใหผทเขำเยยมชมเวบไซตสำมำรถเลอกทจะเขำไปใชบรกำรไดตรงจดทสนใจไดอยำงสะดวก และสำมำรถทจะยอนกลบไปยงหนำเวบตำง ๆ ภำยใน เวบไซตไดคณอำจจะสรำงเนวเกชนดวยขอควำมกรำฟกไวทสวนบนของหนำเหนอดำนซำยมอของหนำ และอำจจะมแบบขอควำมไวททำยหนำดวย พดงำย ๆ คอ อยหนำใดแลวสำมำรถทจะยำยไปหนำอนไดทนท 9. ระบบกำรใชงำนทถกตอง กำรท ำงำนตำง ๆ ในเวบไซตจะตองมควำมแนนอน และท ำหนำทไดอยำงถกตอง คณตองตรวจสอบลงค และกำร

แสดงผลกบบรำวเซอรทแตกตำงกนตำง ๆถำมกำรใส Script ควรมกำรทดสอบใหดวำสำมำรถใชงำนไดจรง 10. ลดขนำดของภำพใหพอด (Fixed image size) ภำพกรำฟกทน ำมำใชในเวบเพจอยำงมขนำดใหญจนเกนไป เพรำะเวลำโหลดจะชำและนำนท ำใหผชมเบอกบกำรรอคอย ควรใชโปรแกรมพวก Photoshop หรอโปรแกรมตกแตงภำพ ชวยในกำรปรบแตงและชวยลดขนำดของภำพใหเลกลง 11. โหลดไมชำหนำไมยำว (Fast load) เนอหำภำยในเวบเพจโดยปกตไมควรยำวเกน 3 หนำจอ ถำเนอหำยำวมำกคณควรจะแยกหวขอหรอเพมลงคใหดหนำตอไปจะเปนกำรดกวำเพรำะถำหนำยำวมำกจะท ำใหโหลดชำ 12. มค ำถำมค ำตอบ (FAQ) ทกค ำถำมตองมค ำตอบหำกเกดผชมเขำไปใชบรกำรเวบไซตของคณแลวมปญหำหรอขอสงสยและตองกำรควำมชวยเหลอ คณตองมค ำตอบให ซงจะท ำใหผชมรสกทดกบเวบไซตของคณ 13. ตดตอสะดวก (Contact) โลโก ชอสนคำ เบอรโทร รวมไปถงขอมลทใชตดตอเวบไซต เชน แผนท อเมล หรออน ๆ ตองเหนชด เพอใหผชมสำมำรถตดตอกบเวบไซตไดสะดวก 14. หมนปรบปรงเวบไซตใหทนสมยอยเสมอ ขอมลตอง Update ใหทนสมยอยเสมอทงเทคโนโลยและควำมนยมของเวบไซตทมกำรเปลยนแปลงอยำงรวดเรว แนวโนมของกำรออกแบบเวบไซตเดยวนจะเหมอนกบเปนแฟชนไปเสยแลว ถำเวบของคณสรำงมำนำน กนำจะมกำรเปลยนแปลงบำง อยำงตอนนฮตภำพเคลอนไหว คณกนำจะมบำง แตอยำงไรกอยำลมเอกลกษณเดมขององคกรเสยทเดยว ดงเชน เวบสถำนโทรทศนไอทว ทปรบโฉมตำม Concept ทบอกวำ “Speed& Spice” ท ำใหรปแบบเวบใหมมสสนดงทเหน

12 13

ขนตอนกำรพฒนำเวบไซต

กระบวนกำรในกำรพฒนำเวบไซต ดงน 1. ส ำรวจปจจยส ำคญ (Research) ซงมปจจยหลก 3 ประกำร

ดงน 1.1 ก ำหนดเปำหมำยและส ำรวจควำมพรอมของ

ทรพยำกรทมอย เชนบคลำกร เงนทน 1.2 เรยนรกลมผชมโดยกำรระบกลมผชมและศกษำควำม

ตองกำรของกลมผชม 1.3 ศกษำเวบไซตของคแขงโดยกำรส ำรวจและเรยนร

เพอวำงกลยทธในกำรแขงขน 2. พฒนำเนอหำ (Site content) 2.1 สรำงกลยทธกำรออกแบบเพอใหไดแนวทำงในกำร

ออกแบบเวบไซต 2.2 หำขอสรปขอบเขตเนอหำเพอใหไดขอบเขตของ

เนอหำและกำรใชงำนรวมถงไดขอมลทถกจดอยำงเปนระบบ 3. พฒนำโครงสรำงเวบไซต (Site structure) 3.1 จดกลมขอมลใหเปนระบบเมอมขอมลเปนจ ำนวน

มำกทจะน ำมำใชในเวบไซตจะตองน ำขอมลเหลำนนมำจดใหเปนระบบเพอใหไดเปนรำงแผนผงโครงสรำง (Draft architecture plan) ดวยกำรทดลองใชแนวคดหลำย ๆ แบบ มำใชเปนเกณฑในกำรจดกลม และลองตงชอกลมขอมลเหลำนน จำกนนใหเปรยบเทยบแนวทำงกำรจดกลมขอมลของผเกยวของ ทกคนเพอหำขอสรปทคนสวนใหญเขำใจไดงำยระบบโครงสรำงขอมลทดจะมสวนชวยใหผใชเขำใจภำพรวมของเนอหำไดด กำรเลอกใชระบบขอมลแบบใดนนขนอยกบวตถประสงคและแนวคดในกำรจดแบงขอมลเปน

ส ำคญ ส ำหรบเวบไซตทวไปควรจะหำกำรตอบสนอง ควำมตองกำรของผใช ซงกคอ ผใชอยำกรวำขอมลทตองกำรนนอยทไหนและจะเขำถงขอมลนนไดอยำงไร ดงนน กำรจดระบบขอมลในเวบไซตเพอใหงำยตอกำรคนหำ จงเปนสงส ำคญทจะชวยสงเสรมหรอชวยขดขวำงควำมส ำเรจของเวบไซตนน ๆ ได กำรจดระบบขอมลนนจงมผลตอเนองมำยงระบบเนวเกชน อกดวย 3.2 จดท ำโครงสรำงขอมลดวยกำรท ำแผนผงโครงสรำงของเวบไซต หลงจำกไดจดกลมขอมลเปนระบบแลว และน ำขอมลทไดมำจดเปนโครงสรำงเนอหำทแสดงถงกลมขอมลและล ำดบขนของหวขอ ขนตอมำ คอ กำรน ำรำยกำรโครงสรำงของเวบไซตทไดจดขอมลไวแลวมำจดใหเปนแบบแผนโดยสรำงเปนแผนผงทแสดงถงโครงสรำงขอมล ล ำดบขนและกำรเชอมโยงของแตละสวนอยำงชดเจนเรยกวำแผนผงโครงสรำงเวบไซต ซงเปนกำรแสดงภำพรวมของเวบไซตในเชงกรำฟก โดยเรมจำกหนำโฮมเพจหรอหนำเกรนน ำไปจนถงหนำยอย ๆ ทงหมดนอกจำกนยงมกำรเขยนโครงสรำงเวบไซตอยำงงำยอกรปแบบหนงทเรยกวำ Site mapซงแสดงถงภำพรวมของเนอหำหลก ๆ ภำยในเวบไซต แตไมมรำยละเอยดมำกเทำกบแผนผงโครงสรำงเวบไซต โดยอำจจดท ำเปนแบบตวหนงสอหรอแบบกรำฟกแผนผงชนดน เหมำะทจะน ำไปแสดงบนเวบไซตเพอใหผใชเขำใจโครงสรำงเนอหำของเวบไซตไดงำยขน 3.3 พฒนำระบบเนวเกชนเพอวำงแนวทำงในกำรทองเวบ

4. ออกแบบและพฒนำเวบไซต (Visual design) 4.1 ออกแบบลกษณะเวบเพจ 4.2 พฒนำเวบไซตตนแบบและโครงสรำงเวบไซตครง

สดทำย

14 15

5. พฒนำและด ำเนนกำร (Production and operation) 5.1 ลงมอพฒนำเวบเพจเพอใหไดเวบไซตทสมบรณ 5.2 เปดตวเวบไซต 5.3 ดแลและพฒนำเวบไซตอยำงตอเนอง

สวนประกอบของเวบไซต เวบไซตโดยทวไปมสวนประกอบดงน

1. ชอของเวบไซต หรอ URL (Uniform Resource Locator ) ต ำแหนงทเกบเวบเพจเปรยบเสมอนทอยของเวบเพจ เมอตองกำรเปดเวบเพจใด จะตองระบต ำแหนงทเกบเวบเพจนน หรอรหสสบคนแหลงขอมล ซงเปนกำรเชอมโยงขอมลในระบบเวลดไวดเวบ รปแบบของ URL เปนรปแบบมำตรฐำนสำหรบระบบ เวลดไวดเวบ โดยก ำหนดใหขนตนดวยคำ วำ “

http:// ” หมำยถงกำรเชอมโยงกบแหลงขอมลเวลดไวดเวบ หรอกำรแสดงขอมลแบบไฮเปอรเทกซ(hypertext) รปแบบของ URL ประกอบดวย http://host/path/file มควำมหมำยดงน

http หมำยถง รปแบบกำรเชอมโยงขอมลแบบ hypertext host หมำยถง ชอโฮสตของเครองคอมพวเตอรทเชอมตอในระบบเครอขำย โดยใหบรกำรตำง ๆ แกผใชในเครอขำยนน ซงเปนทอยในรปของโดเมนเนม(domain name) ซงในโดเมนเนม (domain name) ใชอำงองแทนหมำยเลขไอพ เพอใหผใชบรกำรคอมพวเตอรจดจำ ไดงำยขน จงมกำรก ำหนดระบบชอคอมพวเตอรมำตรฐำนในเครอขำยอนเทอรเนตวำ ดเอนเอส (domain Name Sever:DNS) ประกอบดวยชอเครองคอมพวเตอร ชอเครอขำยทองถน ชอสบโดเมน (subdomain) สำมำรถแบงประเภทของโดเมนไดดงน

1) edu หรอ ac คอประเภทสถำบนกำรศกษำ 2) org หรอ or คอประเภทองคกรไมหวงผลกำ ไร 3) com หรอ co คอหนวยงำนเอกชน องคกรกำรคำ หรอองคกรท

หวงผลกำ ไร 4) net หรอ in ประเภทผใหบรกำรอนเทอรเนต 5) gov หรอ go คอประเภทหนวยงำนของรฐหรอหนวยงำน

รำชกำร 6) mil หรอ mi คอประเภทหนวยงำนทำงทหำร

ตวอยำงเวบไซต www.udru.ac.th

th หมำยถงชอโดเมน เปนชอยอของประเทศหรอองคกร คอประเทศไทย

16 17

ac หมำยถง ชอสบโดเมนทบอกประเภทขององคกรสถำบนกำรศกษำ

udru หมำยถงเครอขำยทองถน ทระบวำระบบดงกลำวเปนของมหำวทยำลยรำชภฏอดรธำน

path หมำยถง เสนทำงสำ หรบกำ หนดไดเรกทอรบนคอมพวเตอรในระบบยนกซ

file หมำยถง ไฟลทตองกำรโอนยำยหรอไฟลขอมล กลำวโดยสรปโดเมนเนม เปนระบบชอคอมพวเตอรในเครอขำย

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

2. โฮมเพจ (homepage) เปนค ำเรยกชอเวบเพจหนำแรกสดของขอมลแตละเรอง เปรยบ เสมอนหนำปกของหนงสอเปนสวนทบอกใหทรำบขอมลรำยละเอยดเกยวกบเวบไซตนน เปนทเชอมโยงไปยงเวบเพจอน ๆ ทงภำยในและภำยนอกเวบไซต (คณต ศำตะมำน, 2541)โดยทวไปแลวในแตละเวบไซตจะมโฮมเพจหรอหนำตอนรบ (welcome page) ซงปรำกฏเปนหนำแรกเมอเปดเวบไซตนนขนมำ เปรยบเสมอนกบสำรบญและคำ นำ ทเจำของเวบไซตสรำงขนเพอใชประชำสมพนธองคกรของตนวำใหบรกำรในสงใดบำง 3. เวบเพจ (webpage) เปนองคประกอบหลกสำหรบกำรนำเสนอขอมลในระบบเวลดไวดเวบมลกษณะเปนสอประสม หนำเวบเพจหนงจะมตงแต 2-3 หนำจนถงพน ๆ หนำ และในหนำเอกสำรหนงกสำมำรถเชอมโยงไปอกหนำหนงทมเนอหำเกยวของกนได โดยกำรเชอมขอมลแบบไฮเปอรเทกซ (สมนก ครโต, 2538) กำรเชอมโยงบนเวบเพจแตละเพจนนอำจ

อยในลกษณะทเปนหวขอ รปภำพรปแบบของคำ สงเชอมโยงจะอยในรปของขอมลภำพหรอสญลกษณรป (icon) หรอปมตำงๆ ซงสำมำรถคลกเพอเชอมโยงขอมลหนงไปยงอกขอมลหนงทเกยวของกนได (Waltz 1995 )

องคประกอบของเวบเพจ ประกอบดวยสวนส ำคญตำง ๆ ดงตอไปน

1. ขอควำม (text) เปนลกษณะของขอมลอยในรปตวอกษร ใชในกำรอธบำยหรอใหขอมลเกยวกบเวบเพจนน นำ เสนอสำรสนเทศทตองกำรเผยแพร เปนขอควำมปกต โดย เรำสำมำรถตกแตงใหสวยงำมและมลกเลนตำง ๆ ดงเชนโปรแกรมประมวลคำ

2. กรำฟก (graphic) เปนสวนทใชประกอบเวบเพจใหมควำมสวยงำม ดงดดใจแกผเขำชมเวบไซต ประกอบดวย รปภำพ ลำยเสน ลำยพน ตำงๆ มำกมำย

18 20 19

3. สอประสม (multimedia) ประกอบดวยรปภำพ ภำพเคลอนไหว และแฟมทชวยเพมสสนใหเวบไซตสวยงำมและดงดดใจมำกขน

4. เคำนเตอร (counter) ใชนบจำ นวนผทเขำมำเยยมชมโฮมเพจ 5. คลลลงค (cool Links) กำรเชอมโยงใชในกำรขอมลไปยงจด

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

6. ฟอรม (forms) เปนแบบฟอรมทใหผเขำเยยมชม กรอกรำยละเอยด แลวสงกลบ มำยงเจำของเวบไซต

7. เฟรม (frames) เปนสวนทแบงจอภำพเปนสวน ๆ แตละสวนกจะแสดงขอมลทแตกตำงกนและเปนอสระจำกกน เฟรมทนยมม 2 สวน คอ กรอบทำงดำนซำยเปนแถบ สำรบญ หรอแถบวธกำรเขำหำขอมล (navigational bar) สวนกรอบทำงดำนขวำมอมขนำดกวำงกวำจะเปนขอมลของเวบเพจ

8. อมเมจ แมป(image maps) เปนรปภำพขนำดใหญ ทก ำหนดสวนตำงๆ บนรปเพอเชอมโยงไปยงเวบเพจอน ๆ หรอต ำแหนงทตองกำร

9. โปรแกรมสำเรจรปตำง ๆ ทใสลงในเวบเพจเพอใหกำรใชงำนเวบเพจม ประสทธภำพมำกยงขน นอกจำกสวนประกอบดงกลำวแลว องคประกอบทนยมใสไวในเวบเพจ อก 2 สวนไดแก 1) สมดเยยม (guestbook) 2 ) เวบบอรด (webboard) ทชวยใหเวบเพจกลำยเปนสอทมปฏสมพนธระหวำงผใชกบผสรำง และระหวำงผใชดวยกนเอง โดยอำศย

หลกกำรทเรยกวำ คอมมอน เกตเวย อนเตอรเฟส (Common Gateway Interface) หรอ เรยกสน ๆ วำซจไอ (CGI) โดยมรำยละเอยดดงน

Common Gateway Interface เปนมำตรฐำนทผทเขำไปใชขอมลในเครองบรกำรเวบในอนเทอรเนต สำมำรถสบคนขอมลในฐำนขอมลเชน หวขอขำวตำง ๆ หรอบทควำมทำงวชำกำร รำยชอหนงสอ หรอกำรสมครเปนสมำชกเพอรบบรกำรตำง ๆทำงอนเทอรเนต ซง CGI จะทำ หนำทประมวลผลขอมลทไดจำกกำรพมพขอมลของผเยยมชมและแสดงผลออกมำทำงเวบเพจ ตวอยำงเวบไซตทมระบบกำรใชงำน CGI ทเปนทรจกกนทวโลกคอ http://www.yahoo.com

ขอควรหลกเลยงในกำรท ำเวบไซต 1. เวบไซตแสดงผลไดชำ คอเวบโหลดไดชำมำก ผใชงำนตองเสยเวลำในกำรรอใหเวบไซต

แสดงผลนำน ซงเวลำในกำรแสดงผลของเวบไซตมหลำยปจจย เชน ควำมสำมำรถของ web server , ควำมเรวของอนเตอรเนตของผใชงำน แตปจจยตำงๆนนเปนแคปลำยเหตเทำนน ตนเหตทสำมำรถควบคมไดอยทขนำดของเวบเพจ ขนำดของเวบเพจนนไมควรเกน 60 KB ขนำดของเวบเพจทเพมขนมเหตมำจำก รปภำพทใชมขนำดใหญเกนไป , กำรเปดเพลงประกอบในเวบไซต (ท ำใหผชมตองเสยเวลำในกำรดำวนโหลดเพลง แนนอนวำไฟลเพลงเปนไฟลทมขนำดใหญกวำ 60 KB อยแลว) , กำรใชไฟล flash ทมขนำดใหญเกนไป ทงหมดนเปนสงทควรหลกเลยง 2.ไมมเนวเกชน เนวเกชน คอ สวนทใชลงคไปยงหนำตำงๆของเวบไซต ตวอยำงเชน

20 22

21

เมนทำงซำยมอของ hellomyweb.com จะเหนวำมลงคไปยงสวนตำงๆของเวบไซต เชน ลองท ำเวบไซต แบบงำยๆ , พนฐำนเกยวกบเวบไซต เวบไซตทดควรมเนวเกชนในทกหนำ เพรำะในปจจบนเรำทรำบดอยแลววำกวำ 80% ของผใชงำนรจกเวบไซตจำก search engine ซงแนนอนวำไมสำมำรถก ำหนดไดวำให search engine แสดงหนำใดใหผใชงำนด ถำ search engine แสดงผลในหนำทไมม เนวเกชนอำจท ำใหผใชงำนเขำใจผดไดวำเวบไซตของคณมแคหนำทแสดงผลเพยงหนำเดยว กำรแสดงผลเนวเกชนควรแสดงผลในต ำแหนงเดยวกน เพรำะถำเปลยนต ำแหนงอำจท ำใหผใชงำนสบสนได 3. กำรใชสสนทแสบตำ

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

6. ขนำดของตวอกษร และชนดของตวอกษร font ในบำงครงกำรแสดงตวอกษรทเลกเกนไป หรอใหญเกนไป ขนอยกบกำรตงคำของ browser ของผใช กเปนอปสรรคในกำรอำนเนอหำของเวบไซต ขอแนะน ำคอเรำควรใช CSS ในกำรควบคมกำรแสดงผลตวอกษรใหเปนไปในทำงเดยวกน จะท ำใหเวบไซตของเรำดด และอำนไดงำยขน

7. กำรเวนวรรค กำรเวนบรรทด และกำรจดชองไฟของตวอกษร เรำสำมำรถใชค ำสง CSS ในกำรจดชองไฟของตวอกษรได กำรจด

ชองไฟใหตวอกษร กำรเวนวรรคทด และกำรเวนบรรทดของเนอหำทด กท ำใหเวบไซตของเรำดดขนไดมำกทเดยว 8. กำรใสเพลงประกอบเวบไซต โดยทผใชงำนไมสำมำรถปดมนได ถำมควำมจ ำเปนทจะตองใสเพลงประกอบเวบไซต อำจเพอจงใจลกคำ ตองแนใจวำไดท ำปมส ำหรบปดเพลงนนไว โดยทผใชงำนสำมำรถปดมนไดโดยงำย และเหนมนอยำงชดเจน มฉะนนเพลงทคณใสไปอำจสงผลท ำใหผใชงำนเกดควำมรสกหงดหงดได 9.กำรท ำเวบไซตโดยไมไดวำงองคประกอบของหนำมำกอน องคประกอบของหนำมควำมส ำคญมำก ถำไมไดวำงองคประกอบของหนำมำกอนจะท ำใหเกดปญหำตำมมำมำกมำย เชนกำรใสเนอหำในหนำมำกเกนไป อำจเหนหลำยเวบไซตทใชพนทของหนำแทบจะทกจดของเวบเพจกวำได ซงผใชงำนไมเคยตงใจอำนเนอหำอยำงจรงจง กำรใสเนอหำทมำกไปจะท ำใหไมสำมำรถสออะไร หรอบอกอะไรไดเลย ดงนนจงควรใสเนอหำทอยำกจะสอ และแบงสดสวนตำงๆใหเปนกลมเปนกอนเหนไดชดเจน รปแบบเวบไซตในแตละหนำกมควำมส ำคญมำก ไมควรเปลยนรปแบบของเวบไซตใน

22 24 23

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

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

ตวอยำงเวบทอยระหวำงกำรปรบปรง

13. ไมตรวจสอบเวบไซตกอน กำรตรวจสอบเวบไซตเปนสงทส ำคญมำก เพรำะกำรแสดงผลใน browser กบกำรแสดงผลตอนทเรำเขยนเวบเพจอำจไมเหมอนกนกได ดงนน

จงควรตรวจสอบเวบเพจทกหนำ ถำจะใหดควรใชหลำยๆ browser ในกำรตรวจสอบ 14. เนวเกชนทไมสอควำมหมำย กำรใชเนวเกชนทไมสอควำมหมำย เมอคลกแลวไมสำมำรถเปดหนำทลงคไวได มขอผดพลำด (error) ในเนวเกชน และมหลำยปมใหเลอกมำกเกนไป จะสงผลตอผใชงำนเปนอยำงมำก เนวเกชนทดควรมกำรแบงหมวดหมทด ไมซบซอนจนเกนไป และควรครอบคลมสวนตำงๆของเวบไซต หรอหนำเวบไซตใหญมำก กควรครอบคลมในหมวดนนๆ กำรใชค ำกเปนเรองส ำคญ ควรใชค ำทสอควำมหมำยชดเจนไมคลมเครอ หรอเปนค ำทเขำใจกนเฉพำะกลมไมควรใช 15. ท ำเวบไซตอยำงลวกๆ กำรท ำเวบไซตอยำงลวกๆ เชน คดลอกเนอหำจำกเวบไซตอนมำ แลวมกำรตกหลน หรอไมมภำพแสดงเหมอนเวบไซตตนฉบบ กำรพมพผด หรอกำรเขยนขอควำมทไมสอควำมหมำย กำรใชภำษำวบต เนอหำของเวบไซตคอทกอยำงของเวบไซต เรำจงควรใหควำมส ำคญกบเนอหำใหมำกๆ อยำใหเกดขอผดพลำด หรอผดพลำดใหนอยทสด 16.ไมเคยอพเดทเวบไซตเลย กำรอพเดทเวบไซตเปนประจ ำกท ำใหผใชงำนเกดควำมมนใจ วำเวบไซตของเรำยงมผดแลอย และเนอหำยงไดรบกำรปรบปรงอย นอกจำกนยงสงผลตออนดบใน search engine อกดวย 17. จ ำนวนคลกเพอเขำถงขอมลมำกเกนไป หลำยๆเวบไซตจะเกบเนอหำในสวนทคดวำดเอำไว โดยผใชงำนจะตองผำนกำรคลกนบครงไมถวน ผำนโฆษณำมำกมำยกวำจะมำถงเนอหำทสนใจได นบวำเปนสงทผดพลำดอยำงมำก อยำงทบอกไปวำเวบของเรำหำง

26

25 24

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

18. สรำงควำมมนใจในสวนของควำมปลอดภยแกผใช ถำเวบไซตเปนเวบไซตขำยของ หรอท ำธรกจตำงๆ กควรสรำงควำมมนใจใหลกคำวำจะไมโดนหลอก เชน กำรจดทะเบยนกบกระทรวงพำณชย หรอไมเปดเผยขอมลตำงๆของลกคำ 19. ไมมทอย หรอทตดตอกลบ เวบไซตทำงธรกจจ ำเปนอยำงยงทจะตองมสวนของ ตดตอเรำ , contact information , ทอยบรษท , เบอรโทรศพท , email สงพวกนเปนสงจ ำเปนทงสนทจะตองมในเวบ 20. กำรใช Free web hosting

ถำเปนเวบเกยวกบธรกจแลวจ ำเปนอยำงยงทจะตองมชอ domain name เปนของตวเอง และจะตองม web hosting เปนของตวเองไมวำจะเชำ หรอจะซอมำเอง เรำะจะสงผลตอควำมเชอมนของลกคำ 21. กำรใช Free E-mail addresses ในปจจบนม free email มำกมำยเชน hotmail , gmail แตพวกนเปนสงทควรหลกเลยง ควรใช email ทเปนของคณเอง มำจำก domain name ของคณ เรองนเปนสงทจ ำเปนอยำงยงกบควำมนำเชอถอของ email ของคณทสงไปยงลกคำ 22. โฆษณำทมมำกจนเกนไป โฆษณำเปนรำยไดหลกของเวบไซตบำงประเภท แตกำรทใสโฆษณำ

มำกเกนไปจะสงผลตอเนอหำของเวบไซต เพรำะจะท ำใหผใชสบสนระหวำง เนอหำทแทจรงกบโฆษณำทแทรกอย

ตวอยำงเวบทโฆษณำมำกเกนไป

23. รปภำพ รปภำพกเปนสวนส ำคญของเวบไซตเรำจงควรดและสวนนใหด ไมควรใหเกดกำรผดพลำดในกำรแสดงรปภำพ และควรบบอดไฟลรปใหถกตองกบรปแบบ ชนดของไฟลทใชในกำรบบอดรปไดแก GIF , JPEG และ PNG ซงจะใชฟอรแมตใดกตองท ำควำมเขำใจลกษณะในกำรบบอดขอมลของแตละฟอรแมต เพอใหเสำมำรถเลอกใชไดถกตอง 1.JPEG ส ำหรบภำพถำย หรอภำพวำดทมจ ำนวนสมำกๆ 2.GIF , PNG-8 ส ำหรบภำพทมลกษณะเปนลำยเสน หรอภำพทไมตองกำรใหมพนหลง รปทไมมกำรไลส เชนภำพกำรตน ภำพทมจ ำนวนสนอยๆ เชน โลโก 3.PNG ใชกบภำพถำยทตองกำรใหมลกษณะโปรงแสง ไฟลทอดแลวจะมขนำดใหญกวำ JPEG แตมคณภำพควำมคมชดสงกวำ 24. เวบไซตนแสดงผลไดดทสดในขนำด 1024 x 768

28 27 26

กำรก ำหนดขนำดทใชในกำรแสดงผล หรอ browser ทใชแสดงผลเปนสงทไมควรท ำเปนอยำงยง เพรำะปจจบนมหนำจอหลำยรปหลำยขนำดมำกมำย ตงแต 14 นว จนถง 20 กวำนว ทงแบบ wide screen และแบบทวไป กำรก ำหนดขนำดแสดงผลจงไมควรท ำ

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

กำรประเมนเวบไซต 1 ผรบผดชอบ/ผผลต / ผแตง (author) พจำรณำผรบผดชอบ

หรอผผลตสำรสนเทศเชน บคคล หนวยงำนรำชกำร บรษทเอกชน สถำบนกำรศกษำ เปนตน มควำมเชยวชำญดำนใด และวตถประสงคในกำรน ำเสนอ

2 เนอหำ (content) พจำรณำจำก - ควำมเทยงตรง ถกตอง แมนยำ (accuracy) กำรสะกด กำรพมพ

ถกพมพผดตวเลข สถตตำงๆ และควำมละเอยดของสำรสนเทศ (precision) - ควำมทนสมย (timeliness) วนทปรบปรงขอมลครงสดทำย วน

เวลำในกำรบนทกสำรสนเทศไวในอนเทอรเนต วนเวลำในกำรรวบรวมเนอหำ วนเวลำในกำรโฆษณำ และวนเวลำในกำรสงอเมล

- ควำมสมบรณของเนอหำ (completeness)

- ควำมสมพนธกบควำมตองกำรของผใช (relevance) ขนอยกบควำมตอง กำรของผใชแตละคน

- ควำมพอเพยงของเนอหำ (sufficiency) ทสำมำรถคนหำสำรสนเทศเรองเดยวกนไดจำกหลำย ๆ เวบไซต และสำมำรถนำขอมลมำเปรยบเทยบกนได - ควำมเขำใจงำยของเนอหำ (understandability) กำรใชภำษำเหมำะสมและถกตองกบเนอหำระดบควำมยำกงำยของศพททใช เนอหำนนมกำรสอควำมหมำยหรอแปลควำมหมำยทเขำใจตรงกน มกำรแบงหวขออยำงชดเจน มกำรเรยงลำ ดบเนอหำจำกงำยไปหำยำกหรอตำมลำ ดบเหตกำรณ - สำมำรถตรวจสอบได (verification) จำกเอกสำรและเนอหำทมกำรอำงองตำมหลกวชำกำรผแตงหรอผรบผดชอบขอมลมกำรกลำวถงในแหลงขอมลหรอแหลงควำมรใด

3 ควำมยตธรรมไมลำเอยง (freedom from Bias) 4 คณธรรมและจรยธรรม (morals and Virtue)

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

26

30 29 28

ผเรยนมปฏสมพนธกน ผำนระบบเครอขำยคอมพวเตอรทเชอมโยงซงกนและกน ประเภทของบทเรยนผำนเวบ บทเรยนผำนเวบออกเปน 3 ประเภท ตำมระดบควำมยำกงำย ดงน 1. บทเรยนแบบทวไป (Embedded WBI) เปนบทเรยนทน ำเสนอดวยขอควำมและกรำฟกเปนหลก จดวำเปนบทเรยนขนพนฐำนทพฒนำมำจำกบทเรยนคอมพวเตอร ชวยสอน สวนใหญพฒนำขนดวยภำษำ HTML (Hypertext markup language) 2. บทเรยนแบบมปฏสมพนธ (Interactive WBI: IWBI) เปนบทเรยนทพฒนำขนจำกบทเรยนประเภทแรก โดยเนนกำรมปฏสมพนธสมพนธกบผใชเปนหลก นอกจำกจะน ำเสนอดวยสอตำงๆ ทงขอควำม กรำฟก และภำพเคลอนไหวแลว กำรพฒนำบทเรยนระดบนจงตองใชภำษำคอมพวเตอรในยคท 4 ไดแก ภำษำเชงวตถ (Object-oriented programming) เชนVisual Basic, Visual C++ รวมทงภำษำ HTML, Perl เปนตน 3. บทเรยนแบบปฏสมพนธสอประสม (Interactive Multimedia WBI:IMMWBI) เปนบทเรยนคอมพวเตอรบนเวบทน ำเสนอโดยยดคณสมบตทง 5 ดำนของมลตมเดย ไดแก ขอควำม กรำฟก ภำพเคลอนไหว กำรปฏสมพนธ และเสยง จดวำเปนระดบสงสด เนองจำกกำรปฏสมพนธเพอกำรจดกำรทำงดำนภำพเคลอนไหวและเสยงของบทเรยนโดยใชเวบบรำวเซอรนนมควำมยงยำกมำกกวำบทเรยนทน ำเสนอแบบใชงำน

เพยงล ำพง ผพฒนำบทเรยนจะตองใชเทคนคตำงๆ เขำชวย เพอใหบทเรยนจำกกำรมปฏสมพนธเปนไปดวยควำมรวดเรวและรำบรน เชน กำรเขยนคกก (Cookies) ชวยสอสำรขอมลระหวำงเวบเซรฟเวอรกบตวบทเรยนทอยในไคลเอนต ตวอยำงของภำษำทใชพฒนำบทเรยนระดบนไดแก Java, JSP, ASPและ PHP เปนตน

รปแบบของบทเรยนผำนเวบ จดแบงโมเดลของบทเรยนผำนเวบ (WBI) ออกเปน 4 รปแบบตำมมตกำรใชประโยชนในกำรเรยนกำรสอน คอ 1. Information access เปนโมเดลของบทเรยนผำนเวบทมงประโยชนในกำร น ำเสนอขอมลขำวสำรในกำรเรยนกำรสอน เชน ประมวลรำยวชำ (Course syllabus) ก ำหนดกำรเรยนกำรสอน เนอหำ เอกสำรประกอบกำรสอน กำรบำน เปนตน 2. Interactive learning เปนโมเดลของบทเรยนผำนเวบทน ำเสนอบทเรยนโดยออกแบบใหบทเรยนมปฏสมพนธกบผเรยน มกำรใหแรงจงใจ มกำรใหขอมลยอนกลบในขนตอนตำงๆ ทผใชบทเรยนด ำเนนกจกรรมตำมบทเรยนไป ซงเปนลกษณะเดยวกบบทเรยนคอมพวเตอร ชวยสอนเพยงแตน ำเสนอในระบบเครอขำยอนเทอรเนต 3. Networked learning เปนโมเดลของบทเรยนผำนเวบทเพมมตของกำรสอสำรปฏสมพนธระหวำงบคคล เชน ระหวำงผเรยนผสอน ระหวำงผเรยนดวยกนเองตลอดกจกรรมกำรเรยนกำรสอน

32 31 30

4. Material development เปนโมเดลของบทเรยนผำนเวบทมมตของกำรใหผเรยนใชเวบเปนเครองมอในกำรรวบรวมขอมล จดโครงสรำง และเปนสอในกำรน ำเสนอควำมรทไดจำกกำรเรยน

กำรประชำสมพนธ ควำมหมำยของกำรประชำสมพนธค ำวำ “กำรประชำสมพนธ” มำ

จำกค ำวำ “ประชำ” กบ “สมพนธ” ซงตรงกบภำษำองกฤษวำ “public relations” หรอทเรยกกนทวไปวำ “PR” ตำมค ำศพทนหมำยถงกำรมควำมสมพนธเกยวของกบประชำชน ตำมพจนำนกรมฉบบรำชบณฑตยสถำน พ.ศ. 2525 หมำยถงกำรตดตอสอสำร เพอสงเสรมควำมเขำใจอนถกตองตอกน และถำจะขยำยควำมหมำยใหเปนรปธรรมยงขน จะหมำยถง “ควำมพยำยำมทมกำรวำงแผนและเปนกำรกระท ำทตอเนอง ในอนทจะมอทธพลเหนอควำมคดจตใจของประชำชน กลมเปำหมำยโดยกำรกระท ำสงทดมคณคำใหกบสงคม เพอใหประชำชนเหลำนเกดทศนคตทดตอหนวยงำนกจกรรม และบรกำร หรอสนคำของหนวยงำนน และเพอทจะไดรบกำรสนบสนนและรวมมอทดจำกประชำชนเหลำนในระยะยำว

สรป จำกทกลมท 7 ไดศกษำเรองกำรท ำเวบไซตท ำใหพวกเรำไดรวำ เวบไซต (องกฤษ: website, web site, Web site) หมำยถง หนำเวบเพจหลำยหนำ ซงเชอมโยงกนผำนทำงไฮเปอรลงก สวนใหญจดท ำขนเพอน ำเสนอขอมลผำนคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนำแรกของเวบไซตทเกบไวทชอหลกจะเรยกวำ โฮมเพจ เวบไซตโดยทวไปจะใหบรกำรตอผใชฟร แตในขณะเดยวกนบำงเวบไซตจ ำเปนตองมกำรสมคร

สมำชกและเสยคำบรกำรเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทำงวชำกำร ขอมลตลำดหลกทรพย หรอขอมลสอตำงๆ ผท ำเวบไซตมหลำกหลำยระดบ ตงแตสรำงเวบไซตสวนตว จนถงระดบเวบไซตส ำหรบธรกจหรอองคกรตำงๆ กำรเรยกดเวบไซตโดยทวไปนยมเรยกดผำนซอฟตแวรในลกษณะของ เวบเบรำวเซอร ทประกอบดวย 1.โฮมเพจ (Home Page) 2.เวบเพจ (Web Page) ซงกำรจดท ำเวบไซตเรำกมองคประกอบตำงๆในกำรจดท ำเวบกจะประกอบไปดวย -ควำมเรยบงำย -ควำมสม ำเสมอ -ควำมเปนเอกลกษณ -เนอหำทมประโยชน -ระบบเนวเกชนทใชงำนงำย -ลกษณะทนำสนใจ -กำรใชงำนอยำงไมจ ำกดผใช -คณภำพในกำรออกแบบ -ระบบกำรใชงำนทถกตอง กำรจดท ำเวบไซตเรำตองมทฤษฎสเขำมำใชสในกำรออกแบบเวบไซต รวมองคประกอบหลำยๆอยำงรวมกน เรำตองมกำรออกแบบกำรวำงแผนใหดกอน ขนตอนตำงๆมำกมำยรวมทงกำรออกแบบพฒนำ โครงสรำงเวบไซตใหเวบออกมำดดสวยงำมใหคนทเขำไปดเวบเกดอยำกชมอยำกตดตำมควำมสวยงำมเนอหำทดของเวบไซตเปนอกอยำงหนงทผพฒนำเวบไซตควรท ำคอมเนอหำทตรงตำมเวบไซตทเรำจะท ำ ไมควรจะมโฆษณำมำกจนท ำใหเวบไซตดไมสบำยตำจนคนดไมอยำกทจะเขำมำอำน สวนขอหลกเลยงในกำรท ำเวบไซต คอสสนเวบไซตทแสบตำ

28

33 32

อำงอง

กำรออกแบบเวบไซตทด,คนเมอ 26 กรกฎำคม 2556,จำก http://www.hellomyweb.com/index.php/main/content/73 วกพเดย สำรำนกรมเสร 2551: ออนไลน สมำน ลอยฟำ. 2544: 4; วเศษศกด โครตอำษำ. 2542: 185 เสร วงษมณฑำ. สอประชำสมพนธ. กรงเทพฯ : บรษท ธนธชกำรพมพ จ ำกด, 2546 ส ำรำญ จชวย/แนวทำงกำรประชำสมพนธตำมคณลกษณะของนกศกษำวทยำลยรำชพฤกษ / วทยำลยรำชพฤกษ /ปกำรศกษำ 2551 Padoungkiat.(2554).ทฤษฎกำรออกแบบเวบไซต. คนเมอ 27 กรกฎำคม 2556 จำก http://patamweb.blogspot.com.