มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

หนวยท 1 อนเทอรเนตและการสอสาร

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

เหมาะสม 3. อธบายหลกการนาเสนอขอมลดวยเวบไซต ภาษา HTML และบราวเซอร 4. อธบายหลกการออกแบบเวบไซตทวไปได 5. เลอกโปรแกรมสรางเวบไซตมาใชงานไดอยางเหมาะสม

สาระสาคญ อนเทอรเนต เปนเครอขายคอมพวเตอรขนาดใหญทเชอมโยงตดตอสอสารขอมลไปได

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

คดแลวตอบ นกเรยนเคยเขาใชงานเวบไซตสงคมออนไลนยอดนยมตางๆ มากมาย เชน Hi5,

Facebook, Twitter นกเรยนเคยสงเกตหรอไมวา เวบไซตเหลาน สรางไดอยา งไร?

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

2

เครอขายอนเทอรเนต อนเทอรเนต (Internet) หมายถง เครอขายคอมพวเตอรขนาดใหญ ทมการเชอมตอระหวาง

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

ปจจบน จานวนผใชอนเทอรเนตทวโลกโดยประมาณ 1,596 ลานคนเศษ (ขอมล ณ เดอน มนาคม 2552) โดยเมอเปรยบเทยบในทวปตางๆ พบวาทวปทมผใชอนเทอรเนตมากทสดคอ ทวปเอเชย คดเปนรอยละ 41.2 รองลงมาไดแก ทวปยโรป รอยละ 24.6 และอเมรกาเหนอ รอยละ 15.7 แตหากจดลาดบจานวนผใชตามประเทศ ประเทศทมประชากรผใชอนเทอรเนตมากทสดคอ ประเทศจน คดเปนจานวน 298 ลานคน รองลงมาคอ สหรฐอเมรกา ญปน อนเดย ตามลาดบ

ในประเทศไทยของเรานบตงแตมการเชอมตอเครอขายไปยงตางประเทศครงแรก เมอป พ.ศ. 2530 จนถงปจจบน อตราการเจรญเตบโตของการใชงานเครอขายอนเทอรเนตกเพมมากขน เรอยๆ คาดวาปจจบนมจานวนประมา ณ 13.4 ลานคน ทาใหหนวยงานทงภาครฐ องคกรภาคเอกชน บรษท หางราน สถาบนการศกษา มองเหนความสาคญและประโยชนจากเครอขายอนเทอรเนต เชน การใชเผยแพรขอมล ขาวสาร ประชาสมพนธกจกรรมตางๆ ไปสชมชน และสงคมโลก มการพฒนาไปสการทาธรกรรมการคาบนเคร อขายอนเทอรเนต (e-Commerce) เพอการซอขายตรงสผบรโภค ในภาคการศกษากมการใชประโยชนในการเรยนรออนไลน (e-Learning) โรงเรยน สถาบนการศกษาหลายแหงกาลงเรงพฒนาระบบการจดการเรยนการสอนออนไลน เพอแกไขปญหาการขาดแคลน ครและผเชยวชาญในบางสาขาวชา ใหสามารถใชบทเรยนรวมกนไดในกลมสถานศกษาทม หลกสตรเดยวกน ในหนวยงานภาครฐทสามารถนาเอาเทคโนโลยอนเทอรเนตมาใชงานและ องคกร

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

3

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

ประโยชนและโทษของเครอขายอนเทอรเนต อนเทอรเนต (Internet) นบวาเปนเทคโนโลยทมบทบาทมากในปจจบน เพราะเปน

เครอขายของโลกทเชอมเอาเครองคอมพว เตอรจากตางถน ตางเมอง ตาง ประเทศเขาดวยกนเปนโครงขาย คลายดงใยแมงมม (เครอขายเวลดไวดเวบ www) มการตดตอสอสารกนผานเครอขายน เชน การใชอเมล (e-mail) ตดตอสอสารกน แทนการเขยน-อานจดหมายบนกระดาษ การถายโอน /แลกเปลยนขอมล (ftp) ไปมาระหวางเครองคอมพวเตอรทอยหางไกลกน การส บคนหาขอมลผานSearch engine เชน Google, Bing หรอการใชงานเวบไซตสงคมออนไลนหลากหลายเพอเผยแพรขอมลสวนบคคล เชน Hi5, Facebook, Twitter, Blog เปนตน

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

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

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

4

หองสมดขนาดใหญหนงสอนบพนเลม คนหางายขนเมอถกเกบเปนสอดจตอล

ในทางการศกษาเวบไซตเปนเสมอนหองสมดดจตอลขนาดใหญ ทมขอมลมากมาย

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

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

1. โรคตดอนเทอรเนต (Webaholic) ถาผใชงานหมกมนเกนไปในการใชงาน ขาดไมไดอย หนาจอคอมพวเตอรทงวน ไมทางานอยางอน เสพตดการสนทนาออนไลน (Chat) การเลนเกม (Game Online) ผทมคณสมบตดงตอไปนอยางนอย 4 อยาง เปนเวลานานอยางนอย 1 ปถอไดวา มอาการตดอนเทอรเนต

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

ตนเองรสกดขน หลอกคนในครอบครวหรอเพอน เรองการใชอนเทอรเนตของตวเอง

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

5

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

มอาการผดปกต อยางเชน หดห กระวนกระวายเมอเลกใชอนเทอรเนต ใชเวลาในการใชอนเทอรเนตนานกวาทตวเองไดตงใจไว

2. เรองอนาจารผดศลธรรม (Pornography/Indecent Content) เรองของขอมลตางๆ ทมเนอหาไปในทางขดตอศลธรรม ลามกอนาจาร หรอรวมถงภาพโปเปลอยตางๆ นนเปนเรองทมมานานพอสมควรแลวบนโลกอนเทอรเนต แตไมโจงแจงเนองจากสมยกอนเปนยคท WWW ยงไมพฒนามากนก ทาใหไมมภาพออกมา แตในปจจบนภ าพเหลานเปนทโจงแจง ปรากฏบนอนเทอรเนตคนหาไดงาย และสงเหลานสามารถเขาสเด กและเยาวชนไดรวดเรว โดยผปกครองไมสามารถทจะใหความดแลไดเตมท เพราะวาอนเทอรเนตนนเปนโลกทไรพรมแดนและเปดกวางทาใหสอเหลาน สามรถเผยแพรไปไดรวดเรว จนเราไมสามารถจบกมหรอเอาผดผททาสงเหลานขนมาได รวมทงกฎหมายในแตละประเทศก มความแตกตางกน ทงเรองขอหามและบทลงโทษ

3. การโจมตจากไวรสและซอฟทแวรอนตราย (Virus, Worm, Spyware, Trojan, Malware) ในโลกของเครอขายนนคอนขางจะอนตรายจากการเชอ มโยงเครองคอมพวเตอรทไรขอบเขต จงอาจมการรบ-สงไฟลทมอนตรายตอระบบปฏบตการ และงานสาคญในเครองคอมพวเตอรได ซงเกดจากการกระทาของมนษยทมจดประสงคแตกตางกนไป ทงเพอปกปองสทธแหงซอฟทแวรท ตนเองผลตขน หรอเพอทาการโจรกรรมขอมลสา คญของผอน ซอฟทแวรอนตรายเหลานไดแก

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

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

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

6

Spyware = ไมแพรเชอไปตดไฟลอนๆ ไมสามารถสงตวเองไปยงคอมพวเตอรเครอง อนๆ ได ตองอาศยการหลอกลวงผใชงานใหดาวโหลดเอาไปใสเครองเอง เหมอนกบโทรจน หรออาศยชองโหวของ web browser ในการตดตงตวเองลงในเครอง เชน มหนาตาง pop-up ใหคลกยนยนหรอยกเลกการกระทาใดๆ ทผใชงานไมทนสงเกต และเกดความราคาญ จงกดปม Yes/No, OK/Cancel เพอปดหนาตางไป แตในความจรงท กปมดงกลาวถกตงคาไวเปนการยนยนการตดตง สปายแวรเหลานทงหมด (วธแกไข ใหคลกทปมกากบาทมมบนขวาเพอปดหนาตางนน ) การกระทาทมผลตอคอมพวเตอร คอ รบกวนและละเมดความเปนสวนตวของผ ใช งาน

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

worm, trojan, spyware, keylogger, hack tool, dialer, phishing, toolbar, BHO และอนๆ

Phishing = เปนเทคนคการทา social engineer โดยใชอเมลลเพอหลอกใหเหยอหลงเชอ เขาไปยงเวบไซตหลอกลวง กระทาการเปดเผยขอมลการทาธรกรรมทางการเงนบนอนเตอรเนตเชน แกไขขอมล บตรเครดตหรอแกไข online bank account

นอกจากน ยงมเรองหลอ กหลวงตางๆ อกมากมายทกลายเปนขาวใหเราไดรบทราบอยเสมอ

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

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

7

การนาเสนอขอมล บนเวบไซต การนาเสนอขอมลบนเวบไซตนนมลกษณะเดนกวาการนาเส นอดวยเอกสารสงพมพ เพราะ

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

เวบไซตเปนเอกสาร HTML (Hyper Text Markup Language) ทถกพฒนาขนโดย ทม เบอรเนอรส-ล (Tim Berners-Lee) แหงศนยปฏบตการวจยทางอนภาคฟสกสของยโรป (CERN) ซงตงอยทกรง เจนวา สวตเซอรแลนด เมอป ค.ศ. 1989 ในครงแรก ทมเพยงคดอานวยความสะดวกใหแกบรรดานกวทยาศาสตรของสถาบนใหคนหาขอมลงายขน จงไดคดประดษฐตวอกษรทมความสามารถในการสอสารขอมลได เรยกวา “ไฮเปอรเทกซ” (Hyper Text)

เมอไดตวอกษรทมคณสมบตพเศษแลว สงทพฒนาขนตอจากไฮเปอรเทกซกคอ เครองมอสาหรบอานตวอกษรทเขาประดษฐขน และเรยกเครองมอนวา “บราวเซอร” (Browser) เพยง 3 ปหลงจากกาเนดไฮเปอรเทกซขนมา โปรแกรมบราวเซอรตวแรกชอ Mosaic ซงทางานบนระบบปฏบตการยนกซ (X-Windows) กสรางปรากฏการณใหมขนมาในระบบการสอสารขอมลบน อนเทอรเนต และยงเปนแมแบบของบราวเซอรตวอนๆ เชน Internet Explorer, Safari, Mozilla Firefox เปนตน และกอใหเกดกระแสโลกไรพรมแดนขนมาจนถงปจจบน

เมอเราเชอมตอเขาสเครอขายอนเทอรเนต และใชบราวเซอรในการคนหาขอมล สงทปรากฏในหนาตางบราวเซอรคอ โฮมเพจ หรอเวบเพจ ทถกสรางมาจากภาษา HTML แมวาในปจจบนนจะมการสรางเวบเพจจากโปรแกรมสรางเวบมากมายหลากหลายภาษา เชน PHP, ASP, JSP แตใน ทกๆ โปรแกรมเหลานกมพนฐานมาจากคาสงภาษา HTML อยนนเอง

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

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

8

เวบไซต หมายถง กลมของหนาเวบเพจทรวมกน และถกอางถงวาตงอยทใด เปรยบเหมอนทวางหนงสอเลมนนๆ วาอยทชนใด หงใด เราจะพบวา การบอกตาแหนงนนจะระบเปนชอ URL (Uniform Resource Locator) เชน http://www.krumontree.com

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

ลกษณะเดนของการนาเสนอขอมลเวบเพจ (Hyper Text) ดวยความสามารถในการเชอมโยงขอมลไปยงจดอนๆ บนหนาเวบไซตเดยวกน หรอ

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

The Web is a Graphical HyperText Information System. การนาเสนอขอมลผานเวบ เปนการนาเสนอดวยขอมลทสามารถเรยกหรอโยงไปยงจดอนๆ ในระบบกราฟก ซงทาใหขอมลนนๆ มจดดงดดใหนาเรยกชม

The Web is Cross-Platform. เอกสาร HTML ไมยดตดกบระบบปฏบตการ (Operating System : OS) เนองจากขอมลถกจดเกบเปน Text File ดงนนไมวาจะถกเกบไวในคอมพวเตอรทใชระบบปฏบตการ เปน UNIX, Linux, Mac OSX, Windows กสามารถเรยกดจากคอมพวเตอรทใชระบบปฏบตการตางจากคอมพวเตอรทเปนเครองบรการเวบได

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

The Web is interactive. การทางานบนเวบเปนการทางานแบบโตตอบกบผใชโดยธรรมชาตอยแลว ดงนน เวบจงเปนระบบโตตอบ (Interactive) ในตวมนเองเรมตงแตผใชเปด โปรแกรมบราวเซอร (Browser) พมพชอเรยกเวบ (URL) เมอเอกสารเวบแสดงผลผานบราวเซอร ผใชกสามารถคลกเลอกรายการ หรอขอมลทสนใจ อนเปนการทางานแบบโตตอบไปในตวนนเอง

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

9

หลกการออกแบบเวบไซต (Web Design) เวบไซตเปนสอทไดรบความนยมอยางมากบนเครอขาย อนเตอรเนต เพราะเวบไซตเปนสอ

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

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

องคประกอบของการออกแบบเวบไซต การออกแบบเวบไซตทมประสทธภาพนนตองคานงถง องคประกอบสาคญดงตอไปน

1. ความเรยบงาย (Simplicity) หมายถง การกาจด องคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก เลอกเสนอสงทเรา

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

ตวอยาง เวบไซตทมการออกแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก เชน เวบไซตของบรษท Apple, Adobe, Microsoft หรอ Nokia

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

10

2. ความสมาเสมอ (Consistency) หมายถง การสรางความสมาเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบ

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

3. ความเปนเอกลกษณ (Identity) ในการออกแบบเวบไซตตองคานงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะ

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

4. เนอหา (Useful Content) เนอหา ถอเปนสงสาคญทสดในเวบไซต ตอง มความสมบรณและไดรบการปรบปรงพฒนา

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

5. ระบบเนวเกชน (User-Friendly Navigation) เปนสวนประกอบทมความสาคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความส บสน

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

11

6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal) ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคล เปนสาคญ แตโดยรวม

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

7. ความสะดวกของการใชในสภาพตางๆ (Compatibility) การใชงานของเวบไซตนนไมควรมขอบ เขตจากด กลาวคอ ตองสามารถใชงานไดดใน

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

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

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

9. ความคงทของการทางาน (Function Stability) ระบบการทางานตางๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบ

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

12

การออกแบบเวบไซต ในการออกแบบเวบไซตนน มขนตอนและ กระบวนการตางๆ มากมาย เพอใหเวบไซตม

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

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

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

กาหนดเปาหมายของเวบไซต ขนตอนแรกของการออกแบบเวบไซต คอการกาหนดเปาห มายของเวบไซตใหแนชด

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

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

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

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

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

13

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

ขอมลหลกทควรมอยในเวบไซต เมอเราทราบถงความตองการทผใชตองการไดรบเมอเขาชมเวบไซตหนงๆ แลว เราก

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

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

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

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

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

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

การออกแบบเวบไซต ตองคานงถง 1. กาหนดเปาหมายของเวบไซต วาจดมงหมายของเราทสรางเวบไซตขนมาเพออะไร

ใครคอกลมเปาหม ายในการเขาชม สงทตองการนาเสนอคออะไร

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

14

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

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

4. ความเรยบงาย เวบทอานงายสบายตา ไมซบซอน ใชง านสะดวก มการจดหมวดหมทด ใชสเหมาะสม จะไดเปรยบเวบทดสบสนวนวาย

5. ความเปนหนงเดยว (Unity) เวบเพจในแตละหนาเปนไปในทศทางเดยวกน ตอเนอง ทงการออกแบบ สสน และเมนทางเลอก ไมใชการออกแบบสลกกวาด ทเปลยนไปในทกหนา

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

7. สรางเอกลกษณ รปแบบของเวบไซตทสามารถสะทอนถงเอกลกษณและลกษณะเดนขององคกรนนได เชน การใชชดส ช นดตวอกษร รปภาพกราฟก

8. มระบบนาทางทด (Navigator bar) หมายถงเมนหรอปมนาทางไปสเนอหาตางๆ สะดวกทงการเขาชมในเนอหาทลกเขาไป และสามารถยอนกลบมายงหวขออนๆ ไดงาย ไม ซบซอนเปนเขาวงกตยากตอการเขาชม

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

10. ลดขนาดภาพใหเหมาะสม (Fixed Image Size) ภาพทมขนาดใหญจะทาใ หมการใชเวลาในการโหลดภาพนานจนผชมเบอทจะรอคอย ควรใชโปรแกรมตกแตงภาพลดขนาดใหเหมาะสมกบพนทในการแสดงผล

11. โหลดไมชา หนาไมยาว (Fast Load) เนอหาภายในเวบเพจโดยปกตไมควรยาวเกน กวา 3 หนาจอ (เทากบ 2 หนากระดาษ A4) เพอใหผชมไดสะดวกในการชม โหลดไดเรว ถามเนอหามากควรแยกเปนหนายอยแลวทาลงกเชอมโยงไปยงแตละหวขอ

12. มคาถามคาตอบ (FAQ) ทกคาถามทผชมสงสยตองสามารถถามและไดรบคาตอบเสมอ อาจเปนกระดานถาม-ตอบ สมดเยยม จะทาใหผชมรสกดๆ กบเวบของคณ

13. ตดตอไดสะดวก นนคอตองมตราสญล กษณ ชอหนวยงาน /องคกร ทอยและหมายเลขโทรศพท อเมลทตดตอได และถามแผนทสาหรบแสดงทตงดวยยงด

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

15

14. หมนปรบปรงเนอหาใหสดใส ทนสมยใหมเสมอ เวบไซตทไดรบความนยมสวนใหญ เปนเพราะมการปรบปรงเนอหา (Update) อยางสมาเสมอ เพมเตมขาวส ารใหมๆ ตอเนอง ใสประกาศเชญชวนใหรวมกจกรรม

การออกแบบโครงสรางเวบไซต (Site Structure Design) การออกแบบเวบไซตบนเครอขายอนเทอรเนต (Website) จะเหมอนกบการสรางบานทเรา

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

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

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

16

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

จดตามกลมเนอหา (Content-based Structure) จดตามกลมผชม (User-based Structure)

รปแบบของโครงสราง เวบไซต

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

เวบไซตทมการนาเสนอขอมลแบบทละขนตอน มกจะพบในกรณการนาเสนอภาพในลกษณะ Presentation หรอ Directory Search

แบบระดบชน (Hierarchy) เหมาะสาหรบเวบไซตทมจานวนเวบเพจมากขน เปนรปแบบท

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

เปนการนาขอดของรปแบบทง 2 ขางตนมาผสมผสานกน

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

17

หนาตาและสสนของเวบไซต คงตองจนตนาการหรอหลบตาวาดฝนถงหนาตาและสสนของเวบไซตของเราวาควรจะ

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

โดยทวๆ ไป เวบไซตสวนใหญจะมโครงสรางทยอมรบวาเปนมาตรฐานอย 3 แบบ คอ

แบบท 1 แบบท 2 แบบท 3

แบบท 1 จะประกอบดวยพนทสวนหวของหนาดานบน เมนทางซายมอและสวนแสดง เนอหาในดานขวามอ

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

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

โครงสรางทง 3 แบบจะมสวนประกอบหลกอย 3 สวน คอ

1. สวนหวเรอง เปนสวนทจะบรรจตรา /เครองหมาย /สญลกษณของเวบไซตนน(หนวยงานหรอองคกร ) ซงจะนยมวางไวทตาแหนงมมซายบนจะเหมาะสมทสด (ในวงกลม : ผลจากการวจย ตาแหนงทไดรบความนยมในการวางโลโกคอ ซาย 74% กลาง 20% ขวา 6%) ดานขวามออาจวางแบนเนอรโฆษณากจกรรมตางๆ ได

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

18

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

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

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

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

ระบบสทแสดงบนจอคอมพวเตอร มระบบการแสดงผลผานหลอดลา แสงทเรยกวา CRT

(Cathode ray tube) โดยมลกษณะระบบสแบบบวก อาศยการผสมของของแสงสแดง สเขยว และสนาเงน หรอระบบส RGB สามารถกาหนดคาสจาก 0 ถง 255 ได จากการรวมสของแมสหลกจะทาใหเกดแสงสขาว มลกษณะเปนจดเลก ๆ บนหนาจอไมสามารถมองเหนดวยตาเปล าได จะมองเหนเปนสทถกผสมเปนเนอสเดยวกนแลว จดแตละจดหรอพกเซล (Pixel) เปนสวนประกอบของภาพบนหนาจอคอมพวเตอร โดยจานวนบตทใชในการกาหนดความสามารถของการแสดงสตาง ๆ เพอสรางภาพบนจอนนเรยกวา บตเดป (Bit-depth)

รปภาพระบบส RGB จากเวบไซต www.webstyleguide.com

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

19

มด สวาง 0 1 2 3 4 5 6 7 8 9 A B C D E F

ในภาษา HTML มการกาหนดสดวยระบบเลขฐานสบหก ซงมเครองหมาย (#) อยดานหนาและตามดวยเลขฐานสบหกจานวนอกษรอก 6 หลก โดยแตละไบต (byte) จะมตวอกษรสองตว แบงออกเปน 3 กลม (#RRGGBB) เชน #00FF00

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

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

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

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

3. สโทนกลาง (Neutral Colors) สทเปนกลาง ประกอบดวย สดา สขาว สเทา และสนาตาลกลมสเหลานคอ สกลางทสามารถนาไปผสมกบสอนๆ เพอใหเกดสกลางขนมา

สโทนรอน

สโทนเยน

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

20

ตวอยางเวบไซตบรษทผผลตรถยนตเลอกสเทาดภมฐานมนคง

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

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

http://www.rookienet.com เลอกชมในหมวด Web Gallery

ตวอยางเวบไซตของสายการบนทเลอกโทนสมวงของกลวยไม

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

21

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

ท าใหเกดความสะดวกร วดเรว และมความสวยงามมากขน บางโปรแกรมมไฟลตนแบบ (Templates) มาใหพรอมสาหรบนามาแกไขใหเปนแบบของเราไดงาย ซงโปรแกรมสรางเวบไซตจะแบงออกเปน 2 กลม คอ

1. โปรแกรมชวยในการเขยนดวยภาษา HTML สาหรบผทมความชานาญในการใชคาสงจะชอบใชโปรแกรมชนดน บางโปรแกรมมมาพรอมกบระบบปฏบตการไมตองซอเพม เชน ในระบบปฏบตการวนโดวจะมโปรแกรมเลกๆ เชน Notepad, Wordpad ในระบบปฏบตการลนกสจะม Quanta Plus, Screem HTML/XML Editor ในระบบปฏบตการ Mac OSX จะม Text Editor และมบางโปรแกรมทมผพฒนาออกจาหนาย เชน EditPlus, Homesite บางโปรแกรมกมผพฒนาออกมาแจกจายใหใช กนฟรๆ เชน HTMLAssistant, CoffeeCup, ThaiHTML เปนตน

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

2. โปรแกรมชวยในการเขยนแบบเหนอยางไรไดอยางนน (WYSIWYG : What You See

It, What You Get) เปนโปรแกรมทไดรบการกลาวถงและนยมใชกนมากทสดไดแก Adobe

Macromedia Dreamweaver, MS FrontPage, Namo WebEditor เปนตน ขอดคอใชงานงายเหมอนกบการพมพเอกสารในโปรแกรม ประมวลผลคาทวไป สามารถใชเมาสคลกลากปรบแตงได

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

22

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

ตวอยางโปรแกรมสรางเวบ Adobe Dreamweaver CS4 โปรแกรมเหลานแมจะสรางไดงายดาย แตเบองหลงของการทางานกคอการสรางโคดภาษา

HTML เมอบนทกเกบไฟล งานรปแบบการจดเกบกยงคงใชภาษา HTML เปนหลกอยเชนเดม

หนาตางโปรแกรมออกแบบเวบ Golive, MS Frontpage, Namo Webeditor, NetObjects Fusion

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

23

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

ภาพแสดงโหมดออกแบบและโหมดแสดงโคดของ Adobe Dreamweaver CS4 การเรยนรภาษา HTML จะเปนพนฐานสาคญของการเขยนเวบไซตดวยภาษาขนสงขน เชน

การเขยนคาสงเพอตดตอกบฐานข อมลในภาษา ASP, PHP, JSP และอนๆ โดยเฉพาะในปจจบนทนยมเอาระบบบรหารจดการเนอหา (CMS = Contents Management System) มกจะใชภาษา ASP, PHP ในการจดการเวบไซต ถาตองการแกไขการแสดงผลในจดตางๆ ตองมความรภาษา HTML ดวยจงจะแกไขไดรวดเรว

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

อนเทอรเนตและการสอสาร

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

24

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

กจกรรมดงน 1. สารวจหาเวบไซตยอดนยมทงของไทยและตางประเทศ จานวน 10 เวบไซต โดยวด

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

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

หมายเหต เวบไซตของกลมอาจเลอกตามความสนใจ ของกลมหรอตามคาแนะนาของ ครผสอน

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

คาถามทายบท 1. จงอธบายความหมายของอนเทอรเนต และบรการบนเครอขาย 2. จงบอกประโยชนและโทษของอนเทอรเนตทมผลกระทบตอการดารงชวตประจาวน 3. จงบอกความหมายของเวบไซต เวบเพจ โฮมเพจและบราวเซอร มาพอสงเขป 4. จงบอกขนตอนการออกแบบเวบไซตใหมความนาสนใจและช วนตดตาม เปนขนตอน 5. จงบอกชอโปรแกรมชวยสรางเวบเพจทนกเรยนรจกหรอเคยใชงานมาอยางนอย 3 ชอ