2 PUBHTML5-Zap

PUBHTML5 การประยุกตใ์ ช้ ZapWorks e-Book *** PUBHTML5 จะกล่าวถงึ เฉพาะในส่วนท่ีเกยี่ วขอ้ งกับการทา e-Book กับ AR เทา่ นั้น*** หนังสืออิเลก็ ทรอนกิ ส์ แบ่งออกเป็น 10 ประเภท ดังน้ี 1. Textbooks 2. Talking Books 3. Static Picture Books 4. Moving Picture Books 5. Multimedia 6. Polymedia books 7. Hypermedia Books 8. Intelligent Electronic Books 9. Telemedia Electronic Books 10. Cyberspace Books PUB HTML5 คือ เปน็ HTML5 Digital Publishing Platform หรือเคร่อื งมอื สําหรับการสรางหนังสอื อิเล็กทรอนิกส์ฟลิปบุ๊ค หรือ หนังสอื พลกิ ดิจิทลั สามารถสรา้ งช้ันหนงั สือออิเล็กทรอนิกส์ พรอ้ มกับแชร์หนงั สือไปยังสงั คมออนไลน์ และเว็บไซต์ต่างๆ TCK e-Training เฟรมที่ 1 ขอคำแนะนำกำรผลิต

เตรยี มไฟล์PDF การประยุกตใ์ ช้ ZapWorks e-Book 1 2 การจดั เตรียมไฟล์ PDF - ในแตล่ ะไฟล์ควรมีจานวนหน้าตั้งแต่ 2 หนา้ ข้นึ ไป - จานวนหน้าทั้งหมดตอ้ งไม่เกิน 500 หน้า - ควรมีจานวนไฟล์ 3 ไฟล์ เป็นอย่างนอ้ ย เนอื้ หาใน 1 ไฟล์ ควรมกี ารตั้งค่าหน้ากระดาษ ทีเ่ หมอื นกัน เชน่ - แนวตัง้ (หมายเลข 1) หรอื - แนวนอน (หมายเลข 2) โดยใหเ้ ลือกรปู แบบใดแบบหน่ึง TCK e-Training เฟรมท่ี 2 ขอคำแนะนำกำรผลิต

PUBHTML5 1 การประยกุ ต์ใช้ ZapWorks e-Book คลกิ ที่น้ี สร้างบญั ชีชือผู้ใช้ เวบ็ ไซต์ PUBHTML5 1. คลิกลิงก์เว็บไวต์ PUBHTML5 (หมายเลข 1) หรือคลกิ ที่ URL www.pubhtml5.com 2. คลกิ Create Account (หมายเลข 2) 2 TCK e-Training เฟรมท่ี 3 ขอคำแนะนำกำรผลิต

PUBHTML5 การประยกุ ตใ์ ช้ ZapWorks e-Book สร้างบัญชีชอื ผใู้ ช้ 3. แนะนาเลือกใชก้ ารกรอกข้อมูลลงทะเบียนตามรายละเอียดฟอรม์ จากน้ันไปทาการคลิก Sign Up (หมายเลข 3) 3 หรอื เลือกชอ่ งทางท่ีทา่ นถนัดทส่ี ดุ ในการเข้าสู่ระบบ หากลงทะเบียนแล้ว Sign in ได้เลย TCK e-Training เฟรมท่ี 4 ขอคำแนะนำกำรผลิต

PUBHTML5 การประยุกตใ์ ช้ ZapWorks e-Book สร้างบัญชชี อื ผู้ใช้ ยนื ยันบัญชชี ือผใู้ ช้งาน 4. ระบบใหม้ าทาการ Verify Account (หมายเลข 4) 4 ใหไ้ ปนา เลขรหสั ท่สี ง่ มาทางอีเมลท่ีใช้สมัครสมาชิก แล้วมาตรอกลงในช่องสีเ่ หล่ยี ม ทีก่ าหนดนี้ TCK e-Training เฟรมท่ี 5 ขอคำแนะนำกำรผลิต

PUBHTML5 การประยุกตใ์ ช้ ZapWorks e-Book สรา้ งบญั ชีชอื ผู้ใช้ ยนื ยันบญั ชีชอื ผใู้ ช้งาน 5 5. นารหสั ขอ้ มูลจากอีเมลเป็นตวั เลข 6 หลัก (หมายเลข 5) ไปใสท่ ่ชี ่อง Verification Code ใน PUBHTML5 TCK e-Training เฟรมท่ี 6 ขอคำแนะนำกำรผลิต

PUBHTML5 การประยุกต์ใช้ ZapWorks e-Book สรา้ งบญั ชีชอื ผใู้ ช้ ยนื ยันบัญชชี อื ผู้ใช้งาน 6. เมอ่ื นารหัสขอ้ มูลเรียบร้อยแลว้ คลกิ Verify Account (หมายเลข 6) 6 ขอคำแนะนำกำรผลติ TCK e-Training เฟรมท่ี 7

PUBHTML5 การประยุกต์ใช้ ZapWorks e-Book 2 การสรา้ ง New folder 1 ทีห่ น้าการทางานของ PUBHTML5 ระบบจะกาหนดเปน็ ค่าเร่ิมต้น (Default ) ของ Folder สามารถจะใชใ้ นการสร้าง และจดั เก็บ e-Book ได้ แต่ขอแนะนาให้สร้างใหม่ กรณสี ร้างใหม่มีวิธีการ ดงั น้ี 1. ท่ีฟงั ก์ชนั่ My Pubs คลิกสญั ลกั ษณ์เครอ่ื งหมายบวก ((+) หมายเลข 1) 2. สรา้ งที่เก็บชิน้ งานใหม่ คลกิ New folder (หมายเลข 2) TCK e-Training เฟรมที่ 8 ขอคำแนะนำกำรผลติ

PUBHTML5 การประยุกต์ใช้ ZapWorks e-Book การสรา้ ง New folder 3. กรอกรายละเอยี ดลงในฟอรม์ แล้วคลกิ Create (หมายเลข 3) 3 ขอคำแนะนำกำรผลิต TCK e-Training เฟรมท่ี 9

PUBHTML5 3 การประยกุ ตใ์ ช้ ZapWorks e-Book 4 1 สร้าง e-Book 2 นาเข้าเนอ้ื หาไฟล์ PDF ที่หนา้ Homepage จะปรากฏชอื้ Folder ท่สี ร้างขึ้นมาใหม่ 1. คลกิ ท่ี Folder Zapworks ((ทสี่ รา้ งขนึ้ มาใหม่ (หมายเลข 1) 2. คลกิ Add New Book เพ่อื นาเข้าเน้อื หาไฟล์ PDF (หมายเลข 2) 3. เลือกคลิกไฟล์ PDF จาก Folder ทีจ่ ดั เกบ็ (หมายเลข 3) 4. คลกิ Open (หมายเลข 4) หมายเหตุ 1) นาเข้าไฟล์ไดไ้ มเ่ กิน 5 ครงั้ ตอ่ วนั /เน้ือหาไม่เกนิ 500 หนา้ 2) รปู แบบเอกสารควรตกแตง่ ให้เรียบร้อยก่อนบนั ทกึ เป็นชนิด ไฟล์ PDF ซ่ึงในข้ันตอนการตกแต่งเอกสารนัน้ สามารถนา Marker หรอื Trigger ทสี่ รา้ งดว้ ยเทคนคิ AR มาใส่ได้อีกเช่นกนั TCK e-Training เฟรมที่ 10 ขอคำแนะนำกำรผลติ

PUBHTML5 การประยุกตใ์ ช้ ZapWorks e-Book สรา้ ง e-Book การแปลงไฟล์ PDF เปน็ e-Book ขนั้ ตอนนีร้ ะบบจะทาการแปลงไฟล์ PDFเปน็ ลงิ ก์ และQR Code 5 5. ใส่รายละเอยี ดของเนื้อหา ((จะใส่หรอื ไม่กไ็ ด้) (หมายเลข 5) แต่แนะนาให้ใส่ 6. คลกิ Create (หมายเลข 6) เพ่อื แปลงไฟล์ PDF 6 TCK e-Training เฟรมท่ี 11 ขอคำแนะนำกำรผลติ

PUBHTML5 การประยกุ ต์ใช้ ZapWorks e-Book 2 การเผยแพร่ e-Book เมื่อแปลงไฟลเ์ ป็น e-Book แลว้ จะปรากฎอยูใ่ นรูปของ Book Link และQR Code ซ่งึ สามารถนาไปเผยแพรต่ ่อได้ ทงั้ ในโชเซียลมเี ดียต่าง ๆ กว่า 170 แอปพลเิ คชัน่ และส่ือต่าง ๆ 1. คลกิ ท่สี ัญลักษณก์ ารแชรข์ อ้ มลู (หมายเลข 1) 2. จะปรากฏ Book Link (https://online.pubhtml5.com/nian/jdrj/) ของหนังสือให้ทาการคลกิ ขวา Copy Link (หมายเลข 2) แล้วนาไปใช้ทแี่ อปพลเิ คชนั่ ZapWorks ท่เี มนู Web Link 1 ข้ันตอนจากน้ไี ป ใหไ้ ปสร้างชิ้นงานใหมท่ ี่ ZapWorks TCK e-Training เฟรมท่ี 12 ขอคำแนะนำกำรผลติ

ZapWorks การประยุกต์ใช้ ZapWorks e-Book 1 สร้าง e-Book รปู แบบ AR 1. ไปทห่ี นา้ เวบ็ ZapWorks https://my.zap.works/login/?_ga=2.50174244.3438 52293.1607492603-2119857970.1603158057 หรอื << คลิก >> 2. Login เขา้ สรู่ ะบบ 3. เลือกฟงั ก์ชน่ั รูปแบบการทางาน Hobby 4. ต้งั ช่อื โครงการ หรอื ชิน้ งาน (หมายเลข 1) 4.1 เลอื กครอื่ งมือประเภท Widgets (หมายเลข 2) 4.2 คลิก Next Step (หมายเลข 3) 3 หมายเหตุ 2 ปัจจบุ นั ทาง Zappar ปรับเปล่ียนหน้า Home Page ใหม่ เมนู ZapWorks จะอย่ดู า้ นล้าง (จากทเี่ คยอยู่ด้านบน) TCK e-Training เฟรมท่ี 13 ขอคำแนะนำกำรผลิต

ZapWorks การประยกุ ตใ์ ช้ ZapWorks e-Book 2 สรา้ ง e-Book รูปแบบ AR Trigger คอื ภาพทีเ่ ปน็ Markup โดยท่เี มอ่ื ใดก็ตามท่ี แอปพลิเคช่ัน Focus อยทู่ ี่ Trigger ส่วนท่ีเป็น Overlay จะ แสดงผลขึน้ มา 1. คลิก ZapWorks (หมายเลข 1) 2. คลิก Create Project (หมายเลข 2) เรมิ่ สร้างช้ินงาน 1 หมายเหตุ Marker หรอื Markup หรอื AR-Code ก็คอื Trigger น้ันเองโดยท่ี ZapWorks เรยี ก ZapCode TCK e-Training เฟรมที่ 14 ขอคำแนะนำกำรผลิต

ZapWorks การประยกุ ตใ์ ช้ ZapWorks e-Book 3 ลกั ษณะของโครงร่างชนิ้ งาน 1. ลักษณะของโครงร่างชิ้นงานท่จี ะแสดงผลออกมาแบบ AR ((หมายเลข 3) หมุนเวียนเป็นวงกลม) 2. คลกิ Open Widgets (หมายเลข 4) 4 TCK e-Training เฟรมท่ี 15 ขอคำแนะนำกำรผลติ

ZapWorks การประยกุ ตใ์ ช้ ZapWorks e-Book 2 การนําเข้า Web Link 3 เตรียมลงิ กจ์ าก PUBHTML5 (ขัน้ ตอนจากเฟรมท่ี 12) 4 1) https://online.pubhtml5.com/lfoh/ndiq/ 2) https://online.pubhtml5.com/lfoh/dzuh/ 3) https://online.pubhtml5.com/lfoh/egsg/ 4) https://online.pubhtml5.com/lfoh/jnxa/ กําหนดให้แสดงผลในรปู แบบ AR ทาํ ได้ 2 วธิ ี วิธกี ารที่ 1 การแสดงผลแบบขอ้ ความ 1. คลิกเมนู Web Link (หมายเลข 1) 2. นาลงิ ก์ไฟล์ PDF จาก PUBHTML5 ที่เตรียมไว้ 1 มาใสท่ ่ีช่อง Add a web link widget (หมายเลข 2) 3. คลกิ Generate Screenshot ((ข้อความทจี่ ะไปปรากฎบน AR) หมายเลข 3) 4. คลิก Create web link (หมายเลข 4) ลงิ ก์อ่นื ๆ ท่ีเหลอื สามารถดาเนินการตามขั้นตอนที่ 1-4 จนครบ แลว้ คลกิ ปุม่ Preview เพ่อื ทดสอบการแสดงผลในรปู แบบ AR TCK e-Training เฟรมที่ 16 ขอคำแนะนำกำรผลติ

ZapWorks การประยุกต์ใช้ ZapWorks e-Book เตรยี มลิงกจ์ าก PUBHTML5 (ขั้นตอนจากเฟรมท่ี 12) 1) https://online.pubhtml5.com/lfoh/ndiq/ 1 2) https://online.pubhtml5.com/lfoh/dzuh/ 3) https://online.pubhtml5.com/lfoh/egsg/ 4) https://online.pubhtml5.com/lfoh/jnxa/ วธิ ีการที่ 2 การแสดงผลแบบข้อความและขอ้ ความ 1. คลิกเมนู Web Link 2 2. นาลิงก์ไฟล์ PDF จาก PUBHTML5 ทเี่ ตรียมไว้ มาใสท่ ี่ชอ่ ง Add a web link widget (หมายเลข 1) 3. คลิกปมุ่ Upload Custom Image (หมายเลข 2) หมายเหตุ แนะนาเปน็ ภาพทีไ่ ม่มีต้องมีรายละเอียดมาก เพราะเวลานาเสนอแลว้ จะมีขนาดเลก็ (หากสร้างภาพขึ้นมาเองควรใหภ้ าพน้ันสื่อความหมาย ด้วยตวั ของมันเอง) TCK e-Training เฟรมท่ี 17 ขอคำแนะนำกำรผลติ

ZapWorks การประยุกตใ์ ช้ ZapWorks e-Book 3 วิธกี ารที่ 2 การแสดงผลแบบข้อความ เมื่อคลกิ ปุม่ คลกิ Upload Custom Image ระบบจะให้ อพั โหลดไฟล์ภาพเพื่อการแสดงผลแบบภาพ 4 4. คลกิ ปุ่ม Upload Image (หมายเลข 3) 5. คลิกเลอื กไฟลภ์ าพที่ตอ้ งการให้แสดงผลบน AR (หมายเลข 4) 6. คลิก Open (หมายเลข 5) 5 ขอคำแนะนำกำรผลติ TCK e-Training เฟรมที่ 18

ZapWorks การประยกุ ต์ใช้ ZapWorks e-Book 6 วิธกี ารท่ี 2 การแสดงผลแบบขอ้ ความ 7 7. แสดงผลไฟลภ์ าพที่อพั โหลด (หมายเลข 6) 8. คลกิ Create web link (หมายเลข 7) กรณนี าเขา้ ลิงก์อนื่ ๆ ใหด้ าเนินการตามข้ันตอนท่ี 1-4 จนครบ แล้วคลิกปมุ่ Preview เพื่อทดสอบการแสดงผลในรแู บบ AR TCK e-Training เฟรมท่ี 19 ขอคำแนะนำกำรผลิต

ZapWorks การประยกุ ตใ์ ช้ ZapWorks e-Book 2 1 ทดสอบการแสดงผล 1. ทดสอบการแสดงผลโดยคลกิ ท่ีเมนู Preview (หมายเลข 1) 2. เปิดแอปพลิเคช่นั Zappar และสแกนไปท่ภี าพ Zapcode (หมายเลข 2) TCK e-Training เฟรมท่ี 20 ขอคำแนะนำกำรผลิต

ZapWorks การประยุกตใ์ ช้ ZapWorks e-Book 3 ใส่เปลยี่ นภาพใน ZapCode การเปลีย่ นภาพ Zapcode (เลอื กเปล่ยี น หรอื ไมก่ ไ็ ด้) กรณีเลอื กเปลี่ยน (รูปแบบทใี่ ห้บรกิ ารฟรี ) ระบบอนุญาต ให้เปลี่ยนภาพได้บางสว่ นเท่านั้น โดยท่นี ิยมใส่ คอื ภาพโลโก้ หรอื ภาพที่สื่อความหมาย เข้าใจไดใ้ นภาพเดียว 2 1. คลิก Upload Center Image (หมายเลข 1) 2. คลกิ Upload Image (หมายเลข 2) 3. คลกิ เลือกภาพจากแฟ้มทีจ่ ดั เกบ็ (หมายเลข 3) 4. คลกิ Open (หมายเลข 4) 1 4 TCK e-Training เฟรมท่ี 21 ขอคำแนะนำกำรผลติ

ZapWork 1 3 การประยุกตใ์ ช้ ZapWorks e-Book 4 การเผยแพร่ ก่อนการเผยแพรส่ ามารถตรวจสอบ หรือปรบั ปรุง ไดท้ ้ังลงิ กไ์ ฟล์ PDF (หมายเลข 1) และภาพใน Zapcode (หมายเลข 2) 1. หากขอ้ มลู ถูกต้อง คลกิ ป่มุ Publish เพือ่ เผยแพร่ (หมายเลข 3) 2. จากน้นั คลกิ ปุม Dowload (หมายเลข 4) เพอื่ นาภาพ Zapcode ไปใช้งาน 2 หมายเหตุ ภาพใน Zapcode (หมายเลข 2) หากมองจากหน้าจอ จะดผู ดิ สดั สว่ นไม่ต้องกงั วล เมอ่ื แสดงผลรปู แบบ AR จะปรกติ TCK e-Training เฟรมท่ี 22 ขอคำแนะนำกำรผลติ

ZapWork การประยุกต์ใช้ ZapWorks e-Book 5 การเผยแพร่ 7 การ Dowload ภาพ Zapcode 3. เลือกชนดิ ไฟลท์ ีต่ อ้ งการ (หมายเลข 5) 4. คลกิ Save เพือ่ บนั ทึก (หมายเลข 6) กรณปี ระสงคท์ ี่จะเปลยี่ นสี Zapcode ให้ดาเนินการเปลีย่ น กอ่ นการบันทกึ โดยคลิกเลือกค่าสที ีบ่ าร์โค๊ต (หมายเลข 7) หมายเหตุ PNG คอื ภาพทโ่ี ปรง่ แสง และภาพท่ีต้องใช้งาน 6 ตกแตง่ ไดภ้ าพชัดเทา่ ต้นฉบับ SVG คือ สามารถย่อหรอื ขยายภาพ โดยทภี่ าพนนั้ ยังคงความคมชัด TCK e-Training เฟรมที่ 23 ขอคำแนะนำกำรผลติ

ZapWork การแสดงผล e-BooK รปู แบบAR การประยุกต์ใช้ ZapWorks e-Book สแกนภาพน้ดี ้วย Zappar App การสแกน และการแสดงผล e-BooK รูปแบบ AR ข้นั ตอน 1. ดาวน์โหลด Zappar App จาก App Store หรือ Play Store 2. เปิดแอปพลเิ คช่ัน Zappar จากสมาร์ทโฟน 3. สแกนยังภาพ Zapcode และ คลิกอ่านขอ้ มลู ใน e-BooK รูปแบบ AR ตามหวั ข้อท่ปี รากฎบนสมาร์ทโฟน โดยสรุป การประยกุ ตใ์ ชง้ าน PUBHTML5 กับ AR เป็นเพียง การประยุกต์ใชง้ านใหเ้ ข้ากับเทคนคิ ทีห่ ลากหลายมิติในการนําเสนอ โดยทสี่ ามารถสอดแทรกความเป็นจริงเสริมเข้าใปประกอบการเรยี นรู้ ใหด้ ูมีความน่าตื่นตื่นใจไปจากเอกสารธรรมดา จบ TCK e-Training เฟรมที่ 24 ขอคำแนะนำกำรผลิต