ap-3-11.dvi Acta Polytechnica Vol. 51 No. 3/2011 Electronic Education D. Vaněček, J. Jirsa Abstract The age in which we are living nowadays is characterized by rapid innovation in the development of information and communication technologies (ICT). This innovation has a significant influence on the education process. This paper deals with e-learning. Keywords: e-learning, LMS, computer animation. Introduction TheWorldWideWeb has had a fundamental impact on the paradigm. It also has an impact on educa- tion, in particular the way in which information and ideasare transmitted. Computer technologyhaspen- etrated into all areas of human activity. It is becom- ing a part of our everyday life. However, there are still fields in which computers are only slowly begin- ning to participate and emerge into the foreground. This is particularly true for the social sciences. How- ever, the situation has been changing significantly even there in recent times. This paper deals with the use of computers in education. We will pay particular attention to e- learning and its multimedia capabilities. We will fo- cus on computer animations, which are discussed in greater detail in the second and third parts of this paper. Electronic education The idea of e-learning began with the computer age, and has developed dynamically as the internet has spread and browsers have improved. As recently as 1999, e-learning consisted mainly of static pages. Communicationwith the teacher either did not work at all, or was limited to e-mails. This phase of com- puter based learning is also known as Web Based Training (WBT). However, as internet technology developed e-learning courses became more sophisti- cated and better teacher-student collaboration and feedback became possible. Moreover, thanks to easy up-dating, the contenthas changedover time andhas become more and more multimedia. Nowadays e-learning iswidespreadnot only in ed- ucation but also in commercial businesses, which of- ten use it as a major lifelong learning tool for their staff. There are thousands of so-called corporate uni- versities in theworld,whichpush theuse andtheway of e-learning further. To-day e-learning is often mentioned by educa- tors, and it is regarded as a means for better teach- ing, especially in distance teaching. E-learning is a way of enriching and boosting teaching with the use ofmoderncomputing technologies (mostlyweb-based technologies). E-learning changes our view on tradi- tional ways of delivering education, and has also in- fluenced pedagogical and psychological learning the- ories linked with technologies. If the e-course is well conceived and well created, its use in education is based on modern learning concepts: constructivism and connectivism. The terms remember, recall and learn are enriched by terms like reflect, create and form. Definition The notion of e-learning proves to be difficult to de- fine, in spite of its high frequency of use. Numerous definitions have been proposed, and many of them differ significantly from each other. Usual differences arewhether thedefinition is fromapedagogical view- point or froma technological viewpoint, andwhether older forms of computer use in education (especially CBT) belong to e-learning (or whether e-learning should only refer to the use of internet technologies). For better understandingwewill present somedefini- tions of the notion of e-learning expressedbypresent- day experts, see [2]: • For me, e-learning is studying by means of elec- tronic media, be it learning through CDs or through the internet. • By e-learning I understand educational and training systems (especially on-line systems). • I understand e-learning as education supported by modern electronic means (computers, media, internet) indistance learning, part-timeand full- time study. • I imagine e-learning as electronic education, e.g. an educational course created in LMS which is intended for self-study under supervision of 53 Acta Polytechnica Vol. 51 No. 3/2011 a teacher who communicates with the student electronically through this environment. In their definitions of e-learning, experts mostly emphasize its more sophisticated and more exacting forms. Utilization of e-learning at universities E-learning is becoming integrated into the education at many Czech universities, and is created and run by LCMS/LMS systems. This integration of elec- tronic education is of three types at the present time: (see [3]) • Electronic support for full-time study; classical education is mixed with elements of individual work by the student using electronic sources. • Interactive elements are added to electronic sup- port; classical education is in some cases limited. • Students have access to electronic courses, and to entire educational cycles. Classical education is limited to a minimum, or is omitted com- pletely. The electronic support is highly inter- active, and even tests of knowledge are often ad- ministered in this way. LMS/LCMS systems For the ordinary teacher, it is difficult to create a modern interactive electronic course (e-course or e- learning course) without expert help. High techni- cal skills are needed. This can affect the teacher’s decision-makingprocess, if it is necessary to createan e-course for students on a voluntary basis. The basic skill is in creating web pages. This requires knowl- edge ofHTML documents, and if active elements are used programming skills are also required. There is no reason to assume that each teacher (e.g. a teacher of social sciences) will be willing and technically able to master these computer skills. Due to these assumptions, computer education systems creators soon began to developed user- friendly systems called Web Content Management Systems — WCMS. Most of these systems run over the internet and they are available via web browsers. NowadaysWCMSs are used for creating andmanag- ing web pages, and the user does not need to have programming skills. After logging in to the applica- tion, the course creator can insert some content, usu- ally text. After it has been saved, this text is avail- able for other users as a web page (e.g. Wikipedia). WCMSs are very often equipped with advanced fea- tures that even an experienced programmer would scarcely be able to implement. These features often include forums, discussions and questionnaires (like in social network pages, e.g. Facebook). All these features are usuallywell secured and debugged. Here we can mention popular systems such as Drupal and Joomla, or systems based on Wiki. The idea of utilizing these systems for the pur- poses of education followed soon after the creation of Learning Content Management Systems — LCMS. There are some differences from regular WCMS, mainly in the specific creationofparticularwebpages types (online learningcourses)and in someadditional specific functions. These special functions are char- acteristic educational tasks, such as setting tests, as- signing homework and delivering lectures. In addition to LCMS there are LearningManage- ment Systems — LMS. These are not suitable for creating e-learning courses, but they are useful for controlling, managing and administering them. The use of LMSs therefore fits well for monitoring stu- dents’ results, for assigning homework tasks, and for access to separate parts of an e-course (parts created inadvance inLCMS).Most systemsprovide the func- tions of both LCMS and LMS. The most widespread LMS/LCMSsystemin theCzechRepublic isMoodle. For technically-oriented subjects, it is neces- sary to use interactive elements integrated into LMS/LCMS courses. The basic representatives of this branch are animated elements. Skalková made an important contribution. Pedagogical research in the field of education technology has generally em- phasized interactivity and hyper-media presentation of knowledge. Sociological research has shown that children and young people are living in an increas- ingly hyped world. Computers, video and internet have become everyday features of their living envi- ronment. We will now focus on educational computer ani- mation, a significant interactive aspect of electronic learning courses in the framework of LM/LCM sys- tems. Animation — a multimedia foundation of e-learning Animation For teaching technical subjects at high schools and universities, for example constructive geometry, it is necessary to develop the students’ spatial imagina- tion. Vividness is often crucial for understanding the topic under discussion. The creation of a system of ideas and notions on the basis of directly perceiving real objects is heavily utilized by teachers of techni- cal subjects, but it has its limits. Technical diagrams and photos can be an excellent aid. Verbally-illustrative vividness, based on a verbal description of phenomena, can prove difficult for stu- dents, especially if their personal experience cannot 54 Acta Polytechnica Vol. 51 No. 3/2011 be relied on. Thanks to the huge development of the computer technology, new options in support of vividness are now available. This new type of vivid- ness might be called “media vividness”. Its main representative is animation. Animation is essentially an illustrative-demon- strative method [1], combining demonstrations of vi- sual information with dynamic projection. The reasons for using visual information come from the findings of cognitive psychology. From the point of view of the human psyche, an image is per- ceived differently than textual information. We can say that an image has a closer relation to the physi- calworld than averbal description, because its struc- ture preserves the structure of the world. [2] While watching an animation, a student undergoes a pro- cess of indirect observation. He/she observes a me- diated model, purposefully perceives the presented facts, and creates notions about the phenomenon or technology. In addition, animation attempts tomoti- vate students for other activities and encourage their interest in the subject. The option of publishing animations on the in- ternet is closely linked with the didactic principle of continuityandpermanency. Astudenthas theoption to go back to the animation when working at home. Another advantage of animation is that it can take into account the individual pace of each student. An- imation is thus a continuation and extension of usual classwork,basically fulfilling a consolidative function. Historical development of animation The idea of using animation in education is not new. It builds on the basic insight of J.A.Komensky, that people easily remember and acquire new knowledge through visual information, and even better through all their senses. A correctly conceived animation can come very close to fulfilling this requirement. If we look back into the past for a moment, we can observe that animated presentation of the cur- riculum has been achieved by various means. When electronic media were not available, animations were made with paper, translucent foil, or specially-lit show cases with an electromechanical drive. Further developmentwasbased on electronics andTVbroad- casting, which enabled educational programs on TV to be included into traditional classwork. These pro- grammes included some animated elements, but they were made by classical techniques borrowed mainly from the film industry. Subsequent rapid develop- ment was connected with the expansion of VCR. It became possible to record broadcast programs on tape, or to play educational programs distributed on VHS video cassettes. With thedevelopmentof computer technology, its use in teaching and learning has also changed. The times when a computer served only for teaching pro- gramming techniques are long gone. In the process, we have learned the advantages of using computers not only as a tool for presenting a specific course, but also as a tool for testing and evaluating the knowl- edge of pupils and students. With the rise of the internet, other important changes in methods of ed- ucation support have emerged. Teachers have cre- ated webpages for their students in support of the work done in class, e.g. by publishing study mate- rials. Thus the option of distance study (not to be confused with part-time study!) has appeared, i.e. studying via the still expandingworldwide computer network. Nowadays, we can see the development of entire electronic educational systems with internet support, and the emergence of other conveniences, e.g. animations and simulations. Features of good didactic animation Based on our practical experience of creating techni- cal animations, we will now present some basic fea- tures that should be taken into accountwhen design- ing animations: [3] • Vividness: this a logical consideration when speaking about animation. Animations should graphically and visually supplement a notion about a topic that is being described theoreti- cally. It is important to knowwhat the intended message is for the student, and what features of the topic should be emphasized. • Simplicity: whencreating theanimations,we try to go directly to the point, to portray just a spe- cific point, avoiding esthetic additions. Ifweadd unnecessary extra elements into the animation, the studentmay get lost andwill not knowwhat he/she is supposed to note in the animation, and what the animator is attempting to explain. The principle of the combustion engine can serve as an example. If we want to explain the principle of a four-cylinder engine, we should portray only one cylinder, and on the basis of this one cylin- der explain all four strokes that occurduring one cycle. We should not add the three other cylin- ders, which are in a completely different part of the cycle in each stroke. A student would see how the whole system works, but he/she would hardly understand the individual parts of the cycle. By displaying all cylinders at once we could illustrate the function of the engine as a whole. Thus we could consider the animation as illustrative or demonstrative. However, if we want to create a descriptive or telling animation, we should follow the principle that less is often more. If we also want the student to have some fun while watching the animation, and not only stare blankly at the same backgrounds and col- 55 Acta Polytechnica Vol. 51 No. 3/2011 ors, the animation should be catchy. Using a number of bright colors will definitely help the catchiness, in contrast with a black and white animation. Colorfulness can be also used for highlighting some parts of the images and for drawing attention to them. When we are ex- plaining the details of a piece of technology, we can always highlight the detail in an appropriate color tomake sure that it is obviouswhatwe are talking about andwhere it is located. Of course, here too the principle of diversity with modera- tion applies. If we want to retain the student’s attention, the animation shouldbe creative. The main issue is, How are we trying to pass on our vision? The more creative the animation is, the more interest itwill arouse, and thebetter itwill be remembered by the students. You can cer- tainly remember from your own student years that it matters how a teacher transforms and presents the subject didactically. If a teacher, for example, combines a dry explanation of a physical phenomenon with some witty anecdote about the subject, we are able to recall it even aftermanyyears, togetherwith thephysicalphe- nomenon. Animation should be used similarly. If we choose awitty design, our graphics can re- main in the sub-consciousnessof our students for years, together with the phenomenon that they illustrated. • Adequate length: it is necessary to understand that an excessively long animation can become boring. The attention span of a student has its limits, which should not be crossed. We should try to create a short, clear and diverse anima- tion, so that students will not get bored and start thinking about other things. If students lose their attention in class, there will be a dis- ruption, even if the initial intentionwas good. If we go to the cinema and the movie is too long and repetitive, we can fall asleep or walk out. Appropriate length always needs to be kept in mind. • Speed: too much speed is disturbing for the stu- dent. It basically ruins the animation if every- thing we want to say happens in one quick mo- ment. Excessive speed is therefore unsatisfac- tory. If we slow down the animation, which is in most cases done by adding more images to the animation, the final length and the final number of frames increases. The size of the file of the animation also increases. Making the animation longer can cause a new problem without solving the original problem. A problem can occur if we want to portray the different speeds of ongoing phenomena within a single animation. For example, a portrayal of the solar system can be very confusing, with each planet rotating round the Sun at a differ- ent speed, with different numbers ofmoons that havedifferent periods of orbit. The student does not know what to concentrate on. For a mo- tivational animation, a high-speed solar system might be suitable, but for an illustrative anima- tionwe must find another solution. In this case, it is enough to show eachmotion separately and spend some time on it, so that the students can comprehend. At the end of the animation we can combine all motions together to represent the real situation, and it will be apparent which planet is faster,whenandunderwhat conditions the speed changes. • Size: the size of the animation depends on the number of frames, or on their length. The smaller the size of the animation, the more ac- cessible it is, because it canbedownloaded faster from the internet. The size of an animation can be regulated by the choice of the graphic editor, or by its complexity. Themoremovingparts the animation has, the more information it will be necessaryto save into thefinal file. Naturally,we donot alwayshave toworryabout the size of the graphics. It depends on theway inwhich our ed- ucational course is going to be distributed. If it is to be delivered onCDs, or nowadays rather on DVDs, we can afford to have larger graphic files, because the userwill not have to download them from anywhere. The same applies if we create our own animations and keep them on the hard disk drivewithout any idea of distributing them. • Use in a class: a scenario is closely linked to the didactic function of the animation — whether it is to serve for motivating, for simulating and understanding patterns, for practicing or for testing. Technological aspects of animation Thefirstdidactic animation typeswerecreatedasan- imated GIFs. This format was suitable for web pre- sentation purposes. It is based on a common cartoon concept, where the animation consists of a sequence of single pictures. We create the series of pictures, which we then merge into one final animation with a GIF file extension. It is easy to create and edit animations of this kind, because shareware or free- ware software tools are available all over the internet (e.g. GIF Construction Set for Windows). There is no need to obtain expensive licenses for commercial tools such as Adobe Photoshop. The main disad- vantage of these animations is their size. We have to remember that we use a sequence of single pic- tures. The final size of the animation is therefore 56 Acta Polytechnica Vol. 51 No. 3/2011 the sum of all included pictures, and can be large. This can be an important consideration when there is a slow internet connection and the student may have to wait some minutes for the whole animation to be downloaded into his computer. Another issue is the degree of animation. Classical film is based on 24 frames per second. If we want to achieve cine- matic animation quality, we have to create anima- tion with 24 frames per second, but this leads to a large file size. An alternative is to use less than 24 frames, e.g. just one per second. This solution will lead to inferior visual effects and the animation will be ripped. The usage of such sequences is there- fore only suitable for illustrating some simple idea, or for adding some interesting decoration. It is neces- sary to use animated GIFs appropriately, otherwise we can achieve the opposite of what was intended. Another disadvantage of GIFs is the absence of any audio track. DynamicHTML.Theearliest conceptofwebsites was based on the idea of static information sites, without any changing content, though a new page might be added at any time. This property is charac- teristic of the basic HTML web site language (Hyper Text Markup Language). The basic elements of this language are tags, which tell the web browser how to display a certain part (font, hypertext link, etc.) As the internet progressed, static web content be- came less and less adequate. Web developers wanted to add dynamically changing parts of web sites for users to view. This feature was allowed with Dy- namic HTML (or DHTML) technology. Complex scripting languages are used, like JavaScript. These languages provide access to the Document Object Model (DOM) within the user’s browser. However, DHTML is not suitable for creating animation. It can move static pictures in the browser window due to the properties of DOM. If we move several graph- ical elements in different directions, we can get some degree of graphic animation. The two technologies, GIF and DHTML, are au- tomatically recognized by the web browser, without any additional programs or plug-ins. However, it is hard to make any DHTML animation that will be correctly displayed in all web browsers. This is its disadvantageagainstGIFanimation. It is also rather moredifficult toprogramanimations, but fortunately there are software tools that can easily create the initial code for our web page. DHTML itself is not very efficient for web animation purposes, because it only involves moving static pictures inside the win- dowarea. We cannotmakeanyother types of anima- tion, such as shape or color transformations. How- ever, these animations are smoother than animated GIFs. More variable web animations can be created with the use ofmore sophisticatedweb browser plug- ins. Java applets. Another way to create web ani- mation is by using multiplatform network program- ming Java language. In Java, we can create small applications downloadable and running in the web browser, provided we have installed the necessary plug-in. These applets are small reduced software applications which cooperate with the web browser. Themain advantage of Java is its cross-platformori- entation and its ability to run on several operating systems. We can create several interactive anima- tions, including raster or vector based graphics, or we can mix it with other web page elements. Adobe Flash (or Shockwave Flash). Adobe Flash or Adobe Director are applications that enable any graphic idea of the author to be animated. Both are widely-used software applications. In 2003, more than 97 percent of all internet users visitedweb sites withMacromediaFlashcontent (accordinglyto infor- mation provided by Macromedia corporation). For this reason there areAdobe extensionmodules (plug- ins) for thewidely-usedwebbrowsers that enable an- imation to be shown inside the web browserwindow. Of course, this is a very user-friendly feature, be- cause we can get the requested content by one click of the mouse. Even if we do not have plug-ins in- stalled,mostweb browsers offer automatic download of plug-ins from relevant web sites. Thus there is no need to search for them all over the internet. How- ever, we can also download them manually from the Adobe web site if we want. The advantage of Adobe FlashorAdobeDirector is that they create small files which are easily and quickly downloadable. This is due to the utilization of vector graphics inside their file format. We therefore do not need to transfer whole pictures over the net, but only vectors of their changes. The second benefit is the popularity of this graphical format. It is a well-known format in the community of animation creators. The third advantage concernsdownloading. Even if the animationfile is large, the user does nothave to wait for long. The conceptofFlashanimationsallows the animation to start playing before the whole file hasbeen fully downloaded. These concurrentplaying and downloading activities are very useful, because the user can immediately focus on the information that is being presented, and does not need to think about the rest of file. The question is which of them to choose — Flash or Director? In most cases the significant parameter is price. Thus we will proba- bly choose the Adobe Flash, which is cheaper than Adobe Director. The file extension of Flash animation is fla. This is the source file type of animation which is only ed- itable, and cannot be played directly out of the edi- tor. We must therefore publish the animation into a playable format SWF (ShockWave Flash) or option- ally into other formats like EXE or HTML. 57 Acta Polytechnica Vol. 51 No. 3/2011 Flash animation can nowadays be found in many web sites, see the number of interactive advertise- ment banners. Flash format also includes the pro- gramming language. This feature allows the creation of several interactive environments to fulfil the au- thor’s graphic ideas. Wink. Wink is free software tool. It can create animationsdirectlyby recording screenshots. Wecan utilize it especially for topicswhere the studentswork with computer workstations. In this case we need to show students some new actions, immediately after which they should try them themselves. Examples of these activities are: algorithmprogramming, courses in computer graphics or presentation of application features. The principle of Wink is based on making screenshots. First, we choose the required recording area onour screen. It is thenminimized andwaits for a signal from the user. After the right combination of keys has been pressed, the recording starts, while the tutor normally works, e.g. shows work with a new application. The tutor works continuously, and theWinkconcurrently takes snapshotsof the selected screenarea. When the recording is finished (bypress- ing the same combination again), smooth animation can be created from the sequence of recorded screen- shots. If we find a group of identical screenshots due to our longer explanation, we can rip these screen- shots out and leave only one of them. Then we set a longer presentation time for this single screenshot. This leads to considerable saving of file. We can also add some additional comments, graphic symbols or pictures. The final animation looks like a video that is exportable into severalfile formats, includingFlash orPDF.Then it has the same advantages aswemen- tioned above. The tutor can also add some audio comments that explain the actual situation on the screen. There is no reason to make this animation only from screenshots. We can also compose it from other picture formats e.g. JPG,GIF, BMP.The ma- jor advantages of Wink can be observed when stu- dents have to emulate the computer activity of a tu- tor. The main utilization of Wink is for informatics. Wink is used in a practical way at the technical elec- trical industry secondary school in Jecna Street, in Prague. This kind of education is used at the school for teaching computer languages. Wink is very pop- ular with teachers and with students. We should point out that the list of software ap- plications mentioned here is incomplete. There are many other tools that are more or less suitable for creating animation, and as technology progresses we can anticipate further extension and innovation of programs of this sort. Conclusion The goal of this paper was to present to the reader some key issues in electronic education and some op- portunities in multimedia. We have provided an in- troduction to technical animation as a fundamental multimedia aspect of electronic learning. We present a taxonomy of technical animation in the paper that follows. References [1] Vaněček, D.: Informační a komunikační tech- nologie ve vzdělávání. Praha : ČVUT, 2008. ISBN 978-80-01-04087-4. [2] Kassin, S.: Psychologie. Computer Press, 2007. ISBN 978-80-251-1716-3. [3] Kropelnický, R.: Využití animace při tvorbě e- learningového kurzu, BP MÚVS ČVUT, Praha 2007, ved. práce D. Vaněček. [4] Vargová, M.: Metodika pracovnej výchovy a pra- covného vyučovania. Nitra : PF UKF, 2007. ISBN 978-80-8094-171-0. Ing. Paed. IGIP. David Vaněček, Ph.D. E-mail: david.vanecek@muvs.cvut.cz Czech Technical University in Prague Masaryk Institute of Advanced Studies Department of Engineering Pedagogy Horská 3, 128 00 Praha 2, Czech Republic Ing. Bc. Jan Jirsa E-mail: jirsaj@fel.cvut.cz Czech Technical University in Prague Faculty of Electrical Engineering Technická 2, 166 27 Praha 6, Czech Republic 58