PowerPoint สู่ HTML5 สู่ Mobile Application (อย่างง่าย)


หน้าแรก HTML5 PowerPoint สู่ HTML5 สู่ Mobile Application (อย่างง่าย)
ในยุคนี้คงปฏิเสธไม่ได้แล้วว่าอุปกรณ์มือถือต่างๆ นั้น มีความสำคัญมากขึ้น และใครๆ ก็สามารถทำแอพลิเคชันใช้เองได้ไม่ยากเลย และมันคงจะดีไม่น้อย ถ้าคุณไม่ได้มีความรู้ขันเทพในการเขียนแอพฯ แต่คุณก็สามารถทำแอพฯ ใช้เองได้ไม่ยากโดยจุดเริ่มต้นนั้นทุกคนคงคุ้นเคยกันดีกับ Microsoft PowerPoint

รับทำเว็บ  webUB.com


ถ้าคุณลองไปศึกษาคร่าวๆ ว่า HTML5 มันคืออะไร คุณจะเข้าใจกระบวนการในการทำมากขึ้น แต่ผู้เขียนจะขอแนะคร่าวๆ ว่า สมัยนี้ HTML5 มีบทบาทสำคัญ กล่าวได้ว่าหมดยุคของ Flash ไปแล้วก็ว่าได้ สังเกตจากมือถือของคุณเค้าไม่เล่น Flash Player กันแล้ว ต่อให้เล่นได้ก็เถอะ สมัยนี้ไม่มี Flash Player ให้อัพเดตแล้ว และ HTML5 นี่แหละที่สามารถทำให้สิ่งต่างๆ ไปสู่ Application ที่สามารถเปิดได้หลากหลายระบบปฏิบัติการ

ก่อนอื่นคุณต้องทำการสร้างงานนำเสนอจาก Microsoft PowerPoint เสียก่อนจะเป็นเวอร์ชัน 2007 หรือ 2010 หรือ 2013 ก็ไม่มีปัญหา

รับทำเว็บ  webUB.com


ต่อไปคุณต้องทำความรู้จักกับโปรแกรม Adobe Captivate 6 จะยกทุกอย่างมาไว้ในบทความนี้คงจะได้สัก 360 หน้า คงไม่ไหว จริงๆ แล้วโปรแกรมนี้มันทำอะไรได้มากมายเกี่ยวกับการสร้างบทเรียนคอมพิวเตอร์ช่วยสอนแบบมีปฏิสัมพันธ์ และโปรแกรมนี้แหละที่นำ PowerPoint ของเราสู่ HTML5 โดยอธิบายคร่าวๆ ได้ดังนี้

1. เปิดโปรแกรม Adobe Captivate 6 แล้วทำการเลือกโปรเจคแบบ Form Microsoft PowerPoint

รับทำเว็บ  webUB.com


2. จะปรากฏหน้าต่าง Open ให้เลือกไฟล์ PowerPoint ที่ต้องการแล้วคลิก Open

รับทำเว็บ  webUB.com


3. คลิก OK หรืออยากจะปรับขนาดให้ใกล้เคียงกับหน้าจอมือถือของเราก็คลิกที่ Preset Size หรือจะใส่ขนาดที่ต้องการก็ได้แล้วคลิก OK

รับทำเว็บ  webUB.com


4. จากนั้นไปที่เมนู File > Publish แล้วไปเลือกที่ SWF/HTML5 แล้วไปคลิกเครื่องหมายถูกที่ HTML5 และ Zip Files แล้วคลิก Publish

รับทำเว็บ  webUB.com


5.ไปที่ https://build.phonegap.com/ แล้วทำการลงชื่อเข้าใช้

รับทำเว็บ  webUB.com


6. คลิก +new app แล้วคลิก Upload a .zip file เพื่อทำการอัพโหลดไฟล์ที่ได้ Publish ออกมา

รับทำเว็บ  webUB.com


7. ทำการตั้งชื่อและใส่รายละเอียดคร่าวๆ แล้วคลิก Ready to build

รับทำเว็บ  webUB.com


8. คลิกที่ตัวแอพฯ แล้วไปคลิก Setting ทำการใส่รูปไอคอน ใส่รายละเอียดต่างๆ รุ่น เวอร์ชัน เปลี่ยนชื่อแอพฯ ฯลฯ แล้วคลิก Save แนะนำว่ารูปไอคอนของแอพฯ นั้น สามารถสร้างมาได้จากโปรแกรม Photoshop นี่แหละครับ ให้บันทึกออกมาเป็นไฟล์ PNG ขนาด 200 x 200 พิกเซลก็พอครับ

รับทำเว็บ  webUB.com


9. เซฟแอพฯ ที่สร้างขึ้นลงคอมพิวเตอร์แล้วคัดลอกลงสมาร์ทโฟนของคุณเพื่อทำการติดตั้ง หรือจะนำสมาร์ทโฟนมาส่อง QR Code ที่ปรากฏขึ้นด้วย i-nigma ก็ได้ แอพฯ ที่ได้สร้างขึ้นจะถูกดาวน์โหลดลงสมาร์ทโฟนอัตโนมัติ ให้คุณทำการติดตั้ง

รับทำเว็บ  webUB.com


10. เมื่อติดตั้งแล้วจะได้ออกมาหน้าตาแบบนี้ ลองคลิกเข้าไปดูหน้าตาก็คือ PowerPoint ที่เหมือนในหน้าจอคอมพิวเตอร์ของคุณเลย

รับทำเว็บ  webUB.com


อย่างไรก็ตามจากชื่อบทความก็บอกอยู่แล้วว่า “อย่างง่าย” ซึ่งเหมาะสำหรับแอพฯ เล็กๆ ที่มีขนาดไม่เกิน 9.5 MB ถ้าขนาด .zip ของ HTML5 ที่ทำออกมามีขนาดใหญ่กว่า 9.5 MB จะไม่สามารถใช้วิธีนี้ได้ ต้องใช้โปรแกรม Eclipse ซึ่งเป็นโปรแกรมที่ใช้พัฒนาแอพฯ แอนดรอยด์โดยตรง แต่ไม่ยากครับ ไม่ได้เขียนโค้ดอะไรเยอะแยะ ไว้โอกาสหน้าจะมาเขียนให้อ่านต่อ ส่วนสำหรับ iOS ต้องทำโดยใช้เครื่อง Mac เท่านั้นผ่านโปรแกรม Xcode นั่นเอง…

ถ้าไฟล์ PowerPoint มีขนาดเล็ก ก็จะทำให้ไฟล์ HTML5 มีขนาดเล็ก อย่างที่กล่าวไว้ว่าถ้าไฟล์มีขนาดไม่เกิน 9.5 MB ผู้เขียนก็แนะนำว่าให้ใช้วิธีนี้นะครับ เพราะอีกวิธีหนึ่งเหมาะกับไฟล์ที่ใหญ่กว่า 9.5 MB และต้องมีการเขียนโค้ดเล็กน้อย ซึ่งยุ่งยากกว่านิดหน่อยครับ

ขึ้นไปด้านบน