Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

DEVELOPMENT OF INTERACTIVE MEDIA OF WEB LEARNING

ON TABLET AND SMARTPHONE
Didik Dwi Prasetya
Department of Electrical Engineering, State University of Malang
Jln Semarang No. 5 Malang 65145, Telp. +62 (0341) 7044470
didikdwi@gmail.com

Abstract
The development of Smartphones and tablets brings many significant changes in
learning. However, the web has the disadvantages of learning, in which at least requires
two applications, text editor and browser. Referring to the existing problems, this
research aims to develop an interactive learning media web on Smartphones and tablets
as a platform to increase the provision of distance education, named Si HTML. The
method used in this study is a research and development by adapting the model
developed by Borg & Gall. Stages of research starting from requirement analysis,
design, production, validation, to test the product. The development of applications
based on Information and Communication Technology (ICT) precisely in order to
improve the quality of teaching, particularly in distance learning. Through mobile
devices, students can still access the learning materials anytime and anywhere, without
being obstructed space and time. The results of the validation and field testing in SMK
Malang 4 shown that the developed product is already feasible to use, in which there is
a very high degree of validity media, 87.08%.
Keywords: interactive media, smartphones, tablets, distance learning

1. Introduction
In a very short span of time, the growth of smartphones in Indonesia showed
significant figures. According to Nielsen research institute survey conducted in mid-2012,
as many as 67% of the total respondents were involved are smartphone users (Nielsen,
2012). This number is predicted to continue to grow in line with the market very positive
enthusiasm. Like two sides of a coin, the rapid growth of smartphone brings fresh air for
mobile application developers.
Smartphone is a mobile phone with more capabilities, ranging from resolution,
features, to computing, including any mobile operating system in it. Existing capabilities
are very supportive of varied mobile content. A variety of content that is composed of text,
images, sound, video, or a combination of all of them flowing every second. Currently,
there are many fields that utilize Smartphones and tablet platforms, such as entertainment,
games, health, industry, tourism, transport, and do not miss all fields of education.
The development of smartphones and tablets brings many significant changes in
learning. However, the web has the disadvantages of learning, in which at least requires
1

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

two applications, text editor and browser. However, the characteristics of mobile devices
that have limited environment very different from desktop or laptop computers. As a result,
web learning in a mobile environment is less flexible and deemed complicated. On the
other hand, the high mobility of people is relying on mobile devices, rather than desktop
computers/laptops.
Referring to the existing strategic potential, this study suggests the development of
an interactive learning media web on smartphones and tablets as a platform to increase the
provision of distance education. The motivation underlying this study is the fact that the
technology is able to bring the Smartphone electronic learning model is more flexible,
convenient, and complex. This is reinforced by the condition of the ground water level is
still not evenly distributed. Therefore, it is important that the presence of breakthroughs that
can reduce the problems of education, especially in distance education. One solution that is
widely applied today is the application of Information and Communication Technologybased (ICT).
The implementation of interactive media on the web learning platform Smartphones
and tablets has the potential to help improve distance education services. Media that
consists of a basic material, exercises, and interactive simulations HTML editor is very
assist learners in mastering the basics of web programming. Through simple equipment and
easy to carry, keep learners can access the learning materials anytime and anywhere,
without being obstructed space and time.
2. Literature Review
2.1 Smartphone and Tablet
Mobile phones currently classified into two types, namely standard phone and smart
phone. Smart phone or Smartphone more familiar we call a cell phone with more
capabilities, ranging from resolution, features, to computing, including any mobile
operating system in it. The growth of Smartphones these days shows a fantastic figure,
especially in Indonesia. The rapid growth of the Smartphone direct significant impact on
the development of a Smartphone app or better known as mobile applications (mobile
apps).
However, the development of mobile applications is very dependent on the
development of Smartphones, both in terms of technology and production quantities. Of
course, because it is a Smartphone platform that runs applications mobile. Dalam very short
time, the growth of Smartphones in Indonesia showed significant figures. According to
Nielsen research institute survey conducted in mid-2012, as many as 67% of the total
respondents were involved are Smartphone users. This number is predicted to continue to
grow in line with the market enthusiasm. Like two sides of a coin, the rapid growth of
Smartphones brings opportunities for mobile application developers.

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Broadly speaking, there are three approaches that are used to develop mobile
applications, namely native applications, web applications, and hybrid applications
(Prasetya, 2013). Native application is an application that is specifically targeted to certain
mobile platforms and programming languages and software development the appropriate
platform. The web application is a web application that is specifically optimized for use in a
Smartphone environment. The application seeks a hybrid approach combines the
advantages of mobile HTML5 web apps and native apps.
This study used three approaches or hybrid applications because it offers high
flexibility. Application code written using standard web technologies can be deployed
directly to almost any mobile operating system platforms, including Android, iOS,
Windows Phone, WebOS, Symbian, and BlackBerry. Thus, the availability of applications
is becoming increasingly widespread, making it easier distribution to distance education
learners.
2.2 Distance Learning
In order to achieve national education goals as defined in Law No. 20 of 2003 on
the National Education System, the government implements two educational systems,
namely face-to-face education and distance education or distance learning. In face-to-face
education system, learners and educators met in person to conduct the learning process in
the education providers. On the other hand, distance education is one way of
implementation of education where learners apart from educators.
Education distance education learners are separated from educators and learning to
use a variety of learning resources through communication technology, information, and
other media (Undang-Undang No 20 Tahun 2003). Thus, learners as teachers who want to
learn in order to improve their qualifications or competence not have to leave his teaching
duties, but can learn while teaching. According to the Minister of Education and Culture,
prof. M. Nuh, distance education is very important because Indonesia has a very large
population (Zubaidah, 2011). If only rely on conservative learning, the need for additional
infrastructure tremendous amount.
Distance learning can be conducted on all lines, levels and types of education.
Distance education serves to provide educational services to community groups who cannot
attend face-to- face education or regular. Distance education is maintained in various forms,
modes, and supported by means of coverage and service learning and assessment system
that ensures the quality of graduate education in accordance with national standards.

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

3. Method
3.1 Research Design
This research is the development research, which is the process used to develop and
validate a product. The research model is used to adapt the model developed by Borg &
Gall (Setyosari, 2010).

Figure 1 Application Development Model

There are several steps involved in this study, ranging from needs analysis to test
the product.

Requirements Analysis
This stage aims to analyze requirements and define a software requirements
specification to be developed.

Applications Design
At this stage, the results of the needs analysis will be poured into forms
design/design, including the design process, data, interface, and the system as a
whole.

Production Applications
Production applications and systems implementation phase represents learning
content.

Validation
This stage aims to ensure that the product is in conformity with the initial
specification. If there are revisions it will return to the application design phase,
whereas otherwise it directly to the next stage.

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Products Testing
To determine the feasibility of the product then performed a series of trials
involving individual students.

3.2 Product Description

The proposed solution is innovative interactive media learning web platforms that
run on Smartphones and tablets. The media called this HTML is a mobile application
(mobile apps) that can run on all mobile operating systems platforms, such as Android,
iOS, Windows Phone, BlackBerry, and the likes. Learn about the development of the
proposed system architecture is shown as Figure 2.

Figure 2 System Architecture

Interactive media is composed of several parts that make up an integrated learning

application. The parts are becoming media content development plan is composed of
matter, live editor, quiz/exercise, and help the use of the product. Sitemap form of content
development is shown in Figure 3.

Figure 3 Content Sitemap

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

In order to facilitate access to content that is available, made a major navigation

simple and focus on product functionality. This form of navigation design adapts to the
characteristics of Smartphone apps and tablet.

Figure 4 Product Interface Design

3.3 Validation and Testing

Validation is an important step to ensure that the application has been developed in
accordance with the specifications. There are two types of validity tests performed in this
study, the validation of materials and media. The validation is done by people who meet the
criteria. Testing is an activity in which a system is executed under specified conditions and
the results are observed and evaluated. Tests conducted as verification that the software was
developed to meet the specification requirements and run in accordance with the scenario
that has been described. The main purpose of the testing phase is to find errors that have not
been identified.
4. Development Result
4.1 Implementation
Stages of implementation or development of real-world systems describe the
manifestation of processing functions and information structures. In this stage, the aspects
related to the behavior and structure of the system is represented as it would be built. This
stage illustrates the implementation details for each operation are expressed through a
message. At this stage the system is implemented interactive learning applications for
Smartphones and tablet environments.

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

This stage focuses on the main system that will accommodate the learning contents.
Referring to the results of interface design, implementation main interface is shown as
Figure 5.

Figure 5 Main Interface on Android Platform

The development of an interactive learning application consists of two main

modules, namely:
1. The main engine
This module represents the main functionality of the application as an interactive
media system. The function of this module is to provide a container to
accommodate the learning contents.
2. Learning content
This module represents content-content that is an interactive learning.
The main idea of this research is to produce an application that can run on cross
platform mobile operating system. The main objectives are to provide a variety of products
in a variety of platforms that can be chosen by the user. The results of the implementation
of the main interface of interactive learning applications in the iOS environment is shown
as Figure 6.

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Figure 6 Main Interface on iOS Platform

Page presents the basic learning content material on the basics of HTML. There are
five main topics are provided, namely HTML Document, Text Format, List, Image, and
Link.
One of the main advantages offered by this application is an interactive learning
features interactive editor. Here, users are presented a page like text editors generally, but
with the ability to display the translation result the HTML code at the bottom. Once the
code is completed typed in text editor, the display will be immediately displayed on the
screen.

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Figure 7 Basic HTML Menu

An interactive editor approach considered highly allowing users to practice basic

HTML code.

Figure 8 Interactive Editor

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

When compared to the standard approach requires a minimum of two devices, namely a
text editor and a browser, then this approach is more practical. The existence of an interactive editor
can be an alternative when students are not carrying basic equipment such as desktop computers or
laptops / notebooks.

4.2 Testing Result

A test conducted focus group aimed to determine the usefulness of the product
directly. This test is limited to 10 students taking the subject SMKN 4 Malang drawn at
random. To be more optimal test results, the selection of subjects is done through selection
of the class teacher refers to three categories of student's ability (advanced, intermediate,
and basic).
The testing phase begins with the installation of each product to the students and
then continued with the operation of the application features. Furthermore, students are
given feedback assessment instrument to respond objectively.

Figure 9 Product Testing in the Field

4.3 Discussion
Results of instructional media web application development offer responsive
dynamic features. This feature allows the application to provide the right look in all screen
sizes. The application of the material and interactive text editor able to provide feedback to
the user directly.
Based on a limited test group, showed an average of 87.08. Referring to the validity
of the table, it can be concluded that the trial in the restricted group is at very high criteria.
That is, learning interactive media web applications for Smartphones and tablets developed
a great response by the students of SMK Negeri 4 Malang (represented by 10 samples) with
the percentage of eligibility or satisfaction of 87.08%.

10

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

5. Conclusions and Recomendations

5.1 Conclusions
Referring to the implementation and outcomes of targeted research, conclusions can
be outlined as follows:
1. Development of interactive learning media web applications for Smartphones and
tablets have the potential to help improve service-learning in distance learning. This
application is able to run on the cross platform and varied screen sizes. Media
content developed widely accessible anytime and anywhere so it is appropriate for
the geographical condition of Indonesia. This approach at least is a distance learning
solution that is attractive in addition to the use of existing conventional media. In
addition, also as a concrete manifestation in support of educational programs for all
(education for all / EFA ) and the Millennium Development Goals ( MDGs) to be
achieved by 2015.
2. The test results through a series of verification and validation show that the online
application is the interactive whiteboard is in conformity with the initial
specifications and feasible for use in support of distance education services . The
results of tests on a limited group (10 students of SMK Malang 4) get a very good
value, 87.08 % .
5.2 Recomendations
Although the development of interactive learning media web on Smartphones and
the tablets are already quite good and meet the initial target as planned, but there are still
some shortcomings that need to be refined again. In connection with this, a few suggestions
to consider are as follows:
1. The need for additional features of the application so it is easier to use, for example,
the number of lines of code (line number).
2. Content interactive quizzes should be made randomly and dynamically composed of
a variety of questions in each level.
3. The need for more extensive testing to determine the usefulness of the developed
application. Testing should be done in a few groups and involve more subjects
research.
6. References
Arikunto, S. 2008. Dasar-Dasar Evaluasi Pendidikan. Jakarta: Bumi Aksara.
Arsyad, A. 2002. Media Pembelajaran. Jakarta: PT Raja Grafindo Persada.
Cicchino, R., Mirliss, D. 2006. Tablet PCs: A Powerful Teaching Tool. Proceedings of
World Conference on E-Learning in Corporate, Government, Healthcare, and Higher
Education.
11

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Eurell, J. 2005. Tablet Computers in the Veterinary Curriculum. Journal of Veterinary

Gioaniss, P. 2012. E-MedLab: A Distance Learning Medical Laboratory via a Tablet PC.
SRIMA, Romania.
Kementerian Pendidikan dan Kebudayaan. 2012. Peraturan Menteri Pendidikan dan
Kebudayaan Nomor 24 tahun 2012.
Kementerian Pendidikan dan Kebudayaan. 2010. Rencana Strategis (Renstra) Kementerian
Pendidikan Nasional tahun 2010-2014.
Melton, R., Kendall N. 2012. The Impact of Mobilization in Higher Education. The
Global ElearningJournal, Vol 1.
Prasetya, D.D. 2013. Membuat Aplikasi Smartphone Multiplatform. PT Elexmedia
Komputindo Jakarta
Pressman, R. 2006. Software Engineering a Practitioners Approach 6th Edition, The Mc
Graw Hill Compannies, Inc.
Reeves T., Hedberg. 2003. Interactive Learning Systems Evaluation. Educational
Technology Publications, Inc. USA.
Setyosari, P. 2010. Metode Penelitian Pendidikan dan Pengembangan. Kencana, Jakarta
Undang-Undang Republik IndonesiaNomor 20 Tahun 2003 tentang Sistem Pendidikan
Nasional. 2004. Jakarta

12