โครงการ แอพพลิเคชั่นเพื่อการเรียนรู้ภาษาจีน

โครงการจัดทาแอพพลเิ คช่ัน (กรณีศึกษา : แอพพลเิ คชั่นเพอ่ื การเรียนรู้ภาษาจีน) Application Project (apps for learning Chinese) นางสาวชญาณิศา จีรภาปัญญาวุธ นางสาวชุติกาญจน์ กายะรังษีโครงการนีเ้ ป็ นส่วนหนึ่งของวชิ าโครงการ รหสั วชิ า 3201-8501 ตามหลกั สูตรประกาศนียบัตรวชิ าชีพช้ันสูง สาขาวชิ าคอมพวิ เตอร์ธุรกจิ สาขางานการพฒั นาเวบ็ เพจ วทิ ยาลยั เทคนิคจันทบุรี ปี การศึกษา 2559

หวั ขอ้ โครงการ โครงการจดั ทาแอพพลิเคชน่ั (กรณีศึกษา : แอพพลิเคชน่ั เพ่ือการเรียนรู้ ภาษาจีน) Application Project(apps for learning Chinese)โดย นางสาวชญาณิศา จีรภาปัญญาวธุ นางสาวชุติกาญจน์ กายะรังษีครูที่ปรึกษา นางจิรวรรณ มะลาไสยสาขาวชิ า คอมพวิ เตอร์ธุรกิจสาขางาน การพฒั นาเวบ็ เพจปี การศึกษา 2559 บทคัดย่อ โครงการจดั ทาแอพพลิเคชน่ั (กรณีศึกษา : แอพพลิเคชน่ั เพื่อการเรียนรู้ภาษาจีน) มีวตั ถุประสงคเ์ พ่อื สร้างแอพพลิเคชน่ั โดยใชโ้ ปรแกรม Captivate Cs6ตกแต่งใหม้ ีความทนั สมยั และเหมาะสมกบั เน้ือหาของแอพพลิเคชน่ั และเพ่ือนาความรู้จากวชิ าเรียนไปสร้างแอพพลิเคชน่ั เพือ่ การเรียนการรู้ภาษาจีน โครงการน้ีจะเป็นวิจยั แบบเจาะจงกลุ่มตวั อยา่ ง เคร่ืองมือการทาวิจยั คร้ังน้ีจะเป็ นแบบสอบถามในเรื่องการจดั ทาแอพพลิเคชนั่ การเรียนรู้ภาษาจีนมีท้งั หมด 10 ขอ้ และแบบสอบถามในคร้ังน้ีทาการวเิ คราะห์ขอ้ มูลโดยหาค่าผลรวม และหาคา่ เฉล่ีย ของผตู้ อบแบบสอบถาม 50 คน จากการทาโครงการ แอพพลิเคชนั่ (กรณีศึกษา : แอพลิเคชน่ั เพ่อื การเรียนรู้ภาษาจีน) สรุปผลประโยชน์ที่คาดวา่ จะไดร้ ับจากแอพพลิเคชนั่ สร้างโดยโปรแกรม Adobe Captivate Cs6 มีความทนั สมยั เหมาะสมกบั การเรียนรู้ และสามารถพกพาได้ ไม่จาเป็ นตอ้ งเรียนในห้องเรียนเทา่ น้นั

Diploam thesis topic Application for Learning Chinese Language ProjectBy Miss Chayanisa Chirapapanyawut Miss Chutikarn KayarangsiConsultan Teacher Mrs. Jirawan MalasaiMajor Web Page DevelopmentYear 2016 Abstract The aim of Application Project(apps for learning Chinese). The objective of thestudyisApplication by using Captivate Cs6 the modern décor appropriate to the content of theApplication and to apply the knowledge from this course by created application for learningChinese. This project made a research for specific group sample. The tool of research will bequestionnaire about created apps for learning Chinese by questionnaire with ten questions. Thequestionnaire in this research performed analysis by using the sum. The average of therespondents for twenty five people The project applications (apps for learning Chinese) concluded that the benefits expectedto be derived from an application built on Adobe Captivate Cs6 by the program to date.Appropriate learning and portable don’t need to learn in the classroom.

ใบรับรองโครงการ โครงการจดั ทาแอพพลิเคชน่ั (กรณีศึกษา : แอพพลิเคชนั่ เพื่อการเรียนรู้ ภาษาจีน) Application Project(apps for learning Chinese)โดย นางสาวชญาณิศา จีรภาปัญญาวธุ นางสาวชุติกาญจน์ กายะรังษีครูท่ีปรึกษา นางจิรวรรณ มะลาไสยสาขาวชิ า คอมพวิ เตอร์ธุรกิจสาขางาน การพฒั นาเวบ็ เพจปี การศึกษา 2559 ได้รับอนุมัติให้นับโครงการน้ีเป็ นส่วนหน่ึงของวิชาโครงการ รหัสวิชา 3201-8501หลักสูตรประกาศนียบัตรวิชาช้ันสูง สาขาวิชาคอมพิวเตอร์ธุรกิจ สาขางานพัฒนาเว็บเพจวทิ ยาลยั เทคนิคจนั ทบุรี หวั หนา้ แผนกคอมพวิ เตอร์ธุรกิจ (นางพีรญา ดุนขนุ ทด)คณะกรรมการสอบโครงการ ประธานกรรมการ (นางจิรวรรณ มะลาไสย) กรรมการ กรรมการ(นางพีรญา ดุนขนุ ทด) (นายจงรักษ์ แซ่อ้ึง)(นายวเิ ชียร ประเสริฐสกลุ ) (นายจิระพงษ์ จนั ทร์ประเสริฐ)รองผอู้ านวยการฝ่ ายวชิ าการ ผอู้ านวยการวทิ ยาลยั เทคนิคจนั ทบุรี วนั ท่ี........./........../.......... วนั ที่........./........../..........

โครงการ สร้างแอพพลิเคชนั่ ส่ือการเรียนรู้ภาษาจีน (Application)ผู้เสนอโครงการ นางสาวชญาณิศา จีรภาปัญญาวธุ นางสาวชุติกาญจน์ กายะรังษีครูทปี่ รึกษา ครูจิรวรรณ มะลาไสยหลกั การและเหตุผล การเรียนการสอนภาษาจีนในปัจจุบนั มีความสาคญั และจาเป็น โดยเฉพาะการเปิ ดAEC :(Asean Economics Community) จึงมีอิทธิพลต่อการคา้ การลงทุน ซ่ึงมีหลายประเทศเขา้ มาเขา้ ร่วมรวมไปถึงภาษาจีนเป็ นอีกภาษาที่คนทว่ั โลกใชก้ นั มากรองลงมาจากภาษาองั กฤษเช่นประเทศบรูไนประเทศกมั พชู าประเทศมาเลเซีย ประเทศฟิ ลิปปิ นส์ดงั น้นั ภาษาจีนในการส่ือสารจึงจาเป็นต่อชีวติ ประจาวนั และติดต่องาน ภาษาจึงสาคญั มากกบั ส่ิงเหล่าน้ี ไมใ่ ช่เพยี งแคภ่ าษาองั กฤษเทา่ น้นั ที่เราจะตอ้ งศึกษาและมีความเขา้ ใจเป็นอยา่ งดีแลว้ ภาษาประจาชาติของแตป่ ระเทศกเ็ ช่นกนั ประโยคง่ายๆ เช่นการกล่าวทกั ทาย ถามสารทุกขส์ ุกดิบ ก็เป็นส่ิงสาคญั แตก่ ารสอนภาษาจีนในช้นั เรียนส่วนใหญ่พบวา่ นกั เรียนขาดทกั ษะในการสื่อสารและไม่กลา้ แสดงออกในการใชภ้ าษาในชีวติ ประจาวนัเพราะการเรียนการสอนยงั ไม่มุ่งเนน้ ในการสื่อสารภาษาอยา่ งแทจ้ ริง ผจู้ ดั ทาจึงคิดนาสื่อเทคโนโลยสี ารสนเทศเขา้ มาช่วย โดยการจดั ทาแอพพลิเคชนั่ ส่ือการเรียนการสอนภาษาจีน ข้ึนมาเพือ่ ง่ายต่อการเรียนรู้ และเขา้ ถึงภาษาจีนไดม้ ากข้ึนสามารถเปิ ดอา่ นได้ตลอดเวลาเหมือนหนงั สือพกพาเล่มเล็กๆ ที่มีคาศพั ท์ การสนทนา และประโยคท่ีสามารถใชไ้ ดใ้ นชีวติ ประจาวนั ภายในแอพพลิเคชน่ั แยกใหเ้ ป็ นหมวดหมู่เปิ ดหาไดง้ ่ายใชง้ านไดส้ ะดวกตอ่ ผทู้ ่ีสนใจการเรียนภาษาจีนวตั ถุประสงค์ 1. เพอื่ สร้างแอพพลิเคชนั่ ส่ือการเรียนรู้ภาษาจีน 2. เพือ่ เป็ นแหล่งขอ้ มลู การเรียนรู้นอกหอ้ งเรียนเป้ าหมาย 1. ผเู้ ขา้ ใชม้ ีความเขา้ ใจภาษาจีน และสามารถอ่าน เขียนได้ 2. ผเู้ ขา้ ใชแ้ อพพลิเคชน่ั จานวน 50 คนเคร่ืองมอื และอปุ กรณ์ Hordware 1. เครื่องคอมพวิ เตอร์ 2. Flash Drive

3. เคร่ืองพิมพ์ 4. โทรศพั ท์ Software 1. Phothoshop 2. Intel XDK 3. Captivate 8วธิ ีการดาเนินการ 1. วางแผนรูปแบบหนา้ แอพพลิเคชน่ั 2. หาขอ้ มลู เพ่ือจดั ทาแอพพลิเคชนั่ 3. ออกแบบแอพพลิเคชน่ั 4. นาไปเสนอผทู้ ี่เกี่ยวขอ้ งเพ่ือตรวจสอบ 5. ดาเนินการทาแอพพลิเคชนั่ 6. เสนอใหผ้ ทู้ ่ีเกี่ยวขอ้ งตรวจสอบอีกคร้ัง 7. อพั โหลดแอพพลิเคชน่ั 8. จดั ทารูปเล่มโครงการ 9. ประชาสัมพนั ธ์แอพพลิเคชนั่ 10. สรุปผลการดาเนินงาน และนาเสนอโครงการประโยชน์ทคี่ าดว่าจะได้รับ 1. ไดแ้ อพพลิเคชนั่ สื่อการเรียนรู้ภาษาจีน 2. ทาใหม้ ีประสบการณ์ในการจดั ทาโครงการ และแอพพลิเคชน่ั ส่ือการเรียนการสอน 3. สามารถนาความรู้ไปใชใ้ นการดารงชีวติ ประจาวนั และการประกอบอาชีพได้

ระยะเวลาในการดาเนินการ16 พฤษภาคม – 16 กนั ยายน พ.ศ.2559กจิ กรรม ระยะเวลาดาเนินการ (สัปดาห์) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 181.วางแผนรูปแบบหนา้แอพพลิเคชน่ั2.หาขอ้ มลู เพอ่ื จดั ทาแอพพลิเคชนั่3.ออกแบบแอพพลิเคชนั่4.นาไปเสนอผทู้ ี่เกี่ยวขอ้ งเพอ่ื ตรวจสอบ5.ดาเนินการทาแอพพลิเคชนั่6.เสนอใหผ้ ทู้ ่ีเก่ียวขอ้ งตรวจสอบอีกคร้ัง7.อพั โหลดแอพพลิเคชน่ั8.จดั ทารูปเล่มโครงการ9.ประชาสัมพนั ธ์แอพพลิเคชน่ั10.สรุปผลการดาเนินงานและนาเสนอโครงการ (นางสาวชญาณิศา จีรภาปัญญาวธุ ) นกั ศึกษาแผนกคอมพิวเตอร์ธุรกิจ หวั หนา้ โครงการ (นางจิรวรรณ มะลาไสย) ครูท่ีปรึกษา

กติ ตกิ รรมประกาศ การศึกษาดว้ ยตนเองฉบบั น้ี สาเร็จลงดว้ ยความกรุณาอย่างย่ิงจากครูจิรวรรณ มะลาไสยครูพีรญา ดุนขุนทด และครูแผนกคอมพิวเตอร์ธุรกิจทุกท่าน ท่ีไดใ้ ห้คาแนะนา ปรึกษา ตลอดจนตรวจสอบ ตรวจแกไ้ ขขอ้ บกพร่องต่าง ๆ ดว้ ยความเอาใจใส่เป็ นอยา่ งยิ่ง จนการศึกษาคน้ ควา้ ดว้ ยตนเองสาเร็จสมบูรณ์ได้ ผศู้ ึกษาคน้ ควา้ ขอขอบคุณเป็นอยา่ งสูงไว้ ณ ท่ีน้ี ขอขอบคุณ ครูจงรักษ์ แซ่อ้ึง และครูนราธิป วิชัยดิษฐ ครูสาขาวิชาสามัญ-สัมพนั ธ์วทิ ยาลยั เทคนิคจนั ทบุรี ท่ีไดใ้ หค้ วามช่วยเหลือความร่วมมือในการศึกษาคน้ ควา้ ดา้ นภาษา ขอกราบขอบพระคุณที่ได้ให้ขอ้ มูลต่าง ๆ ของภาษาจีน และภาษาองั กฤษ อนั จะนามาสู่แอพพลิเคชนั่ ที่ได้คุณภาพสมบรู ณ์ยง่ิ ขอกราบขอบพระคุณพระบิดา มารดาที่ได้ให้แนวคิดในการศึกษาตลอดมา กราบขอบพระคุณคณาจารยผ์ ูป้ ระสิทธ์ิประสาทวิชา ญาติพี่นอ้ ง ที่คอยให้ความช่วยเหลือและคอยเป็ นกาลงั ใจ อนั เป็ นพลงั ท่ีทาให้เกิดความมุ่งมนั่ ความพยายามท่ีจะทาการศึกษาคน้ ควา้ ฉบบั น้ีจนเสร็จสมบูรณ์ คุณประโยชน์อนั พึงมีจากการศึกษาคน้ ควา้ ฉบบั น้ี ผูศ้ ึกษาขอน้อมบูชาและอุทิศให้กบัพระคุณบิดามารดา บุพการีและบรู พาจารยท์ ี่ไดช้ ้ีแนะวางพ้ืนฐานการศึกษา จนไดร้ ับความสาเร็จสมดงั ความมุ่งหมายทุกประการ คณะผจู้ ดั ทา

บทที่ 1 บทนา ปัจจุบนั แอพพลิเคชนั่ มีบทบาทอยา่ งมากในชีวติ ประจาวนั ช่วยใหเ้ ราสะดวกสบายในการเรียนรู้ และในดา้ นตา่ ง ๆ หรือใชก้ บั คน้ ควา้ หาขอ้ มูล เห็นไดว้ า่ แอพพลิเคชนั่ มีความสาคญั กบั ทุกสาขาอาชีพรวมท้งั การศึกษาที่มีการเรียนการสอนภาษาจีน1.1 ความเป็ นมาและความสาคญั ในปัจจุบนั แอพพลิเคชน่ั ไดเ้ จริญกา้ วหนา้ อยา่ งรวดเร็ว ในการดาเนินชีวิตประจาวนั ของมนุษย์ แอพพลิเคชน่ั และคอมพิวเตอร์ไดเ้ ขา้ มามีบทบาทสาคญั ตอ่ การดาเนินกิจกรรมต่าง ๆโดยเฉพาะอยา่ งยงิ่ การศึกษาคน้ ควา้ เพราะในแตล่ ะอาชีพหลกั ๆ ตอ้ งมีการใชแ้ อพพลิเคชน่ั ในการสื่อสารในการช่วยคน้ หา เช่น แอพพลิเคชน่ั Maps ใชก้ ารในการคน้ หาสถานท่ีตา่ ง ๆ และเส้นทางที่จะใชใ้ นการเดินทาง และคน้ หาสถานที่ใกลเ้ คียง รวมถึงศึกษาความรู้ต่าง ๆ ในการทางาน ในรายวชิ าเรียน ดว้ ยความกา้ วหนา้ ของแอพพลิเคชนั่ และอุปกรณ์ IT ทาใหอ้ งคก์ รต่าง ๆ นาเทคโนโลยีเหล่าน้ีเขา้ มาช่วยในการดาเนินงานขององคก์ รใหม้ ีประสิทธิภาพมากยงิ่ ข้ึน ไมว่ า่ จะเป็นการรับ-ส่งขอ้ มลู ข่าวสารออนไลน์ การนาแอพพลิเคชนั่ เขา้ มาใชง้ านในการทาธุรกิจเช่น แอพพลิเคชน่ัCloudOn “Intel XDK” เป็นระบบบริหารจดั การแอพพลิเคชน่ั เป็นโปรแกรมที่สามารถเขียนแอพพลิเคชน่ั ผา่ นโปรแกรมไดท้ นั ที เขียนโดยใชภ้ าษา PHP และ Javascriptในการเขียนแอพพลิเคชนั่ สามารถเขียนออกมาไดห้ ลาย แพลตฟอร์ม เช่น Android Iphoneและอีกมากมาย ดงั น้นั จึงจดั ทาโครงการสร้างแอพพลิเคชนั่ ส่ือการเรียนรู้ภาษาจีน โครงการน้ีจดั ทาข้ึนเพ่อืเป็นส่ือการเรียนการสอนวชิ าภาษาจีน มีคาศพั ทแ์ ละประโยคการสนทนามากมายใหเ้ รียนรู้ พร้อมมาแบบการทดสอบความเขา้ ใจในหมวดการเรียนรู้ต่าง ๆ ที่ต้งั ไว้ โดยใชโ้ ปรแกรม Captivate1.2 วตั ถุประสงค์ 1.2.1 เพ่ือสร้างแอพพลิเคชนั่ โดยใชโ้ ปรแกรม Captivate 8 ตกแต่งใหม้ ีความทนั สมยั และเหมาะสมกบั เน้ือหาแอพพลิเคชน่ั 1.2.2 เพอื่ นาความรู้จากวชิ าเรียน ไปสร้างแอพพลิเคชน่ั ส่ือการเรียนรู้ภาษาจีน โดยใช้โปรแกรม Captivate 8

1.3 ขอบเขตของโครงการ 1.3.1 แอพพลิเคชนั่ สื่อการเรียนรู้ภาษาจีน 1 แอพพลิเคชน่ั 1.3.2 ประชาสัมพนั ธ์แอพพลิเคชน่ั สื่อการเรียนรู้ภาษาจีน 1.3.3 ไดม้ ีกระบวนการนาความรู้จากวชิ าเรียนมาใชใ้ หเ้ กิดประโยชน์1.4 ประโยชน์ทค่ี าดว่าจะได้รับ 1.4.1ไดร้ ู้จกั การสร้างแอพพลิเคชน่ั เร่ืองการใชโ้ ปรแกรม Captivate Cs6 ใหม้ ีความทนั สมยัและเหมาะสมกบั การเรียนรู้ 1.4.2ไดน้ าความรู้จากวชิ าเรียน ไปสร้างแอพพลิเคชน่ั ส่ือการเรียนรู้ภาษาจีน โดยใช้โปรแกรม Captivate Cs6

บทท่ี 2 เอกสารและวจิ ยั ทเี่ กย่ี วข้อง การศึกษาเรื่อง “การสร้างแอพพลิเคชน่ั ” กรณีศึกษา สื่อการเรียนรู้ภาษาจีน เป็นการศึกษาโดยการนาเอาความรู้ทางดา้ นการสร้างแอพพลิเคชนั่ มาเป็นตวั ช่วยในการสร้างแอพพลิเคชน่ั เพือ่การเรียนรู้ภาษาจีนใหเ้ ป็ นที่รู้จกั อยา่ งแพร่หลาย ผพู้ ฒั นาไดท้ าการศึกษาคน้ ควา้ จากตาราและเอกสารท่ีเก่ียวขอ้ งเพ่ือใชเ้ ป็นแนวทางในการศึกษาและพฒั นาระบบโดยมีประเด็นที่จะศึกษาดงั น้ี 2.1 การสร้างแอพพลิเคชน่ั 2.2 โปรแกรมท่ีเก่ียวขอ้ ง 2.3 การอพั โหลด 2.4 วจิ ยั ที่เก่ียวขอ้ ง2.1 การสร้างแอพพลเิ คชั่น 2.1.1 หลกั การออกแบบแอพพลิเคชนั่ 2.1.1.1 ตวั โปรแกรมออกแบบใหมไ่ มม่ ีเคา้ เดิมเลย คาสั่งต่างๆ ถูกจดั หมวดหม่ใู หม่ท้งั หมด แต่ขอบอกวา่ จดั ตาแหน่งคาส่งั ตา่ งๆ ไดด้ ี หาง่าย มาพร้อมกบั ฟี เจอร์เด็ด Responsive Projectท่ีสามารถปรับขนาดอตั โนมตั ิไดใ้ นหนา้ จอคอมพวิ เตอร์ แทบ็ เล็ต และสมาร์ทโฟน ภาพท่ี 2-1 การออกแบบแอพพลิเคชน่ั

2.1.2 รูปแบบการออกแบบแอพพลิเคชน่ั 2.1.2.1 Responsive Theme ธีมรูปแบบใหม่ สามารถยดื หยุน่ ตามขนาดของหนา้ จอ ภาพที่ 2-2 รูปแบบธีม 2.1.2.2 Smart Position จดั การกบั ตาแหน่งของวตั ถุไดแ้ ม่นยามากข้ึนในหนา้ จอที่แตกต่างกนั เพ่อื สร้างชิ้นงานแบบ Responsive Project ไดส้ มบรู ณ์แบบ ภาพที่ 2-3 การจดั ตาแหน่ง

2.1.3 การรับรอง 2.1.3.1 รองรับการปัดหนา้ จอแบบสมั ผสั โดยใชเ้ ทคโนโลยมี ลั ติทชั ฝังอยใู่ น UserInterface ทาใหส้ ามารถใชน้ ิ้วในการแตะ เล่ือน รูดหนา้ จอ เพ่ือใหเ้ กิดการปฏิสมั พนั ธ์ที่ดีระหวา่ งเน้ือหากบั ผเู้ รียน ภาพท่ี 2-4 รองรับการปัดหนา้ จอแบบสมั ผสั 2.1.3.2 รองรับการ ขยาย-ลดลงโดยการใชน้ ิ้ว ในการยอ่ ขยายเน้ือหาในหนา้ จอ ภาพท่ี 2-5 รองรับการ ขยาย-ลดลงโดยการใชน้ ิ้ว

2.1.4 การรองรับไฟล์ รองรับไฟลท์ ่ีเป็น HTML5 ไม่วา่ จะเป็นไฟล์ html ที่ถูกห่อเป็นไฟล์ .zip ซ่ึงอาจทามาจาก Adobe MUSE หรือ Adobe EDGE Reflow หรือไฟล์ Animation ที่ทาจาก Adobe EdgeAnimate โดย Export เป็น .oam ภาพที่ 2-6 การรองรับไฟล์ 2.1.5 รองรับการ Scroll รองรับการ Scroll เลื่อนข้ึนลงในสมาร์ทโฟน ทาใหด้ ูเน้ือหาไดง้ ่าย โดยเน้ือหาสามารถ Flow ไดใ้ นสไลดเ์ ดียว ภาพที่ 2-7 การรองรับการ Scroll

2.1.6 ความสามารถในการนาไฟลเ์ ขา้ สามารถนาไฟล์ PowerPoint (2007, 2010, 2013) ท่ีมีท้งั ขอ้ ความ รูปร่าง เสียงวดิ ีโอ ภาพเคล่ือนไหวท่ีสร้างจาก PowerPoint เขา้ มาใน Adobe Captivate 8 แลว้ Publish เป็นHTML5 ภาพท่ี 2-8 ความสามารถในการนาไฟลเ์ ขา้ 2.1.7 มี Learning Interaction มี Learning Interaction รูปแบบใหมๆ่ มากกวา่ เวอร์ชนั่ 7 ภาพท่ี 2-9 มี Learning Interaction

2.1.8 การปรับปรุงบทเรียน ปรับปรุงการบทเรียนทาแอพพลิเคชน่ั สาหรับสมาร์ทโฟน ภาพท่ี 2-10 การปรับปรุงบทเรียน 2.1.9 ความสามารถในการสร้างป่ ุมโดยมี 3 สถานะ สร้างป่ ุมโดยมี 3 สถานะ (State) ไดแ้ ก่ Up, Over, Down ไดใ้ นตวั โปรแกรมเลย ไม่ตอ้ งทาป่ ุมจาก Adobe Photoshop หรือ Adobe Illustrator หรือโปรแกรมอื่นๆ คือไมต่ อ้ งมาทา _up,_over, _down แตส่ ามารถสร้าง Shapes แลว้ กาหนดเป็น Button กส็ ามารถสร้างป่ ุมท้งั 3 State ได้ง่ายๆ ภาพที่ 2-11 ความสามารถในการสร้างป่ ุม

2.2 โปรแกรมทเี่ กี่ยวข้อง 2.2.1 โปรแกรม Adobe Captivate โปรแกรม Adobe Captivate เป็นโปรแกรมที่ถูกพฒั นาข้ึนมาเพอ่ื สนบั สนุนการสร้าง Movie ในรูปแบบสื่อเรียนการเรียนรู้ หรือส่ือการนาเสนอแบบมลั ติมีเดีย เช่น การนาเสนอผลงาน การจบั หนา้ จอภาพเพอ่ื นาไปสร้างส่ือการเรียนรู้ การสร้างแบบทดสอบ รวมไปถึงการตดั ต่อวดิ ีโอ เพื่อใชส้ าหรับงานนาเสนอหรือผลิตส่ือการเรียนรู้ โดยโปรแกรม Adobe Captivate เป็นโปรแกรมที่ใชส้ ร้างชิ้นงานไดง้ ่ายและเร็ว Adobe Captivate (โปรแกรม สร้างส่ือมลั ติมีเดีย) : โปรแกรมน้ีนะครับเป็ นโปรแกรมท่ีช่วยสร้างสื่อมลั ติมีเดียตา่ งๆ สามารถผสมผสานจดั การในระบบ E-learning ไดด้ ว้ ยครับดว้ ยรูปแบบการทางานที่ใชง้ านง่ายคลา้ ยกบั Power Point ใหค้ ุณสร้างสื่อมลั ติมีเดียท่ีประกอบดว้ ยวดิ ีโอ, เสียง, กราฟิ กและภาพเคล่ือนไหว พร้อม interaction โตต้ อบดว้ ยแบบทดสอบที่หลากหลายรูปแบบ สาหรับครู อาจารย์ นกั ศึกษา หรือผทู้ ี่ใชโ้ ปรแกรมสาเร็จรูปท้งั หลาย ลองโหลดไปใชด้ ูนะครับ น่าสนใจมากๆ ครับผม โปรแกรม Adobe Captivate 4.0 เป็นผลิตภณั ฑน์ อ้ งใหมจ่ ากคา่ ย Adobeที่ถูกพฒั นาข้ึน มาเพ่อื สนบั สนุนการสร้าง Movie ในรูปแบบสื่อเรียนรู้หรือสื่อการนาเสนอแบบมลั ติมีเดีย เช่น การนาเสนอผลงาน การจบั หนา้ จอภาพเพื่อนาไปสร้างส่ือเรียนรู้ การสร้างส่ือจากขอ้ มูลตา่ งๆ การสร้างแบบทดสอบ รวมไปถึงการ ตดั ต่อวดิ ีโอเพ่ือใชส้ าหรับงานนา เสนอหรือผลิตสื่อเรียนรู้ โดยโปรแกรม Adobe Captivate 4.0 เป็นโปรแกรมที่ใชส้ ร้างชิ้นงานไดง้ ่ายและเร็ว โปรแกรม Captivate เป็นโปรแกรมสาหรับสร้างมลั ติมีเดียบนเวบ็ การจบั ภาพหนา้ จอ การทาภาพเคลื่อนไหว และอ่ืน ๆ โปรแกรม Captivate สามารถสร้างบทเรียนแบบมีปฏิสัมพนั ธ์ สร้างขอ้ สอบ ไดอ้ ยา่ งดี โดยผใู้ ชไ้ มจ่ าเป็นตอ้ งเขียนคาสั่ง เพราะโปรแกรมมีคาสั่งต่าง ๆไวใ้ หเ้ ลือกผา่ นทางหนา้ จอของโปรแกรม จึงเป็ นโปรแกรมที่ใชง้ านง่าย เรียนรู้ไดเ้ ร็ว เหมาะสาหรับครู และผทู้ ี่มีหนา้ ท่ีฝึกอบรมบุคลากร นอกจากน้ียงั สามารถใช้ Widget หรือเขียน Action Script 3เพมิ่ ขีดความสามารถของโปรแกรมได้ และสามารถ ส่งข้ึนเวบ็ Youtubeไดท้ นั ที หรือจะทาเป็นไฟล์PDF ก็ไดโ้ ปรแกรม Captivate มีจุดประสงคห์ ลกั สาหรับใชเ้ ล่นบนอินเทอร์เน็ต ผา่ นทาง Browserหรือใชก้ บั LMS โดยส่งออกไปใชง้ านเป็น Flash (swf) ตามมาตรฐาน Scormอยา่ งไรก็ตามโปรแกรมสามารถส่งออกเป็ นไฟล์ exe และนาไปเล่นบนเครื่องคอมพวิ เตอร์ท่ีไม่ไดต้ ่อกบัอินเทอร์เน็ตได้ 2.2.2 โปรแกรม photoshop โปรแกรมPhotoshopเป็นโปรแกรมสร้างและแกไ้ ขรูปภาพอยา่ งมืออาชีพโดยเฉพาะนกั ออกแบบในทุกวงกายอ่ มรู้จกั โปรแกรมตวั น้ีดี โปรแกรม Photoshop เป็นโปรแกรมที่

มีเครื่องมือมากมายเพื่อสนบั สนุนการสร้างงานประเภทส่ิงพมิ พ์ งานวดิ ีทศั น์ งานนาเสนอ งานมลั ติมีเดีย ตลอดจนงานออกแบบและพฒั นาเวบ็ ไซต์ ในชุดโปรแกรม Adobe Photoshopจะประกอบดว้ ยโปรแกรมสองตวั ไดแ้ ก่ Photoshop และ ImageReadyการที่จะใชง้ านโปรแกรมPhotoshopคุณตอ้ งมีเครื่องท่ีมีความสามารถสูงพอควร มีความเร็วในการประมวลผล และมีหน่วยความจาที่เพียงพอ ไม่เช่นน้นั การสร้างงานของคุณคงไมส่ นุกแน่ เพราะการทางานจะชา้ และมีปัญหาตามมามากมาย ขณะน้ีโปรแกรม Photoshop ไดพ้ ฒั นามาถึงรุ่น Adobe Photoshop CS โปรแกรม Photoshop เป็นโปรแกรมสาหรับสร้างภาพ และตกแตง่ ภาพ ซ่ึงเป็ นลิขสิทธิของบริษทั Adobe ซึงบริษทั Adobe มีผลิตภณั ฑซ์ อฟแวร์เก่ียวกบั ดา้ นกราฟิ ก มากมายเช่นAdobe illustrator สาหรับทา ภาพเวกเตอร์ Adobe Pemiretorสาหรับตดั ต่อภาพยนต์ ฯลฯ โปรแกรมPhotoshop เป็นโปรแกรมตกแตง่ ภาพทีไดร้ ับความนิยมมาก เนืองจากเป็นโปรแกรมทีใชง้ ่าย และรองรับ Application (Plug In) เสริมไดม้ ากมาย Photoshop เป็นโปรแกรมในตระกลู Adobe ที่ใชส้ าหรับตกแต่งภาพถ่ายและภาพกราฟฟิ ก ไดอ้ ยา่ งมีประสิทธ์ิภาพ ไมว่ า่ จะเป็นงานดา้ นส่ิงพมิ พ์ นิตยสาร และงานดา้ นมลั ติมีเดีย อีกท้งั ยงั สามารถretouching ตกแตง่ ภาพและสร้างภาพ ซ่ึงกาลงั เป็นท่ีนิยมสูงมากในขณะน้ี เราสามารถนาโปรแกรมPhotoshop ในการแต่งภาพ การใส่ Effect ต่าง ๆใหก้ บั ภาพและตวั หนงั สือ การทาภาพขาวดาและการทาภาพถ่ายเป็ นภาพเขียน การนาภาพตา่ งๆ มารวมกนั การRetouch ตกแตง่ ภาพ เป็นตน้ นอกจากน้ีแลว้ โปรแกรมPhotoshop ยงั เป็นโปรแกรมสร้างและแกไ้ ขรูปภาพอยา่ งมืออาชีพโดยเฉพาะนกั ออกแบบในทุกวงการยอ่ มรู้จกั โปรแกรมตวั น้ีดี โปรแกรม Photoshop เป็นโปรแกรมที่มีเครื่องมือมากมายเพื่อสนบั สนุนการสร้างงานประเภทส่ิงพิมพ์ งานวดิ ีทศั น์ งานนาเสนอ งานมลั ติมีเดีย ตลอดจนงานออกแบบและพฒั นาเวบ็ ไซต์ ในชุดโปรแกรม Adobe Photoshopจะประกอบดว้ ยโปรแกรมสองตวั ไดแ้ ก่ Photoshop และ ImageReadyการที่จะใชง้ านโปรแกรมPhotoshopคุณตอ้ งมีเครื่องท่ีมีความสามารถสูงพอควร มีความเร็วในการประมวลผล และมีหน่วยความจาที่เพียงพอ2.3 การอพั โหลด หลงั จากท่ีเราไดส้ ร้างแอพพลิเคชนั่ จนเป็นท่ีน่าพอใจแลว้ ข้นั ตอนต่อไปคือ การเผยแพร่ผลงานสู่สายตาชาวโลก โดยการนาไป Publish ไฟลแ์ ละ Save ลงเครื่อง Pc หรือโทรศพั ทโ์ ดย 2.3.1.เขา้ Captivate > Publish เพื่อเลือกการนาออกจาก Captivate เลือก Publish tocomputer 2.3.2.เลือก Zip Files เลือก HTML5 และเลือก Scalable HTML content จากน้นั กด Publish 2.3.3.จากน้นั กจ็ ะไดไ้ ฟล์ Zip ของ Captivate ออกมา

2.3.4.เปิ ด Intel XDK แลว้ ทาการ Sign In 2.3.5.เมื่อทาการ Sign In จะข้ึนหนา้ หลกั ของ Intel XDK ใหเ้ ลือก General > HTML5 +Cordova > Hello Cordova > Continueเมื่อกด Continue แลว้ ใหท้ าการต้งั ช่ืองาน 2.3.6.จากน้นั ใหเ้ ลือก EXULATE > DEVICES เลือกรุนโทรศพั ทท์ ่ีตอ้ งการ จากน้นั ก็ต้งั คา่Orientation เป็นต้งั หรือนอน 2.3.7.ต่อมาใหเ้ ปิ ดไฟลท์ ี่บนั ทึกงานไว้ พร้อมเปิ ดไฟล์ Zip ของ Captivate 2.3.8.เม่ือเปิ ดไฟลง์ านแลว้ ในเลือก Folder www แลว้ ทาการ Cory ไฟล์ Zip Captivate มาFolder www 2.3.9.เม่ือกลบั มาเปิ ดงานที่ Intel XDK จะพบวา่ งานที่ Copy มาข้ึนที่ Intel XDK 2.3.10.จากน้นั เลือก BUILD เลือก Android แลว้ กดป่ ุมต้งั ค่าของ Android 2.3.11.เมื่อเขา้ มาจะพบวา่ มีช่องใหใ้ ส่ขอ้ มลู ต่าง ๆ พร้อมใส่ลิขสิทธ์ิ 2.3.12.เมื่อกดกลบั มาท่ี BUILD จะพบวา่ มีเครื่องหมายถูกที่การต้งั ค่า แสดงวา่ ผา่ นที่ต้งัคา่ ลิขสิทธ์ิแลว้ 2.3.13.เม่ือผา่ นลิขสิทธ์แลว้ แตย่ งั พบวา่ ยงั ติด Unlock อยใู่ หค้ ลิกเพ่อื ทาการใส่รหสั ที่ต้งั ไว้ในลิขสิทธ์ิ จากน้นั กด Unlock 2.3.14.เมื่อปลดลอ็ คUnlookแลว้ กด Start Builds รอการดาวนโ์ หลด 2.3.15.จากน้นั กดป่ ุมดาวน์โหลด และเลือกไฟล์ จากน้นั ถึงไฟลม์ าใชโ้ ทรศพั ท์2.4 วจิ ัยทเ่ี กยี่ วข้อง นวรัตน์ รามสูต, บลั ลงั ก์ โรหิตเสถียร(2556)ทาการศึกษาวจิ ยั เรื่อง การจดั การศึกษาของประเทศไทยในอนาคตเพ่ือใหเ้ กิดประโยชนส์ ูงสุดแก่ประเทศ คงปฏิเสธไม่ไดถ้ ึงความจาเป็นตอ่ การนาเอาเทคโนโลยมี าใชเ้ พ่อื ดาเนินจดั การศึกษา หน่วยงานในภาครัฐและ ทุกภาคส่วนตอ้ งส่งเสริมและสนบั สนุนใหม้ ีการผลิตและพฒั นาแบบเรียนตารา หนงั สือทางวชิ าการ สื่อสิ่งพมิ พ์ วสั ดุอุปกรณ์และเทคโนโลยี เพอ่ื การศึกษา โดยเร่งรัดในการพฒั นาขีดความสามารถในการผลิต จดั ใหม้ ีเงินสนบั สนุนในการผลิต และมีการใหแ้ รงจูงใจแก่ผผู้ ลิตและพฒั นาเทคโนโลยเี พอ่ื การศึกษาซ่ึงมีการมุ่งเนน้ ตามพระราชบญั ญตั ิการศึกษาแห่งชาติ พุทธศกั ราช 2542 ซ่ึงนโยบาย ที่จะเร่งรัดดาเนินการตามนโยบายรัฐบาลขอ้ ที่สาม ซ่ึงมีการเร่งนาเทคโนโลยสี ารสนเทศและการส่ือสาร มาใชใ้ นการปฏิรูปการเรียนรู้มีการสร้างมาตรฐานการเรียนการสอนดว้ ยคอมพิวเตอร์แบบพกพา ซ่ึงตอ้ งมีการพฒั นาเน้ือหาสาระ พฒั นาครู และการวดั ประเมินผลที่ไดม้ าตรฐาน รวมท้งั เพ่ือเป็ นเคร่ืองมือใหเ้ กิดระบบการเรียนรู้ตลอดชีวติ ในสังคมไทย ซ่ึงจะสามารถยกระดบั การศึกษาไทยและพฒั นานกั เรียนใหส้ ามารถแข่งขนั กบั ชาติอ่ืนๆได้

กฤษมนั ต์ วฒั นาณรงค์ (2556) ทาการศึกษาวจิ ยั เร่ือง ยทุ ธศาสตร์การใชเ้ ทคโนโลยีสารสนเทศเพ่อื การศึกษา ซ่ึงมีการนาเอาเทคโนโลยมี าใช้ร่วมกบั การเรียนรู้ ศ.ดร.ชยั ยงคพ์ รหมวงศ์ไดน้ าเสนอแนวคิดการใชเ้ ทคโนโลยสี ารสนเทศเพื่อการศึกษาโดยเฉพาะการใชค้ อมพวิ เตอร์แบบพกพาเป็นส่ือหลกั สาหรับการเรียนการสอน ท่ีมีลกั ษณะเป็นการศึกษาภควนั ตภาพ ที่ผเู้ รียนไดร้ ับความรู้ทุกแห่งหน ทุกเวลา รวมไปถึงใชเ้ ป็นเคร่ืองมือช่วยสอนใหค้ รูไดใ้ ชเ้ ป็นสื่อและเป็นศูนย์ความรู้ติดตวั มีแหล่งความรู้ หรือเป็ นหอ้ งสมุดติดตวั เพื่อใหก้ ารดาเนินการเพื่อตอบสนองแนวคิดดงั กล่าว จะทาใหเ้ กิดระบบการเรียนการสอนที่ใชค้ อมพิวเตอร์แบบพกพาเป็นฐาน เกิดข้ึนในหลายๆรูปแบบ ตามความสามารถของแอพพลิเคชน่ั ที่นามาติดต้งั หรือแอพพลิเคชน่ั ท่ีไดพ้ ฒั นาข้ึนประกอบกบั ความสามารถพ้ืนฐานของแทบ็ เล็ตเช่น ความสามารถ ในการบนั ทึกภาพน่ิงภาพเคลื่อนไหว วดี ิทศั น์ เสียง ตลอดจนการเขา้ ถึงเวบ็ ไซด์ตา่ งๆ ท้งั ทางตรงและผา่ น QR Code Mantgem(2551) ทาการศึกษาวจิ ยั เร่ือง การสร้างสื่อแอพพลิเคชนั่ บนแทบ็ เลต็ระบบปฏิบตั ิการแอนดรอยเป็นสื่อเพอื่ การศึกษา เป็นส่ือที่มีประโยชน์และนาไปใชใ้ นการเรียนการสอนในช้นั เรียนกนั มากในทุกๆระดบั เน่ืองจากเหตุผลสาคญั ของการใชส้ ื่อเทบ็ เล็ตจะสะทอ้ นความกา้ วหนา้ ทางการเรียนรู้จากเน้ือหาที่ไดเ้ รียน ช่วยใหผ้ เู้ รียนทราบและปรับปรุงผลการเรียนรู้ได้ดว้ ยตนเอง โดยการใชง้ านคอมพวิ เตอร์แทบ็ เล็ต เป็นสื่อหรือเครื่องมือท่ีเอ้ือประโยชน์ต่อผใู้ ชใ้ นทุกสถานการณ์ตามจุดประสงคห์ รือเป้ าหมายรวมท้งั วธิ ีการที่นาไปใช้ เป็นส่ือท่ีตอบสนองต่อการเรี ยนรู้เป็ นรายบุคคลได้

บทที่ 3 วธิ ีดาเนินการ การโครงการจดั ทาแอพพลิเคชน่ั สื่อการเรียนรู้ภาษาจีน (กรณีศึกษา) คณะผจู้ ดั ทามีข้นั ตอนงานดงั น้ี 3.1 การศึกษา และ รวบรวมขอ้ มูลตา่ ง ๆ 3.2 ออกแบบแอพพลิเคชน่ั 3.3 จดั ทาแอพพลิเคชนั่ 3.4 เผยแพร่แอพพลิเคชน่ั ในการดาเนินการทาแอพพลิเคชน่ั (กรณีศึกษา : สื่อการเรียนรู้ภาษาจีน) ไดม้ ีข้นั ตอนการทาแอพพลิเคชน่ั ดงั ภาพที่ 3-1 ดงั น้ี ภาพท่ี 3-1 ข้นั ตอนการดาเนินการจดั ทาโครงการ

3.1 การศึกษา และ รวบรวมข้อมูลต่าง ๆ โครงการจดั ทาแอพพลิเคชน่ั (กรณีศึกษา : สื่อการเรียนรู้ภาษาจีน) เร่ิมจากการรวบรวมขอ้ มลู คาศพั ทภ์ าษาจีน ,ประโยคการสนทนาภาษาจีนที่ใชใ้ นชีวติ ประจาวนั ,เสียงพดู ภาษาจีน ,ขอ้ มูลพ้นื ฐาน เพ่อื ใชใ้ นการดาเนินจดั ทาแอพพลิเคชนั่3.2 ออกแบบแอพพลเิ คชั่น เม่ือศึกษาและรวบรวมขอ้ มูลตา่ ง ๆ ของแอพพลิเคชน่ั สื่อการเรียนรู้ภาษาจีนแลว้ ทางคณะผจู้ ดั ทาจึงไดจ้ ดั ทาการออกแบบแอพพลิเคชน่ั โดยมีข้นั ตอนดงั ตอ่ ไปน้ี 3.2.1 Story Board ภาพที่ 3-2 Story Board

3.2.2 กาหนดโครงสร้างแอพพลิเคชนั่ ภาพที่ 3-3 ภาพโครงสร้างแอพพลิเคชน่ั

3.2.3 กาหนดการเช่ือมโยงระหวา่ งหนา้ แอพพลิเคชนั่ ภาพท่ี 3-4 การเช่ือมโยงระหวา่ งหนา้ แอพพลิเคชนั่ ลกั ษณะการเช่ือมโยงของแอพพลิเคชน่ั จะเริ่มจากการเขา้ หนา้ แรกของแอพพลิเคชน่ั และจะเร่ิมเขา้ สู่หนา้ แรก ซ่ึงทุกหวั ขอ้ ท้งั หมด จะมีลิงค์ ที่สามารถกลบั ไปสู่ หนา้ แรกได้ 3.2.4 กาหนดการเช่ือมโยงระหวา่ งหนา้ แอพพลิเคชน่ั 3.2.4.1 หนา้ แรก ภาพที่ 3-5 หนา้ แรก

3.2.4.2 หนา้ หมวดคาศพั ท์ ภาพที่ 3-6 หนา้ หมวดคาศพั ท์3.2.4.3 หนา้ คาศพั ท์ ภาพท่ี 3-7 หนา้ คาศพั ท์

3.2.4.4 หนา้ หมวดสนทนา ภาพที่ 3-8 หนา้ หมวดสนทนา3.2.4.5 หนา้ สนทนา ภาพท่ี 3-9 หนา้ สนทนา

3.2.4.6 หนา้ ใหค้ ะแนนเรา ภาพท่ี 3-10 หนา้ ใหค้ ะแนนเรา3.3 จัดทาแอพพลเิ คช่ัน เม่ือทาการศึกษารวบรวมขอ้ มูลและออกแบบแอพพลิเคชนั่ แลว้ ก็ดาเนินการจดั ทาเวบ็ ไซต์ตอ่ ไป 3.3.1 วธิ ีการเขา้ ชมแอพพลิเคชนั่ 3.3.2 วธิ ีการเขา้ ไปแกไ้ ขขอ้ มูลใน 3.3.2.1 คลิกโปรแกรม Captivate เพื่อเขา้ ไปแกไ้ ขขอ้ มูล แตเ่ ม่ือ Publish ไปแลว้ จะไมส่ ามารถแกไ้ ขไดอ้ ีก ภาพท่ี 3-14 โปรแกรม Captivate

3.3.2.2 หนา้ การทางานของ Captivate ท่ีสามารถเขา้ ไปแกไ้ ขได้ ภาพที่ 3-15 หนา้ การทางานของ Captivate3.3.3 การสร้างแอพพลิเคชน่ั สื่อการเรียนรู้ภาษาจีน ประกอบดว้ ย - หนา้ หลกั - คาศพั ท์ -หมวดร่างกาย -หมวดครอบครัว -หมวดตวั เลข -หมวดวชิ า -หมวดเส้ือผา้ -หมวดอาหาร -หมวดร้านคา้ -หมวดผลไม้ -บทสนทนา -หมวดกินขา้ วหรือยงั -หมวดคุณเป็ นคนชาติไหน -หมวดยนิ ดีท่ีรู้จกั -หมวดนี่คืออะไร -หมวดเขามาจากท่ีไหน -หมวดคุณเรียนท่ีไหน -หมวดคุณเล่นอินเตอร์เน็ตบ่อยไหม

-บทสนทนา -หมวดคุณมาเมืองไทยต้งั แต่เม่ือไหร่แลว้ -หมวดคุณทางานอะไร -หมวดบา้ นคุณอยทู่ ่ีไหน -หมวดคุณแต่งงานหรือยงั -หมวดสบายดีไหม -หมวดวนั น้ีคือวนั อะไร -หมวดคุณนบั ถือศาสนาอะไร -หมวดคุณจะไปไหน -หมวดก่ีโมงแลว้ -หมวดเคยไปเมืองจีนไหม -หมวดคุณชอบอาหารไทยไหม -หมวดฉนั เป็นคนไทย -หมวดพ่อคุณสุขภาพเป็นไงบา้ ง -หมวดคุณชอบอ่านหนงั สือไหม -หมวดคุณชอบฟังเพลงไหม -หมวดคุณทาอาหารเป็ นไหม -ออกจากโปรแกรม -ใหค้ ะแนนเรา3.3.4 เม่ือเขา้ มาดา้ นใน น่ีคือหนา้ ตาของ Captivate หนา้ แรก ภาพท่ี 3-16 หนา้ ตาของ Captivate หนา้ แรก

3.3.5 การสร้างโปรเจค 3.3.5.1 เลือก new >blank project ภาพท่ี 3-17 การเลือกโปรเจค 3.3.5.2 จากน้นั เลือกขนาดจอตามที่เราตอ้ งการ แลว้ คลิก create ภาพที่ 3-18 จากเลือกขนาดจอ

3.3.5.3 ทาการเลือกธีม เลือกเป็น blank ภาพท่ี 3-19 การเลือกธีม3.3.5.4 กาหนดค่าโปรเจค เลือก edit เลือกคาสั่ง Preferences… ภาพท่ี 3-20 กาหนดค่าโปรเจค

3.3.5.5 จากน้นั ไปที่คาสั่ง Defaults ภาพท่ี 3-21 คาสั่ง Defaults3.3.5.6 ต้งั ค่าใหเ้ ป็น rest of slide ทุกอนั จากน้นั กด ok ภาพที่ 3-22 ต้งั ค่าใหเ้ ป็ น rest of slide

3.3.5.7 ข้นั ตอนการใส่ภาพ ภาพที่ 3-23 ข้นั ตอนการใส่ภาพ3.3.5.8 ข้นั ตอนการใส่ขอ้ ความ ภาพที่ 3-24 ข้นั ตอนการใส่ขอ้ ความ

3.3.5.9 การสร้างป่ ุมเชื่อมโยง 1) การสร้างป่ ุมเชื่อมโยงคลิกที่ Interactions เลือก Button ภาพท่ี 3-25 การสร้างป่ ุมเช่ือมโยงโดยเลือก Interactions 2)จะมีป่ ุมButton ข้ึนมาใหเ้ รา สามารถคลิกเปลี่ยนขอ้ ความในป่ ุมและตกแต่งไดท้ ี่Style สามารถใส่ Actions และเพมิ่ Options ได้ ภาพท่ี 3-26 ตกแตง่ ป่ ุมขอ้ ความ Button

3) การเชื่อมโยง การสร้างป่ ุมเช่ือมโยงใหค้ ลิกท่ีป่ ุม Button ที่เราสร้างไว้ และไปท่ี Actoinsคลิกตรง On Success จะมีใหเ้ ราเลือกการเช่ือมโยงแบบต่างๆ ภาพท่ี 3-27 การเช่ือมโยง 4) การเชื่อมโยงภายนอก การเช่ือมโยงลิ้งคภ์ ายนอก สร้างป่ ุม Button เลือก Actions เลือก OnSuccess เลือก Open URL or file และก็อปลิ้งมาใส่ที่ช่อง URL ภาพที่ 3-28 การเชื่อมโยงภายนอก

5) การเลือกไฟลบ์ นั ทึก ภาพท่ี 3-29 การเลือกไฟลบ์ นั ทึก3.4 ตรวจสอบและแก้ไข เม่ือจดั ทาแอพพลิเคชน่ั เรียบร้อยแลว้ ทางคณะผจู้ ดั ทาไดม้ ีการนาเสนอแอพพลิเคชน่ั ต่ออาจารยท์ ่ีปรึกษา อาจารยไ์ ดม้ ีการใหแ้ กไ้ ขขอ้ มูลส่วนที่บกพร่องและเพ่ิมเติมขอ้ มลู ส่วนที่ยงั ไม่สมบูรณ์ ทางคณะผจู้ ดั ทาจึงไดน้ าไปแกไ้ ข จึงทาใหแ้ อพพลิเคชน่ั น้ีสมบรู ณ์พร้อมใชง้ าน3.5 เผยแพร่แอพพลเิ คชั่น เขา้ Captivate > Publish เพ่ือเลือกการนาออกจาก Captivate เลือก Publish to computer ภาพท่ี 3-30 การ Publish ไฟลจ์ าก Captivate

เลือก Zip Files เลือก HTML5 และเลือก Scalable HTML content จากน้นั กด Publish ภาพท่ี 3-31 การต้งั ค่าการ Publishจากน้นั กจ็ ะไดไ้ ฟล์ Zip ของ Captivate ออกมา ภาพท่ี 3-32 ไฟล์ Zip Captavate

เปิ ด Intel XDK แลว้ ทาการ Sign In ภาพท่ี 3-33 การ Sign In เม่ือทาการ Sign In จะข้ึนหนา้ หลกั ของ Intel XDK ใหเ้ ลือก General > HTML5 + Cordova> Hello Cordova > Continue ภาพที่ 3-34 การต้งั ค่า Intel XDK

เม่ือกด Continue แลว้ ใหท้ าการต้งั ช่ืองาน ภาพที่ 3-35 การต้งั ช่ือไฟลง์ าน จากน้นั ใหเ้ ลือก EXULATE > DEVICES เลือกรุนโทรศพั ทท์ ่ีตอ้ งการ จากน้นั ก็ต้งั คา่Orientation เป็นต้งั หรือนอน ภาพท่ี 3-36 ต้งั คา่ รุ่นโทรศพั ท์

ต่อมาใหเ้ ปิ ดไฟลท์ ่ีบนั ทึกงานไว้ พร้อมเปิ ดไฟล์ Zip ของ Captivate ภาพท่ี 3-37 เปิ ดไฟลง์ าน เมื่อเปิ ดไฟลง์ านแลว้ ในเลือกFolderwwwแลว้ ทาการ Cory ไฟล์ Zip Captivate มา Folderwww ภาพท่ี 3-38 การ Copy งาน

เมื่อกลบั มาเปิ ดงานที่ Intel XDK จะพบวา่ งานท่ี Copy มาข้ึนที่ Intel XDK ภาพท่ี 3- 39 ทดสอบการ Copyจากน้นั เลือก BUILD เลือก Android แลว้ กดป่ ุมต้งั คา่ ของ Android ภาพท่ี 3-40 ต้งั คา่ Android

เมื่อเขา้ มาจะพบวา่ มีช่องใหใ้ ส่ขอ้ มูลตา่ ง ๆ พร้อมใส่ลิขสิทธ์ิ ภาพท่ี 3-41 การใส่ลิขสิทธ์ เมื่อกดกลบั มาที่ BUILD จะพบวา่ มีเคร่ืองหมายถูกท่ีการต้งั คา่ แสดงวา่ ผา่ นที่ต้งั ค่าลิขสิทธ์ิแลว้ ภาพที่ 3-42 ทดสอบการต้งั ค่าลิขสิทธ์ิ

เมื่อผา่ นลิขสิทธ์แลว้ แตย่ งั พบวา่ ยงั ติด Unlock อยใู่ หค้ ลิกเพื่อทาการใส่รหสั ท่ีต้งั ไวใ้ นลิขสิทธ์ิ จากน้นั กด Unlock ภาพที่ 3-43 ปลดลอ็ คUnlock เมื่อปลดลอ็ คUnlookแลว้ กด Start Builds รอการดาวนโ์ หลด ภาพที่ 3-44 Start Builds

จากน้นั กดป่ ุมดาวน์โหลด และเลือกไฟล์ จากน้นั ถึงไฟลม์ าใชโ้ ทรศพั ท์ ภาพท่ี 3-45 การดาวนโ์ หลด

บทที่ 4 ผลการดาเนินงาน จากการดาเนินงานสร้างแอพพลิเคชนั่ ผจู้ ดั ทาไดอ้ อกแบบ และจดั ทาโครงสร้างร่าง StoryBoard แอพพลิเคชน่ั และทาการออกแบบแอพพลิเคชน่ั ซ่ึงจากการดาเนินงานตา่ ง ๆ สามารถจดั ทาแอพพลิเคชน่ั ไดด้ งั น้ี 4.1 หนา้ แอพพลิเคชนั่ สื่อการเรียนรู้ภาษาจีน 4.2 สรุปผลการวเิ คราะห์แบบสอบถาม4.1 หน้าแอพพลเิ คช่ัน สื่อการเรียนรู้ภาษาจีน 4.1.1 หนา้ หลกั ภาพที่ 4-1 หนา้ หลกั ของแอพพลิเคชน่ั เป็นส่วนที่แสดงหมวดยอ่ ย ๆ ท่ีอยใู่ นแอพพลิเคชนั่ ซ่ึงประกอบดว้ ย คาศพั ท์ ,บทสนทนา ,ออกจากโปรแกรม ,ทดสอบ ,ใหค้ ะแนนเรา

4.1.2 หนา้ คาศพั ท์ ภาพที่ 4-2 หนา้ คาศพั ทข์ องแอพพลิเคชน่ั เป็นส่วนท่ีแสดงหมวดหมขู่ องคาศพั ทซ์ ่ึงมีท้งั หมด 8 หมวด ท่ีสามารถนามาใชใ้ นชีวติ ประจาวนั ได้ 4.1.3 หนา้ บทสนทนา ภาพที่ 4-3 หนา้ บทสนทนาของแอพพลิเคชนั่ เป็นส่วนท่ีแสดงหมวดหมขู่ องบทสนทนาซ่ึงมีท้งั หมด 10 บท ของการสนทนา ท่ีสามารถนาไปใชใ้ นชีวติ ประจาวนั ไดด้ ี

4.1.4 หนา้ ใหค้ ะแนนเรา ภาพท่ี 4-4 หนา้ ใหค้ ะแนนเรา เป็นส่วนที่แสดงการใหค้ ะแนนเรา เป็นแบบฟอร์มภายนอก เช่ือมตอ่ กบั ลิงคแ์ ละระบบอินเตอร์เน็ต เพ่ือประเมินความพงึ พอใจใหก้ ารใชแ้ อพพลิเคชนั่

4.2 สรุปผลการวเิ คราะห์แบบสอบถาม จากการสอบถามความคิดเห็นของ นกั เรียน-นกั ศึกษา-ครู แบบสุ่มสาขา 25คน มีรายละเอียดดงั น้ีเกณฑก์ ารวดั คะแนนค่าเฉล่ียความพงึ พอใจ 4.50 - 5.00 ดีมาก 3.50 - 4.49 ดี 2.50 - 3.49 ปานกลาง 1.50 - 2.49 พอใช้ 0.00 - 1.49 ปรับปรุงตอนที่ 1 ข้อมูลทวั่ ไปตารางที่ 4-1 แสดงร้อยละของตอบแบบสอบถาม จาแนกขอ้ ตามเพศเพศ จานวน (คน) ร้อยละชาย 10 40หญิง 15 60รวม 25 100 จากตารางท่ี 4-1 พบวา่ ส่วนใหญผ่ ตู้ อบแบบสอบถามเป็นเพศหญิง จานวน 15 คน คิดเป็ นร้อยละ 60 รองลงมาเป็นเพศชาย จานวน 10 คน คิดเป็ นร้อยละ 40ตารางที่ 4-2 แสดงร้อยละของตอบแบบสอบถาม จาแนกระดบั ช้นั การศึกษาระดบั ช้ัน จานวน (คน) ร้อยละปวช. 10 40ปวส. 11 44อื่น ๆ 4 16รวม 25 100 จากตารางที่ 4-2 พบวา่ ส่วนใหญผ่ ตู้ อบแบบสอบถามเป็นปวส. จานวน 11 คน คิดเป็ นร้อยละ 44 รองลงมาเป็นปวช. จานวน 10 คน คิดเป็นร้อยละ 40 สุดทา้ ยเป็น อ่ืน ๆ จานวน 4 คน คิดเป็ นร้อยละ 16

ตอนที่ 2 ความคิดเห็นของอาจารย์ และนกั เรียน นกั ศึกษาตารางที่ 4-3 ตารางสรุปแบบสอบถามความคิดเห็นของอาจารย์ และนกั เรียน นกั ศึกษาคาถาม ผลรวม ค่าเฉลยี่ ความหมาย1.ด้านนักศึกษา1.1 นกั ศึกษามีความกระตือรือร้นในการรวบรวมขอ้ มลู 95 3.80 ดี1.2 นกั ศึกษามีทกั ษะในการรวบรวมขอ้ มูล 99 3.96 ดี1.3 นกั ศึกษามีความสามารถในการทาแอพพลิเคชนั่ 100 4.00 ดี1.4 นกั ศึกษามีความรับผดิ ชอบ 98 3.92 ดีค่าเฉลย่ี รวม ด้านนักศึกษา 98 3.92 ดีคาถาม ผลรวม ค่าเฉลยี่ ความหมาย2.ด้านเวบ็ ไซต์ 99 3.96 ดี2.1 เน้ือหาของแอพพลิเคชนั่ มีความเหมาะสม 104 4.16 ดี2.2 ความถูกตอ้ งของเน้ือหา 100 4.00 ดี2.3 ขนาดของตวั อกั ษรท่ีใชใ้ นแอพพลิเคชนั่ 106 4.24 ดี2.4 ภาพประกอบของแอพพลิเคชนั่ มีความเหมาะสม 97 3.88 ดี2.5 รูปแบบของแอพพลิเคชนั่ มีความเหมาะสม 103 4.12 ดี2.6 แอพพลิเคชนั่ มีความสวยงาม 101.3 4.06 ดีค่าเฉลย่ี รวม ด้านแอพพลเิ คชั่น 99.75 3.99 ดีค่าเฉลยี่ รวม จากตารางที่ 4-3 พบว่า ผตู้ อบแบบสอบถามมีความคิดเห็นเกี่ยวกบั แอพพลิเคชั่นสื่อการเรียนรู้ภาษาจีน เม่ือพิจารณาเป็ นรายดา้ นพบวา่ ในดา้ นนกั ศึกษานกั ศึกษามีความสามารถในการทาแอพพลิเคชน่ั ในระดบั ที่ดี โดยมีค่าเฉลี่ย 4.00 นกั ศึกษามีความกระตือรือร้นในการรวบรวมขอ้ มูลอยู่ในระดบั ท่ีดี โดยมีค่าเฉล่ีย 3.80 นักศึกษามีทกั ษะในการรวบรวมขอ้ มูลอยู่ในระดบั ดี โดยมีค่าเฉลี่ย 3.96 นกั ศึกษามีความรับผิดชอบอยใู่ นระดบั ดี โดยมีค่าเฉล่ีย 3.92 ในดา้ นนกั ศึกษาอยูใ่ นระดบั ดี โดยมีค่าเฉล่ีย 3.92 และในดา้ นแอพพลิเคชน่ั โดยมีภาพประกอบของแอพพลิเคชนั่ มีความเหมาะสมอยู่ในระดบั ท่ีดี โดยมีค่าเฉลี่ย 4.24 ความถูกตอ้ งของเน้ือหาอยใู่ นระดบั ที่ดี โดยมีค่าเฉลี่ย4.16 แอพพลิเคช่นั มีความสวยงามอยู่ในระดบั ท่ีดี โดยมีค่าเฉล่ีย 4.12 ขนาดของตวั อกั ษรที่ใชใ้ นแอพพลิเคชน่ั อยู่ในระดบั ที่ดี โดยมีค่าเฉลี่ย 4.00 เน้ือหาของแอพพลิเคชนั่ มีความเหมาะสมอยูใ่ น

ระดบั ดี โดยมีค่าเฉล่ีย 3.96 รูปแบบของแอพพลิเคชนั่ มีความเหมาะสมอยใู่ นระดบั ดี โดยมีค่าเฉลี่ย3.88 โดยมีค่าเฉล่ียรวม ในดา้ นแอพพลิเคชนั่ อยใู่ นระดบั ดี โดยมีค่าเฉล่ีย 4.06 และมีค่าเฉลี่ยรวมท้งั หมดอยใู่ นระดบั ดี โดยมีคา่ เฉล่ีย 3.99