行動式學習：Html5 應用於跨平台製作互動教材

全文

(1)國立屏東教育大學資訊科學系碩士論文. 行動式學習：Html5 應用於跨平台製作互動教材. M-Learning : Html5 Using Cross-platform to Create Interactive Textbooks. 研究生：錢膺羽指導教授：施弼耀. 博士. 中華民國一ｏ二年七月.

(2) 2.

(3) 中文摘要現代的數位學習由 e-learning、M-learning 和 U-learning 逐漸的漸進在進步中。本篇文章主要在探討 m-learning 應用於跨平台中的 apple 產品之中。以往 apple 並不支援 flash 檔案，本次研究中利用 story line 來協助 flash 檔案轉製成 html5 並支援互動教材應用於 apple 產品之中.利用科技接受模式來進行評估。. Keyword: e-learning, m-learning, u-learning, flash, story line, html5, TAM. I.

(4) Abstract Nowaday, digital learning has made a progressive improvement by the e-learning, M-learning and U-learning. The research focuses in the development of cross-platform products for m-learning. Apple does not support flash files, in this research story line is used to help flash files turn into html5 and supports interactive textbooks for using in apple products. Meanwhile Technology Acceptance Model (TAM) is used for evaluation. The result reveals we found that using Html5 can easier to do cross-platform in mobile carrier.. Keyword: e-learning , m-learning , u-learning , flash , story line , html5 , apple , TAM. II.

(5) Contents 中文摘要 .................................................................................................. I Abstract ................................................................................................... II Contents .................................................................................................. III List of Figures......................................................................................... IV Chapter 1 Introduction .......................................................................... 1 Chapter 2 Literature review................................................................... 2 2.1 Waterfall model ........................................................................... 2 2.2 Html5 .......................................................................................... 2 2.3 UCD ............................................................................................ 2 2.4 Technology Acceptance Model (TAM) ........................................ 3 Chapter 3 Research method................................................................... 4 3.1 Research model ........................................................................... 4 3.2 Research method ......................................................................... 5 3.3 Research processes ...................................................................... 6 Chapter 4 Implementation ..................................................................... 9 4.1 System structure .......................................................................... 9 4.2 Workflow .................................................................................. 10 4.3 Discussion ................................................................................. 15 Chapter 5 Conclusions ........................................................................... 16 References ............................................................................................. 17. III.

(6) List of Figures Figures1. System model ........................................................... 4 Figures2. Design model ............................................................ 4 Figures3. Waterfall model ........................................................ 5 Figures4. research process ....................................................... 8 Figures5. system structure ....................................................... 9 Figures6. StoryLine ............................................................... 10 Figures7. StoryLine................................................................ 11 Figures8. StoryLine................................................................ 11 Figures9. StoryLine................................................................ 12 Figures10. StoryLine ............................................................. 12 Figures11. StoryLine ............................................................. 13 Figures12. html5 .................................................................... 13 Figures13. html5 .................................................................... 14 Figures14. html5 .................................................................... 14 Figures15. html5 .................................................................... 15 Figures16. html5 .................................................................... 15. IV.

(7) Chapter 1 Introduction In past decades, education as wireless networks and mobile technology have more and more advanced. Teaching methods have changed gradually .The traditional teaching ways were staying in the classroom by writing on blackboard and papers. However teaching is not only in that way, combine information technology evolution into the E-Learning. In recent years, because the wireless technology flourish, wireless handheld devices improved, teaching methods can be used by Mobile-Learning in anytime and anywhere now. Mobile learning can walk through past and future. Besides, it can apply in any times. As the result, learning is no longer limited by space and times. The Mobile-Learning not only changes the traditional teaching formed , but also become the important directions of information education. The popularity of mobile carrier is to make m-learning taken a big step forward, with a combination of wireless network progress and development, so that mobile carrier has become the best learning platform, people can inquire information in anytime, anywhere, and it can be a better learning platform. Hyper Text Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser. The design of a markup language, HTML inside the world of the Internet has been playing an important role, from the outset it has evolved a simple syntax, HTML is no longer just simply focus on web browsing only, the latest version of HTML5 has now different from the past, in addition to a variety of syntax can be used to edit, more as a cross-platform use. In recent years, Mobile Learning market has gradually become the mainstream, but also the direction of the government to promote. But in the past made of digital materials may not be applicable in all mobile carrier, such as in this experiment have to do Flash. Action learning is a user-friendly at anytime, anywhere learning styles, so the authors believe that these materials should not be so limited, so try to use HTML5 cross-platform functionality to integrate, hope that through HTML5 allows existing e-learning materials easily into a cross-platform use HTML5. This research hopes will be some simple way to re-Flash interactive teaching materials, re-integrated into the HTML5 format conversion as a cross-platform use.. 1.

(8) Chapter 2. Literature review. 2.1 Waterfall model The first known presentation describing use of similar phases in software engineering was held by Herbert D. Benington at Symposium on advanced programming methods for digital computers on 29 June 1956. This presentation was about the development of software for SAGE. The waterfall model is a sequential design process, often used in software development processes, in which progress is seen as flowing steadily downwards (like a waterfall) through the phases of Conception, Initiation, Analysis, Design, Construction, Testing, Production/Implementation, and Maintenance.. 2.2 Html5 HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997). HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.. 2.3 UCD User-Centered Design (UCD) approach is the most important concepts to the integration of the user, but users usually belong to a passive role, UCD approach is the designer of the user’s goals, practices, environment, etc., And the design and test cycle. UCD’s thinking and related work derived is quite extensive, it’s not the general concept of usability testing or user interface design. Because of the UCD is diversity, 2.

(9) it allows us to explore the detail required in the UCD approach. (Vredenburg , et al ., 2002). 2.4 Technology Acceptance Model (TAM) In 1986, Davis developed Technology Acceptance Model (TAM) by using the base view of Theory of Reasoned Action. Davis thinks about the most important two affect factor are Perceived ease of use and Perceived usefulness in factor of affect use behavior. Though the base of Technology Acceptance Model, we can understand the affect in environment of the relationship of personal attitude and desire. Perceived usefulness is the subjective expectations of the user for the information system will enhance their job performance. And the Perceived ease of use is the user that the information system is easy to use level. Both users of information technology is to determine the critical attitude, and the user's attitude (Attitude towards Use) decided intention (Intention to Use), and the user decides to use behavioral intentions.. 3.

(10) Chapter 3 Research method In this research we want to talk about the Html5 use in the cross-platform. So we must important to the user. The html5 is tool. Purpose is to allow users to use and learn. The following will discuss this study research model 、research method and research processes.. 3.1 Research model. Design Standardization. Mobile. Cloud Waterfall. Figures1. System model. In this research, we used waterfall model to design the html5. After finished it, we put the files on line in iCloud. Then Show in mobile carrier, finally to find a standard for this process.. On Line PC Html 5. Download. Story Line. On Line Mobile Carrier. Download. Figures2. Design model 4. User.

(11) We choose Html5 be a tool and used story line to made it. Then export it and let the Html5 can view in PC(personal computer) or Mobile carrier. User can choose download or view on line.. 3.2 Research method The waterfall model is a sequential design process, often used in software development processes, in which progress is seen as flowing steadily downwards (like a waterfall) through the phases of Conception, Initiation, Analysis, Design, Construction, Testing, Production/Implementation, and Maintenance ( Figure3 ).. Figures3. Waterfall model. The waterfall development model originates in the manufacturing and construction industries; highly structured physical environments in which after-the-fact changes are prohibitively costly, if not impossible. Since no formal software development methodologies existed at the time, this hardware-oriented model was simply adapted for software development. The first known presentation describing use of similar phases in software engineering was held by Herbert D. Benington at Symposium on advanced programming methods for digital computers on 29 June 1956. This presentation was 5.

(12) about the development of software for SAGE. In 1983 the paper was republished with a foreword by Benington pointing out that the process was not in fact performed in a strict top-down fashion, but depended on a prototype. The first formal description of the waterfall model is often cited as a 1970 article by Winston W. Royce, although Royce did not use the term "waterfall" in this article. Royce presented this model as an example of a flawed, non-working model. This, in fact, is how the term is generally used in writing about software development—to describe a critical view of a commonly used software development practice. Thus the waterfall model maintains that one should move to a phase only when its preceding phase is completed and perfected. Various modified waterfall models (including Royce's final model), however, can include slight or major variations on this process. In response to the perceived problems with the pure waterfall model, many modified waterfall models have been introduced. While all software development models bear some similarity to the waterfall model, as all software development models incorporate at least some phases similar to those used in the waterfall model, this section deals with those closest to the waterfall model. For models that apply further differences to the waterfall model, or for radically different models seek general information on the software development process This research used the waterfall model to research. First find the user requirements. We have to know the user requirements that can design the system. Second when we know the user requirements just can design the system.. 3.3 Research processes In this section, we will talk about our research processes. Because we want to make a cross-platform html5 program, so the first step is to do background research, after that is literature review. Then we will understand the background and know how to do it. Next step is to design the interactive flash, let it accord the literature theory. After finished the interactive flash, we will taking the flash combined with html5, and then storage it on icloud. So users can watch it online or they can download it. With users using the html5, we will to evaluation the html5, to make sure it didn’t have any 6.

(13) problem. If it has some problems, we will to asses it need to fix or not, if we need fix it. We will back to design interactive flash again. Another way, if html5 is no problem or it doesn’t need to fix, we can start to conclusions. Shows like Figure4.. 7.

(14) Background research. Literature review. The interactive flash design. Flash combined with html5. Yes Storage on icloud. Users using and evaluation. Problem Need to fix?. No Conclusions. Figures4.. research process 8.

(15) Chapter 4 Implementation 4.1 System structure In this section, the system structure is introduced. At first we build a database to record the user’s behavior. And the Indexed Database API, or Indexed DB (formerly WebSimpleDB), is a proposed web browser standard interface for a local database of records holding simple values and hierarchical objects. Indexed DB was initially proposed by Oracle in 2009.Indexed DB could be used for browser implemented functions, such as bookmarks, as well as web applications, such as email. An open-source reference implementation of the Indexed Database API exists for testing and experimentation purposes. After that though the Web Service or Website to storage on icloud, to share to users with mobile carriers.. Database. Database API. Web Service. Website. iCloud. IOS. Android Figures5.. 9. system structure. Windows.

(16) 4.2 Workflow In this section, the interactive flash of the operations process in the study is shown. We used the program name Articulatee StoryLine. It is similarity Flash and PowerPoint put together. Demo as Figures6. It shows the operating interface. At bottom, that’s timeline, it use to control the picture show times. And at right side it’s triggers, to setting the actions.. Figures6.. StoryLine. At Figures7 shows the choose questions setting. It can edit options and change the feedback after answers, like “correct, you’re so great”, “sorry you’re worry, you can try again” or “look it carefully, and try again” etc. . Let user can have different feedbacks to increase their interest.. 10.

(17) Figures7. StoryLine. Except single choose questions we used picture to pictures, let user pull a picture to another picture which is correct for the answer. Shows as Figures8, it can set the answers feedback also.. Figures8. StoryLine 11.

(18) It can preview all slide’s relation and triggers, shows like Figures9. We can change the order or relationship. And it also can adjust the slides control bar and menu. At the setting it can give name to every slides, let users can easier to choose the lessons which they want to learning. So users can use this digital material more efficiency, shows like Figures10 and Figures11.. Figures9. StoryLine. Figures10. StoryLine 12.

(19) Figures11.. StoryLine. At last we will show the html5 end produce. We can find the html5 end produce it really similar flash, at beginning html5 have menu can choose the lessons which is user want to learn, shows like Figures12. And it have some kind of questions to show in html5, let user can play to increase their interest, shows like Figures13 ~ Figures16.. Figures12.. 13. html5.

(20) Figures13.. html5. Figures14.. html5. 14.

(21) Figures15.. html5. Figures16.. html5. 4.3 Discussion After use the Articulate Storyline to made Html5 to put it on line and using iCloud made it can be watching on different OS especially is IOS system. And user which one he read this Html5 can choose read it on line or download it. Watch it on line is basic way to do, and in this research though the web side it can be an application also. So user can read this without wifi environment after they download it. 15.

(22) Chapter 5 Conclusions In this research a cross-platform M-learning material was developed by Html5 because Html5 can make a cross-platform easier. Nowadays, digital learning has made a progressive improvement by the e-learning, M-learning and U-learning. The research focuses in the development of cross-platform products for m-learning. In past decades, education as wireless networks and mobile technology have more and more advanced. Teaching methods have changed gradually. The traditional teaching ways were staying in the classroom by writing on blackboard and papers. However teaching is not only in that way, combine information technology evolution into the E-Learning. Online digital learning materials can meet the basic requirement of users. In this research, digital learning material are developed as an application, so users not only can use it online, but also can learn this material without internet environment after they download it. The development of the system provides users to reach M-Learning from everywhere at anytime. After use the Articulate Storyline to made Html5 to put it on line and using iCloud made it can be watching on different OS especially is IOS system. Users can read this Html5 either by choosing to read it on line or downloading it. But this research still have some limit, because when we inport flash .swf file it can made html5 and used, but not in IOS system. It must use flash’s pictures and sounds to rebuild the flash and then it can watch on IOS system. Hope science technology advanced and find a way can made it more easier to do the digital learning for every system user. That will be really learning any time, any place, with any mobile carrier.. 16.

(23) References American National Standards Institute. ANSI X3.159-1989”Programming Language C”. Bogdan, A. Kudinov, N. Markov, E. Miroshnichenko, P. Ostrast, S.Rodikevich “Automation of processes of supervisory control of oil and gas transmission networks,” Interuniversity collection of scientific and technical papers “Automated management and information technology” Tomsk, 2005, vol. 1, pp. 56–64. C. Baker. CMU 1394 Digital Camera Driver. http://www.cs.cmu.edu/˜iwan/1394/.The Code::Blocks Team. Code::Blocks – The open source, cross platform, free C++ IDE. http://www.codeblocks.org/. D.. Douxchamps.. libdc1394:. The. API. for. IEEE1394. /Firewire. cameras.. http://damien.douxchamps.net/ieee1394/libdc1394/. E. Gamma, R. Helm, R. Johnson, and J. M. Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software.Addison-Wesley, Boston, 2003. G. Panin, C. Lenz, M. Wojtczyk, S. Nair, E. Roth, T. Friedlhuber,and A. Knoll. A unifying software architecture for model-based visual tracking. In Image Processing: Machine Vision Applications. Edited by Niel, Kurt S.; Fofi,David. Proceedings of the SPIE, Volume 6813, pp. 681303-681303-14 (2008)., volume 6813 of Presented at the Society of Photo-Optical Instrumentation Engineers (SPIE) Conference,Mar. 2008. G. Gryaznov, R. Kovin “The system of remote access to corporate Geographic Information System in the offline mode on the platform Windows Mobile,” “problems of Informatics”Tomsk, 201,Special Issue, pp. 124–131 G. V. Vaughan, B. Elliston, T. Tromey, and I. L. Taylor. GNU Autoconf, Automake, and 17.

(24) Libtool. Sams, 2000. http://sources.redhat.com/autobook/. KDevelop Team. KDevelop – an Integrated DevelopmentEnvironment. http://www. kdevelop.org/. Kitware Inc. CMake - Cross-platform Make. http://www.cmake.org. Kitware. Inc.. CMake. documentation.. http://www.cmake.org/HTML/. Documentation.html. Kongsberg SIM AS. Coin3D – 3D Graphics Developer Kit.http://www.coin3d.org/. MVVM Light Toolkit [Electronic resource]. Access mode : http://www.galasoft.ch/ mvvm/, free (14.05.2012). M. Wojtczyk. qiew – a minimalistic and portable VRML/Inventor Viewer. http://www.qiew.org. S. Bogdan, A. Kudinov, N. Markov “Experience of implementing MES “Magistral-Vostok” in the oil and gas company,” “Automation in Industry” 2010, vol. 8, pp.68–73. Trolltech. Qt Cross-Platform Application Framework.http://trolltech.com/products/qt/. T. Unrau. The Road to KDE 4: CMake, a New Build System for KDE, 2007. http://dot.kde.org/1172083974/. WPF Apps With The Model-View-ViewModel Design Pattern[Electronic resource]. Access mode: http://msdn.microsoft.com/enus/magazine/dd419663.aspx, free (14.05.2012). Who. needs. a. “mobile”. work. [Electronik. resource].. Access. http://www.korusconsulting. ru/subscribe/labwork/#tTop, free(14.05.2012). 18. mode:.

(25)