คู่มือ_ฉบับสมบูรณ์การผลิตสื่อเทคโนโลยีด้วยเว็บไซต์

ความรูเ บอื้ งตนเก่ียวกับการสราง E-Book และกรณีศกึ ษาการ ผลิตสอ่ื “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ชัน้ ป 3 มหาวิทยาลัยราชภัฏนครปฐม 1 อาจารยอุดม ตะหนอง ¤Ù‹Á×Í¡ÒÃÊÌҧÊ×èÍE-book´ŒÇÂà·¤â¹âÅÂÕ “àÇçºä«µ” ÊҢҾѲ¹ÒªØÁª¹ ÁËÒÇÔ·ÂÒÅÂÑ ÃÒªÀѯ¹¤»°Á วิทยากรบรรยาย โดย อุดม ตะหนอ ง ศศ.บ.(สารสนเทศฯ*),พธ.บ.(การสอนสังคมศกึ ษา), ศศ.ม.(พุทธศาสนศึกษา) คณะเภสชั ศาสตร มหาวิทยาลยั ศ1ิ ลปากร 27/มิ.ย./2565 โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 1

ความรูเบอื้ งตน เกยี่ วกับการสราง E-Book และกรณีศึกษาการ ผลติ สอ่ื “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ชน้ั ป 3 มหาวิทยาลัยราชภฏั นครปฐม 2 อาจารยอุดม ตะหนอ ง การสรางสื่อเทคโนโลยเี พอ่ื นํามาใชใน กิจกรรมดวย “เว็บไซต” ---------------------------------------- แบบฝกปฏิบัติท่ี 1 (เร่ิมตน) : การสรางส่อื การสอนดวย Page เปน Hosting ใชงาน ดวยภาษา Html, CSS, Javascript 1) การสรางเว็บเพจโดย Account อีเมลและการใชงาน (แนะนํา Gmail เทานั้น) ดูวิดิโอประกอบการสราง (ผานอยางเร็ว) 1.คลก๊ิ สมัครบัญชีบน PC :https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp ตัวอยาง : https://goo.gl/nU5NuD 2.แบบสรา งบน มือถือ : https://goo.gl/7Ybweg โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 2

ความรเู บื้องตนเก่ยี วกบั การสราง E-Book และกรณีศึกษาการ ผลติ ส่อื “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชนั้ ป 3 มหาวิทยาลัยราชภัฏนครปฐม 3 อาจารยอุดม ตะหนอง วธิ ีสมัคร Gmail บนมือถอื 1. ใหเราเปด แอพ Gmail บนมือถือหนาตาประมาณนี้ข้ึนมากอนครับ 2. ใหเลอื กท่ี สรา งบญั ชีใหม นะครับ 3. ใสช่ือและนามสกุลลงไป และกด ถัดไป ทม่ี ุมขวาลาง 4. ใส วัน เดือน ป เกิดของเรา ตามดวย เพศ และกด ถัดไป 5. กรอกช่อื Gmail ที่เราจะใช เสรจ็ แลวกด ถัดไป 6. ใหเราใสร หัสผา นอยางนอ ย 8 ตวั พรอมทง้ั ยืนยันรหัสผานอีกครง้ั และกด ถัดไป 7. ใหเรากรอกเบอรม อื ถือ หรือจะกด ขา ม ก็ไดนะครบั ถา ไมอยากใสเบอรโทร 8. จะเปนขอตกลงในการใชบรกิ าร อานซะหนอ ยก็ดี แลวเลือ่ นลงมาดา นลาง ใหกดที่ ฉันยอมรับ 2) วิธีการสรางเพจสําเร็จรูปดว ย Template ฟรี และ Module ฟรี การใชเทคโนโลยีเว็บไซต ถอื วาเปนความสะดวกในการสรางสอื่ และการติดตามงาน โดยเราสามารถสรา ง ส่อื ตา งๆ ท่ีสอดคลองกับกิจกรรมรวมถึงการสรา งสอ่ื ประกอบการใชงานโครงการตา งๆ ทง้ั น้ีแลวแตความเหมาะสม กับงานท่ีจะนาํ มาประยุกตใช ดังตัวอยา งตางๆ ดงั น้ี รีววิ ตัวอยางเว็บเพจสําหรับสรางส่ือกิจกรรมดวยเว็บไซตและเว็บบล็อกดงั น้ี : ส่ิงที่เราจะไดในวันนี้ 1.http://pormodtanoy.blogspot.com (เวบ็ บล็อก : สรางสอื่ ความสนใจผานเวบ็ บลอ็ กในยุค 4.0) 2.http://buddhisminthai.eu5.org (เวบ็ เพจรายวชิ าเกบ็ เน้ือหาสําหรับสอนและคน ควา ) 3. http://meditationsilpakorn.myartsonline.com (เวบ็ เพจรายวชิ าเกบ็ เนื้อหารายวชิ าและสง งาน) 4. https://thaiherb989.wordpress.com (เวบไซตส ําเร็จรปู สําหรบั สรางสื่อประเภทตา งๆ) 2.1 แหลงดาวโหลด Template สําหรับการใชง าน การดาวโหลด Free Template Template ฟรีบนเว็บตางๆ เม่ือโหลดมาแลวก็แตกซิบแลวเปดโฟลเดอร ดับเบิลคล๊ิกไฟล Index.html เพอ่ื พรีวิวดกู อนนะครับวาชอบหรอื ไมชอบ ดังน้ี (พอสงั เขป) http://www.css3templates.co.uk/templates.html https://tympanus.net/codrops/category/playground http://www.araynordesign.co.uk/freecss3templates.html http://www.tooplate.com https://templated.co โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 3

ความรูเบ้อื งตน เก่ยี วกบั การสราง E-Book และกรณีศึกษาการ ผลิตสื่อ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชน้ั ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 4 อาจารยอดุ ม ตะหนอง https://www.egrappler.com https://m-softtech.in/index.php ประโยชนท ไ่ี ด 1.สง เสรมิ ศักยภาพในการทํางาน ในปจจุบันสามารถนาํ มาประยุกตพ ัฒนางานไดทุกๆองคกร 2.การเขาถงึ กลุมผูรับบรกิ ารไดอยา งดีและรวดเรว็ ผานเครือขายอินเทอรเน็ตและสมารทโฟน 3.ชวยใหเราประสานงานกันผานเครือขา ยโดยไมตองเดินทาง 4.ชวยสรา งภาพลกั ษณที่ดีใหกับรายวิชาท่ีรับผิดชอบ 5.ชวยลดคาใชจา ยในการจา งบุคคลอื่นประชาสมั พันธ 6.ชวยใหคุณแจง ขา วเลา เร่ืองท่ีมีประโยชนตอ การเรียนการสอน 7.สามารถอํานวยความสะดวกแกผรู ับบรกิ ารไดอยา งทันทีและรวดเร็ว การโหลด Fee Module หรือ ฟรี Plugins การโหลด Moudule หรือ Plugins ท่ีมีใหบริการอยูแลวในโลกของอินเตอรเน็ต ท่ีเคาใหบริการ ฟรี เพ่ือนํามาสรางเปนตัวเสริมหรืออาจจะสรางเปน Template หลักๆก็ยังไดเลย ในท่ีนี้ผมจะแบงที่มาเปน 2 ประเภท ไดแก (รายละเอียดไปบรรยายใน Module 2: การประยุกตสรางหนาเพจสื่อการสอนดวยโปรแกรม สาํ เรจ็ รปู (สว นเสริม) 1.รูปแบบสาํ เร็จรูปท่ีเราท่ีสรางไวแลวใหดาวโหลดมาใชงานไดเลย - แนะนํา : http://www.htmldrive.net และ https://www.jqueryscript.net/ 2.รปู แบบเว็บไซตท่ีสรา ง Module สาํ เรจ็ รูปตางๆ ท่ีเราจะนํามาติดตัง้ และนาํ มาใชไดดี - แนะนํา :1. http://www.Amazingslider.com 2. https://visuallightbox.com 2.2 เริ่มสราง Account โฮตฟรี สําหรับเว็บเพจมาใชสําหรบั ขอ มูลงานการสอน การสรา งเวบ็ เพจฟรี เราจะพิจารณาเลือกจากเว็บที่ใหบรกิ ารดา นสําคัญๆ อยู 3 ดาน คือ 1.ดานความจพุ ้ืนที่จัดเก็บขอมูล 2.ดานเง่อื นไขระยะเวลาการใหบริการ 3.ดานเงื่อนไขไมมีแทรกโฆษณา การสรา งเว็บเพจแบบที่ 1 (ติดโฆษณา) โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 4

ความรเู บ้ืองตนเกีย่ วกบั การสราง E-Book และกรณีศึกษาการ ผลติ ส่อื “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ช้นั ป 3 มหาวิทยาลยั ราชภฏั นครปฐม 5 อาจารยอุดม ตะหนอ ง การที่เราจะทําใหคนท่ัวไปไดเห็นเว็บของเราน้ัน เราจําเปนตองนําเว็บเพจท่ีเราสรางข้ีนมาไปเก็บไวท่ี web server (Host) ซ่ึง web server จะทําหนาท่ีคอยสงไฟลท่ีเราทําขึ้นมาไปใหคนท่ัวไปไดเห็น เหมือนกับท่ีเราเรียกไฟล จากเครอ่ื งของเรามาดูน่ันเอง ซึ่งเครือ่ งของคุณก็สามารถทาํ เปน web server ได แตคุณตองเปดเครอ่ื ง 24 ชว่ั โมง และ ตอ อินเทอรเน็ต 24 ช่ัวโมง เพราะจะตองรองรับกับคนทั่วไปที่ตองการเปดเว็บของคุณตลอดเวลา ซึ่งจะทําใหส้ินเปลืองมา ดังน้ันใน บทความน้ีเราจะมาหา web server ที่ใหบริการฟรีกัน ซ่ึงเราอาจตองเสียพื้นท่ีในเว็บไซตของเราใหกับโฆษณาเพื่อ แลกกบั การใชข องฟรี (ตามปรกติจะมีผูใหบริการเชา web server อยู ราคาขนึ้ อยุกับคุณภาพของ web server นั้น) ในบทนี้จะเกี่ยวกับการใชบริการ web server ฟรี ซ่ึงในบทความนี้จะใชบริการ free web server ของ http://www.freewebhostingarea.com/เราจะมาดูรายละเอียดการสมคั รเขา ใช web server ฟรขี องท่ีนี้กัน 1. ใหพ้ืนที่ในการจัดเก็บไฟลของคุณถึง 200 MB แตไฟลที่คุณจะนําไปเก็บไวท่ี server ตัวน้ีนั้น จะตองมีขนาด เลก็ วา 10 MB (การดูขนาดไฟลของคุณทําไดโดยคลิกขวาที่ไฟลน้ัน เลือก Properties ดูท่ี size จะบอกขนาดของไฟล เอาไว) 2. ใหคณุ สามารถสงไฟลไปท่ี web server ดว ยระบบ FTP ได 3. และอน่ื ๆอีกมากมายซ่งึ ถาเขียนใสในบทความนี้อาจทําใหบทความน้ียาวเกินไป เร่ิมตนของใชบริการฟรี 1. หลังจากที่คุณเปด http://www.freewebhostingarea.com/ แลวเล่ือนลงมาดูดานลางของเว็บจะเห็นชองใหเรา ใชช อ่ื เว็บของเราซึง่ มีดวยกัน 3 ชอ งดวยกนั คือ 1. www.ชื่อเว็บของคุณ.6te.net 2. www.ช่ือเว็บของคุณ.ueuo.com 3. www.ชื่อเว็บของคุณ.orgfree.com ซ่ึงในบทความน้ีเราจะใชตัวอยางตามรูปดานลาง แกไ ข กรณเี ขา เว็บหลักไมได : 1. http://www.freewebhostingarea.com/temp.html (ลิงก : น้ีเขาใชในกรณีไมสามารถใชลิงกขา งตนได) โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 5

ความรเู บ้อื งตน เกี่ยวกบั การสราง E-Book และกรณีศกึ ษาการ ผลิตสอ่ื “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ช้นั ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 6 อาจารยอุดม ตะหนอง 2. หรือถา ยังสมคั รไมไดใหเขียนอีเมลไปแลวเคาจะสง มาใหสมัครใหม เพ่ือปองกัน Robot น่ันเอง - เมลไปที่ [email protected] - เมื่อไดร ับการตอบกลับลองสมัครอกี ครงั้ - http://www.freewebhostingarea.com/register.html โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 6

ความรเู บ้อื งตน เกย่ี วกบั การสราง E-Book และกรณีศกึ ษาการ ผลติ ส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชัน้ ป 3 มหาวิทยาลยั ราชภฏั นครปฐม 7 อาจารยอดุ ม ตะหนอง เมื่อสมัครขอใชบริการเรียบรอยแลว เราก็จะเร่ิมนําไฟลไปเก็บไวที่ web server กัน ซ่ึงการนําไฟลไปเก็บ ไวใน web server ก็ใหเราเปด My Computer ขึ้นมาแลวพิมพ ftp://ชื่อเว็บของคุณ ซ่ึงในบทความนี้ก็เปน http://timetablepharmsu.eu5.org/ftp จะมีหนาจอถาม username และ password ข้ึนมาใหคุณใส username และ password ทีไ่ ดจ ากภาพดา นบน เมอ่ื กรอกเสร็จก็เปนดังรูปดา นลา ง โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 7

ความรเู บอื้ งตน เก่ียวกบั การสราง E-Book และกรณีศึกษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลัยราชภฏั นครปฐม 8 อาจารยอดุ ม ตะหนอ ง ใหคุณลบไฟลท่ีมีอยู ท้ังหมดแลวนําไฟลของคุณไปใสแทน โดยลากไฟลจากในเคร่ืองลงใน My computer ไดเลยโดยที่ เม่ือคุณเปดเว็บของคุณ เชน http://pranakorn.eu5.org ตัว web server จะ หาไฟลท่ชี อ่ื index.html มาแสดงเปนหนาแรก (home page) ของคุณถา คุณไมม ี file ทีช่ ื่อ index.html ก็ ไมส ามารถเปดเว็บไซตข องคุณได และ web browser จะแสดง error ออกมา หนา Web Browser โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 8

ความรูเบอ้ื งตนเกยี่ วกับการสราง E-Book และกรณีศึกษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชนั้ ป 3 มหาวิทยาลยั ราชภฏั นครปฐม 9 อาจารยอดุ ม ตะหนอง สําหรับการสรางเว็บเพจแบบท่ี 1 ก็จบเพียงเทานี้และยินดีกับทุกทานที่สามารถทําเว็บไซตของ ตัวเองเว็บแรกไดสาํ เรจ็ การสรางเว็บแบบที่ 2 ตรงนเ้ี ราเลือกดานความจุ ความจุ 1500 MB (มากพอสําหรบั การใชง านแบบไมเปนทางการ) เว็บไซตสรา ง Domain Free (บางสว น) ลําดบั เวบ็ ฟรโี ฮสติง..ท่ีดแี ละใชงานไดจรงิ เว็บฟรโี ฮสติง..ที่ดีและใชงานไดจรงิ 1  www.000webhost.com/  www.freehosting.com/ 2  https://www.freewebhostingarea.com/  www.100webspace.com/ 3  https://www.5gbfree.com/  www.he.runhosting.com/ 4  www.biz.ly/  www.zymic.com/ 5  http://freehostingnoads.net/  www.xtreemhost.com/ 6  www.yola.com/  5gbfree.com/ 7  www.awardspace.com/  snappages.com/ 8  www.webs.com/  www.uhostfull.com/ 9  www.freehostingeu.com/  www.agilityhoster.com/ 10  www.serversfree.com/  www.zettahost.com/ 11  www.biz.nf/  www.hostinger.com / โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 9

ความรูเบ้อื งตนเก่ยี วกบั การสราง E-Book และกรณีศึกษาการ ผลติ ส่อื “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ชน้ั ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 10 อาจารยอุดม ตะหนอง 12  www.wix.com/  www.hostinger.in.th 13  host-ed.net/  www.3jelly.com/vps 14  x10hosting.com/  www.virtu-host.com 15  it.altervista.org/  www.on1.pw 16  www.jimdo.com/  www.awardspace.net 17  byethost.com/  www.freehostia.com 18  www.freehostia.com/  www.2freehosting.com 19  www.grendelhosting.com/  www.hostvesta.com 20  www.advancedfreeweb.com  www.batcave.net 2. กรอกรายละเอยี ด โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 10

ความรูเบอ้ื งตน เกย่ี วกับการสราง E-Book และกรณีศกึ ษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 11 อาจารยอุดม ตะหนอ ง โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 11

ความรเู บอื้ งตนเกีย่ วกบั การสราง E-Book และกรณีศกึ ษาการ ผลติ สือ่ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ช้นั ป 3 มหาวิทยาลัยราชภฏั นครปฐม 12 อาจารยอุดม ตะหนอ ง ระบบจะยืนยันไปทางอีเมลท่ีเราสมัครไว เม่ือเขาสูระบบแลว จะใช 3 เมนูหลักๆ ตามภาพ โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 12

ความรูเบอ้ื งตน เกย่ี วกับการสราง E-Book และกรณีศกึ ษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 13 อาจารยอุดม ตะหนอ ง โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 13

ความรูเบอ้ื งตน เกย่ี วกับการสราง E-Book และกรณีศกึ ษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 14 อาจารยอุดม ตะหนอ ง โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 14

ความรูเบอ้ื งตนเกย่ี วกบั การสราง E-Book และกรณีศกึ ษาการ ผลติ ส่อื “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ช้ันป 3 มหาวิทยาลัยราชภฏั นครปฐม 15 อาจารยอุดม ตะหนอง สําหรับบทความการสรา งเว็บเพจรุปแบบท่ี 2 เพียงเทาน้ีและยนิ ดีกบั ทุกทา นท่ีสามารถทําเว็บไซตของตัวเองเว็บท่ี 2 ไดสําเร็จ (ตวั อยา งเว็บเพจตางๆ : http://concentrationpharmsu.eu5.net/index.html หรอื 3) การจัดการตั้งคาเมนู และวิธีการจัดการแมแบบใหเหมาะสม โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 15

ความรเู บือ้ งตนเก่ยี วกับการสราง E-Book และกรณีศึกษาการ ผลิตสอ่ื “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชั้นป 3 มหาวิทยาลยั ราชภฏั นครปฐม 16 อาจารยอุดม ตะหนอง สวนการตงั้ คา เมนูนั้น ก็ขึ้นอยกู ับวาคุณจะนํา Template ตัวไหนมาใช และไดนํา Module หรอื Plugins ตวั ไหนเขา มาใส เราก็สามารถทาํ ไดอยางงา ยดาย ตวั อยางเชน (เปดเว็บเพจระบบบันทึกงานธุรการใหดู) การบา น : Cast Study : ผูเขาอบรมสรา งเว็บเพจไดและ Upload ขอมูลตั้งคาTemplate ได แบบฝกปฏิบตั ิท่ี 2: การสรา งหนาเพจสือ่ การสอนดวยโปรแกรมสําเรจ็ รูป (สวนเสรมิ ) ………………………………………. 1. การสราง Page e – book แบบหนา Page เดยี ว 1.1 ดึงขอมูลภาพ สรางจาก Amazing Slider การสรางเพจสําเรจ็ รูปโดยการทาํ เปนสวนเสริมในเพจหลักของเรา ก็จะไดอาศัยเวบ็ ไชตโปรแกรม สําเรจ็ รูปมาเปนสวนเสรมิ โดยจะนํา https://amazingslider.com/ มาเปนตวั เชื่อมดังน้ี 1.โหลดโปรแกรม Amazingslider สาํ หรบั ติดตั้งลงเคร่อื ง https://amazingslider.com/downloads/ เลอื กตามเครื่องท่ีเราใช โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 16

ความรูเบอื้ งตน เกีย่ วกบั การสราง E-Book และกรณีศึกษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลัยราชภัฏนครปฐม 17 อาจารยอดุ ม ตะหนอง ติดตง้ั รนั โปรแกรม เมื่อเสรจ็ สิ้น Upload ขึ้นไปบนโฮสของเรา และทดสอบดู (ตัวอยา ง : http://myfulness.eu3.org/meditation_61/index.html ) ขนั้ ตอนการทําขอ มูลและปรับแตงลูกเลน แบบที่ 1 การ Upload ภาพพรอมคลิปวิดโี อท่ีจัดเตรียม (ความจุจะตามคลิปท่ีโหลดขึ้นไป) โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 17

ความรูเบอ้ื งตน เกย่ี วกับการสราง E-Book และกรณีศกึ ษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 18 อาจารยอุดม ตะหนอ ง โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 18

ความรเู บอื้ งตนเกีย่ วกบั การสราง E-Book และกรณีศกึ ษาการ ผลิตสือ่ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ชน้ั ป 3 มหาวิทยาลัยราชภฏั นครปฐม 19 อาจารยอดุ ม ตะหนอง แบบท่ี 2 การ Upload ภาพพรอม Link วิดีโอ (ไมเปลืองความจุ) 1.2 สรา งขอมูลภาพและขอมูลวิดีโอจาก Visual Lightbox การสราง Mudule สําเร็จรูปในลักษณะของการรันภาพและวิดีโอ ใหดูเปนeffect อีกตัวหนึ่งก็จะเปน https://visuallightbox.com เขา ไปโหลดโปรแกรมโดยหากตองการ Free version กต็ อบ yes และใสอีเมลดวย หากตองการ Full version ทางโปรแกรมจะสง ลิงกไปใหโ หลดอีกครงั้ 1.https://visuallightbox.com/visuallightbox-free-setup.zip 2.ติดตง้ั โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 19

ความรูเบื้องตน เก่ียวกับการสราง E-Book และกรณีศกึ ษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ช้นั ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 20 อาจารยอดุ ม ตะหนอง 3. รันโปรแกรม 1.3 วิธีนําข้ึนไปใชง านออนไลนบนเว็บเพจ วธิ ีการนําข้ึน Online บนเว็บไซต มี 2 วิธกี าร คือ Upload ผา น Browser และ Upload ผา นโปรแกรมที่ มีชอื่ วา https://filezilla-project.org/ ตามวิธีการดังน้ี 1. Upload ผาน Browser โดยการเปด file transfer protocol ดังนี้ เขา เว็บไซตที่เราสรางแลวสรางๆทีละโฟลเดอร Upขอมูลขนึ้ ไป โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 20

ความรูเบื้องตนเก่ียวกับการสราง E-Book และกรณีศกึ ษาการ ผลติ ส่อื “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลยั ราชภฏั นครปฐม 21 อาจารยอุดม ตะหนอ ง 2. Upload ผา นโปรแกรม https://filezilla-project.org/ โหลดและติดต้ังไดเลย ดูวิธีการใชงานเบ้ืองตน https://goo.gl/qX4ch7 ขอควรรูส าํ คัญก็คือโดยสวนใหญแลวจะไมสามารถ Upload ขอ มูลผา นการเช่ือมตอ Server ขององคกรได ใชตอกับ Internet ที่บา นหรือผานเครือขายมือถือจะ สะดวกในการทํางานมากข้ึน แบบฝกหัด : ใหนาํ วิดีโอและภาพถา ยมาสรา งดวยตนเอง แลวนําข้ึนเก็บในฐานขอ มูลเพจ 2. การสราง Page E – Book แบบหลายหนา ใน 1 Page การจะสรางหนาเพจเพ่ือใชเปนขอมูลในการสอนตองมีโปรแกรมแกไข HTML เขา มาชวยดวย ในที่น้ีจะยกตัวอยาง Module สําเร็จรูป 2 ตัว สําหรับสอนสรางคือ แบบหนาเดียวกับแบบหลายๆหนา อันดับแรกใหโหลดโปรแกรม Notepad++ ตดิ ต้งั กอน 1) https://notepad-plus-plus.org 2) โหลด Module ตา งท่นี ่ี https://goo.gl/eX9Szn 2.1 แบบ 2 page สอนวิธีสรา ง Code สําเรจ็ รปู แบบท่ี 1 : http://mindfulness.eu5.net/boonmee_thum/index.html 2.2 แบบหลาย Page สอนวิธีสราง Code สาํ เร็จรปู แบบที่ 2 : http://mindfulness.eu5.net/boonmee_thum/index.html?fbclid=IwAR1O1Y8JEaRXttwTiiO7hAtT0M VBm94Ypdt3AtlzWRD4GhZ7sqNWSLbiZfs แบบทดสอบ : ใหนาํ ขอ มูลตางๆ มาสรางเปน E – Book โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 21

ความรเู บ้อื งตนเกยี่ วกับการสราง E-Book และกรณีศึกษาการ ผลติ สอื่ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ช้ันป 3 มหาวิทยาลยั ราชภัฏนครปฐม 22 อาจารยอุดม ตะหนอ ง การสราง Chat Box เคร่ืองมือสอ่ื สารสองทางท่ีไดรับความนิยม 4: การสรางส่อื โตตอบ และสือ่ Scroll News 1. Chat Box : แบบไมแสดงคา ง 2. Chat Box : แบบแสดงคาง Cbox 1 การสราง Chat Box เครอ่ื งมือส่ือสาร 2 ทางท่ีไดรับความนยิ ม (แบบท่ี 1 Zopim และแบบที่ 2 Live chat) การสราง chat box เพ่ือใชเปนเคร่ืองมือในการสื่อสารขอมูลตางๆ ระหวางผูสอนกับผูเรียนจึงเปนสิ่ง สําคัญมาก เพราะถึงแม Social Media จะเขามีบทบาทในการติดตอส่ือสารระหวางกันเชน Line Facebook what apps แต Social เหลา น้ันมันเปนในลักษณะใกลชิดสนิทสนมกันมากไป สําหรบั ผมถือวา ยังไมเหมาะหากจะ นํามาเปนชองทางส่ือสารกับนักเรียนทุกๆคน ดังน้ัน การสราง chat box เพ่ือเปดโอกาสใหนักเรียนไดสอบถามใน ประเด็นที่เคา ไดอา นและทบทวนบทเรียนตามที่เราเขียนไวในเว็บเพจ อยา งนอยก็สะทอนใหเรารับรูวา นักศกึ ษาเขา ไปอานแลวและมีประเด็นนาสงสัยตางๆ การเปดพื้นที่ chat box เราสามารถกําหนดระยะเวลาในการเปดโอกาส ใหพูดคุยกันได เมื่อหมดกําหนดเวลาเราซึ่งเปน Admin ก็สามารถท่ีจะนําเอาโคตออกจากเว็บเพจของเราไดกันอยู แลว แบบท่ี 1 – Zopim เวบ็ ไซต www.zopim.com ซึ่งทา นสามารถนําโคดจากเว็บไซตดังกลาวมาติดต้ัง เพอ่ื แสดงหนา ตางการสนทนา คลายกับโปรแกรมสนทนา เชน Gtalk, MSN Messenger บนหนาเว็บไซตของเราไดโดยตรง ชวยใหเพิ่มชองทางการ ติดตอระหวา งครูกับนักเรียนในเวบ็ เพจรายวิชาใหโ ตตอบกันไดแบบReal Time ทันที โดยมีข้ันตอนการติดต้ัง Chat Box เขากับเว็บไซตสําเร็จรูป ReadyPlanet ดังน้ี (ดูตัวอยางใน http://pormodtanoy.blogspot.com/ โดยใหผูเขารวม อบรมทําการทดสอบส่ือสารกับวทิ ยากร) 1. ไปท่ี https://www.zopim.com ทาํ การสมัครการใชง านโดย คลกิ ปมุ Sign Up และกรอกอีเมลและช่ือของทาน โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 22

ความรูเบ้อื งตนเก่ียวกบั การสราง E-Book และกรณีศกึ ษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชน้ั ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 23 อาจารยอดุ ม ตะหนอง จากน้ัน ทานจะไดรับอีเมลยืนยันจากระบบ เมื่อคลิกลิงคยืนยันในอีเมลแลว จะปรากฎหนาสําหรับกรอก Password และสามารถล็อกอนิ เพื่อรับโคดChat box และเขาใชง านไดที่ https://dashboard.zopim.com 2. เม่ือล็อกอินเขาสูระบบคร้ังแรก ระบบจะปรากฎหนาตางชวยเหลือ หรือ Widget สําหรับกรอกขอมูล และเมื่อ คลิกมาถงึ หนา \"Embed Widget\" ทา นสามารถคัดลอกโคด Chat box และนาํ ไปติดตัง้ ทเ่ี วบ็ ไซตไดทนั ที แตห ากตอ งการปรับการแสดงผลของ Chat box เพิ่มเตมิ สามารถเขา มาตงั้ คา ทเี่ มนู \"Widget\" ไดต าม ตอ งการ สดุ ทายคลิกทีแ่ ท็บ \"Embed Widget\" และคัดลอกโคดทป่ี รากฎและนําไปติดต้งั ในเว็บไซตไ ด 3. วธิ กี ารนําโคดไปตดิ ต้ังทเ่ี วบ็ ไซต ใหล อ็ กอินเขา สว นสมาชิก ท่เี มนู \"จดั การเว็บไซต\" และคลกิ เมนู \"จัดการพ้ืนท่ี ดา นลา ง\" โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 23

ความรูเ บือ้ งตน เก่ียวกบั การสราง E-Book และกรณีศึกษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ช้ันป 3 มหาวิทยาลัยราชภฏั นครปฐม 24 อาจารยอุดม ตะหนอ ง 4. นําโคด Chat box วางในสวน \"พ้ืนที่ดานลางของเว็บไซต (แสดงเฉพาะหนาแรกของเว็บไซต)\" (ตําแหนง หมายเลข 1 ดังรูปดานลา ง) ซ่งึ จะแสดงผลหนาตา ง Chat ท่ีหนา แรกเทานน้ั แตหากตองการใหมหี นา ตา ง Chat ในเว็บไซต ทุกหนา ใหวางโคดในสวน \"พ้ืนที่ดานลางของเว็บไซต (แสดงเฉพาะหนาในของเว็บไซต)\" (ตําแหนงหมายเลข 2 ดังรูป ดานลาง) ดวยการแสดงผล Chat Box จาก Zopim บนหนาเว็บไซตสําหรับใหผูเขาชมเว็บไซตพิมพขอความสนทนากับ เว็บมาสเตอรไดทันที โดยผูเขาชมไมตองล็อกอินกอนเขาใชงานคะ (จะแสดงผลที่มุมลางขวาของหนาจอ) สําหรับเว็บ มาสเตอร หากมีการล็อกอินเขา ใชงานในเว็บ Zopim และมีผูเขาชมเว็บพิมพขอ ความจาก Chat box บนหนาเว็บไซต จะ ปรากฎหนาตางสาํ หรับสนทนาโตตอบกับผูเ ขา ชมเวบ็ ไซตไ ด ดังรปู ตวั อยาง หมายเหตุ : - เบ้ืองตนบริการโคด Chat box จาก Zopim มีเงื่อนไขและขอบเขตระยะเวลาการใหบริการทดลองใชฟรี ทานสมาชิกสามารถดรู ายละเอียดเพม่ิ เตมิ ไดท ี่ zopim.com โดยตรง อยา งไรก็ตาม ReadyPlanet ไมแนะนําใหนาํ code จากเว็บไซตตา ง ๆ ทเี่ สถียรภาพของเว็บไซตไมด ี หรือ มี server อยูตางประเทศ เนื่องจากการเปดหนาเว็บไซตของทาน จะขึ้นกับความเร็ว และเสถียรภาพของระบบของ เว็บไซตที่ทานนํา code มาติดตั้งดวย เชน หาก server ของ code ท่ีนํามาติดลม หรือโหลดชา จะทําใหเว็บของทานเปด ไมไดหรือโหลดชาดวย หากพบปญหาเกิดข้ึน วิธีการแกไขคือ เขาไปลบ code ตาง ๆ เหลานี้ออก เว็บไซตของทานก็จะ ทํางานไดตามปกติ แมวาทางทีมงาน ReadyPlanet จะไมสามารถ Support โปรแกรมตกแตงเว็บไซตอื่น ๆ หรือ โปรแกรมตกแตงรูปภาพตาง ๆ ใหทานไดโดยตรง แตทานสามารถดูรายละเอียด เทคนิคการตกแตงเว็บไซตเพ่ิมเติมได ท่ี ReadyPlanet HowTo โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 24

ความรูเบือ้ งตน เกี่ยวกบั การสราง E-Book และกรณีศกึ ษาการ ผลติ สอ่ื “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ช้ันป 3 มหาวิทยาลัยราชภฏั นครปฐม 25 อาจารยอุดม ตะหนอ ง แบบที่ 2 Live chat Blogger เปนฟรีแพลตฟอรมการเผยแพรท่ีมีประสิทธิภาพท่ีชวยใหคุณมีเคร่ืองมือทั้งหมดที่คุณจะตองเริ่มตนและ เตบิ โตบลอ็ กของคณุ . ก็สามารถปรบั แตงไดอ ยางเตม็ ท่ีและเต็มไปดว ยคณุ สมบตั ิข้ันสูงเชนการแกไข HTML, การสนบั สนุนอุปกรณ การเผยแพรมือถือและอื่น ๆ อีกมากมาย. กับอีก 1 chat box ทีอยากแนะนําใหทุกทานไดลองนําไปใชใหเกิดประโยชนทาง การศกึ ษา เขา ไปทเี่ วบ็ ไซต http://www.helponclick.com/ แลว สมคั รสมาชิกกอนครับดา นลา งของเวบ็ ไซตจะมีใหเ รา Sign up ตามนเ้ี ลย ขั้นตอนท่ี 1 : สมัครสมาชกิ เพ่อื รับ Code 1.1 สมัครสมาชกิ โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 25

ความรเู บ้อื งตน เก่ียวกบั การสราง E-Book และกรณีศึกษาการ ผลติ สอื่ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ชนั้ ป 3 มหาวิทยาลัยราชภฏั นครปฐม 26 อาจารยอุดม ตะหนอง 1.2 คัดลอก Code ไปใสใน Widget ของ Blogs โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 26

ความรูเบ้ืองตน เกีย่ วกบั การสราง E-Book และกรณีศึกษาการ ผลิตสอ่ื “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ชัน้ ป 3 มหาวิทยาลัยราชภฏั นครปฐม 27 อาจารยอดุ ม ตะหนอ ง 2. Chat Box : แบบแสดงคาง Cbox แบบที่ –cbox Cbox จะเปนลักษณะกลองแชทบอกที่ฝง โคตแสดงขอความบนเว็บบล็อกเลย สนทนาโตตอบบนกระดาน เว็บบล็อกของเราก็เก ไปอกี รูปแบบหนึง่ โดย Admin ก็สามารถทีจ่ ะลบขอความทิ้งไดหากการโพสตนั้นไมสุภาพ หรือไมเหมาะสม แจง เตือน ได ดังน้ันวิธีทง่ี า ยท่ีสุดก็คงสรางแอปหนา Desktop ไวเมอื่ เราเปดใหมีการสนทนา แค นี้ก็ไมพลาดขอ ความใดๆทผี่ ูประสงคจะสอบถามขอมูลจากเรา โดยมีวธิ ีทําดังน้ีครับ ( เว็บไชต : https://www.cbox.ws/?r=2-2339920) ยกตัวอยา งใหผูเขา รวมอบรมไดดูกันในสว นของ http://pormodnoy.blogspot.com/ วธิ ีสรางดังน้ี โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 27

ความรเู บ้ืองตน เก่ียวกบั การสราง E-Book และกรณีศึกษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชนั้ ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 28 อาจารยอดุ ม ตะหนอ ง หวังวาผูเขารับการอบรมจะไดวิธกี ารนี้นําไปใชทดสอบที่บา น และนําสงการบา นตามหัวขอดังน้ี แบบทดสอบ : ใหทุกคนตงั้ คา Code กลองสนทนาลงในเว็บเพจตัวเองไดและทดลองสอื่ สาร 5. การสรา งส่ือประชาสัมพันธ Facebook / tweeter : Slide ขา ง และ Pop up โดยการดาวโ หลด Sorce Code เพ่ือมาปรบั แกไข ใหถ ูกตอง โดยมีมีหลายรปู แบบการติดใหทา นเลือกโหลดไดเ ลยในแตละประเภทท่ีชื่นชอบ แบบที่ 1 แบบครอบเทา/ดาํ โหลด https://drive.google.com/file/d/1FfU3-rKBjHvBjAW28udu_UjTfhdK9-Pe/view วธิ ีปรับแกไข Code โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 28

ความรูเบื้องตนเกยี่ วกบั การสราง E-Book และกรณีศกึ ษาการ ผลิตสอื่ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ชัน้ ป 3 มหาวิทยาลยั ราชภฏั นครปฐม 29 อาจารยอุดม ตะหนอ ง แบบที่ 2 แบบครอบดาํ โหลด https://drive.google.com/file/d/1FopE4XuMzfqX8x1pHmHvh8eDTfNX1uIu/view วิธีปรับแกไข Code แบบท่ี 3 สไลดดานขาง โหลด https://drive.google.com/file/d/1yJgAkPMT794UqToCCGT2OX3RElvRPSsg/view วธิ ีปรับแกไข Code เขาไปสรา ง Facebook Fanpage และต้ังคาใน Tawitter -สราง Facebook Fanpage https://www.page365.net/all-articles/365town-howtocreatefbpage -สมคั รทวิตเตอร/ทวีตเตอรไอดีไดที่ : https://developer.twitter.com/en/docs/basics/twitter-ids หมายเหตุ : ปจจุบันรูปแบบการแชท นิยมใช Inbox ของเฟสบุคสเพจมาใชจาํ นวนมาก เพราะสะดวกในการ ติดตอ เนื่องจากคนสวนใหญจะอยูหนาเฟสบุคสตลอดเวลา แบบทดสอบ : ทุกคนต้งั คา Code ในเว็บเพจตัวเองไดดวยสื่อเหลาน้ี ------------------------------------------------ โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 29

ความรูเบื้องตน เก่ยี วกบั การสราง E-Book และกรณีศึกษาการ ผลติ สือ่ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชัน้ ป 3 มหาวิทยาลัยราชภัฏนครปฐม 30 อาจารยอดุ ม ตะหนอ ง แบบฝก ปฏิบตั ทิ ี่ 4: การสรา งสือ่ ในรปู แบบตาง ๆ การสรางสื่อการสอนจาก Playlist Video และ Playlist MP.3 1.1 การสรา ง Playlist Video ดว ยการปรบั แตง code 1.2 การสราง Playlist MP.3 จากโครงสรา งโปรแกรมสาํ เรจ็ รูป 1.1 วธิ กี ารสรา งสอื่ การสอนจากวีดโี อ Youtube ส่ือมัลติมีเดียในยุคปจจุบันในรูปแบบวีดิโอยคงไมมีใครปฏิเสธวีดิโอของคาย Google Youtube ไดเลย ซึ่งไดรับความ นยิ มสงู สุดในโลก Social Media คนมชี ่อื เสยี งจํานวนไมน อยแจง เกดิ ในวงการในแตละดานจากการ Upload ผาน Youtube เชน กังนัมสไตล เปนตน การสรางและการนําวีดิโอ Youtube เขามาใหแสดงผลในเว็บบล็อกนั้น เราสามารถทําไดหลายวิธีงายๆ โดย นํา Code มาใสไดเลย ไมตองมีเครื่องมือชวยเหลือเหมือนการเขียนเว็บตางๆ ท้ังน้ัน การสรางให Youtube autoplay (เลน อัตโนมัติ) loop (เลนวน) รวมถึงการสราง Playlist เพื่อใหเลนตอเน่ืองแบบ Unlimited ก็ยังได การสรางวีดิโอเพ่ือใชเปนสื่อใน จัดการเรียนการสอนรวมหัวขอการสอนตางๆลงใน Youtube จึงเปนเร่ืองคนในสังคมโลกปจจุบันชาไมไดแลว การสรางบทเรียน การสอนเปน Play list จงึ เปน สงิ่ สําคัญและตองทําไดจรงิ ในบทเรียนนจี้ ะแยกออกเปน 2 ลักษณะคือ  การสราง Playlist แบบซอนอยูกับวิดิโอ 2.1 เพิ่มคําสง่ั &autoplay=1 คอื เลนอัตโนมตั ิ 2.2 เพม่ิ คําสงั่ &loop=1 คือ ใหเ ลนซํา้ 2.3 เพิม่ คําส่ัง &playlist=VIDEO ID คอื ใหใ ส video id นน้ั เพื่อใหเลน playlist ถดั ไป หรอื เลอื กเลน วีดิโอตามบัญชที เี่ ราใส 2.1 ใชคําส่ัง &autoplay=1 คอื เลนอัตโนมตั ิ (?rel=0&autoplay=1) การทําวีดีโอใหเ ลนเองอัตโนมตั แิ ละเลนซ้ํา โดยท่ไี มตอ งกด play ซงึ่ จะมีขนั้ ตอนงา ย ๆ เพียงไมกขี่ ัน้ ตอน และ สามารถนาํ โคดไปแปะไวท่ีเวบ็ บลอ็ กที่เราตองการแสดงผลไดอกี ดว ย โดยเราตอ ง Upload สอ่ื การสอนในรูปแบบวีดิโอที่มีนามสกุล ที่เปน Media ท้ังหลายไดเกือบทุกสกุลทีเดียวเชียว เอาไปไวที่ Account ของเรากอน แตเราก็สามารถไปใชของชาวบานได เชน เดียวกนั โดยไมไ ปละเมิดลิขสทิ ธ์ิของเคา ก็ใชไ ด - Upload youtube เขา ใน Account ของทานใหเรียบรอย ตามขน้ั ตอนดังน้ี เมื่อเขาหนา Youtube Account ของเรากจ็ ะมีปมุ Upload ใหเ ราเลือกรูปแบบทตี่ อ งการ Upload แลว โหลดไฟล video ท่ีเราเตรยี มไวไ ดเ ลยครับ ยกตัวอยางวีดโิ อ “มนั ตรกั สัมตําปลารา” โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 30

ความรเู บ้อื งตนเกยี่ วกบั การสราง E-Book และกรณีศกึ ษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชมุ ชน ชน้ั ป 3 มหาวิทยาลัยราชภฏั นครปฐม 31 อาจารยอุดม ตะหนอง หลงั จาก Upload เสรจ็ สนิ้ แลว ระบบจะใหเราเลือกวาจะใชภาพใดเปนภาพ Background และยงั สามารถเพิม่ เตมิ ขอความตา งๆไดตามใจชอบ ในสวนของลูกเลนคณุ สมบัตติ า งๆของ Youtube รวมถึงการแกไข ผูเขียนไมน าํ มากลาวไวน ะครบั ไป ศกึ ษาเพม่ิ เติมอกี ครั้ง เมอื่ เราเปด วีดิโอ Youtube กใ็ หท าํ การคัดลอกลิงคจาก Youtube โดยกด share เลือกที่ Embed (ฝง ) จากนน้ั คดั ลอก โคด ทเ่ี ปน iframe ยกตวั อยา งเชน - ทาํ การคัดลอกลงิ ค จาก Youtube จะได Iframe ตามขน้ั ตอนดังนค้ี รับ โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 31

ความรเู บ้อื งตนเกย่ี วกบั การสราง E-Book และกรณีศึกษาการ ผลติ สอื่ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ชน้ั ป 3 มหาวิทยาลยั ราชภัฏนครปฐม 32 อาจารยอุดม ตะหนอง <iframe width= \" 4 2 0 \" height= \" 3 1 5 \" src= \" / / www. youtube. com/ embed/ BR2 5 hNJwNCc\" frameborder=\"0\" allowfullscreen></I frame>> ทีนเ่ี รามาปรับแกไข Code ของ Iframe กนั เพอื่ ใหC odeของวดิ ิโอเรามีความสามารถมากขนึ้ นอกเหนือจาก การเลน ตามปกตซิ ึ่งดแู ลว ไมท นั สมัยเอาซะเลยใชไหมครบั โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 32

ความรเู บ้ืองตน เกีย่ วกบั การสราง E-Book และกรณีศึกษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ชนั้ ป 3 มหาวิทยาลัยราชภัฏนครปฐม 33 อาจารยอดุ ม ตะหนอง การปรับ Code iframe ใหเลนวีดิโออัตโนมัติทันทีเมื่อเราเปดเขาหนาเว็บเพจน้ันๆ โดยใหเราเพ่ิมเติม Code คําสั่งเลนอัตโนมัติเขาไป ?rel=0&amp;autoplay=1 ตอทาย url ของวีดีโอ (คือ url ที่อยูหลังคําสั่ง src= ) ซึ่งตาม ตวั อยาง url คือ http:// www.youtube.com/embed/BR25hNJwNCc เมอ่ื เพิม่ คําสัง่ ?&autoplay=1 จะได Code เปนดงั น้ี 2.2 ใชค าํ ส่ัง &loop=1 เพ่อื ใหเ ลนวนซ้ํา (?rel=0&amp;autoplay=1&amp;loop=1) บางคร้ังเมอ่ื เรากําหนดใหเลนไฟลอ ัตโนมตั แิ ลว ยงั ไมเพยี งพอครบั เพราะเราตองการฟง ยํ้าๆ ยงั ตอ งการใหเลนวนซาํ้ <iframe width=\"420\" height=\"315\" src=\"//www.youtube.com/embed/BR25hNJwNCc?rel=0&amp;autoplay=1\" frameborder=\"0\" allowfullscreen></iframe> อีกเมือ่ วีดิโอเลน จบโดยทเี่ ราไมตองทําอะไรเลย ก็ใหเ ราเพิม่ คาํ สั่งเลนซํา้ ใสเขาไปใน Code iframe จะออกมาหนา ตามเปน แบบน้ี 2.3 ใชคําสั่ง &playlist=VIDEO ID คอื ใหใส video id น้นั เพือ่ ใหเลน playlist ถัดไป <iframe width=\"420\" height=\"315\" src=\"//www.youtube.com/embed/BR25hNJwNCc?rel=0&amp;autoplay=1&amp;loop=1\" frameborder=\"0\" allowfullscreen></iframe> การจัดวดิ ิโอเปนหมวดหมูใ นการสอนเปนอีกเร่อื งที่สําคญั เพราะเราสามารถลําดับความสาํ คญั กอนหนา และหลังได ลกั ษณะคลายกบั การแสดงผลของ Powerpoint โดยใช VIDEO ID มาจดั กรุปรวมเปน Video Playlist แยกเปนแตละหมวดหมูซึง่ จะสะดวกตอ การนํามาสอนหรือนํามาใชง าน โดยใหเ ราเพมิ่ เตมิ Code &amp;playlist= ตอทายจาก code ขอ 2.2 ไดเลยครับ หนา ตาก็จะออกมาลกั ษณะแบบน้ี <iframe width=\"420\" height=\"315\" src=\"//www.youtube.com/embed/BR25hNJwNCc?rel=0&amp;autoplay=1&amp;loop=1&am p;playlist=F9yINYrNsXQ , ZjgwwCc69zc , bS-s3LVFxyY\" frameborder=\"0\" allowfullscreen></iframe> โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 33

ความรูเ บือ้ งตนเกย่ี วกับการสราง E-Book และกรณีศึกษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ช้ันป 3 มหาวิทยาลยั ราชภฏั นครปฐม 34 อาจารยอุดม ตะหนอง ขอคิดสะกิดใจ : เราสามารถเพิ่มเติมวิดิโออ่ืนๆเพ่ือใหเปน Playlist เขาดว ยกนั ดวยการคน้ั ดว ยเครอ่ื งหมาย , และใสเฉพาะ Video ID ไปไดเรอ่ื ยๆไมจ ํากดั ครบั หากเราตองการตดั สว นใดสวนหน่ึงออกก็เพ่ิมเฉพาะแตล ะ Code ลงไป เชน ตอ งการใหเ ลน วน แตไ มต องการใหเ ลนอตั โนมัตกิ ็ตัดออก เปน ตน ตัวอยางโคต VIDEO ID การสราง playlist ทป่ี รากฏวดิ โิ อมมุ ดา นขาง ลกั ษณะตัวอยา งเวบ็ ไซต : http://goo.gl/rXTnx0 การแสดงผลจะออกมาเปนลกั ษณะมวี ดี โิ อใหญแ ละ Thumnail ปรากฏไวดานขาง จะสะดวกตอ การเรยี กใชง านและมภี าพแสดงใหเหน็ กอน ...เรามาเร่ิมกันเลยดีกวาครบั โดย อ.อุดม ตะหนอ ง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 34

ความรเู บอื้ งตนเกี่ยวกับการสราง E-Book และกรณีศึกษาการ ผลิตส่อื “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชุมชน ช้นั ป 3 มหาวิทยาลยั ราชภฏั นครปฐม 35 อาจารยอดุ ม ตะหนอง ข้นั ตอนท่ี 1 : เขาไปสูการปรบั แกไข Blogger แลวเลือกรปู แบบ (Template) หลงั จากนั้นเลือกแกไข (Edit HTML) โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 35

ความรเู บอ้ื งตน เกีย่ วกับการสราง E-Book และกรณีศกึ ษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ช้ันป 3 มหาวิทยาลยั ราชภัฏนครปฐม 36 อาจารยอดุ ม ตะหนอง ขนตอนที่ 2 : กด Ctrl + F คน หาคาํ วา </head> แลววาง Code ขา งลางนีไ้ วดานบน </head> <style> #videoslider { background:#F6F6F6; /* Background color */ clear:both; margin:0 auto; padding:5px; … #videoslider-tabs li a:hover { background: none !important; }</style> เม่ือวาง Code เสร็จสนิ้ แลวก็บันทกึ ใหเ รียบรอ ย โหลดจาก Google Pharm su.001 ขนั้ ตอนท่ี 3 : ใหก ลับไปท่บี ทความท่ตี องการจะเขียนงาน แลว เลอื กหนา Page เปน html แลวใหว างโคต เหลานี้ลงไปและแกไ ข ชือ่ หัวของานของทานและวาง VIDEO ID ใหเ รยี บรอ ย <script> var video = []; video[1] = '<iframe width=\"460\" height=\"345\" src=\"http://www.youtube.com/embed/video_ID_1\" frameborder=\"0\" allowfullscreen></iframe>'; video[2] = '<iframe width=\"460\" height=\"345\" src=\"http://www.youtube.com/embed/video_ID_2\" frameborder=\"0\" allowfullscreen></iframe>'; video[3] = '<iframe width=\"460\" height=\"345\" src=\"http://www.youtube.com/embed/video_ID_3\" frameborder=\"0\" allowfullscreen></iframe>'; video[4] = '<iframe width=\"460\" height=\"345\" src=\"http://www.youtube.com/embed/video_ID_4\" frameborder=\"0\" allowfullscreen></iframe>'; video[5] = '<iframe width=\"460\" height=\"345\" src=\"http://www.youtube.com/embed/video_ID_5\" frameborder=\"0\" allowfullscreen></iframe>'; </script> <div id=\"videoslider\"> <div id=\"videoslider-content\"></div> <ul id=\"videoslider-tabs\"> <li><a href=\"#vid1\"><img src=\"//i2.ytimg.com/vi/video_ID_1/default.jpg\" class=\"thumb-vid\" /><span class=\"vidTit\">Video Name</span><span class=\"vidDesc\">Video Description</span></a></li> <li><a href=\"#vid2\"><img src=\"//i2.ytimg.com/vi/video_ID_2/default.jpg\" class=\"thumb-vid\" /><span class=\"vidTit\">Video Name</span><span class=\"vidDesc\">Video Description</span></a></li> <li><a href=\"#vid3\"><img src=\"//i2.ytimg.com/vi/video_ID_3/default.jpg\" class=\"thumb-vid\" /><span class=\"vidTit\">Video Name</span><span class=\"vidDesc\">Video Description</span></a></li> <li><a href=\"#vid4\"><img src=\"//i2.ytimg.com/vi/video_ID_4/default.jpg\" class=\"thumb-vid\" /><span class=\"vidTit\">Video Name</span><span class=\"vidDesc\">Video Description</span></a></li> โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 36

ความรูเบ้ืองตนเกีย่ วกับการสราง E-Book และกรณีศึกษาการ ผลติ สื่อ “เว็บไซตฟรี” มาใชในกิจกรรมตางๆ สาขาพัฒนาชมุ ชน ช้นั ป 3 มหาวิทยาลัยราชภฏั นครปฐม 37 อาจารยอุดม ตะหนอ ง <li><a href=\"#vid5\"><img src=\"//i2.ytimg.com/vi/video_ID_5/default.jpg\" class=\"thumb-vid\" /><span class=\"vidTit\">Video Name</span><span class=\"vidDesc\">Video Description</span></a></li> </ul> </div> สีแดง : Video_ID ใหใส Video ID จาก youtube เขาไปไดเลย สฟี า : ชื่อวดิ ิโอ และรายละเอียดของวดิ โิ อ สเี หลือง : ใหใ ส Thrumnail ซ่งึ กค็ ือ Video ID ใหต รงกันกับสแี ดง เพยี งเทาน้ีเรากจ็ ะได Video Playlist สไตล Youtube ไวใ ชง านบนเวบ็ บล็อกของเราเรียบรอ ยแลวครบั ตอ ไปสง หน่ึงทส่ี ําคญั ไม แพว ดิ ิโอก็คือการใสเฉพาะเสยี งเขาไปในกรณที ี่เราตอ งการใหคนสนใจฟง อยา งเดียว ง้ันเราลองมาสราง Playlist MP.3 การสรางฐานสาํ หรับกรอกขอ มูลดว ย JotForm แบบสาํ รวจดว ย Apps jotform ฟอรมสําเร็จรูปมีมากมายใหเราไดเลือกใช jotform.com ซึ่งระบบตัวนี้ทาํ งาน ออนไลนบน ระบบเว็บไซต ผูใชสามารถใชงานไดงา ยข้ึน ระบบลากวาง จัดการงา ยสุดส าหรับคนเขียนโคตไมเปนก็ สามารถท าไดงา ย ๆครับ ซึ่งผมไดส ารวจเบื้องตนแลว jotform ตัวนี้เปนระบบหนึ่งท่มี คี วามสามารถมาก บางตัวมี เก็บ คาบริการรายเดือนดวย สวนคุณสมบัติอาจจะเทียบตัวนีไมได ผูใชอาจจะดูคุณสมบัติระบบตัวนีเพิมเติมได ขางลาง www.jotform.com หนา ตาเปนอยา งไร หนา จอของระบบน้ีจะท าดว ยหนา เว็บไซตใชง านงา ยมาก ๆ มี เมนูจัดระเบียบสวยงาม คุณสมบตั ิ/จดุ เด่นของโปรแกรมนี 1. สามารถสรางฟอรมฟรีไดไมมขี อจํากดั สามารถสรางก่ฟี อรมก็ได แตมีการจํากดั เรอื่ งขอมูล 2. มีระบบหลังราน สามารถจัดฟอรม ไดตลอดเวลา 3. เมือ่ มกี ารรับคาฟอรม เขา มา+มีการสงเมลลใหผูใชร ู 4. สามารถอัพโหลดไฟล เขา ระบบได บางฟอรมไมรองรับจุดนี้ 5. ไมจาํ กัดฟอรม 6. ฟอรมมกี ารดีไซดท่ีหลากหลายมากกวา ลูกเลน Google Drive โดย อ.อุดม ตะหนอง คณะเภสัชศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 37

ความรเู บือ้ งตน เกย่ี วกับการสราง E-Book และกรณีศึกษาการ ผลิตส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชั้นป 3 มหาวิทยาลัยราชภัฏนครปฐม 38 อาจารยอดุ ม ตะหนอ ง เริมตน้ ไปที Google Drive หากยังไมไดสมัครเขาเปนสมาชิกใหสมัครกอน (SIGN UP) โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 38

ความรูเบ้อื งตนเกี่ยวกบั การสราง E-Book และกรณีศึกษาการ ผลติ ส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ช้ันป 3 มหาวิทยาลยั ราชภฏั นครปฐม 39 อาจารยอดุ ม ตะหนอง เม่ือสาํ เรจ็ กจ็ ะไดคาแบบฟอรมพรอมใชงานและปรับแกด งั น้ี โดย อ.อุดม ตะหนอง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 39

ความรเู บื้องตนเกย่ี วกับการสราง E-Book และกรณีศึกษาการ ผลติ ส่ือ “เว็บไซตฟรี” มาใชในกจิ กรรมตางๆ สาขาพัฒนาชุมชน ชั้นป 3 มหาวิทยาลัยราชภฏั นครปฐม 40 อาจารยอดุ ม ตะหนอ ง ปฏิบัติการ : ผูเขาอบรมฝกทําฐานกรอกขอมลู ออนไลน พรอมวิธีนาํ ไปใชไปเผยแพรทาง เว็บไซตได 2. เวบ็ ล็อคป้องกันเอกสาร www.pdfprotect.net www.pdfunlock.com เอกสารประกอบการบรรยาย : สาขาพัฒนาชุมชน นักศึกษาชันปี ที มหาวทิ ยาลัยราชภัฏนครปฐม ---------------------------------------------- ขอขอบคณุ และขอใหท้ กุ ท่านโชคดมี คี วามสขุ ตลอดไป อ.อดุ ม ตะหน่อง /มิ.ย./ โดย อ.อุดม ตะหนอ ง คณะเภสชั ศาสตร มหาวิทยาลยั ศิลปากร E-MAIL : [email protected] 40