หนังสือคอมพิวเตอร์สำหรับครู - ฉบับผ่านการ

179 การรวบรวมและจดั เกบ็ แหล่งทรัพยากรออนไลน์ การสร้างแหล่งรวบรวมทรัพยากรด้วย Google Sites จาเป็นต้องมีบัญชีผู้ใช้งานที่ลงท้าย ด้วย @gmail.com และรหัสผ่านเสมอ เพื่อความม่ันคงปลอดภัยของคอมพิวเตอร์ส่วนบุคคลและ เว็บไซต์ท่ีสร้างด้วย Google Sites การสร้างแหล่งรวบรวมทรัพยากรหรอื เว็บไซต์ด้วย Google Sites สามารถสรา้ งได้ดังน้ี 1. การ Login เพ่อื เข้าใช้งาน Google Sites 1.1 การ Login เพ่ือเข้าใช้งาน Google Sites เริ่มต้นด้วยการคลิกปุ่ม Chrome เป็น ปุ่มท่ีมีสัญลักษณ์เป็นโลโก้ของ Google ดังภาพที่ 7.14 ซ่ึงอาจจะวางอยู่บน Taskbar ตรงตาแหน่ง ซ้ายมือด้านล่างของจอภาพหรือ Desktop สาหรับคอมพิวเตอร์ส่วนบุคคลแต่ละเครื่องอาจจะวางใน ตาแหน่งท่แี ตกตา่ งกนั ได้ ภาพที่ 7.14 การ Login เขา้ ใช้งาน Google Meet ผ่าน Chrome 1.2 เม่อื คลิกที่ปุม่ Chrome จะพบกับหนา้ วา่ ง ๆ ของ Chrome ให้เข้าใช้งาน Google Sites ด้วยการคลิกที่ Google apps หรือจุดเก้าจุดตรงบริเวณด้านขวามือบนของจอภาพตามภาพท่ี 7.15 > Sites > The meeting started > Sign in ด้วยอีเมลของ Google ที่สมัครไว้ > Next > Enter your password หรอื ปอ้ นรหัสผา่ นของอีเมล > Next > เขา้ สู่หนา้ แรกของ Google Sites

180 Google apps ภาพที่ 7.15 การเข้าใช้งาน Google Sites ผ่านทาง Google apps การเร่มิ ตน้ สรา้ งเวบ็ ไซตด์ ้วย Google Sites 1. เมื่อเข้าสู่หน้า Google Sites จะพบกับหน้าแรกของ Google Site ที่พร้อมใช้งานคลิก ทเ่ี ครอ่ื งหมาย + (บวก) ดา้ นขวามือล่างของจอภาพเพือ่ เริ่มสร้างเว็บไซต์ ภาพท่ี 7.16 หนา้ แรกของ Google Site 2. เข้าสู่หน้าแรกของ Google Sites จะพบกับพ้ืนท่ีสาหรับจัดวางข้อมูลและเมนูต่าง ๆ ประกอบด้วย 2.1 Untitled Site สาหรับต้ังช่ือของเว็บไซต์ เช่น ต้ังเป็นชื่อของตนเอง ชื่อโรงเรียน ชอ่ื วิชา เป็นตน้

181 2.2 Enter site name สาหรับตัง้ ช่ือของเวบ็ ไซต์เชน่ เดียวกัน มักจะต้ังเหมือนขอ้ 2.1 2.3 Add logo สาหรับใส่โลโก้ประจาเว็บไซต์ เช่น โลโก้ของโรงเรียน โลโก้ประจาตัว ผู้สอน ทาได้ด้วยการคลิก Add logo > Upload หรือ Select > เลือกโลโก้ท่ีเตรียมไว้ > คลิก X ปิด หนา้ ต่าง 2.4 Your page title สาหรบั ต้งั ชื่อของเพจหรอื หัวข้อของหน้าเวบ็ เช่น ยินดีต้อนรับสู่ เว็บไซต์ เป็นต้น ภาพที่ 7.17 การต้งั ชื่อของเว็บไซต์และหวั ขอ้ ของหน้าเว็บ 2.5 เมนู Undo และ Redo สาหรับยกเลิกการกระทาใด ๆ เช่น ยกเลิกการแก้ไข ยกเลกิ การลบ 2.6 เมนู Preview สาหรับแสดงเว็บไซต์เสมือนจริงบนคอมพิวเตอร์ส่วนบุคล ก่อน เผยแพรส่ สู่ าธารณะ 2.7 เมนู Links สาหรับ Copy ลิงก์ของเวบ็ ไซตเ์ พ่อื เผยแพรห่ รือสง่ ต่อไปยังผู้อื่นเพื่อให้ สามารถเข้าถึงข้อมูลในเว็บไซต์ได้ เปรียบเสมือนการส่งแผนที่การเดินทางให้กับเพื่อนเพ่ือให้สามารถ เดนิ ทางไปยงั จุดหมายไดอ้ ย่างถูกต้อง 2.8 เมนู Share สาหรับแบ่งปันการออกแบบ สร้างปรบั ปรุงและแก้ไขเว็บไซต์กบั ผู้อืน่ 2.9 เมนู Settings สาหรบั ปรบั แตง่ หน้าเวบ็ ไซต์เพ่มิ เตมิ ซง่ึ จะได้ใช้งานในลาดับต่อไป 2.10 เมนู More สาหรับทาสาเนาเว็บไซต์และอ่ืน ๆ 2.11 เมนู Publish สาหรับนาเสนอเว็บไซตส์ ู่สาธารณะ

182 ภาพท่ี 7.18 เมนขู อง Google Sites 3. ตกแต่งหน้าแรกของเวบ็ ไซต์ 3.1 เลือกรูปแบบหรือ Theme และสีของเว็บไซต์ด้วยการคลิก Themes > เลือกธีม และสีทชี่ อบ Themes ท่มี ีให้เลอื กใชง้ าน ภาพที่ 7.19 การเลือก Theme และสขี องเว็บไซต์ 3.2 เปลี่ยนรูปภาพของเว็บไซต์เพื่อความสวยงามและเพ่ือให้เข้ากับแนวคิดของเว็บ > วางเมาส์ลงไปยังภาพเดิมของเว็บไซต์ > คลิก Change image > Upload จากคอมพิวเตอร์ หรือ select image ที่ระบบเตรียมไว้ให้ ในท่ีน้ีจะไปค้นหาและคัดเลือกภาพจากแหล่งทรัพยากรภาพที่ ใหบ้ ริการฟรีจาก www.pixabay.com กนั www.pixabay.com เป็นเว็บไซต์ที่เป็นแหล่งรวบรวมภาพ วิดีโอ และเสียงดนตรีแบบ ไม่เสียค่าใช้จ่ายจานวนมากไว้ การเข้าใช้งานสามารถทาได้ดังน้ี > พิมพ์ www.pixabay.com ลงใน เว็บบราวเซอร์ (Web Browser) > พมิ พ์คาค้นที่ต้องการคน้ หาภาพ เช่น ห้องเรียน > เลือกภาพทชี่ อบ

183 > คลิกโหลดฟรี > เลือกขนาดภาพ > คลิกโหลดภาพดังภาพท่ี 7.20 > เมื่อได้ภาพตามที่ต้องการแล้ว นาไปใสใ่ นเว็บไซต์ทสี่ ร้างรอไว้ตามภาพท่ี 7.21 ภาพท่ี 7.20 การสบื คน้ และเลือกรปู ภาพจาก pixabay ภาพที่ 7.21 การใสภ่ าพใน Google Sites 3.3 เปล่ียนขนาดภาพให้เล็กใหญ่ตามต้องการด้วยการวางเมาส์ลงไปยังภาพใหม่ของ เว็บไซต์ > คลิก Header type > คลิกเลือกขนาดภาพตามชอบจาก 4 แบบต่อไปน้ี Cover, Large banner, Banner และ Title only ตัวอย่างในภาพท่ี 7.22 เลือกขนาดภาพแบบ Cover ทาให้ขนาด ภาพใหญเ่ กอื บเต็มหน้าจอ

184 ภาพที่ 7.22 การปรับขนาดของภาพใน Google Sites 3.4 ทดลองแสดงเว็บไซต์เสมือนจริง เพื่อตรวจสอบความถูกต้องก่อนนาไปเผยแพร่ สู่สาธารณะ > คลิกเมนู Previewตามภาพที่ 7.23 > สามารถเลือกให้ Preview ได้ 3 รูปแบบ ได้แก่ Large screen, Tablet หรือ Phone ภาพท่ี 7.24 เป็นการ Preview แบบ Large screen และภาพ ท่ี 7.25 เปน็ การ Preview แบบ Phone หรอื บนหนา้ จอโทรศพั ท์ 3.5 เมอื่ ตอ้ งการยกเลิกการทดลองแสดงเวบ็ ไซตเ์ สมือนจริงใหค้ ลิกเครื่องหมาย X สฟี า้ ภาพที่ 7.23 เมนู Preview สาหรบั ทดลองแสดงเวบ็ ไซต์เสมอื นจริง

185 ภาพที่ 7.24 การทดลองแสดงเว็บไซตเ์ สมือนจริงแบบ Large screen ภาพที่ 7.25 การทดลองแสดงเว็บไซต์เสมือนจรงิ แบบ Phone การสร้างเมนใู หก้ ับเวบ็ ไซต์ หลังจากออกแบบและตกแต่งหน้าเว็บไซต์ด้วยข้อความ ภาพ และสีตามชอบแล้วลาดับ ต่อไปจะมาสร้างเมนูให้กับเว็บไซต์ เมนูช่วยให้สามารถเข้าถึงข้อมูลอื่น ๆ ของเว็บไซต์ได้สะดวกและ รวดเรว็ ขนึ้ ขัน้ ตอนการสรา้ งเมนูมีดงั ตอ่ ไปน้ี 1. คลิกเมนู Pages ตามภาพที่ 7.26 เพ่ือสร้างเมนูและเมนูย่อยของเว็บ เช่น หน้าแรก ประวตั ิสว่ นตวั ผลงาน (Portfolio) รายวชิ าที่สอน เปน็ ตน้

186 ภาพที่ 7.26 การสร้างเมนูของเว็บ 2. จะพบว่ามีเมนู Home ที่ระบบสร้างไว้ให้รออยู่แล้วหนึ่งเมนู ในที่นี้ต้องการสร้างเมนูท่ีมี ช่อื ว่า หนา้ แรก > ดับเบิลคลกิ ท่ี Home เพือ่ เปลี่ยนชือ่ เมนู > พมิ พห์ น้าแรกแทนท่ีลงไปตามภาพท่ี 7.27 ภาพที่ 7.27 การสรา้ งเมนูหน้าแรก 3. สร้างเมนูที่สองคือ ประวัติส่วนตัว คลิกจุดสามจุด > Duplicate page > เปลี่ยนชื่อเมนู เปน็ ประวัติสว่ นตวั > คลิก Done > จะได้เมนูประวตั สิ ว่ นตัวเพ่ิมเข้ามาในเวบ็ ตามภาพท่ี 7.28 -7.29 ภาพท่ี 7.28 การสรา้ งเมนปู ระวตั สิ ่วนตวั

187 ภาพท่ี 7.29 เมนปู ระวตั สิ ว่ นตวั 4. สรา้ งเมนูที่เหลอื ประกอบดว้ ย เมนูผลงาน (Portfolio) เมนวู ิชาทีส่ อน เมนูกจิ กรรมการ สอน เมนูรวมแหล่งเรียนรู้ เมนูติดต่อ และเมนูอ่ืน ๆ ตามท่ีผู้สอนต้องการตามขั้นตอนในข้อ 3 หรือ คลิกจุดสามจุดตรงเมนูหน้าแรก > Duplicate page > เปลี่ยนชื่อเมนูเป็นผลงาน > คลิก Done > เพม่ิ เมนอู ่นื ๆ จนครบทุกเมนู > จะไดเ้ มนตู ามที่ผู้สอนตอ้ งการเพมิ่ เขา้ มาในเวบ็ ตามภาพท่ี 7.30 ภาพที่ 7.30 เมนูท้ังหมดของเว็บไซต์ 5. หากต้องการเปล่ยี นช่ือเมนูสามารถทาไดด้ ้วยการดบั เบิลคลกิ ที่เมนนู น้ั แลว้ เปลี่ยนช่ือได้ ตามตอ้ งการ 6. หากต้องการสลับการเรยี งลาดบั ของเมนูใหมส่ ามารถทาไดด้ ้วยการคลิกที่เมนทู ี่ต้องการ สลับแล้วลากไปแทนท่ีอีกเมนูหนึ่งได้ ภาพท่ี 7.31 เป็นการสลับเมนูรวมแหล่งเรยี นรู้ไปไว้กอ่ นหน้าเมนู กิจกรรมการสอน

188 ภาพที่ 7.31 การสลบั การเรียงลาดบั ของเมนู 7. ทดลองแสดงเว็บไซตเ์ สมือนจรงิ เพ่ือตรวจสอบความถูกต้องก่อนจะเผยแพร่ส่สู าธารณะ ด้วยเมนู Preview แบบ Large screen, Tablet หรือ Phone ภาพที่ 7.32 เป็นการ Preview แบบ Phone หรือเมื่อเปดิ เวบ็ ดว้ ยโทรศัพท์ดว้ ยการเปรยี บเทยี บระหว่างการซอ่ นเมนกู ับการแสดงเมนู และ คลิกเครือ่ งหมาย X สีฟ้าเมอ่ื ต้องการยกเลิกการ Preview ภาพที่ 7.32 เปรยี บเทยี บระหว่างการซ่อนเมนกู บั การแสดงเมนู 8. หากต้องเปล่ียนตาแหน่งการวางเมนูจากด้านบนจอไปไว้ด้านซ้ายมือของจอสามารถทา ได้ดังน้ี คลิก Settings > Navigation > Mode > Side > เมนูท้ังหมดจะย้ายไปซ้ายมือของจอดัง ภาพที่ 7.33

189 ภาพที่ 7.33 การเปลี่ยนตาแหน่งการวางเมนจู ากด้านบนจอไปดา้ นซ้ายมือจอ ภาพที่ 7.34 เปรียบเทยี บตาแหน่งของเมนูเม่ือวางไว้ดา้ นบนและด้านขา้ งของเวบ็ ไซต์ การเพิม่ ขอ้ มลู ใหเ้ ว็บแตล่ ะหน้า มาถึงตอนน้ีได้ตกแต่ง เพ่ิมเมนู และหน้าเพจให้กับเว็บไซต์แล้วอย่างละ 7 เมนู และ 7 หน้าตามลาดับ จาป็นที่จะต้องเพ่ิมเติมข้อมูลแต่ละหน้าให้สอดคล้องกับเมนูที่เตรียมไว้โดยเริ่มจาก หน้าแรก ดังนี้

190 1. สร้างหัวข้อข่าวและประชาสัมพันธ์ด้วยการคลิก Insert > Text box > จะได้ฟอร์ม สาหรับกรอกตัวอักษร > พิมพ์คาว่าข่าวและประชาสัมพันธ์ > เลือกรูปแบบตัวอักษรตามชอบในที่นี้ เลอื กเปน็ Heading ตามภาพที่ 7.35 1.1 เลือกพ้ืนหลังของข้อความด้วยการวางเมาส์ลงไปท่ีข้อความ > คลิก Section background > เลือกรูปแบบตามชอบในท่ีนี้เลือก Emphasis 1 เพ่ือให้พ้ืนหลังของข้อความเป็นสี เดียวกนั กบั สีของหน้าเพจดงั ภาพท่ี 7.36 1.2 หากต้องการทาซ้าหรือคัดลอกฟอร์มข่าวและประชาสัมพันธ์คลิก Duplicate section 1.3 หากตอ้ งการลบฟอร์มขา่ วและประชาสมั พันธค์ ลิก Delete section ภาพท่ี 7.35 การสรา้ งหวั ข้อขา่ วและประชาสมั พนั ธ์

191 Delete section Duplicate section Section background ภาพที่ 7.36 การเลือกพ้ืนหลังของขอ้ ความ 2. เพ่ิมรูปภาพและข้อความในหัวข้อข่าวและประชาสัมพันธ์ด้วยการคลิก Insert > Layouts > เลอื ก Layouts ทีช่ อบ ตวั อย่างในภาพที่ 7.37 เลอื ก Layouts แบบสองภาพขนาดใหญ่ ภาพท่ี 7.37 การเพิม่ รูปภาพและข้อความในหัวข้อข่าวและประชาสมั พันธ์ 2.1 เพ่ิมภาพให้กับข่าวด้วยการคลิกเคร่ืองหมาย + (บวก) ตามภาพท่ี 7.37 > เลือก ภาพสาหรบั ทาขา่ วตามชอบ > พิมพห์ วั ข้อข่าว > จัดวางตามภาพท่ี 7.38

192 2.2 ปรบั ขนาดภาพใหเ้ หมาะสมดว้ ยเคร่อื งมอื Crop หรอื Uncrop 2.3 ปรบั ขนาดข้อความใหเ้ หมาะสมดว้ ยเครือ่ งมือสาหรบั ขอ้ ความ ภาพที่ 7.38 การเพม่ิ รปู ภาพและข้อความในหัวขอ้ ขา่ วและประชาสมั พันธ์ (ต่อ) 2.4 ทดลองแสดงเว็บไซต์เสมือนจริง ภาพที่ 7.39 เป็นการ Preview แบบ Phone > คลกิ เครอ่ื งหมาย X สีฟ้าเมอ่ื ตอ้ งการยกเลกิ การ Preview ภาพที่ 7.39 การทดลองแสดงเวบ็ ไซตเ์ สมือนจริง 3. เช่อื มโยงหรอื เพิม่ ลิงก์ (Link) ให้กับภาพข่าวและประชาสมั พนั ธข์ องภาพท่ี 7.40 เพอื่ ให้ ผู้อ่านที่สนใจข่าวสามารถเข้าถึงข้อมูลได้เพิ่มขึ้น อาทิ ลิงก์ไปยังแหล่งข่าว ลิงก์ไปยังเว็บต้นฉบับ หรือ ลงิ กไ์ ปยงั เครือข่ายสงั คมออนไลน์อยา่ ง Facebook และ Youtube เป็นตน้

193 3.1 การเชื่อมโยงภาพไปยังท่ีต้องการเชื่อมโยง คลิกภาพท่ีต้องการเช่ือมโยง > Insert link > พิมพ์หรือวาง URL ของเว็บต้นทางในท่ีนี้คือ www. pixabay.com > apply > ตรวจสอบ การเช่ือมโยงดว้ ยปุ่ม Preview ภาพที่ 7.40 การเชอื่ มโยงภาพไปยงั ลิงกท์ ่ตี ้องการ 4. สร้างหัวข้อที่ต้องการให้คนเห็นทันทีที่หน้าแรกต่อจากข่าวและประชาสัมพันธ์เพิ่มเติม ตามชอบ 5. เพ่ิมข้อมูลให้ครบทุกหน้าของเว็บไซต์ตามเมนูท่ีสร้างไว้ ได้แก่ เมนูประวัติส่วนตัว ผลงาน วิชาทสี่ อน รวมแหลง่ เรียนรู้ กจิ กรรมการสอน ตดิ ตอ่ การเพม่ิ ข้อมูลสว่ นท้ายของเวบ็ ไซต์ Footer หรือส่วนท้ายของเว็บไซต์สาหรับเพ่ิมเติมข้อมูลอื่น ๆ อาทิ ที่อยู่ เบอร์โทรศัพท์ อเี มล หรือเป็นแหลง่ เชอื่ มโยงไปยงั เว็บไซต์อน่ื ๆ ท่ีเกย่ี วข้องดังตัวอยา่ งในภาพท่ี 7.41 การสร้าง Footer ให้กับเว็บไซต์ทาได้ด้วยการคลิก Add Footer > พิมพ์ข้อความท่ี ต้องการใหแ้ สดง > จดั รูปแบบข้อความตามชอบดังตัวอยา่ งภาพท่ี 7.42 ภาพที่ 7.41 ส่วนทา้ ยของเว็บไซต์

194 ภาพที่ 7.42 การเพม่ิ สว่ นท้ายของเวบ็ ไซต์ การเพ่ิมขอ้ มูลให้เวบ็ แต่ละหน้า หลังจากผู้สอนได้เพิ่มเติมข้อมูลทั้งหมดลงไปทุกหน้าของเว็บไซต์แล้ว Google Site ยัง เตรียมความสามารถและฟังกช์ นั อืน่ ๆ ท่นี า่ สนใจและมีประโยชนใ์ ห้นามาใช้งาน โดยเฉพาะซอฟต์แวร์ ของตระกูล Google เช่น Youtube, Google form, Google sheet และ Google map เป็นต้น สามารถนามาใช้งานร่วมด้วยได้ดังมีการใช้งานดังน้ี คลิกเมนู Insert > ตามด้วยฟังก์ชันที่ต้องการ ตามภาพที่ 7.43 ภาพท่ี 7.43 ความสามารถเพ่ิมเติมของ Google Sites 1. Collapsible text สาหรับซ่อนและแสดงข้อความบนเว็บไซต์ โดยเฉพาะข้อความที่มี ความยาวเป็นพิเศษ เพื่อทาให้หน้าเว็บดูสะอาดตาไม่รกรุงรังไปด้วยข้อความ ดังภาพที่ 7.44 และ 7.45

195 ภาพที่ 7.44 การซ่อนข้อความบนเวบ็ ไซต์ ภาพที่ 7.45 การแสดงข้อความบนเว็บไซต์ การสร้าง Collapsible text คลิกเมนู Insert > Collapsible text > พิมพ์หรือ Copy ขอ้ ความลงไปในฟอรม์ > ปรับแตง่ ขอ้ ความตามชอบ

196 ภาพท่ี 7.46 การสร้าง Collapsible text 2. Image carousel สาหรับแสดงภาพแบบสไลด์หรือสลับภาพไปทีละภาพ เหมาะกับ การนาเสนอภาพที่ประกอบไปด้วยภาพมากกว่า 1 ภาพ ทาให้ไม่กินเน้ือท่ีของเว็บและสามารถคลิกดู ภาพไปเร่อื ย ๆ ได้จนหมดดว้ ยลกู ศรด้านซา้ ยและขวา ภาพท่ี 7.47 การแสดงภาพแบบสไลด์ การสร้าง Image carousel คลิกเมนู Insert > Image carousel > Insert images > เลือกภาพ > Insert > ปรบั แตง่ ตามชอบ

197 ภาพที่ 7.48 การสร้าง Image carousel 3. Divider เป็นเส้นตรงสาหรับแบ่งพ้ืนที่หน้าเว็บให้เป็นสดั สว่ นหรอื วางไว้เพื่อความสวยงาม ของเวบ็ การสรา้ ง Divider คลิกเมนู Insert > เลือกตาแหน่งทต่ี อ้ งการวางเส้นแบ่ง > Divider ภาพที่ 7.49 การสร้างเสน้ ตรงสาหรบั แบง่ พื้นที่หน้าเว็บ 4. Youtube สาหรับเพิ่มแหลง่ ขอ้ มลู ที่อย่ใู นรปู ของวดิ โี อจาก Youtube ซงึ่ ผู้สอนสามารถ นามาจัดเก็บไว้เป็นแหล่งข้อมูลเพื่อใช้ประกอบการสอน ประกอบการทาเอกสารการสอน หรือเป็น แหล่งทรัพยากรการเรียนรู้ให้ผู้เรียนเข้ามาเรียนรู้ในหัวข้อท่ีผู้สอนกาหนดได้ นอกจากน้ันผู้สอนยัง

198 ส ามารถใช้เป็นแหล่ งรว บรว มแหล่ งข้อมูล ท่ีอยู่ในรู ปข อง วิดีโ อ ท่ีผู้ ส อนเป็นผู้ จัด ทา ขึ้นมา ไ ว้ เ ป็ น Portfolio เพือ่ การใชง้ านในอนาคตต่อไปไดด้ ว้ ย ภาพที่ 7.50 แหล่งข้อมลู ที่อยู่ในรูปของวิดโี อจาก Youtube การนาวิดีโอจาก Youtube มาเก็บไว้ในเวบ็ จาเป็นต้องใช้ URL ของคลิปน้ันจึงต้อง Copy URL ของคลิปนั้นเกบ็ ไวก้ อ่ น หลังจากนัน้ คลิกเมนู Insert > Layouts เพ่อื เลอื กรปู แบบการวดั วาง > คลิก + (บวก) > Youtube > Select a file > วาง URL ของคลิปวิดีโอ > Search > Select > ต้ัง ช่ือคลปิ ภาพที่ 7.51 การเพ่ิมแหลง่ ข้อมูลท่ีอยใู่ นรูปของวิดโี อจาก Youtube

199 ภาพที่ 7.52 การเพิม่ แหล่งข้อมูลที่อย่ใู นรูปของวดิ โี อจาก Youtube (ต่อ) 5. Calendar หรือปฏทิ ินงานสอนหรือภารกจิ ที่ผสู้ อนบันทึกไว้สามารถนามาใสไ่ ว้ในเว็บได้ เช่นเดียวกันโดยเฉพาะใส่ไว้ในเมนูติดต่อ การเพื่อปฏิทินทาได้ดังน้ี คลิกเมนู Insert > Calendar > เลือกปฏิทนิ > Insert > จดั ตกแตง่ ใหเ้ หมาะสมกับพื้นท่วี ่าง ภาพที่ 7.53 การเพ่ิมปฏิทนิ 6. Map การนาแผนท่ีมาใส่ไว้ในเว็บช่วยให้ผู้ท่ีเดินทางได้รับรู้สถานท่ีและศึกษาเส้นทาง กอ่ นเดนิ ทาง การเพมิ่ แผนท่ใี นเว็บทาไดด้ ังนี้ คลกิ เมนู Insert > Map > Enter a location > Select > จัดตกแตง่ ใหเ้ หมาะสมกับพื้นที่ว่าง

200 ภาพท่ี 7.54 การเพ่ิมแผนที่ บทสรุป การจัดการเรียนการสอนนอกจากจัดกิจกรรมตามที่ผู้สอนจัดเตรียมไว้แล้ว ผู้สอน จาเป็นต้องจัดเตรียมและจัดหาแหล่งทรัพยากรสาหรับการสนับสนุนการจัดการเรียนการสอน แหล่ง ทรัพยากรท่ีได้รับความนิมในปัจจุบันคือแหล่งทรัพยากรแบบออนไลน์ ท่ีเป็นแหล่งรวมทรัพยากร ประเภทข้อความ เสียง ภาพน่ิง ภาพเคลื่อนไหว กราฟิก รวมถึงโปรแกรมคอมพิวเตอร์หรือแอปพลิเค ชัน อาทิ www.bensound.com เว็บไซต์ที่ให้บริการดาวน์โหลดเสียง www.pixabay.com เว็บไซต์ ที่ให้บริการดาวน์โหลดเสียง ภาพนิ่ง และภาพเคล่ือนไหว รวมถึง www.youtube.com และ www.facebook.com เปน็ ต้น แหล่งทรัพยากรออนไลน์ประเภทข้อความ อาทิ ศูนย์ดัชนีการอ้างอิงวารสารไทย Google Scholar ฐานข้อมูลสาหรับการสืบค้นผลงานวิจัยและผลงานวิชาการท่ีตีพิมพ์ในวารสารวิชาการทั้ง ของไทยและต่างชาติ Research Gate เครอื ข่ายสังคมออนไลน์สาหรบั นักวิจัยที่สามารถนาข้อมูลและ งานวจิ ัยมานาเสนอและเผยแพร่เพอื่ แบ่งปันกับนกั วิจยั แหล่งทรัพยากรออนไลน์ประเภทเสยี ง สาหรับการตัดตอ่ วิดีโอการสอน การทาส่ือการสอน อาทิ Bensound, Soundcloud และ Free-Stock-Music แหล่งทรัพยากรออนไลน์ประเภทภาพนิ่งและภาพเคล่ือนไหว อาทิ แหล่งทรัพยากร ออนไลน์ประเภทภาพน่ิงและภาพเคลอ่ื นไหวจาก Pixabay และ Pixel เป็นแหล่งข้อมูลสาหรับสืบคน้ และคัดเลือกภาพน่ิงและภาพเคลื่อนไหวหรือวิดีโอที่มีลิขสิทธิ์ แต่อนุญาตให้ผู้สอนสามารถนามา ประยุกต์ใช้ในการจัดการรเรียนการสอน ทาส่ือประกอบการสอน หรือมอบหมายงานให้ผู้เรียนสืบค้น ขอ้ มูลได้

201 แหล่งทรัพยากรออนไลน์ประเภทกราฟิก เป็นแหล่งทรัพยากรเกี่ยวกับการทางานด้าน กราฟิก อาทิ โปรแกรมตกแต่งและตัดต่อภาพ ตกแต่งและจัดรูปแบบเอกสารสาหรับนาไปใช้เผยแพร่ เป็นรูปเล่มหรือเผยแพร่ผ่านเครือข่ายสังคมออนไลน์ อาทิ โปรแกรม Canva โปรแกรม Removebg และ โปรแกรม GIFMaker

203 บทท่ี 8 ซอฟตแ์ วร์ประยุกตอ์ อนไลน์เพือ่ สนับสนุนกจิ กรรมการเรยี นการสอน กิจกรรมการเรียนการสอน คือกิจกรรมท่ีเกี่ยวข้องกับการจัดการเรียนการสอนท้ังหมด ที่ผู้สอนจาเป็นตอ้ งเตรยี มการและจัดกระทาให้เกิดข้ึนสาหรับประกอบการจัดการเรียนการสอนให้กบั ผู้เรียนในช้ันเรียนปกติและชั้นเรียนออนไลน์ ท้ังแบบประสานเวลาและแบบไม่ประสานเวลา เพื่อให้ การจัดการเรียนการสอนเป็นไปอย่างมีประสิทธิภาพและบรรลุวัตถุประสงค์ กิจกรรมการเรียน การสอนท่ีครูต้องเข้าไปเกี่ยวข้องมีจานวนมากดังตัวอย่างในภาพที่ 8.1 ได้แก่ กิจกรรมก่อนสอน เช่น วางแผนการสอน และเตรียมการสอน กิจกรรมระหว่างสอน เช่น จัดกิจกรรมการเรียน เสริมสร้าง บรรยากาศการเรียน สนับสนุนผู้เรียน และประเมินผลระหว่างเรียน และกิจกรรมหลังสอน เช่น ประเมนิ ผลหลงั เรียน และใหข้ อ้ มูลย้อนกลบั แกผ่ ู้เรยี น ภาพท่ี 8.1 กจิ กรรมการเรยี นการสอนท่ีเกี่ยวข้องกับผสู้ อน ด้วยกิจกรรมการเรียนการสอนท่ีผู้สอนต้องรับผิดชอบบวกกับภาระงานด้านอ่ืน ๆ อีก จานวนมาก การนาเคร่ืองมือดิจิทัลประเภทซอฟต์แวร์ประยุกต์ออนไลน์มาช่วยในการสนับสนุน กิจกรรมการเรียนการสอน ช่วยลดภาระและหน้าท่ีหลักเก่ียวกับกิจกรรมการเรียนการสอนของผ้สู อน ได้ ซอฟตแ์ วร์ประยุกต์ออนไลน์หลักและจาเป็นต่อการจัดการเรียนการสอนได้กล่าวไวใ้ นบทเรียนก่อน หน้าน้ีแล้วบางส่วน ซ่ึงจะไม่นามากล่าวซ้าในบทเรียนน้ีอีก และในบทนี้ซอฟต์แวร์ประยุกต์ออนไลน์ เพื่อช่วยสนับสนุนกิจกรรมการเรียนการสอนของผู้สอนจะนาเสนอเฉพาะซอฟต์แวร์ประยุกต์ออนไลน์ สาหรับสนับสนุนกิจกรรมก่อนสอนและกิจกรรมระหว่างสอนเท่าน้ัน สาหรับซอฟต์แวร์ประยุกต์ ออนไลน์สาหรบั สนับสนุนกิจกรรมหลังสอนจะได้กลา่ วถงึ ในบทถัดไป ซอฟตแ์ วรป์ ระยกุ ตอ์ อนไลน์

204 สาหรับสนับสนุนกิจกรรมก่อนสอนและกิจกรรมระหว่างสอนที่นาเสนอในบทนี้ประกอบด้วย MindMup ซอฟต์แวร์ประยุกต์ออนไลน์สาหรับสร้างแผนผังความคิด Prezi ซอฟต์แวร์ประยุกต์ ออนไลน์สาหรับสร้างคลิปวิดีโอการสอน PubHTML5 ซอฟต์แวร์ประยุกต์ออนไลน์สาหรับสร้าง หนังสืออิเล็กทรอนิกส์ Jamboard ซอฟต์แวร์ประยุกต์ออนไลน์สาหรับการเรียนแบบร่วมมือ AutoDraw ซอฟตแ์ วรป์ ระยกุ ตอ์ อนไลน์สาหรับการคิดสร้างสรรค์ และ AnyDesk ซอฟต์แวรป์ ระยุกต์ ออนไลนส์ าหรบั ควบคมุ คอมพิวเตอร์ระยะไกล มีรายละเอียดดงั ตอ่ ไปน้ี MindMup ซอฟต์แวรป์ ระยกุ ต์ออนไลน์สาหรับสรา้ งแผนผงั ความคิด MindMup เป็นโปรแกรมสาหรับสร้างแผนผังความคิด (Mind Mapping) แบบออนไลนท์ ่ี ไม่จาเป็นต้องติดตั้งลงในคอมพิวเตอร์ สามารถใช้งานผ่านเว็บไซต์ได้โดยตรง ปัจจุบันรองรับ การทางานผ่าน Google Drive สามารถติดต้ังให้ทางานและสามารถเข้าถึงเพ่ือใช้งานได้เสมือนเป็น แอปพลิเคชันหน่ึงของ Google ผู้สอนสามารถนา MindMup มาประยุกต์ใช้ในการสร้างแผนผัง ความคิดเพื่อสนับสนุนกิจกรรมก่อนสอน อาทิ สร้างแผนผังความคิดเนื้อหาวิชาเพื่อเตรียมเขียน แผนการสอน เตรียมเขียนเอกสารประกอบการสอน เตรียมส่ือการสอน ดังภาพท่ี 8.2 ที่แสดงแผนผงั ความคิดเพื่อวางแผนการเขียนหนังสือเล่มนี้ด้วย MindMup และสนับสนุนกิจกรรมระหว่างสอนได้ เป็นอย่างดี เน่ืองจากสามารถนามาใช้เป็นเครื่องมือดิจิทัลท่ีทาหน้าท่ีเป็นสื่อการสอน หรือเครื่องมือ ดิจิทัลให้ผู้เรียนได้ลงมือปฏิบัติกิจกรรม เช่น ให้ผู้เรียนสร้างแผนผังความคิดตามโจทย์ท่ีกาหนด สรุป เนื้อหาของบทเรียน เป็นต้น MindMup ซอฟต์แวร์ประยุกต์ออนไลน์สาหรับสร้างแผนผังความคิดมี วธิ กี ารใชง้ านดงั น้ี ภาพท่ี 8.2 แผนผงั ความคดิ เก่ยี วกบั คอมพวิ เตอรส์ าหรับครูทส่ี รา้ งจาก MindMup 1. Login ด้วย Gmail เพือ่ เขา้ Google Drive > New > More > Connect more apps ดังภาพท่ี 8.3 > ค้นหาคาว่า mindmup > MindMup 2 for Google Drive ดงั ภาพท่ี 8.4 > Install

205 ภาพท่ี 8.3 Login ด้วย Gmail เพื่อเข้า Google Drive ภาพที่ 8.4 การค้นหา MindMup จาก Google Workspace Marketplace 2. หลัง Install แล้วเข้า Google Drive > New > More > คลิก MindMup 2 ดังภาพท่ี 8.5 > หรือคลิก Google apps หรือจุดเกา้ จุดด้านขวามอื บนจะพบกบั MindMup ดงั ภาพท่ี 8.6 ภาพท่ี 8.5 การเรยี กใชง้ าน MindMup ผา่ นทาง Google Drive

206 ภาพที่ 8.6 การเรียกใชง้ าน MindMup ผา่ นทาง Google apps 3. เข้าสู่หน้าหลักของ MindMup > คลิก CREATE A NEW MAP ดงั ภาพที่ 8.7 ภาพที่ 8.7 หน้าหลกั ของ MindMup 4. เข้าสู่พ้ืนท่ีทางานของ MindMup > ดับเบิลคลิกที่รูทโหนด (Root Node) ดังภาพท่ี 8.8 เพอื่ แก้ไขขอ้ ความ > พมิ พ์ข้อความลงไปดงั ภาพท่ี 8.9 > ต้ังชือ่ ไฟลใ์ ห้กับ Mind Mapping 5. คลกิ เลอื ก Turn on Autosave ดังภาพที่ 8.9 เพื่อใหโ้ ปรแกรมบนั ทึกการเปลย่ี นแปลง ให้โดยอัตโนมัติไวใ้ น Google Drive > หรือคลกิ SAVE เพอ่ื บันทกึ ดว้ ยตัวเอง ภาพท่ี 8.8 พื้นทท่ี างานของ MindMup

207 ภาพท่ี 8.9 การพมิ พข์ ้อความลงในรูทโหนด 6. คลกิ ท่รี ทู โหนด > กด Tab ทีแ่ ป้นพิมพ์เพิ่มโหนดและพิมพ์ข้อความดังภาพท่ี 8.10 และ ภาพท่ี 8.11 ภาพท่ี 8.10 การเพ่ิมโหนดให้กับแผนผังความคิด ภาพที่ 8.11 การเพิ่มโหนดและขอ้ ความให้กับแผนผงั ความคิด

208 7. เพ่ิมความน่าสนใจให้ Mind Mapping ด้วยการคลิก Toggle stickers > เลือก Stickers ที่ชอบดังภาพที่ 8.12 หรือจะเติมสีให้กับเส้นด้วยการคลิกที่เส้น > เลือกสีเส้นตามชอบ ดงั ภาพที่ 8.13 และยังมลี กู เล่นใหเ้ ลอื กใชอ้ กี มากทผ่ี ู้สอนสามารถเลือกใชง้ าน ภาพที่ 8.12 การเพิ่ม stickers ใหก้ ับแผนผงั ความคิด ภาพที่ 8.13 การเตมิ สีให้เสน้ ของแต่ละโหนด 8. ภาพท่ี 8.14 มีโหนด Hardware ซ้ากัน 2 โหนด ลบออกได้ด้วยการคลิกที่โหนด ทตี่ อ้ งการลบ > กดปมุ่ Delete ทแ่ี ปน้ พิมพ์

209 ภาพที่ 8.14 การลบโหนดทซี่ ้ากันออก 9. หากต้องการลบเส้นเช่ือมระหว่างโหนดให้คลิกเส้นท่ีต้องการลบ > Remove line ดงั ภาพที่ 8.15 ภาพที่ 8.15 การลบเสน้ เชอ่ื มระหวา่ งโหนด 10. เมื่อต้องการนา Mind Mapping ไปใช้งานคลิก File > Download as > เลือก ประเภทไฟล์ท่ตี ้องการในทีน่ ี้เลอื กเป็น PDF > EXPORT > OPEN หรอื DOWNLOAD ดงั ภาพที่ 8.16

210 ภาพท่ี 8.16 การนา Mind Mapping ไปใชใ้ นรปู ของไฟล์ pdf 11. ไฟล์งานของ Mind Mapping จะถกู จัดเกบ็ ไว้ใน Google Drive หากตอ้ งการเรยี กมา ปรับแต่งหรือแก้ไขให้คลิกขวาท่ีไฟล์ > Open with > MindMup 2.0 For Google Drive ดังภาพที่ 8.17 ภาพที่ 8.17 การเปดิ ไฟล์ของ MindMup ท่ีจัดเก็บไว้ใน Google Drive Prezi Video ซอฟตแ์ วร์ประยุกต์ออนไลน์สาหรับสร้างคลปิ วดิ ีโอการสอน Prezi เป็นซอฟตแ์ วร์ประยกุ ตอ์ อนไลน์ที่มปี ระโยชนห์ ลากหลาย นิยมนามาใช้สาหรับสร้าง สื่อการสอนและส่ือสาหรับนาเสนอคล้ายกับ Microsoft PowerPoint ดังภาพท่ี 8.18 สามารถ นาเสนอได้ท้ังในแบบออนไลน์และออฟไลน์ แต่ในท่ีน้ีจะนา Prezi มาเป็นเคร่ืองมือสาหรับสร้างคลิป วิดีโอการสอนแบบออนไลน์ น่ันคือการนา Prezi Video มาใช้ในการบันทึกการสอนผ่านกล้องวิดีโอ และไมโครโฟนแบบออนไลน์ โดยไม่ต้องติดตั้ง Prezi ลงในเคร่ืองคอมพิวเตอร์แต่อย่างใด รูปแบบ การบันทึกประกอบด้วยบันทึกการสอนเฉพาะผู้สอน บันทึกการสอนของผู้สอนและสื่อพร้อมกันดัง ภาพท่ี 8.19 และบันทึกเฉพาะสื่อการสอน หลังจากบันทึกการสอนเสร็จเรียบร้อยแล้วสามารถแชร์ คลิป การสอนไปยังผู้เรียนผ่านเครือข่ายสังคมออนไลน์ต่าง ๆ และแชร์คลิปให้ผู้เรียนได้เรียน ออนไลนแ์ บบไมป่ ระสานเวลาไว้ใน Google Classroom ได้อีกดว้ ย

211 ภาพที่ 8.18 ส่ือการสอนหรอื สื่อสาหรับนาเสนอทส่ี ร้างจาก Prezi ภาพที่ 8.19 คลิปวิดโี อการสอนท่ีสรา้ งจาก Prezi Video Prezi ซอฟตแ์ วรป์ ระยกุ ต์ออนไลนส์ าหรับสร้างคลปิ วดิ ีโอการสอนมีวธิ ีการใช้งานดังนี้ 1. Login ดว้ ย Gmail เพอ่ื เขา้ Google Drive > New > More > Connect more apps ดังภาพที่ 8.20 > คน้ หาคาว่า Prezi Video > Prezi Video for Google Drive > Install

212 ภาพที่ 8.20 การเตรยี มการเพื่อติดตัง้ Prezi Video 2. หลังจาก Install เสร็จเรียบร้อยแล้วให้เข้า Google Drive > New > More > คลิก Prezi Video ดงั ภาพท่ี 8.21 ภาพท่ี 8.21 โปรแกรม Prezi Video ทต่ี ิดตัง้ เสรจ็ เรียบรอ้ ยแลว้ 3. เข้าสู่หน้าแรกของ Prezi Video ระบบจะตรวจสอบการทางานของกล้องวิดีโอและ ไมโครโฟน ดงั ภาพท่ี 8.22 เน่อื งจากอุปกรณท์ ้ังสองอยา่ งนม้ี คี วามจาเป็นต่อการบันทึกวิดีโอการสอน

213 ภาพท่ี 8.22 Prezi Video ตรวจสอบการทางานของกลอ้ งวิดีโอและไมโครโฟน 4. เข้าสู่พื้นท่ีทางานของ Prezi Video ประกอบด้วย พื้นที่ทางานและจอแสดงผล การทางาน ส่วนของ Template และวิดีโอต้นแบบให้เลือกใช้งาน และส่วนของลาดับการทางานของ โปรแกรมดงั ภาพท่ี 8.23 พนื้ ทที่ างานและจอแสดงผลการทางาน ส่วนของลาดบั การทางาน ปมุ่ Chrome ภาพที่ 8.23 พนื้ ที่ทางานและจอแสดงผล Template และวิดีโอต้นแบบของ Prezi Video

214 5. ก่อนบนั ทกึ วดิ โี อการสอนขน้ั ที่หน่งึ ให้เลือก Template ทช่ี อบสาหรบั แสดงผลภาพและ ขอ้ ความทตี่ ้องการนาเสนอ ภาพท่ี 8.24 การเลอื ก Template สาหรับแสดงผลภาพและข้อความ 6. เพิม่ ภาพน่งิ และข้อความทตี่ อ้ งการนาเสนอด้วยการ Add frame และ ADD TEXT ภาพท่ี 8.25 การเพิ่มภาพนิง่ และข้อความ

215 7. ข้ันท่ีสามทาการสอนและบันทึกวิดีโอการสอนด้วยการคลิกปุ่ม Record หรือวงกลมสี แดงตามภาพที่ 8.26 และคลิก Done recording เมื่อบันทึกการสอนเสร็จเรียบร้อยแล้วตาม ภาพที่ 8.27 ภาพที่ 8.26 สอนและบนั ทกึ วดิ ีโอการสอน ภาพที่ 8.27 คลิก Done recording เมื่อบันทึกวิดโี อการสอนเสร็จ

216 8. ขั้นท่ีสี่แสดงตัวอย่างงานหรือ Preview และตัดคลิปวิดีโอส่วนท่ีไม่ต้องการออกได้ด้วย การคลิกที่ Trim หลงั จากพบวา่ สมบรู ณ์แล้วคลิก Save video เพ่อื บันทึกและนาไฟล์ VDO ไปใช้งาน ตามภาพที่ 8.28 และ 8.29 ภาพท่ี 8.28 แสดงตวั อยา่ งงานและตัดตัดคลปิ วดิ โี อส่วนที่ไม่ตอ้ งการออก ภาพที่ 8.29 กระบวนการบันทกึ ไฟลข์ องคลปิ วิดโี อ

217 9. การเผยแพร่คลิปมีให้เลือกหลายช่องทางประกอบด้วยการ Copy Link ส่งให้ผู้เรียน การแชรไ์ ฟล์ให้ผูเ้ รียน และการแชร์ให้ผเู้ รยี นผา่ นทาง Google Classroom เปน็ ต้น ภาพท่ี 8.30 วิธกี ารเผยแพร่คลิปวดิ ีโอไปยังผู้เรยี น ภาพท่ี 8.31 ตวั อยา่ งคลปิ วดิ ีโอการสอนที่ถกู แชรใ์ ห้ผู้เรยี นทาง Google Classroom 10. การนาเสนอผลทางหน้าจอขณะบันทึกสอนมี 3 รูปแบบให้ผู้สอนเลือกใช้อาจจะ เลือกใช้รูปแบบใดรูปแบบหน่ึงหรือผสมผสานทั้งสามรูปแบบเข้าด้วยกัน ประกอบด้วยการนาเสนอ เฉพาะผู้สอน การนาเสนอผูส้ อนและส่อื พร้อมกนั ดังภาพท่ี 8.32 และการนาเสนอเฉพาะส่อื การสอน

218 ภาพท่ี 8.32 การนาเสนอผลทางหนา้ จอขณะบันทึกการสอนแบบนาเสนอผู้สอนและสื่อพรอ้ มกนั AnyDesk ซอฟต์แวรป์ ระยกุ ตอ์ อนไลน์สาหรบั ควบคมุ คอมพิวเตอร์ระยะไกล AnyDesk เป็นฟรีซอฟต์แวร์สาหรับควบคุมคอมพิวเตอร์ส่วนบุคคลแบบออนไลน์ หมายความว่าหากผู้สอนกับผู้เรียนอยู่คนละสถานที่กันแต่คอมพิวเตอร์ โทรศัพท์มือถือ หรือแท็บเล็ต ของผู้เรียนมีปัญหา เช่น ไม่สามารถเปิดโปรแกรมได้ ไม่สามารถเข้าเรยี นออนไลนไ์ ด้ หรอื เกิดปัญหาใด กับคอมพิวเตอร์ของผู้เรียนก็ตาม แต่ยังสามารถใช้งานอินเทอร์เน็ตได้ ผู้สอนสามารถเข้าถึงและ ควบคุมคอมพิวเตอร์ของผู้เรียนได้ด้วย AnyDesk โดยผู้สอนจะมองเห็นหน้าจอ ควบคุมเมาส์ และใช้ งานคอมพิวเตอร์ของผู้เรียนได้เสมือนผู้สอนนั่งอยู่หน้าคอมพิวเตอร์ของผู้เรียน โดยคอมพิวเตอร์ท้ัง สองฝ่ายจาเป็นต้องติดตั้ง AnyDesk ไว้ด้วยเสมอดังภาพที่ 8.33 แสดงหน้าจอคอมพิวเตอร์ของผู้สอน และของผู้เรียนที่ติดต้ัง AnyDesk ไว้พร้อมแล้วก่อนท่ีผู้สอนจะเข้าถึงและควบคุมคอมพิวเตอร์ของ ผเู้ รยี น (ก) หน้าจอคอมพวิ เตอร์ของผู้สอน (ข) หนา้ จอคอมพวิ เตอรข์ องผู้เรยี น ภาพท่ี 8.33 หน้าจอคอมพิวเตอร์ของผ้สู อนและของผูเ้ รยี นทตี่ ดิ ตงั้ โปรแกรม AnyDesk วิธีการใชง้ านโปรแกรม AnyDesk มีดงั ตอ่ ไปนี้ 1. เขา้ เวบ็ ไซต์ www.anydesk.com > Free Download ดงั ภาพท่ี 8.34

219 2. หากต้องการใช้กับระบบปฏิบัติการอ่ืนที่ไม่ใช่ Windows คลิก Available for other platforms 3. เมื่อไดไ้ ฟล์ AnyDesk.exe ดงั ภาพท่ี 8.35 > คลกิ Run เพ่อื ติดตง้ั โปรแกรมดังภาพที่ 8.36 ภาพท่ี 8.34 หนา้ แรกของโปรแกรม AnyDesk ภาพที่ 8.35 ไฟล์ AnyDesk.exe สาหรบั ติดตัง้ โปรแกรม ภาพที่ 8.36 คลิก Run เพ่อื ติดตัง้ โปรแกรม

220 4. คลิก Install AnyDesk ดังภาพท่ี 8.37 > Accept & Install ดังภาพท่ี 8.38 > Install ดงั ภาพที่ 8.39 ภาพท่ี 8.37 คลกิ Install AnyDesk เพื่อตดิ ตั้งโปรแกรม ภาพท่ี 8.38 คลกิ Accept & Install เพือ่ ติดต้งั โปรแกรม ภาพท่ี 8.39 คลิก Install เพอ่ื ตดิ ตงั้ โปรแกรม

221 5. คลิกท่ีไอคอนของโปรแกรม AnyDesk หน้า Desktop ของคอมพิวเตอร์ โปรแกรมจะ พร้อมใช้งานดังภาพที่ 8.40 หากผู้สอนใช้โทรศัพท์มือถือเป็นตัวควบคุมและเข้าถึงคอมพิวเตอร์ของ ผู้เรียน ผู้สอนจาเป็นต้องติดต้ังโปรแกรม AnyDesk ก่อนเสมอด้วยการไปท่ี Play Store > Anydesk > Install ภาพท่ี 8.40 โปรแกรม AnyDesk ฝ่ังผสู้ อน 6. ผูส้ อนบอกให้ผู้เรียนคลิกเปิดโปรแกรม AnyDesk จากหน้า Desktop ของคอมพิวเตอร์ สมมุตใิ ห้ภาพท่ี 8.41 เปน็ หน้าจอคอมพิวเตอร์ของผู้เรียนก่อนที่ผูส้ อนจะเข้าถึงและควบคมุ จะเหน็ ว่า มีตัวเลข 9 ตัวปรากฎอยู่ ตัวเลขดังกล่าวเปรียบเสมือนเลขประจาตัวหรือท่ีอยู่ของคอมพิวเตอร์ แตล่ ะเครอ่ื ง ภาพท่ี 8.41 เลขประจาตัวหรือท่ีอยูข่ องคอมพวิ เตอร์ของผเู้ รยี น 7. ให้ผูเ้ รียนสง่ ตวั เลข 9 ตวั ใหก้ บั ผูส้ อน > ผสู้ อนกรอกตวั เลขลงไปในช่อง Remote Desk > Connect เพอ่ื ทาการเชอ่ื มตอ่ คอมพิวเตอร์ทงั้ สองเข้าดว้ ยกนั ดังภาพที่ 8.42 8. ให้ผู้เรียนคลิก Accept เพื่อยอมรับหรืออนุญาตให้คอมพิวเตอร์ของผู้สอนเชื่อมต่อ ดงั ภาพที่ 8.42

222 ภาพที่ 8.42 ผู้เรียนอนญุ าตให้คอมพิวเตอร์ของผูส้ อนเช่อื มต่อ 9. คอมพวิ เตอร์ของผู้สอนและผเู้ รยี นเชื่อมต่อเขา้ ด้วยกันดังภาพท่ี 8.43 และภาพท่ี 8.44 ภาพที่ 8.43 หน้าจอคอมพิวเตอรข์ องผสู้ อนขณะเชือ่ มต่อกับของผูเ้ รยี น

223 ภาพที่ 8.44 หนา้ จอคอมพิวเตอรข์ องผู้เรียนขณะเชอื่ มต่อกับของผสู้ อน 11. เมื่อมาถึงข้ันตอนนี้ผู้สอนสามารถเข้าถึง ควบคุมเมาส์ ใช้งาน และแก้ไขปัญหาท่ีเกิด ขึ้นกับคอมพิวเตอร์ของผู้เรียนได้เสมือนเป็นคอมพิวเตอร์ของผู้สอนเองได้แล้ว เช่น คลิกปุ่มขวาของ เมาส์เพ่ือให้ Show desktop icon ดังภาพท่ี 8.45 หรือแม้แต่ส่ังให้คอมพิวเตอร์ของผู้เรียน Shut down ดังภาพท่ี 8.46 ก็ทาได้เช่นเดยี วกนั ภาพที่ 8.45 ผู้สอนเขา้ ถึง ควบคมุ เมาส์ และใช้งานคอมพิวเตอรข์ องผเู้ รยี น

224 ภาพที่ 8.46 ผสู้ อนคลกิ เพ่อื Shut down คอมพวิ เตอรข์ องผ้เู รยี น 12. เม่อื เสรจ็ สิ้นการใช้งานหรอื ผสู้ อนสามารถแก้ไขปญั หาคอมพวิ เตอร์ใหก้ บั ผู้เรียนได้แล้ว หากต้องการยกเลิกการเชื่อมต่อหรือยกเลิกการควบคุมและเข้าใช้งานคอมพิวเตอร์ของผู้เรียนให้คลิก Disconnect ดงั ภาพท่ี 8.47 ภาพท่ี 8.47 ยกเลกิ การเช่ือมตอ่ และเข้าใชง้ านคอมพวิ เตอร์ของผู้เรียน 13. ผู้สอนสามารถใช้โทรศัพท์มือถือท่ีติดต้ังโปรแกรม AnyDesk ไว้เรียบร้อยแล้ว เข้าถึง และแก้ไขปัญหาให้กับเครื่องคอมพิวเตอร์ของผู้เรียนผ่านทางโทรศัพท์มือถือของผู้สอนได้เชน่ เดยี วกนั ดังภาพที่ 8.48 แสดงการติดต้ังโปรแกรม AnyDesk และแสดงให้เหน็ วา่ ผู้สอนสามารถเข้าถึง ควบคุม และจัดการทุกอย่างในคอมพิวเตอร์ของผู้เรียนผ่านทางหน้าจอของโทรศัพท์มือถือของผู้สอน แต่มี ขอ้ จากดั ท่ีหน้าจอของโทรศัพทม์ ือถือมีขนาดเล็กทาให้เข้าถึงและแก้ไขปัญหาให้กับเครื่องคอมพิวเตอร์

225 ของผู้เรียนมอี ปุ สรรคพอสมควร การแกไ้ ขข้อจากัดนี้สามารถทาได้ด้วยการปรับจอภาพโทรศัพท์มือถือ ให้เป็นแนวนอนดังภาพท่ี 8.49 และ 8.50 ภาพท่ี 8.48 การติดตัง้ และเข้าถึงคอมพิวเตอร์ของผเู้ รียนผ่านทางโทรศัพท์มือถือ ภาพท่ี 8.49 การเขา้ ถงึ และการแก้ไขปัญหาคอมพิวเตอร์ของผ้เู รยี นผ่านทางโทรศพั ท์มอื ถือ

226 ภาพที่ 8.50 การเข้าถงึ และการแกไ้ ขปญั หาคอมพิวเตอร์ของผู้เรยี นผา่ นทางโทรศัพท์มอื ถอื (ต่อ) PubHTML5 ซอฟตแ์ วรป์ ระยกุ ตอ์ อนไลนส์ าหรบั สร้างหนังสอื อิเลก็ ทรอนกิ ส์ PubHTML5 เป็นเคร่ืองมือดิจิทัลสาหรับสร้างหนังสืออิเล็กทรอนิกส์ (Electronic Book : E-Book) หรือ ฟลิปบุค (Flipbook) อาทิ เอกสารการสอน สื่อการสอน รวบรวมผลงานของครูและ ผลงานนักเรียน จดหมายข่าวของโรงเรียน แผ่นพับประชาสัมพันธ์ข้อมูลของโรงเรียน เฟรนด์ชิปของ ผู้เรียน (Friendship) และเอกสารอื่น ๆ ในรูปแบบออนไลน์ท่ีได้รับความนิยม ใช้งานง่าย สวยงาม และสามารถเผยแพร่ทางส่ือสังคมออนไลน์สู่ผู้เรียนได้อย่างรวดเร็ว ด้วยการอัปโหลดประเภท PDF และกาหนดรายละเอียดต่าง ๆ ของเอกสารเท่านั้น ภาพท่ี 8.51 แสดงตัวอย่างของหนังสือ อเิ ลก็ ทรอนกิ ส์ทีส่ รา้ งด้วย PubHTML5 ภาพท่ี 8.51 หนังสืออิเล็กทรอนิกส์ทสี่ ร้างดว้ ยโปรแกรม PubHTML5

227 วธิ ีการใช้งานโปรแกรม PubHTML5 มีดังต่อไปนี้ 1. เข้าเว็บไซต์ www.pubhtml5.com > Sign in ด้วยบัญชีของ Facebook หรือ Google ดังภาพที่ 8.52 ภาพท่ี 8.52 Sign in เข้า PubHTML5 ดว้ ยบัญชีของ Facebook หรือ Google 2. สร้างแหล่งจัดเก็บงานให้เป็นระบบด้วยการคลิก MY PUBS > New folder > FOLDER NAME > Create ภาพที่ 8.53 สร้างแหล่งจดั เก็บผลงาน 3. สร้างหนังสอื อิเลก็ ทรอนกิ ส์ดว้ ยการคลิก ADD NEW BOOK > Browse เลอื กไฟล์ PDF ท่ตี ้องการ > กรอกข้อมลู ในชอ่ ง Title > Create ดงั ภาพท่ี 8.54

228 ภาพที่ 8.54 ขนั้ ตอนการสร้างหนงั สืออเิ ล็กทรอนิกส์ 4. โปรแกรม PubHTML5 แปลงไฟล์ PDF เป็นหนังสืออิเล็กทรอนิกส์ดังภาพที่ 8.55 > ไดผ้ ลลัพธ์ดังภาพที่ 8.56 เป็นอนั สร้างหนังสอื อเิ ล็กทรอนิกส์เสรจ็ เรียบร้อย ภาพท่ี 8.55 การแปลงไฟล์ PDF เป็นหนงั สอื อิเล็กทรอนกิ ส์

229 ภาพที่ 8.56 หนังสืออิเล็กทรอนกิ ส์ทสี่ ร้างดว้ ยโปรแกรม PubHTML5 5. เม่ือตอ้ งการอ่านหนังสอื อเิ ลก็ ทรอนิกส์คลิก PubHTML5 หรือ Online Link ตามภาพ ท่ี 8.57 จะได้ผลลัพธด์ งั ภาพที่ 8.58 ภาพที่ 8.57 เลือกคลิก PubHTML5 หรือ Online Link เม่อื ต้องการอ่านหนังสืออเิ ล็กทรอนิกส์ 6. คลิกลูกศรตามภาพที่ 8.58 เมื่อต้องการอ่านหนังสืออิเล็กทรอนิกส์หน้าถัดไปหรือ ต้องการไปยงั หนา้ ที่ต้องการ จะได้ผลลพั ธด์ ังภาพท่ี 8.59 7. คลิก Fullscreen ตามภาพท่ี 8.59 เม่ือต้องการอ่านหนังสือแบบเต็มหน้าจอ จะได้ ผลลัพธด์ ังภาพท่ี 8.60 และคลิก Exit Fullscreen ตามภาพท่ี 8.60 เม่ือตอ้ งการย่อขนาดของหนงั สอื