e-learning for teaching in thai...

โครงการ สอการเรยนการสอน เรองกาพย E-Learning for Teaching in Thai Poem

จดท าโดย นายภรวฒน ค าหอง นายปณณพฒน ธปตพศ

โครงการนเปนสวนหนงของการศกษาตามหลกสตรประกาศนยบตรวชาชพ สาขาวชาคอมพวเตอรธรกจ

วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2562

ค

กตตกรรมประกาศ

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

ง

ค ำน ำ

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

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

คณะผจดท า

31 มกราคม 2563

ข

บทคดยอ หวขอโครงการ สอการเรยนการสอน เรอง กาพย E-Learning for Teaching in Thai Poem ผจดท าโครงการ นายภรวฒน ค าหอง

นายปณณพฒน ธปตพศ อาจารยทปรกษา อาจารยสมาพร เยนด อาจารยทปรกษารวม อาจารยฐตรตน นยพฒน สาขาวชา สาขาวชาคอมพวเตอรธรกจ สถาบน วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2559 --------------------------------------------------------------------------------------------------------------------------

บทคดยอ โครงการสอการเรยนการสอน เรองกาพย วตถประสงคโครงการ คณะผจดท าไดเหนความส าคญของเรองกาพยจงไดจดท าประวตของกาพย เพอดงดดความสนใจของบคคลปจจบนท าใหเรยนรเกยวกบความร เรอง กาพย เพอน าไปศกษา และเรยนร ขอบเขต เปนสงทนาสนใจในการจดท าโครงงานครงน คณะผจดท าตองการใหคนรนใหมไดรจกประวตความเปนมาของกาพยตาง ๆ วาในแตละกาพยมความเปนมาอยางไรใครคอผเขยน ซงโครงการ สอการเรยนการสอน เรองกาพย ทจดท าออกมาแลว มหนา Index Home แถบ Menu เนอหา ประวต วดโอตาง ๆ ขอนาไฟลของเวบไซตมทงหมด 175 KB ไฟล ผลการด าเนนงานคอเวบไซตมการออกแบบใหมแทบทงหมด ดานเวบไซตม 7 เมน ความเปนมาของกาพย ลกษณะการแตง เรองยอกาพย ประเพณการแหเรอ คณคาดานวรรณศลป ถอนค าประพน ศลปะการแหเรอ พอคลกเขาไปแตละเมนแลวจะเจอรป และตวอกษรทตกแตงสวยงาม ประโยชนของสอการเรยนการสอน เรองกาพยนนสามารถน าไปใชเพอสอสารตาง ๆ ได และสามารถน าไปสอนแกผอนเพอศกษาหรอสานตอในชวตประจ าวนได

ฎ

สารบญตาราง หนา

ตารางท 1.1 แผนการด าเนนงาน (Gantt Chart) 3 ตารางท 1.2 งบประมาณการด าเนนงาน 4 ตารางท 5.1 แสดงขนาดของไฟลโปรแกรม 69 ตารางท 5.2 สรปเวลาการท างานจรง (Gantt Chart) 73 ตารางท 5.3 สรปคาใชจายในการด าเนนงานจรง 74

ช

สารบญรป หนา

รปท 2.1 ทฤษฎส 8 รปท 2.2 ลกษณะของส 10 รปท 2.3 แมส 11รปท 2.4 วงจรส 12 รปท 2.5 วรรณะของส 13 รปท 3.1 การออกแบบ Sitemap 17 รปท 3.2 การออกแบบ Site map (ตอ) 17 รปท 3.3 การออกแบบ Site map (ตอ) 18 รปท 3.4 การออกแบบหนา INDEX 19 รปท 3.5 การออกแบบหนาหลก 19 รปท 3.6 การออกแบบหนา ความเปนมของกาพย 20 รปท 3.7 การออกแบบหนา ความรทไดจากเรอง 20 รปท 3.8 การออกแบบหนา การพจารณาคณคา 21 รปท 3.9 การออกแบบหนา ลกษณะพเศษของกาพยเหเรอ 21 รปท 3.10 การออกแบบหนา คณคาทไดรบ 22 รปท 3.11 การออกแบบหนา คณคาดานสงคม 22 รปท 3.12 การออกแบบหนา คณคาดานเนอหา 23 รปท 3.13 การออกแบบหนา ความแตกตางของบทเหเรอ 23 รปท 3.14 การออกแบบหนา ประวตเจาฟาธรรมธเบศร 24 รปท 3.15 การออกแบบหนา ลกษณะวรรณคดนราศในกาพยเหเรอ 24 รปท 3.16 การออกแบบหนา ลกษณะพเศษของกาพยเหเรอเจาฟาธรรมาธเบศร 25 รปท 3.17 การออกแบบหนา ลกษณะท ๑ 25 รปท 3.18 การออกแบบหนา ลกษณะท ๒ 26 รปท 3.19 การออกแบบหนา ลกษณะท ๓ 26 รปท 3.20 การออกแบบหนา ลกษณะการแตง 27 รปท 3.21 การออกแบบหนา กาพยยาน 11 27 รปท 3.22 การออกแบบหนา โคลงสสภาพ 28 รปท 3.23 การออกแบบหนา เนอหาของกาพย 28

ซ

สารบญรป (ตอ)

หนา รปท 3.24 การออกแบบหนา ตอนท ๑ 29 รปท 3.25 การออกแบบหนา ตอนท ๒ 29 รปท 3.26 การออกแบบหนา ตอนท ๓ 30 รปท 3.27 การออกแบบหนา ตอนท ๔ 30 รปท 3.28 การออกแบบหนา เรองยอกาพย 31 รปท 3.29 การออกแบบหนา บทเหชมเรอ 31 รปท 3.30 การออกแบบหนา บทเหชมไม 32 รปท 3.31 การออกแบบหนา บทเหชมปลา 32 รปท 3.32 การออกแบบหนา บทเหชมนก 33 รปท 3.33 การออกแบบหนา ประเพณการเหเรอ 33 รปท 3.34 การออกแบบหนา เรอพระราชพธและประเพณการเหเรอ 34 รปท 3.35 การออกแบบหนา กวผยงใหญแหงอยธยา 34 รปท 3.36 การออกแบบหนา ตวอยางคณคาดานวรรณศลป 35 รปท 3.37 การออกแบบหนา ความรประกอบ 35 รปท 3.38 การออกแบบหนา ความแตกตางของบทเหเรอ 36 รปท 3.39 การออกแบบหนา คณคาทางดานวรรณศลป 36 รปท 3.40 การออกแบบหนา ถอดค าประพน 37 รปท 3.41 การออกแบบหนา การใชถอยค า 37 รปท 3.42 การออกแบบหนา สมผสสระ 38 รปท 3.43 การออกแบบหนา การเลยนเสยงธรรมชาต 38 รปท 3.44 การออกแบบหนา การใชส านวนโวหาร 39 รปท 3.45 การออกแบบหนา เรอทงหมดทชม 39 รปท 3.46 การออกแบบหนา สาระนาร 40 รปท 3.47 การออกแบบหนา ขอคดทไดจากเรองกาพยเหเรอ 40 รปท 3.48 การออกแบบหนา การเหเรอ 41

ฌ

สารบญรป(ตอ)

หนา รปท 3.49 การออกแบบหนา ศลปะการเหเรอ 41 รปท 3.50 การออกแบบหนา วตถประสงคการเหเรอ 42 รปท 3.51 การออกแบบหนา หลกฐานการเหเรอ 42 รปท 3.52 การออกแบบหนา ประเภทของการเหเรอ 43 รปท 3.53 การออกแบบหนา ลลาการเหเรอ 43 รปท 3.54 การออกแบบ ผจดท า 44 รปท 4.1 เปดไฟลในพนททเกบไวกอนหนาน 47 รปท 4.2 เลอนหาไฟลทชอวา Index.html คลกขวา > Open with > Google Chrome 47 รปท 4.3 แสดงหนา Index 48 รปท 4.4 แสดงหนา Home 48 รปท 4.5 แสดงหนาความเปนมาของกาพย 49 รปท 4.6 แสดงหนาความเปนมาของกาพย > ความรทไดจากเรอง 49 รปท 4.7 แสดงหนาความเปนมาของกาพย > การพจารณาคณคา 50 รปท 4.8 แสดงหนาความเปนมาของกาพย > ลกษณะพเศษของกาพยเหเรอ 50 รปท 4.9 แสดงหนาความเปนมาของกาพย > ความแตกตางของบทเหเรอ 51 รปท 4.10 แสดงหนาความเปนมาของกาพย > ลกษณะวรรณคดนราศในกาพยเหเรอ 51

รปท 4.11 แสดงหนาลกษณะการแตง 52 รปท 4.12 แสดงหนาลกษณะการแตง > กาพยยาน ๑๑ 52 รปท 4.13 แสดงหนาลกษณะการแตง > โคลงสสภาพ 53 รปท 4.14 แสดงหนาลกษณะการแตง > เนอหาของกาพย 53 รปท 4.15 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 1 54 รปท 4.16 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 2 54 รปท 4.17 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 3 55 รปท 4.18 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 4 55 รปท 4.19 แสดงหนาเรองยอกาพย 56 รปท 4.20 แสดงหนาเรองยอกาพย > บทเห ชมเรอ 56

ญ

สารบญรป (ตอ)

หนา

รปท 4.21 แสดงหนาเรองยอกาพย > บทเห ชมไม 57 รปท 4.22 แสดงหนาเรองยอกาพย > บทเห ชมปลา 57 รปท 4.23 แสดงหนาเรองยอกาพย > บทเห ชมนก 58 รปท 4.24 แสดงหนาประเพณการเหเรอ 58 รปท 4.25 แสดงหนาประเพณการเหเรอ > เรอพระราชพธและประเพณการเหเรอ 59

รปท 4.26 แสดงหนาประเพณการเหเรอ > ต านานเหเรอ 59 รปท 4.27 แสดงหนาคณคาดานวรรณศลป 60 รปท 4.28 แสดงหนาคณคาดานวรรณศลป > ความรประกอบ 60 รปท 4.29 แสดงหนาคณคาดานวรรณศลป > ความแตกตางการเหเรอ 61 รปท 4.30 แสดงหนาคณคาดานวรรณศลป > คณคาดานวรรณศลป 61 รปท 4.31 แสดงหนาถอดค าประพน 62 รปท 4.32 แสดงหนาถอดค าประพน > การใชถอยค า 62 รปท 4.33 แสดงหนาถอดค าประพน > สมผสสระและสมผสผยญชนะ 63 รปท 4.34 แสดงหนาถอดค าประพน > กาพยเหเรอ 63 รปท 4.35 แสดงหนาถอดค าประพน > การเหเรอ 64 รปท 4.36 แสดงหนาศลปะการเหเรอ 64 รปท 4.37 แสดงหนาศลปะการเหเรอ > วตถประสงคของการเหเรอ 65 รปท 4.38 แสดงหนาศลปะการเหเรอ > หลกฐานการเหเรอ 65 รปท 4.39 แสดงหนาศลปะการเหเรอ > หลกฐานการเหเรอ 66 รปท 4.40 แสดงหนาศลปะการเหเรอ > ประเภทของการเหเรอ 66 รปท 4.41 แสดงหนาศลปะการเหเรอ > ลลาการเหเรอ 67 รปท 4.42 ผจดท า 67

จ

สารบญ

หนา

หนาอนมต ก บทคดยอ ข กตตกรรมประกาศ ค ค าน า ง สารบญ จ สารบญรป ช สารบญตาราง ฎ บทท 1 บทน า 1.1 ภมหลงและความเปนมา 1 1.2 วตถประสงคโครงการ 2 1.3 ขอบเขตการศกษา 2 1.4 ประโยชนทคาดวาจะไดรบ 2 1.5 แผนการด าเนนงาน 3 1.6 เครองมอทใช 4 1.7 งบประมาณในการด าเนนการ 4 บทท 2 ระบบงานและทฤษฎทเกยวของ 2.1 ระบบงานในปจจบน 5 2.2 ปญหาทเกดขนในระบบงานปจจบน 6 2.3 ทฤษฎทเกยวของ 6 2.4 การน าคอมพวเตอรเขามาใชในระบบงาน 16

ฉ

สารบญ (ตอ) หนา บทท 3 การออกแบบงานดวยระบบคอมพวเตอร

3.1 การออกแบบ Site map 17 3.2 การออกแบบ Story Board 19 3.3 การออกแบบสงน าเขา (Input Design) 44 3.4 การออกแบบสงน าออก (Output Design) 46

บทท 4 การพฒนาระบบ 4.1 เครองมอและอปกรณทใช 47 4.2 โปรแกรมทงหมดทใชในการพฒนา 47

4.3 วธการใชงานโปรแกรม 48 บทท 5 สรปการท าโครงการ 5.1 สรปผลโครงการ 69 5.2 ปญหาและอปสรรคในการด าเนนงาน 72 5.3 สรปเวลาการท างานจรง (Gantt Chart) 73 5.4 สรปคาใชจายในการด าเนนงานจรง 74 บรรณานกรม 75 ภาคผนวก

- ใบขอเสนออนมตโครงการระบบคอมพวเตอร (ATC.01) 76 - ใบขอเสนออาจารยทปรกษารวมโครงการ (ATC.02) 77 - ใบขอสอบโครงการระบบคอมพวเตอรธรกจ (ATC.03) 78 - ใบรายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) 79 - ใบบนทกการเขาพบทปรกษาโครงการ (ATC.05) 80 - ใบขออนญาตอาจารยทปรกษารวมจดท าเอกสาร (AT.C.06) 81

ประวตผจดท าโครงการ 82

บทท 1

บทน ำ

1.1 ภมหลงและควำมเปนมำ เวบไซต คอสอส ำหรบน ำเสนอขอมลบนเครองคอมพวเตอร ซงตองเปดดวยโปรแกรมเฉพำะทำงทเรยกวำ Web Browser เวบไซต นนสรำงขนดวยภำษำคอมพวเตอรทเรยกวำ HTML (Hyper Text Markup Language) และไดมกำรพฒนำน ำภำษำคอมพวเตอร ภำษำอน ๆ มำรวมพฒนำ เวบไซต ทงนเพอให เวบไซต มควำมสำมำรถเพมมำกขน เชน ภำษำ PHP, ภำษำ SQL และเวบไซตนนมค ำศพทเฉพำะทำงหลำยค ำ เชน เวบเพจ (web page), โฮมเพจ (home page) และลงก (hyperlink) เปนตน ปจจบนกำรออกแบบ เวบไซตไมใชเรองยำกอกตอไป เนองจำกมเครองมอในกำร ออกแบบ เวบไซต ใหเลอกมำกมำย ไมวำจะเปนโปรแกรมส ำเรจรป หรอแมกระทง CMS (Content Management System) อยำง joomla, wordpress, drupal และหนำเวบเพจหลำยหนำ ซงเชอมโยงกนผำนทำงไฮเปอรลงก สวนใหญจดท ำขนเพอน ำเสนอขอมลผำนคอมพวเตอร โดยถกจดเกบไวในเวลดไวดเวบ หนำแรกของเวบไซตทเกบไวทชอหลกจะเรยกวำ โฮมเพจ เวบไซตโดยทวไปจะใหบรกำรตอผใชฟร แตในขณะเดยวกนบำงเวบไซตจ ำเปนตองมกำรสมครสมำชกและเสยคำบรกำรเพอทจะดขอมล ในเวบไซตนน ซงไดแกขอมลทำงวชำกำร ขอมลตลำดหลกทรพย หรอขอมลสอตำง ๆ กำพย มทมำไมทรำบแนชดวำเปนค ำประพนธเดมของไทย หรอรบมำจำกชำตอน ต ำรำกำพยเกำแกทมอยในปจจบนคอ กำพยสำรวลำสน และ กำพยคนถะ แตงเปนภำษำบำล ไมทรำบชอผแตง แตสนนษฐำนกนวำแตงขนในลำนนำสมยพระเจำตโลกรำชแหงลำนนำ ซงตรงกบสมยสมเดจพระบรมไตรโลกนำถแหงกรงศรอยธยำ และเปลยนแปลงมำจำกกำพยมคธเปนกำพยไทยโดยบรบรณประมำณรชสมยสมเดจพระเจำอยหวบรมโกศแหงกรงศรอยธยำ คณะผจดท ำไดเหนควำมส ำคญของเรองกำพยจงไดจดท ำประวตของกำพย เพอดงดดควำมสนใจของบคคลปจจบนท ำใหเรยนรเกยวกบกำรท ำงำนของโปรแกรมตำง ๆ เพอน ำไปศกษำ และเรยนร เปนสงทนำสนใจในกำรจดท ำโครงงำนครงน คณะผจดท ำตองกำรใหคนรนใหมไดรจกประวตควำมเปนมำของกำพยตำง ๆ วำในแตละกำพยมควำมเปนมำอยำงไรใครคอผเขยน

2

1.2 วตถประสงคโครงกำร 1. เพอศกษำกำรสรำงเวบไซตจำกโปรแกรม Dreamweaver CS6 2. เพอศกษำและสรำงโลโกจำกโปรแกรม Photoshop CS6 3. เพอเพอศกษำกำรสรำง Banner จำกโปรแกรม Photoshop CS6

4. เพอศกษำประวตเรองกำพย 1.3 ขอบเขตกำรศกษำ 1. สำมรถเชอมตอหนำเวบไซตไปทตำงๆของเวบไซตได 2. มภำพเคลอนไหวในเวบไซต 3. สำมำรถแสดงควำมคดเหนกบบทควำมได

4. สำมำรถ Click เพอขยำยรปได 5. สำมำรถท ำปมม Share เพอแบงปน LINK หรอหนำเวบไซต ใน Facebook

1.4 ประโยชนทคำดวำจะไดรบ

1. ไดรเรองเกยวกบตวละครในเรองกำพย 2. ไดรบรถงประวตกำรเหเรอ 3. ไดขอคดและประโยชนตำง ๆในเรองกำพย

4. ไดรเกยวกบค ำประพนธ และ ไทยสมยกอน

3

1.5 แผนกำรด ำเนนงำน (Gantt Chart)

ตำรำงท 1.1 แผนกำรด ำเนนงำน (Gantt Chart)

รำยกำร ภำคเรยนท 1 มถนำยน 62 กรกฎำคม 62 สงหำคม 62 กนยำยน 62 ระยะเวลำ

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 อบรมกำรท ำโครงกำรนกศกษำ ปวช.3 และ ปวส.2

11-12 มถนำยน 62

เสนอหวขอ ATC.01โครงกำร รอบท 1 เอกสำรบทท 1

14 มถนำยน 62

ประกำศผลหวขอโครงกำร รอบท 1

17 มถนำยน 62

เสนอหวขอโครงกำร รอบท 2

19 มถนำยน 62

ประกำศผลหวขอ รอบท 2

21 มถนำยน 62

ลงทะเบยนหวขอออนไลน เสนออำจำรยทปรกษำรวม

18-30 มถนำยน 62

สงเอกสำรบทท 2

8-14 กรกฎำคม 62

สงเอกสำรบทท 3

15-31 กรกฎำคม 62

สอบน ำเสนอโครงกำร (รอบเอกสำร)

17 สงหำคม 62

ประกำศผลสอบ (รอบเอกสำร)

22 สงหำคม 62

สงควำมคบหนำโปรแกรม 50%

9-15 กนยำยน 62

สงควำมคบหนำโปรแกรม 60%

16-22 กนยำยน 62

สงควำมคบหนำโปรแกรม 70%

23-30 กนยำยน 62

รำยกำร ภำคเรยนท 2 พฤศจกำยน 62 ธนวำคม 62 มกรำคม 63 กมภำพนธ 63 ระยะเวลำ

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 สงควำมคบหนำ 90%

1-8 พฤศจกำยน 62

สงควำมคบหนำ 100%

9-13 พฤศจกำยน 62

สอบน ำเสนอโครงกำร ระดบ ปวช.3

7 ธนวำคม 62

ประกำศผลสอบ (รอบโปรแกรม)

11 ธนวำคม 62

สงเอกสำรบทท 4

6-19 มกรำคม 62

สงเอกสำรบทท 5

20-26 มกรำคม 63

สงงบประมำณในกำรท ำโครงกำร (แบบออนไลน)

20-30 มกรำคม 63

สงรปเลม ซด ช ำระคำเขำเลม

1-20 กมภำพนธ 63

4

1.6 เครองมอทใชพฒนำโปรแกรม1.

1. โปรแกรม Adobe Dreamweaver CS 6 ใชในกำรสรำงเวบไซต 2. โปรแกรม Adobe Photoshop CS 6 ใชกำรออกแบบหนำเวบไซต 3. โปรแกรม Adobe Illustrator CS 6 ใชในกำรวำดรปตกแตงเวบไซต และปมมตำง ๆ

1.7 งบประมำณกำรด ำเนนงำน

ตำรำงท 1.2 งบประมำณกำรด ำเนนงำน

ล ำดบ รำยกำร จ ำนวน รำคำ (บำท) 1 กระดำษ A4 2 รม 240 2 คำปรนงำน 2 รม 240 3 คำอปกรณเขำเลม 280

รวมเปนเงน 760

บทท 2

ระบบงาน และทฤษฎทเกยวของ

2.1 ระบบงานปจจบน

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

2.2 ปญหาทเกดขนในงานปจจบน 1. ปจจบนกลมผทสนใจในเรอง สอการเรยนการสอนเรองกาพย ยงเขาไมถงขอมลเนองจากขอมลในหนงสอมภาษาทใชสอนคอนขางซบซอน 2. ปจจบนยงไมมเวบสอการเรยนการสอนเรองกาพย 3.อดตทผานมามการจดเกบขอมลเกยวกบ สอการเรยนการสอนเรองกาพย เปน ลกษณะของหนงสอ 2.3 ทฤษฎและระบบงานทเกยวของ 2.3.1 หลกการออกแบบเวบไซต เวบไซตเปนสอทไดรบความนยมอยามากบนอนเตอรเนต ซงเวบไซตเปนสอทอยในความควบคมของผใชโดยสมบรณ กลาวคอ ผใชสามารถตดสนใจเลอกไดวาจะดเวบไซตใดและ จะไมเลอกดเวบไซตใดไดตามตองการจงท าใหผใชไมมความอดทนตออปสรรคและปญหาทเกดจากการออกแบบเวบไซตผดพลาดถาผใชเหนวาเวบทก าลงดอยนนไมมประโยชนตอตวเขา หรอไมเขาใจวาเวบนจะใชงานอยางไรเขากสามารถทจะเปลยนไปดเวบไซตอน ๆ ไดอยางรวดเรวเนองจากในปจจบนมเวบไซตอยมากมาย และยงเวบไซตทเกดขนใหม ๆ ทกวน ผใชจงมทางเลอกมากขน และสามารถเปรยบเทยบคณภาพของเวบไซตตาง ๆ ไดเองเวบไซตทไดรบการออกแบบอยางสวยงาม มการใชงานทสะดวก ยอมไดรบความสนใจจากผใชมากกวาเวบไซตทดสบสนวนวายมขอมลมากมายแตหาอะไรไมเจอ นอกจากนยงใชเวลาในการแสดงผลแตละหนานานเกนไป ซงปญหาเลานลวนเปนผลมาจากการออกแบบเวบไซตทไมดทงสนดงนนการออกแบบเวบไซตจงเปนกระบวนการส าคญในการสรางเวบไซตใหประทบใจผใช ท าใหเขาอยากกลบใหมาเวบไซตเดมอกในอนาคต ซงนอกจากตองพฒนาเวบไซตทดมประโยชนแลวยงตองค านงถงการแขงขนกบเวบไซตอน ๆ อกดวย 2.3.2 องคประกอบของการออกแบบเวบไซต

การออกแบบเวบไซตทมประสทธภาพนนตองค านงถงองคประกอบส าคญดงตอไปน 1. ความเรยบงาย (Simplicity) ไดแก มรปแบบทเรยบงาย ไมซบซอน และในงานไดสะดวก ไมมกราฟกหรอ ตวอกษรทเคลอนไหวอยตลอดเวลา ชนดและสของตวอกษรไม มากจนเกนไปท าใหวนวาย 2. ความสม าเสมอ (Consistency) ไดแก ใชรปแบบเดยวกนตลอดทงเวบไซต เชน รปแบบของหนา สไตลของกราฟกระบบเนวเกชน และโทนส ควรมความคลายคลงกนตลอดทงเวบไซต 3. ความเปนเอกลกษณ (Identity) การออกแบบเวบไซตควรค านงถงลกษณะขององคกร เพราะรปแบบของเวบไซตสะทอนถงเอกลกษณและลกษณะขององคกรนน ๆ เชน ถาเปนเวบไซตของทางราชการ จะตองดนาเชอถอไมเหมอนสวนสนก ฯลฯ

4. เนอหาทมประโยชน (Useful Content) เนอหาเปนสงทส าคญทสดในเวบไซตดงนนควรจดเตรยมเนอหา และขอมลทผใชตองการใหถกตอง และสมบรณมการปรบปรง และเพมเตมใหทนเหตการณอยเสมอ เนอหาไมควรซ ากบ เวบไซตอน จงจะดงดดความสนใจ 5. ระบบเนวเกชนทใชงานงาย (User-Friendly Navigation) ตองออกแบบใหผใชเขาใจงาย และใชงานสะดวกใชกราฟกทสอความหมายรวมกบการอธบายทชดเจนมรปแบบ และล าดบของรายการทสม าเสมอ เชน วางไว ต าแหนง เดยวกนทกหนา 6. ลกษณะทนาสนใจ (Visual Appeal) หนาตาของเวบไซตจะตองมความสมพนธกบคณภาพขององคประกอบตาง ๆ เชน คณภาพของกราฟกทจะตองสมบรณ การใชสการใชตวอกษรทอานงาย สบายตา การใชโทนสทเขากน ลกษณะหนาตาทนาสนใจนนขนอยกบความชอบของแตละบคคล 7. การใชงานอยางไมจ ากด (Compatibility) ผใชสวนใหญสามารถเขาถงไดมากทสดเลอกใชบราวเซอรชนดใดกไดใน การเขาถงเนอหาสามารถแสดงผลไดทกระบบปฏบตการ และความละเอยดหนาจอตาง ๆ กนอยางไมมปญหา เปนลกษณะส าคญส าหรบผใชทมจ านวนมาก 8. คณภาพในการออกแบบ (Design Stability) การออกแบบและเรยบเรยงเนอหาอยางรอบคอบ สรางความรสกวา เวบไซตมคณภาพ ถกตอง และเชอถอได 9. ความคงทของการท างาน (Function Stability) ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรค และตรวจสอบอยเสมอตวอยาง เชน ลงคตาง ๆ ในเวบไซตตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไมเพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปนปญหาทสรางความร าคาญกบผใชเปนอยางมาก 2.3.5 ทฤษฎส ความหมายของทฤษฎส ทฤษฎ หมายถง ความจรงทไดพสจนแลว หรอหลกวชาส หมายถง แสงทมากระทบวตถแลวสะทอนเขาตาเราท าใหเหนเปนสตาง ๆ ทฤษฎส หมายถง หลกวชาทเกยวกบสทสามารถมองเหนไดดวยตา ความสมพนธของมนษยกบส สรรพสงทงหลายในจกรวาลประกอบดวยไปดวยสดงนนสงแวดลอมรอบตวมนษยจงประกอบไปดวยส สจ าแนกออกเปน 2 ประเภท 1. สทเกดจากปรากฏการทางธรรมชาต เชน สของแสง สผวของวตถตามธรรมชาต 2. สทเกดจากการสรางสรรคของมนษย เชน สของแสงไฟฟา สของพล สทใชเขยนภาพ และยอมสวสดตาง ๆ

สคตรงขาม คอสทอยตรงขามกนบนวงลอส หรอวธการจบคงาย ๆ กคอการลากเสนจากสหนงไปตรง ๆ เสนนนไปบรรจบทสใด สองสนนกเปนคกน ประโยชนของสในเวบไซต สสามารถชกน าสายตาผอานใหไปยงทบรเวณในหนาเวบเพจ ผอานจะมการเชอมโยงความรสกกบบรเวณของสในรปแบบทคาดหวงไดการเลอกเฉดสและต าแหนงของสอยางรอบคอบในหนาเวบสามารถน าทางใหผอานตดตามเนอหาในบรเวณตาง ๆ ตามทเราก าหนดได วธนจะเปนประโยชนอยางมากเมอคณตองการใหผอานใหความสนใจกบสวนใดสวนหนงในเวบไซตเปนพเศษ เชน ขอมลใหม โปรโมชนพเศษ หรอบรเวณทไมคอยไดรบความสนใจมากอน - สชวยเชอมโยงบรเวณทไดรบการออกแบบเขาดวยกน ผอานจะมความรสกวาบรเวณทมสเดยวกนจะมความส าคญเทากน วธการเชอมโยงแบบนชวยจดกลมของขอมลทมความสมพนธอยางไมเดนชดเขาดวยกนได - สสามารถน าไปใชในการแบงบรเวณตาง ๆ ออกจากกนท านองเดยวกบการเชอมโยงบรเวณทมสเหมอนกนเขาดวยกนแตในขณะเดยวกนกเปนการแบงแยกบรเวณทมสตางกนออกจากกน - สสามารถใชในการดงดดความสนใจของผอานสายตาผอานมกจะมองไปยงสทมลกษณะเดนหรอผดปกตเสมอ การออกแบบเวบไซตดวยการเลอกใชสอยางรอบคอบ ไมเพยงแตจะกระตนความสนใจของผอานเพยงเทานนแตยงชวยหนวงเหนยวใหพวกเขาอยในเวบไซตไดนานยงขนสวนเวบไซตทใชสไมเหมาะสมเสมอนเปนการขบไลผชมไปสเวบอนทมการออกแบบทดกวา - สสามารถสรางอารมณโดยรวมของเวบเพจ และกระตนความรสกตอบสนองจากผชมไดนอกเหนอจากความรสกทไดรบจากสตามหลกจตวทยาแลว ผชมยงมอารมณ และความรสกสมพนธกบสบางส หรอบางกลมเปนพเศษ นอกเหนอจากการใชสชวยในการออกแบบแลวสยงสามารถสงเสรมเอกลกษณขององคกร หรอหนวยงานนน ๆ ไดดวยการใชสทเปนเอกลกษณขององคกรมาเปน โทนสหลกของเวบไซตการออกแบบเกยวกบสไมใชเรองงาย แมวาจะมกฎเกณฑตาง ๆ ทชวยในการสรางชดส (color scheme) ทมประโยชนมากมาย แตกมแนวทางและความเขาใจผดจ านวนมากทจะน าไปสการสรางชดสทใหความรสกไมเหมาะสม ในบางสถานการณอาจใชสเปนเพยงเครองประดบอยางหนงในการออกแบบ แตในทางตรงกนขาม การใชสทมากเกนไป อาจท าใหไปบดบงองคประกอบอน ๆ ในหนาเวบเพจได ดงนนการเลอกใชสใหเหมาะสมและเกดประโยชนจงเปนเรองส าคญอยางไรกตามทฤษฎเหลานจะไมท าใหคณสามารถเลอกชดสไดในทนททนใด แตอยางนอยกจะชวยน าคณไปในทศทางทถกตองได

คณลกษณะของส สแท (HUE) คอ สทยงไมถกสอนเขาผสม เปนลกษณะของสแททมความสะอาดสดใส เชน แดง เหลอง น าเงน - สออนหรอสจาง (TINT) ใชเรยกสแททถกผสมดวยสขาว เชน สเทา - สแก (SHADE) ใชเรยกสแททถกผสมดวยสด า เชน สน าตาล สสามารถแยกออกเปน 2 ประเภท คอ 1. สธรรมชาต 2. สทมนษยสรางขน สธรรมชาต เปนสทเกดขนเองตามธรรมชาต เชน สของแสงอาทตย สของทองฟายามเชา เยน สของรงกนน า เหตการณทเกดขนเองตามธรรมชาต ตลอดจนสของ ดอกไม ตนไม พนดน ทองฟา น าทะเล สทมนษยสรางขน หรอไดสงเคราะหขน เชน สวทยาศาสตร มนษยไดทดลองจากแสงตาง ๆ เชน ไฟฟา น ามาผสมโดยการทอแสงประสานกน น ามาใชประโยชนในดานการละคร การจดฉาก เวท โทรทศน การตกแตงสถานท แมส (PRIMARIES) สตาง ๆ นนมอยมากมายแหลงก าเนดของสและวธการผสมของสตลอดจนรสกทมตอสของมนษย แตละกลมยอมไมเหมอนกน สตาง ๆ ทปรากฎนนยอมเกดขนจากแมสในลกษณะทแตกตางกบตามชนด และประเภทของสนน แมส คอ สทน ามาผสมกนแลวท าใหเกดสใหม ทมลกษณะแตกตางไปจากสเดมแมส มอยดวยกน 2 ชนด คอ 1. แมสของแสง เกดจากการหกเหของแสงผานแทงแกวปรซม ม 3 ส คอ สแดง สเหลอง และสน าเงน อยในรปของแสงรงส ซงเปนพลงงานชนดเดยวทมส คณสมบตของแสงสามารถน ามาใช ในการถายภาพ ภาพโทรทศน การจดแสงส ในการแสดงตาง ๆ เปนตน 2.แมสวตถธาต เปนสทไดมาจากธรรมชาต และจากการสงเคราะหโดยกระบวนทางเคม ม 3 ส คอ สแดง สเหลอง และน าเงน แมสมวตถธาตเปนแมสทน ามาใชงานกนอยางกวางขวาง ในวงการศลปะ วงการอตสาหกรรม ฯลฯ แมสวตถธาต เมอน ามาผสมกนตามลกเกณฑ จะท าใหเกด วงจรส ซงเปนวงสธรรมชาต เกดจากการผสมกนของแมสวตถธาต เปนสหลกทใชงานกนทวไป ในวงจรส จะแสดงสงตาง ๆ ดงตอไปน วงจรส (Color Circle) สขนท 1 คอ แมส ไดแก สแดง สเหลอง สน าเงน

สขนท 2 คอ สทเกดจาก สขนท 1 หรอแมสผสมกนในอตราสวนทเทากน จะท าใหเกดสใหม 3 ส ไดแก สแดง ผสมกบ สเหลอง ได สสม สแดง ผสมกบ สน าเงน ได สมวง สเหลอง ผสมกบ สน าเงน ได สเขยว สขนท 3 คอ สทเกดจากสขนท 1 ผสมกบสขนท 2 ในอตราสวนทเทากน จะไดสอน ๆ อก 6 ส คอ สแดง ผสมกบ สสม ได สสอมแดง สแดง ผสมกบ สมวง ได สมวงแดง สเหลอง ผสมกบ สเขยว ได สเขยวเหลอง สน าเงน ผสมกบ สเขยว ได สเขยวน าเงน สน าเงน ผสมกบ สมวง ได สมวงน าเงน สเหลอง ผสมกบ สสม ได สสมเหลอง วรรณะของส คอสทใหความรสกรอน-เยน ในวงจรสจะมสรอน 7 ส และสเยน 7 ส ซงแบงท สมวงกบสเหลอง ซงเปนไดทงสองวรรณะ แบงออกเปน 2 วรรณะ 1. สโทนรอน (WARM TONE) ประกอบดวย สเหลอง สสมเหลอง สสม สสมแดง สมวงแดง และสมวง สในวรรณะรอนนจะไมใชสสด ๆ ดงทเหนในวงจรสเสมอไปเพราะสในธรรมชาตยอมมสแตกตางไปกวาสในวงจรสธรรมชาตอกมาก ถาหากวาสใด คอนขางไปทาง สแดงหรอสสม เชน สน าตาลหรอสเทาอมทอง กถอวาเปนสวรรณะรอน

2. สโทนเยน (COOL TONE) ประกอบดวย สเหลอง สเขยวเหลอง สเขยว สเขยวน าเงน สน าเงน สมวงน าเงน และสมวง สวนสอน ๆ ถาหนกไปทางสน าเงน และสเขยวกเปนสวรรณะเยนดงเชน สเทา สด า สเขยวแก เปนตน จะสงเกตไดวาสเหลอง และสมวงอยทงวรรณะรอน และวรรณะเยน ถาอยในกลมสวรรณะรอนกใหความรสกรอน และถาอยในกลมสวรรณะเยนกใหความรสกเยนไปดวย สเหลองและสมวงจงเปนสไดทงวรรณะรอนและวรรณะเยน สหากเราจะแบงออกเปนวงจรของสไลมาตงแตแมส (สขนปฐมภม) สแดง สน าเงน สเหลอง จากนนกน ามาผสมกนจนเปนสขนทตยภม จนถงสขนตตยภม หากเราจะแบงสออกเปนสองกลม สโทนรอนจะเรมตงแตสแดง สแดงเหลอง สสม ไปจนถงสเหลอง สวนสโทนเยนจะเรมจาก สเหลองอมเขยว สเขยว สเขยวอมน าเงน สน าเงน จนถงสมวง หากเราเปรยบเทยบวงจรสจะเหนวาสโทนรอนกบสโทนเยนจะตรงขามกนจนเหมอนคนละดาน แตบางทฤษฎกแยงวาบางครงเรากสามารถท าใหสโทนรอนเปนโทนเยนได ยกตวอยางเชน สแดงหากเปนสแดงทมความเขมขนไปทางน าเงน

มากกวากจะเหมาวาโทนเยนกได เชนกนหากสเขยว เดมเปนสโทนเยน แตหากสเขยวทสวนผสมสน าเงนมากกวาเหลองมนกจะกลายเปนสโทนรอนได ความรเบองตนเกยวกบส (Introduction to Color) ส เปนสงทปรากฏอยบนโลกทก ๆ สงทเรามองเหนรอบ ๆ ตวนนลวนแตมสโลกของเราถกจรรโลง และแตงแตมดวย สสนหลายหลาก ทงสสนตามธรรมชาต และสทมนษยรงสรรคขน หากโลกนไมมส หรอมนษยไมสามารถ รบรเกยวกบสได สงนนอาจเปน ความพกพรองทยงใหญของธรรมชาต เพราะสมความส าคญตอวฏจกรแหงโลก และเกยวของกบ วถชวตมนษย จนแยกกนไมออก เพราะมนษยไดตระหนกแลววา สนนสงผลตอความรสกนกคด อารมณ จนตนาการ การสอความหมาย และความสขส าราญใจในชวตประจ าวนมาชานานแลว ดงนน จงอาจกลาวไดวา ส มอทธพลตอมนษยเราเปนอยางสง และมนษยกใชประโยชน จากสอยาง เอนกอนนต ในการสรางสรรค สงตาง ๆอยางไมมทสนสด 2.3.7 ทฤษฎการออกแบบเวบไซต เวบไซตเปนสอทไดรบความนยมอยามากบนอนเตอรเนต ซงเวบไซตเปนสอทอยในความควบคมของผใชโดยสมบรณ กลาวคอ ผใชสามารถตดสนใจเลอกไดวาจะดเวบไซตใด และจะไมเลอกดเวบไซตใด ไดตามตองการ จงท าใหผใชไมมความอดทนตออปสรรค และปญหาทเกดจากการออกแบบเวบไซตผดพลาด ถาผใชเหนวาเวบทก าลงดอยนนไมมประโยชนตอตวเขา หรอไมเขาใจวาเวบไซตนจะใชงานอยางไร เขากสามารถทจะเปลยนไปดเวบไซตอน ๆ ไดอยางรวดเรว เนองจากในปจจบนมเวบไซตอยมากมาย และยงมเวบไซดทเกดขนใหม ๆ ทกวน ผใชจงมทางเลอกมากขน และสามารถเปรยบเทยบคณภาพของเวบไซดตาง ๆ ไดเอง เวบไซดทไดรบการออกแบบอยางสวยงาม มการใชงานทสะดวก ยอมไดรบความสนใจจากผใช มากกวาเวบไซดทดสบสนวนวาย มขอมลมากมายแตหาอะไรไมเจอ นอกจากนยงใชเวลาในการแสดงผลแตละหนานานเกนไป ซงปญหาเหลานลวนเปนผลมาจากการออกแบบเวบไซดไมดทงสน ดงนน การออกแบบเวบไซด จงเปนกระบวนการส าคญในการสรางเวบไซด ใหประทบใจผใช ท าใหเขาอยากกลบเขามาเวบไซดเดมอกในอนาคต ซงนอกจากตองพฒนาเวบไซดทดมประโยชนแลว ยงตองค านงถงการแขงขนกบเวบไซดอน ๆ อกดวย ก าหนดเปาหมายของเวบไซต การออกแบบโครงสราง ลกษณะหนาตา หรอการเขยนโปรแกรม แตมหลายคนทพฒนาเวบไซต โดยขาดการวางแผนและท างานไมเปนระบบ ตวอยางเชน การลงมอออกแบบโดยการใชโปรแกรมชวยสรางเวบ เนอหาและรปแบบกเปนไปตามทนกขนไดขณะนน และเมอเหนวาดดแลวกเปดตวเลย ท าใหเวบนนมเปาหมายและแนวทางทไมแนนอน ผลลพธทไดจงเสยงกบความลมเหลวคอนขางมาก

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

ขอมลหลกทควรมอยในเวบไซต เมอเราทราบถงความตองการทผใชตองการไดรบเมอเขาชมเวบไซตหนง ๆ แลว เรากออกแบบเวบไซตใหมขอมลทผใชตองการ ซงขอมลตอไปน เปนสงทผใชสวนใหญคาดหวงจะไดรบเมอเขาไปชมเวบไซต - ขอมลเกยวกบบรษท - ค าถามยอดนยม - ขอมลในการตดตอ โครงการทเกยวของ นายจรวตน โกมลสทธ นางสาวเพญนภา มลานวน (2561) โครงการเวบไซตระบบสอการเรยนการสอนออนไลน วชา การสอสารขอมลเครอขาย จดท าขน เพอเรยนรเกยวกบเครอขายคอมพวเตอร และสามารถน าหลกการไปประยกตใชงานอาชพ และชวตประจ าวน นายเกยรตศกด กลางาม นายธนพรมาด สขสถต นายสภกจ สทบทม (2561) โครงการเวบไซตสอการเรยนการสอนวชาโปรแกรมตารางค านวณ จ าท าขน เพอสอนโปรแกรมตารางค านวณ และอ านวยประโยชนแกนกศกษาจะไดเรยนรเกยวกบการโปรแกรมตารางค านวณมากขน นายยศวรศ ค าเกา นายกฤษฎา เขยวเลก นายพรพทกษ บตรเสนห (2561) โครงการเวบไซตสอการเรยนการสอนออนไลนวชาโปรแกรมจดการฐานขอมล จ าท าขน เพอน าเอารปแบบการเรยนรยคใหมทใชสอสงคมทไดรบความสนใจ และเปนทนยมในปจจบน มาประยกตเขากบการเรยนการสอนทนาสนใจเกยวกบวชา โปรแกรมจดท าฐานขอมล 2.4 การน าระบบคอมพวเตอรในการใชงาน 1. น าคอมพวเตอรมาใชในการเผยแพรขอมล 2. น าคอมพวเตอรมาใชในการสรางเวบไซตใหสมบรณแบบ 3. น าคอมพวเตอรมาใชในการท าหนาเวบเพจแตละหนา 4. น าน าคอมพวเตอรเขามาใชในการออกแบบโลโก และแบนเนอรเวบไซต 5. น าน าคอมพวเตอรเขามาใชในการตกแตงรป 6. โปรแกรม Adobe Dreamweaver CC ใชในการท าเวบไซต 7. โปรแกรม Adobe Photoshop CS6 ใชในการตกแตงภาพ

บทท 3

การออกแบบระบบงานดวยคอมพวเตอร

3.1 การออกแบบ Sitemap

รปท 3.1 การออกแบบ Site map

17

รปท 3.2 การออกแบบ Site map (ตอ)

18

รปท 3.3 การออกแบบ Site map (ตอ)

19

3.2 การออกแบบ Story Board

รปท 3.4 การออกแบบหนา INDEX

รปท 3.5 การออกแบบหนาหลก

20

รปท 3.6 การออกแบบหนา ความเปนมของกาพย

รปท 3.7 การออกแบบหนา ความรทไดจากเรอง

21

รปท 3.8 การออกแบบหนา การพจารณาคณคา

รปท 3.9 การออกแบบหนา ลกษณะพเศษของกาพยเหเรอ

22

รปท 3.10 การออกแบบหนา คณคาทไดรบ

รปท 3.11 การออกแบบหนา คณคาดานสงคม

23

รปท 3.12 การออกแบบหนา คณคาดานเนอหา

รปท 3.13 การออกแบบหนา ความแตกตางของบทเหเรอ

24

รปท 3.14 การออกแบบหนา ประวตเจาฟาธรรมธเบศร

รปท 3.15 การออกแบบหนา ลกษณะวรรณคดนราศในกาพยเหเรอ

25

รปท 3.16 การออกแบบหนา ลกษณะพเศษของกาพยเหเรอเจาฟาธรรมาธเบศร

รปท 3.17 การออกแบบหนา ลกษณะท ๑

26

รปท 3.18 การออกแบบหนา ลกษณะท ๒

รปท 3.19 การออกแบบหนา ลกษณะท ๓

27

รปท 3.20 การออกแบบหนา ลกษณะการแตง

รปท 3.21 การออกแบบหนา กาพยยาน 11

28

รปท 3.22 การออกแบบหนา โคลงสสภาพ

รปท 3.23 การออกแบบหนา เนอหาของกาพย

29

รปท 3.24 การออกแบบหนา ตอนท ๑

รปท 3.25 การออกแบบหนา ตอนท ๒

30

รปท 3.26 การออกแบบหนา ตอนท ๓

รปท 3.27 การออกแบบหนา ตอนท ๔

31

รปท 3.28 การออกแบบหนา เรองยอกาพย

รปท 3.29 การออกแบบหนา บทเหชมเรอ

32

รปท 3.30 การออกแบบหนา บทเหชมไม

รปท 3.31 การออกแบบหนา บทเหชมปลา

33

รปท 3.32 การออกแบบหนา บทเหชมนก

รปท 3.33 การออกแบบหนา ประเพณการเหเรอ

34

รปท 3.34 การออกแบบหนา เรอพระราชพธและประเพณการเหเรอ

รปท 3.35 การออกแบบหนา กวผยงใหญแหงอยธยา

35

รปท 3.36 การออกแบบหนา ตวอยางคณคาดานวรรณศลป

รปท 3.37 การออกแบบหนา ความรประกอบ

36

รปท 3.38 การออกแบบหนา ความแตกตางของบทเหเรอ

รปท 3.39 การออกแบบหนา คณคาทางดานวรรณศลป

37

รปท 3.40 การออกแบบหนา ถอดค าประพน

รปท 3.41 การออกแบบหนา การใชถอยค า

38

รปท 3.42 การออกแบบหนา สมผสสระ

รปท 3.43 การออกแบบหนา การเลยนเสยงธรรมชาต

39

รปท 3.44 การออกแบบหนา การใชส านวนโวหาร

รปท 3.45 การออกแบบหนา เรอทงหมดทชม

40

รปท 3.46 การออกแบบหนา สาระนาร

รปท 3.47 การออกแบบหนา ขอคดทไดจากเรองกาพยเหเรอ

41

รปท 3.48 การออกแบบหนา การเหเรอ

รปท 3.49 การออกแบบหนา ศลปะการเหเรอ

42

รปท 3.50 การออกแบบหนา วตถประสงคการเหเรอ

รปท 3.51 การออกแบบหนา หลกฐานการเหเรอ

43

รปท 3.52 การออกแบบหนา ประเภทของการเหเรอ

รปท 3.53 การออกแบบหนา ลลาการเหเรอ

44

รปท 3.54 การออกแบบ ผจดท า

3.3 การออกแบบสงน าเขา (Input Design) 1. Index 2. หนาหลก 3. ความเปนมาของกาพย 3.1 ความรทไดจากเรอง 3.2 การพจารณาคณคา 3.3 ลกษณะพเศษของกาพยเหเรอ 3.4 คณคาทไดรบ 3.4.1 คณคาดานสงคม 3.4.2 คณคาดานเนอหา 3.5 ความแตกตางของบทเหเรอ 3.6 ประวตเจาฟาธรรมธเบศร 3.7 ลกษณะวรรณคดนราศในกาพยเหเรอ 3.8 ลกษณะพเศษของกาพยเหเรอเจาฟาธรรมาธเบศร 3.8.1 ลกษณะท ๑ 3.8.2 ลกษณะท ๒ 3.8.3 ลกษณะท ๓

45

4. ลกษณะการแตง 4.1 กาพยยาน 11 4.2 โคลงสสภาพ 4.3 เนอหาของกาพย 4.3.1 ตอนท ๑ 4.3.2 ตอนท ๒ 4.3.4 ตอนท ๓ 4.3.5 ตอนท ๔ 5. เรองยอกาพย 5.1 บทเหชมเรอ 5.2 บทเหชมไม 5.3 บทเหชมปลา

5.4 บทเหชมนก 6. ประเพณการเหเรอ 6.1 เรอพระราชพธและประเพณการเหเรอ 6.2 กวผยงใหญแหงอยธยา 7. ตวอยางคณคาดานวรรณศลป 7.1 ความรประกอบ 7.2 ความแตกตางของบทเหเรอ 7.3 คณคาทางดานวรรณศลป 8. ถอดค าประพน 8.1 การใชถอยค า 8.2 สมผสสระ 8.3 การเลยนเสยงธรรมชาต 8.4 การใชส านวนโวหาร 8.5 เรอทงหมดทชม 8.6 สาระนาร 8.7 ขอคดทไดจากเรองกาพยเหเรอ 8.8 การเหเรอ

46

9. ศลปะการเหเรอ 9.1 วตถประสงคการเหเรอ 9.2 หลกฐานการเหเรอ 9.3 ประเภทของการเหเรอ 9.4 ลลาการเหเรอ 10.ผจดท า 3.4 การออกแบบสงน าออก (Output Design) 1. น าเสนอเวบไซตเพอสอนวชาโครงการผานโปรเจคเตอร 2. น าเสนอเวบไซตออกทางคอมพวเตอรเพอแสดงผลเปนเวบไซตทสมบรณ 3. น าขอมลทงหมดทน ามาท าเวบไซตเพอเปนการสอถงเรองทท าอยางสมบรณ

บทท 4 การพฒนาเวบไซต สอการเรยนการสอน เรอง กาพย

4.1 เครองมอและอปกรณทใช 1. คอมพวเตอร - AMD Ryzen 3 2200G with Radeon VegaGraphics 3.49 GHz - 8.00 GB - 64-bit Operating System, x64-based processor - No Pen or Touch Input is available for this Display 2. เมาส 3. คยบอรด 4. กระดาษ A4 ส าหรบปรนเอกสาร 4.2 โปรแกรมทงหมดทใชในการพฒนา 1. Adobe Dreamweaver CC6 ใชในการสรางเวบไซต 2. Adobe Photoshop CC6 ใชในการตกแตงรปภาพ 3. Microsoft Word 2019 ใชในการท าเอกสาร 4.Microsoft Powerpoint 2016 ใชในการท าตวอยางรปภาพประกอบ

47

4.3 วธการตดตงโปรแกรม

รปท 4.1 เปดไฟลในพนททเกบไวกอนหนาน

รปท 4.2 เลอนหาไฟลทชอวา Index.html คลกขวา > Open with > Google Chrome

48

รปท 4.3 แสดงหนา Index

รปท 4.4 แสดงหนา Home

49

รปท 4.5 แสดงหนาความเปนมาของกาพย

รปท 4.6 แสดงหนาความเปนมาของกาพย > ความรทไดจากเรอง

50

รปท 4.7 แสดงหนาความเปนมาของกาพย > การพจารณาคณคา

รปท 4.8 แสดงหนาความเปนมาของกาพย > ลกษณะพเศษของกาพยเหเรอ

51

รปท 4.9 แสดงหนาความเปนมาของกาพย > ความแตกตางของบทเหเรอ

รปท 4.10 แสดงหนาความเปนมาของกาพย > ลกษณะวรรณคดนราศในกาพยเหเรอ

52

รปท 4.11 แสดงหนาลกษณะการแตง

รปท 4.12 แสดงหนาลกษณะการแตง > กาพยยาน ๑๑

53

รปท 4.13 แสดงหนาลกษณะการแตง > โคลงสสภาพ

รปท 4.14 แสดงหนาลกษณะการแตง > เนอหาของกาพย

54

รปท 4.15 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 1

รปท 4.16 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 2

55

รปท 4.17 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 3

รปท 4.18 แสดงหนาลกษณะการแตง > เนอหาของกาพย > ตอนท 4

56

รปท 4.19 แสดงหนาเรองยอกาพย

รปท 4.20 แสดงหนาเรองยอกาพย > บทเห ชมเรอ

57

รปท 4.21 แสดงหนาเรองยอกาพย > บทเห ชมไม

รปท 4.22 แสดงหนาเรองยอกาพย > บทเห ชมปลา

58

รปท 4.23 แสดงหนาเรองยอกาพย > บทเห ชมนก

รปท 4.24 แสดงหนาประเพณการเหเรอ

59

รปท 4.25 แสดงหนาประเพณการเหเรอ > เรอพระราชพธและประเพณการเหเรอ

รปท 4.26 แสดงหนาประเพณการเหเรอ > ต านานเหเรอ

60

รปท 4.27 แสดงหนาคณคาดานวรรณศลป

รปท 4.28 แสดงหนาคณคาดานวรรณศลป > ความรประกอบ

61

รปท 4.29 แสดงหนาคณคาดานวรรณศลป > ความแตกตางการเหเรอ

รปท 4.30 แสดงหนาคณคาดานวรรณศลป > คณคาดานวรรณศลป

62

รปท 4.31 แสดงหนาถอดค าประพน

รปท 4.32 แสดงหนาถอดค าประพน > การใชถอยค า

63

รปท 4.33 แสดงหนาถอดค าประพน > สมผสสระและสมผสผยญชนะ

รปท 4.34 แสดงหนาถอดค าประพน > กาพยเหเรอ

64

รปท 4.35 แสดงหนาถอดค าประพน > การเหเรอ

รปท 4.36 แสดงหนาศลปะการเหเรอ

65

รปท 4.37 แสดงหนาศลปะการเหเรอ > วตถประสงคของการเหเรอ

รปท 4.38 แสดงหนาศลปะการเหเรอ > หลกฐานการเหเรอ

66

รปท 4.39 แสดงหนาศลปะการเหเรอ > ประเภทของการเหเรอ

รปท 4.40 แสดงหนาศลปะการเหเรอ > ประเภทของการเหเรอ

67

รปท 4.41 แสดงหนาศลปะการเหเรอ > ลลาการเหเรอ

รปท 4.42 ผจดท า

69

บทท 5 สรปผลการท าโครงการ

5.1 สรปผลโครงการ

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

5.1.1 ขนาดของโปรแกรมแตละไฟลแจงใหทราบทงหมด

ล าดบท ชอไฟล ขนาด หมายเหต 1 index 1 KB หนาเขาสเวบไซต 2 home 4 KB หนาแรก 3 art of waxing 4 KB ศลปการเหเรอ 4 assonance 0 KB กาพยเหเรอ 5 bird Watching 3 KB บทเห ชมนก 6 boat tour 3 KB บทเห ชมเรอ 7 chapter 1 3 KB ตอนท 1 8 chapter 2 3 KB ตอนท 2 9 chapter 3 3 KB ตอนท 3

10 chapter 4 3 KB ตอนท 4 11 consideration 4 KB การพจารณาคณคา 12 content of the epic 3 KB เนอหาของกาพย 13 difference 3 KB ความแตกตางของบทเหเรอ

ตารางท 5.1 แสดงขนาดของไฟลโปรแกรม

70

ล าดบท ชอไฟล ขนาด หมายเหต 14 epic 1 3 KB กาพยเหเรอ 15 epic 11 3 KB กาพยยาน ๑๑ 16 epic synopsis 4 KB เรองยอกาพย 17 epichistory 4 KB ความเปนมาของกาพย 18 fish watching 3 KB บทเห ชมปลา 19 fourth verse 3 KB โครงสสภาพ 20 historyprincethammathibet 3 KB ประวตเจาฟาธรรมธเบศ 21 idiom 3 KB การใชส านวนโวหาร 22 imitating nature sounds 3 KB การเลยนเสยงธรรมชาต 23 knowledge matter 3 KB สาระนาร 24 knowledge 3 KB ความรประกอบ 25 konwledge 3 KB ความรทไดจากเรอง 26 legend 3 KB ต านานกาพยเหเรอ 27 lierature value 2 3 KB คณคาดานวรรณศลป 28 literary value 3 KB คณคาดานวรรณศลป 29 nature 4 KB ลกษณะพเศษของกาพยเหเรอ 30 nature-A1 3 KB ลกษณะท 1 31 nature-AA2 3 KB ลกษณะท 2 32 nature-AAA3 3 KB ลกษณะท 3 33 natureliterature 3 KB ลกษณะวรรณคดราศในกาพยเหเรอ 34 natureprincethamamathibet 4 KB ลกษณะพเศษของกาพยเหเรอ

เจาฟาธรรมธเบศ 35 proof of the boat 3 KB หลกฐานกาพยเหเรอ 36 provider 3 KB ผจดท า 37 purpose of the rigging 3 KB วตถประสงคกาพยเหเรอ 38 rigging 3 KB กาพยเหเรอ 39 royal boat 3 KB เรอพระราชพธและประเพณกาพยเหเรอ

ตารางท 5.2 แสดงขนาดของไฟลโปรแกรม(ตอ)

71

ล าดบท ชอไฟล ขนาด หมายเหต

40 sailing tradition 3 KB ประเพณกาพยเหเรอ 41 ship 3 KB เรอทงหมดทชม 42 style of clothing 3 KB ลลาการเหเรอ 43 style of dressing 3 KB ลกษณะการแตง 44 the difference of the boat 3 KB ความแตกตางของบทเหเรอ 45 the insights from the story 3 KB ขอคดทไดจากเรอง 46 transcribe 4 KB ถอดค าประพน 47 types of garments 3 KB ประเภทของกาพยเหเรอ 48 using word retreat 3 KB การใชถอยค า 49 value 3 KB คณคาทไดรบ 50 value-A1 3 KB คณคาดานสงคม 51 value-AA2 3 KB คณคาดานเนอหา 52 woodwork 3 KB บทเห ชมไม

ตารางท 5.3 แสดงขนาดของไฟลโปรแกรม(ตอ)

72

5.1.2 ขอผดพลาดทมตอการออกแบบระบบงาน

1. Background แกใหพนทเตม 100% 2. แกปกใหดมสสนมากขน 3. แกรปขางในใหเปนหวขอตาง ๆ

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

5.2 ปญหาและอปสรรคในการด าเนนงาน 1. ไฟลงานเอกสารในแฟลชไดรหายจงตองกใหม 2. สมาชกกลมมเวลาไมตรงกน ท าใหงานมความลาชากวาก าหนด 3. สมาชกในกลมยงขาดประสบการณในการพฒนาจงท าใหใชเวลาในการศกษามาก 4. ในการท างานสมาชกในกลมยงขาดการวางแผนจงท าใหเกดความผดพลาดบอยครง 5. ในการพมพเนอหาเรองตาง ๆ มจ านวนมาก และตองใชเวลานาน

73

5.3 แผนการด าเนนงาน (Gantt Chart)

ตารางท 5.4 แผนการด าเนนงาน (Gantt Chart) หมายเหต เสนสด า คอ ระยะเวลาทก าหนด เสนสแดง คอ ระยะเวลาด าเนนงาน

ก าหนดการ โครงการสอบและน าเสนอวชาโครงการ ปการศกษา 2562 สาขาวชาคอมพวเตอรธรกจ ภาคเรยนท 1-2

รายการ ภาคเรยนท 1 มถนายน 62 กรกฎาคม 62 สงหาคม 62 กนยายน 62 ระยะเวลา

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

อบรมการท าโครงการนกศกษา ปวช.3 และปวส.2

11-12 มถนายน 62

เสนอหวขอ ATC.01โครงการ รอบท 1 เอกสารบทท 1

14 มถนายน 62

ประกาศผลหวขอโครงการ รอบท 1 17 มถนายน 62

เสนอหวขอโครงการ รอบท 2 19 มถนายน 62

ประกาศผลหวขอโครงการ รอบท 2 21 มถนายน 62

ลงทะเบยนหวขอออนไลน เสนออาจารยทปรกษารวม

18-30 มถนายน 62

สงเอกสารบทท 2 8-14 กรกฎาคม 62

สงเอกสารบทท 3 15-31กรกฎาคม62

สอบน าเสนอขอโครงการ (รอบเอกสาร) 17 สงหาคม 62

ประกาศผลสอบ (รอบเอกสาร) 22 สงหาคม 62

สงความคบหนาโปรแกรม 50% 9-15 กนยายน 62

สงความคบหนาโปรแกรม 60% 16-22 กนยายน 62

สงความคบหนาโปรแกรม 70% 23-30 กนยายน 62

รายการ ภาคเรยนท 2 พฤศจกายน 63 ธนวาคม 63 มกราคม 63 กมภาพนธ 63 ระยะเวลา

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

สงความคบหนา 90% 1-8 พฤศจกายน 62

สงความคบหนา 100% 9-13พฤศจกายน62

สอบน าเสนอโครงการ ระดบปวช.3 7 ธนวาคม 62

ประกาศผลสอบ (รอบโปรแกรม) 11 ธนวาคม 62

สงเอกสารบทท 4 6-19 มกราคม 63

สงเอกสารบทท 5 20-26 มกราคม 63

สงงบประมาณในการท าโครงการ (แบบออนไลน)

26-30 มกราคม 63

สงรปเลม ซด ช าระคาเขาเลม 1-20 กภาพนธ 63

74

5.4 สรปคาใชจายในการด าเนนงานจรง

ล าดบ รายการ จ านวน ราคา (บาท) 1 กระดาษ A4 2 รม 300 2 ตลบหมกเครองปรน 1 ตลบ 650 3 คาเขาเลมเอกสาร 1 เลม 250

รวมเปนเงน 1,200

ตารางท 5.5 สรปคาใชจายในการด าเนนงานจรง

87

ประวตผจดท ำ นายภ ร ว ฒน ค า ห อ ง เ ก ด เ ม อ ว นท 3 เ มษ ายน 2 5 4 4 ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนสรศกษา ปจจบนก าลงศกษาในหลกสตรประกาศนยบตรวชาชพ(ปวช.) สาขาวชาคอมพวเตอรธรกจ อยทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2562 ปจจบนอาศย อยบานเลขท 2/177 ต.แพรกษา อ.เมอง จ.สมทรปราการ 10280 เบอรโทรศพท 094-951-0959 E-mail : wee20155dkm@gmail.com Line ID: nongboomzaa นายปณณพฒน ธปตพศ เกดเมอวนท 29 มถนายน 2544 ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนอ านวยวทย ปจจบนก าลงศกษาในหลกสตรประกาศนยบตรวชาชพ(ปวช.) สาขาวชาคอมพวเตอรธรกจ อยทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2562 ปจจบนอาศยอยบานเลขท 19/425 หม 17 ต.บางหญาแพรก อ.พระประแดง จ.สมทรปราการ 10130 เบอรโทรศพท 064-221-7021 E-mail : asdyui159@gmail.com Line ID : asdyui159

ภาคผนวก - ใบเสนอขออนมตการท าโครงการระบบคอมพวเตอรธรกจ (ATC.01) - ใบอาจารยทปรกษารวม (ATC.02) - ใบขอสอบปองกนโครงการระบบคอมพวเตอรธรกจ (ATC.03) - รายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (AT.C.04) - ใบบนทกการเขาพบอาจารยทปรกษาโครงการ (AT.C.05) - ใบขออนญาตอาจารยทปรกษารวมจดท าเอกสาร (AT.C.06)