เอกสารประกอบการบรรยายหรือคู่มือการอบรมฯ

หลกั สตู รการพัฒนาครูดา นการจัดการเรยี นรูแ บบออนไลน 7.6.4 Propertie ใชในการเลอื กหา และออกแบบส่งิ ของตา ง ๆ ทน่ี ำมาใชใ น Layout ภาพที่ 7.8 Propertie 7.6.5 Text ใชใ นการสรางตัวอกั ษรทใี่ ชกบั งาน โดยสามารถกำหนดลกั ษณะ ชอ งไฟ ขนาด สขี อง อักษรได ภาพที่ 7.9 Text 150

หลกั สูตรการพัฒนาครูดา นการจดั การเรยี นรแู บบออนไลน 7.6.6 Background ใชใ นการเลือกพื้นหลังใหก ับ Layout ภาพที่ 7.10 Background 7.6.7 Image ใชในการเลอื กรูปภาพน่ิงมาใส Layout ภาพที่ 7.11 Image 151

หลกั สูตรการพัฒนาครดู า นการจัดการเรยี นรูแบบออนไลน 7.6.8 Video ใชในการเลอื กวดิ โี อลงใน Layout ภาพท่ี 7.12 Video 7.6.9 Special effect ใชเ ลอื กเอฟเฟกตพ เิ ศษตา ง ๆ มาใชใ น Layout ภาพที่ 7.13 Special effect 152

หลักสูตรการพัฒนาครดู า นการจัดการเรียนรูแบบออนไลน 7.6.10 Upload ใชในการอปั โหลดสิ่งตาง ๆ ขน้ึ มาในโปรเจกตท ่ีกำลังทำงาน ภาพท่ี 7.14 Upload 7.6.11 App ใชเชอ่ื มตอ แลว ทำงานรว มกบั แอฟพลเิ คชั่นตา ง ๆ ภาพที่ 7.15 App 153

หลักสูตรการพัฒนาครูดา นการจัดการเรียนรแู บบออนไลน 7.7 พ้นื ที่สรา งงาน Layout Layout เปนพื้นที่ ๆ ที่จะแสดงสื่อ และเปนท่ี ๆ จะนำ Object มาใส และแสดงผล หรือ เปรียบเสมอื นกระดาษเปลาทีเ่ ราจะสรางสรรคสง่ิ ตา ง ๆ ลงไป ภาพท่ี 7.16 แสดงพน้ื ท่ี Layout 154

หลักสูตรการพฒั นาครูดา นการจดั การเรยี นรูแบบออนไลน 7.8 Scene Scene คอื ฉาก หรอื สถานทท่ี ีส่ ามารถเพมิ่ เตมิ ลดจำนวน หรือเปลย่ี นแปลงได ภาพที่ 7.17 องคป ระกอบของ Scene จากภาพ Scene หรือฉาก ประกอบดว ย หมายเลข 1 ลำดับ Scene หมายเลข 2 เวลาทั้งหมดของ Scene น้ัน ๆ หมายเลข 3 ปมุ เพิ่ม New Scene (blank)เปนการเพ่ิมเปน Scene ขาวเปลา ๆ หมายเลข 4 ปมุ Copy Scene เปน การเพ่มิ เปน Scene ทผ่ี า นมา หมายเลข 5 ปมุ Bin เปน การลบ Scene นนั้ ๆ 155

หลกั สตู รการพฒั นาครูดา นการจดั การเรยี นรแู บบออนไลน 7.9 แถบแสดงเวลา Timeline Timeline คือ แถบทีจ่ ะแสดงเวลา การทำงานของ Object ใน Layout และเสียง ภาพท่ี 7.18 แถบแสดงเวลา (Timeline) ภาพที่ 7.19 องคป ระกอบตาง ๆ แถบแสดงเวลา (Timeline) จากภาพ Timeline หรือแถบแสดงเวลา ประกอบดว ย หมายเลข 1 เสนเวลา (บอกเวลาเปนวินาทีถงึ ชว่ั โมง) หมายเลข 2 Timeline Object คอื ชองทีบ่ อกตำแหนง ของ Object วาตรงกบั จดุ เวลาใด หมายเลข 3 Object Icon คอื รปู ท่ีบอกตำแหนงของ Object นัน้ ๆ หมายเลข 4 ปมุ เพมิ่ -ลดเวลาใน Timeline 156

หลกั สตู รการพฒั นาครดู า นการจดั การเรยี นรูแบบออนไลน 7.10 ปุม Publish ปุม Publish คือ ปุมที่ใชประมวลผลงานกอนนำเสนอ (Render) โดยสามารถเลือกรูปแบบการ นำเสนอ วา จะใชกับโปรแกรมใด หรือจะประมวลผลงานกอ นนำเสนอ (Render) ออกมาใหไ ฟลมีนามสกลุ อะไร เพ่อื ใหตรงตามจุดประสงคท ี่นำส่อื ไปใชง าน ภาพท่ี 7.20 หมายเลข 1 ปมุ Publish และ หมายเลข 2 รปู แบบการนำเสนอ 157

หลักสตู รการพัฒนาครดู า นการจดั การเรียนรูแ บบออนไลน ภาพที่ 7.21 ตวั อยา งการทำงาน หรอื ผลงาน 7.11 การสรา ง Character 7.11.1 คลกิ ท่ี Character แลว กด My Character Create you own ภาพที่ 7.22 แสดงการเลือก My Character Create you own 158

หลักสตู รการพัฒนาครดู า นการจัดการเรยี นรูแบบออนไลน 7.11.2 เลือกเพศ และวยั ของ Character ภาพท่ี 7.23 แสดงเพศ และวัย 7.11.3 เลือก Character มาเพื่อ Edit หรอื ปรับแตง ใหมอ ีกรอบ ภาพท่ี 7.24 แสดง Character 159

หลักสูตรการพฒั นาครูดา นการจดั การเรียนรแู บบออนไลน 7.11.4 เลอื ก รปู รางและเคร่ืองแตง กายใหมต ามทีต่ องการ แลวกดปมุ Save ภาพท่ี 7.25 แสดงเคร่อื งมือการ Edit หรอื การปรบั แตง 160

หลักสตู รการพัฒนาครดู า นการจดั การเรยี นรูแบบออนไลน 7.12 การจัด Object ตามที่วางโครงเรอ่ื งไว 7.12.1 เลอื ก back ground และนำ Character มาใสใ น Scene ภาพท่ี 7.26 แสดงการนำ Character มาใสใ น Scene 7.12.2 นำ คลปิ เสยี ง เสยี งทอ่ี ดั และภาพนิ่งที่จะใช Upload ข้ึนมาบนโปรแกรม 161

หลกั สูตรการพฒั นาครูดา นการจดั การเรยี นรแู บบออนไลน ภาพท่ี 7.27 แสดงการนำคลปิ เสยี ง เสียงที่อดั และภาพน่ิงท่ีจะใช Upload ขึ้นมาบนโปรแกรม 7.12.3 นำกรยิ า หรือเอฟเฟกตตาง ๆ มาใส Character เพ่ือใหส อดคลอ งกบั เนอ้ื เรอ่ื งและการนำเสนอ ภาพที่ 7.28 แสดงการใสเอฟเฟกตให Character 162

หลกั สตู รการพัฒนาครดู า นการจดั การเรียนรแู บบออนไลน 7.12.4 พยายามดชู อ งTimeline ใหเ สยี งกับ Object ตรงกนั ภาพที่ 7.29 แสดงการตรวจสอบเสยี งกบั Object ใหตรงกนั 7.12.5 ลองตรวจเช็คโดยการกดปมุ Play ภาพท่ี 7.30 แสดงการดตู วั อยา งผลงาน 163

หลกั สตู รการพฒั นาครูดา นการจดั การเรียนรแู บบออนไลน 7.12.6 หากแกไข ใหป รบั Object ตาง ๆ ใหเ หมาะสม ภาพท่ี 7.31 แสดงการปรับ Object ตา ง ๆ เม่อื แกไ ข 7.12.7 นำภาพน่ิงมา แลวใสเ อฟเฟกตแ กภ าพตาง ๆ ภาพท่ี 7.32 แสดงการใสเอฟเฟกตใ นภาพนิ่ง 164

หลักสตู รการพฒั นาครดู า นการจัดการเรียนรแู บบออนไลน 7.12.8 เม่อื ตรวจสอบความถูกตอ งและตดั สินใจจะนำเสนอใหกดปมุ Play บนขวา ภาพที่ 7.33 แสดงการกดปุม Play 165

หลักสตู รการพัฒนาครูดา นการจัดการเรยี นรูแบบออนไลน บทปฏบิ ัตกิ ารบทที่ 7 1. สรางตวั การต นู แอนเิ มชนั โดยใช Character ของตนเอง ดวยโปรแกรม Animaker 2. สรา งแอนิเมชนั เพื่อประกอบการสอนในรายวชิ าการของตนเอง ดว ยโปรแกรม Animaker จำนวน 1 ช้นิ งาน 166

หลักสตู รการพัฒนาครูดา นการจัดการเรยี นรแู บบออนไลน บทที่ 8 การใชงานเคร่ืองมือการจัดการเรียนการสอนออนไลน เครื่องมือการจัดการเรียนการสอนออนไลนนี้ ประกอบดวย การจัดการรายวิชา หรือหลักสูตร ขอ มลู ผสู อน-ผูเรียน กจิ กรรมการเรยี นรู การประเมินผล และการตดิ ตามรายงานผล โดยแบง การใชเ ครื่องมือได ดังนี้ 8.1 การใชง านเครอื่ งมอื การจัดการเรียนการสอนออนไลนส ำหรบั ผสู อน 8.1.1 การสมัครและการเขาสรู ะบบ ภาพท่ี 8.1 ขน้ั ตอนการสมคั รและการเขาสรู ะบบ 8.1.2 รายงานผล และแสดงขอมูลสรปุ (Dashboard) ภาพที่ 8.2 การรายงานผล และแสดงขอ มูลสรุป 167

หลักสตู รการพฒั นาครดู า นการจัดการเรยี นรูแบบออนไลน 8.1.3 การสรางหลักสตู ร/รายวชิ า ภาพที่ 8.3 การสรางหลักสตู ร/รายวชิ า 8.1.4 แบบสำรวจ/แบบประเมินการเรยี น ภาพท่ี 8.4 แบบสำรวจ/แบบประเมนิ การเรยี น 168

หลกั สูตรการพฒั นาครูดา นการจัดการเรยี นรูแบบออนไลน 8.1.5 การสรางกจิ กรรมการเรียนรู ภาพที่ 8.5 การสรางกจิ กรรมการเรยี นรู 8.1.6 รายละเอียดขอมลู ผสู อน ภาพท่ี 8.6 รายละเอยี ดขอมลู ผูสอน 169

หลักสูตรการพฒั นาครดู า นการจดั การเรยี นรูแบบออนไลน 8.1.7 การสรางเนอื้ หาการสอน ภาพที่ 8.7 การสรางเนอ้ื หาการสอน 8.1.8 แท็ก/คยี เวริ ด เพ่อื การคนหา ภาพที่ 8.8 การคน หา 170

หลักสตู รการพัฒนาครดู า นการจัดการเรยี นรูแ บบออนไลน 8.1.9 สทิ ธ์กิ ารใชง าน ภาพท่ี 8.9 แสดงสิทธิ์การใชง าน 1) สมาชกิ ภาพท่ี 8.10 สมาชกิ 171

หลักสูตรการพฒั นาครูดา นการจัดการเรียนรแู บบออนไลน 2) การเชญิ ภาพท่ี 8.11 การเชิญ 8.1.10 การต้ังคา หนว ยงาน ภาพท่ี 8.12 สมาชกิ 172

หลักสตู รการพัฒนาครดู า นการจดั การเรยี นรูแบบออนไลน 8.2 การใชง านเครื่องมอื การจดั การเรียนการสอนออนไลนส ำหรบั ผเู รยี น 8.2.1 การสมคั รและการเขา สรู ะบบ ภาพท่ี 8.13 การสมัครและเขา สรู ะบบ 8.2.2 การกรอกขอ มูลของผเู รียน ภาพที่ 8.14 การกรอกขอมูลผูเรยี น 173

หลกั สูตรการพัฒนาครดู า นการจดั การเรียนรูแบบออนไลน 8.2.3 หลกั สูตร/รายวิชาสำหรับผเู รียน ภาพท่ี 8.15 หลกั สตู ร/รายวิชาสำหรับผเู รียน 8.2.4 กิจกรรมสำหรบั ผูเรียน ภาพท่ี 8.16 กจิ กรรมสำหรบั ผูเรียน 174

หลักสตู รการพฒั นาครดู า นการจัดการเรียนรแู บบออนไลน 8.2.5 คำถาม-คำตอบทีพ่ บบอยเพื่อชวยเหลือผเู รียน ภาพที่ 8.17 คำถาม-คำตอบทีพ่ บบอยเพอ่ื ชวยเหลือผเู รยี น 175

หลกั สูตรการพัฒนาครูดา นการจดั การเรยี นรูแบบออนไลน บทปฏบิ ตั กิ ารบทท่ี 8 1. ใหผูอบรม Upload วิดีทัศน ที่ไดจากการสรางชิ้นงานดวยตนเอง เพื่อเปนชองทางสำหรับการจัดการเรียนรู แบบออนไลน ที่ผสมผสานระหวางบทเรียน สื่อการเรียนรู แหลงเรียนรู การสรางแบบทดสอบ การวัดและ ประเมนิ ผล และการแลกเปลี่ยนเรียนรู 176

หลักสตู รการพฒั นาครูดา นการจดั การเรียนรูแ บบออนไลน เอกสารอางองิ กรรณิการ วงษพานิช. (2021). การวัดและประเมินผลการสอนแบบออนไลน. https://registrar.ku.ac.th /wp-content/uploads/2021/05/07-ผศ.ดร.กรรณิการ. pdf. สบื คน วนั ท่ี 20 พฤศจกิ ายน 2564 คลังส่ือการสอน.คอม. (2021). การสรางใบงานออนไลน สำหรับคนรุนใหม ดวย Live Worksheet https://xn--12cfj7e4bj0bcyd1bq6d4n.com/live-worksheet. สบื คน เมือ่ 20 พฤศจกิ ายน 2564. ครัวชั้นสูง (High Zone Kitchen). (20 พฤศจิกายน 2564). ครัวชั้นสูง EP19 เตาเจี้ยวหลน. https://www.youtube.com/watch?v=xuFePY4Kbco ฉัตรพงศ ชูแสงนิล. (2562). สุดยอดแอปพลิเคชันแหงการประเมินผลการเรียนรู. https://www.scimath. org/article-technology/item/10115-2019-04-19-03-47-12. สืบคน วนั ที่ 20 พฤศจิกายน 2564 ชฎารัตน พิพัฒนนันท. (2020). Quizizz -Free Quizzes for Every Student. https://www.starfishlabz. com/blog/62-quizizz-free-quizzes-for-every-student. สบื คนเมอ่ื 20 พฤศจิกายน 2564. ณัฐพล ธนเชวงสกุล. (2564). นวัตกรรมและเทคโนโลยีสารสนเทศเพื่อการสื่อสารการศึกษาและการเรียนรู (Innovation and Information Technology for Education Communication and Learning). พมิ พคร้งั ที่ 1. กรุงเทพฯ : มหาวิทยาลยั ราชภฏั จนั ทรเกษม. บริษัท แอดวานไอเซอรวิส จำกัด. (2021). ไขขอของใจ Web Application คืออะไร มีประโยชนอยางไรบาง. https://www.advancedis.co.th/en/blog/. สืบคน เม่ือ 20 พฤศจกิ ายน 2564. ปราวณี ยา สวุ รรณณัฐโชต.ิ (ม.ป.ป.). การจดั การเรียนการสอนและการประเมนิ ผลผเู รียนแบบออนไลนภ ายใต สถานการณและมาตรการการปองกันการแพรระบาดของเชื้อไวรัสโคโรนา 2019. จฬุ าลงกรมหาวิทยาลยั : กรงุ เทพมหานคร วินนซอฟต โซลูชั่น. (ม.ป.ป.). Web Application. https://www.wynnsoft-solution.com/บทความ/ web-application. สืบคนเมอ่ื 20 พฤศจกิ ายน 2564. วิรตี วงษอนุสาสน. (2560) การสราง INFOGRAPHIC ANIMATION VIDEO ดวย ANIMAKER. มหาวิทยาลยั มหดิ ล : กรุงเทพมหานคร สารนุกรมไอที .(2560) .Portal Web คืออไร. https://mindphp.com/คูมือ/73-คืออะไร/4542-portal- website.html. สบื คน วันท่ี 20 พฤศจกิ ายน 2564 .(2021) Canva คืออะไรและใชงานอยางไร. https://entro.io/canva-%E0%B8%84%E0%B8 %B7%E0%B8%AD/. สืบคนเมื่อ 20 พฤศจกิ ายน 2564. 177

หลกั สตู รการพฒั นาครดู า นการจดั การเรียนรูแบบออนไลน Flaticon. (24 February 2021). Icons. https://www.flaticon.com/ Flaticon. (20 March 2021). Icons. https://www.flaticon.com/ kaewpanya. (2020). สราง Flipbook ออนไลนไดงาย ๆ.https://www.blockdit.com/posts/5f0c1a 854aede90c4eccb0cf. สืบคน เมอื่ 20 พฤศจิกายน 2564. KineMaster Corporation. (ม.ป.ป.). KineMaster - Video Editor. https://play.google.com/store/ apps/details?id=com.nexstreaming.app.kinemasterfree&hl=en. สบื คน วันท่ี 10 พฤศจิกายน 2564 Liveworksheets. (15 November 2021). Liveworksheets. https://www.liveworksheets.com/ min_bru. (2019). สวนประกอบหลัก ๆ ของ Web Application. http://online.brandrankup.com/2019/ 01/11/สวนประกอบหลัก ๆ-web-application-ออกแบบเว็บออนไลน-ออกแบบเว็บไซต. สืบคนเม่ือ 20 พฤศจกิ ายน 2564. Ohm. (2016). สวนประกอบของ Web Application. https://blog.tamacorp.co/สวนประกอบของ- web-application-website. สืบคนเมอื่ 20 พฤศจิกายน 2564. Sound of Text. (20 November 2021). Sound of Text. https://soundoftext.com/ Wesley Kim. (2018). หลักการเลือก Web Browser ที่นาใชงาน. https://omyhz.com/หลักการเลือก- web-browser-ที่นาใช/. สืบคน วนั ที่ 20 พฤศจกิ ายน 2564 178

หลกั สตู รการพฒั นาครดู า นการจัดการเรยี นรแู บบออนไลน 179