Develoment of online HTML CSS learning resources with Live Editor for Web-Based Programming subject
SWUP
SC.76
To facilitate students in individual learning, we need a new learning resources that are more flexible, accessible, make students interested, interactive, and easy to use in mastering
HTML and CSS language. To make it easier, it also include progress tracking of learning and live editor that provides direct feedback to the students, to make it easier to study
independently. Related research is a thesis by Azizah 2012
and Fanani 2013. From the two researchers, we can conclude that the web application are feasible to use as a learning
resource.
2. Materials and methods
This study uses the model development by Sadiman 2009. The steps are: 1 requirements identification, 2 goal formulation, 3 subject formulation 4 evaluation
instrument formulation, 5 media script writing, 7 test, 8 revision, and 9 production. Flowchart of steps can be seen in Figure 1.
Requirements Identification
Goal Formulation
Subject Formulation
Evaluation Instrument
Formulation Media Script
Writing
Test Revision
Production
Yes
No
Figure 1. Development steps.
Step 1. Requirements identification This stage is the stage where the observation begins. Identification carried out to
identify the needs of the field and the characteristics of the student so that it can be seen the gap between expected situation with the reality. Instruments used in this step is interviews
to students. The list of questions was prepared and then submitted to the students of S1
Informatics Engineering Education at State University of Malang. The answer of the questions then analyzed to conclude that underlie the development of these learning resources. Results
of the analysis are summarized in several points, as follows: a.
One of problems encountered is the amount of material that must be learned to master the web-based programming.
b. The process of practical learning easier for the student to try what they have learned,
but the limited time for lab becomes one of the problems. c.
Learning resources commonly used is a slide presentation, practical modules, and other sources from the internet. Slide presentation basically just be the key points which will
be explained in detail by the lecturer. Lab module is also deemed less attractive. d.
An easier way to learn web-based programming is by direct practice.
R.R. Fuadi, M.J. Fuady, A.P. Wibawa
SWUP
SC.77
e. The Department of Electrical Engineering, State University of Malang has given the ease
of Internet connection. f.
Students have been accustomed to using web-based learning resources. Step 2. Goal formulation
At this stage general instructional objectives and specific instructional objectives are structured. Formulation of specific instructional objectives should refer to the general
instructional objectives. While the general instructional objectives refer to the electrical engineering catalog State University of Malang 2014. There are two general instructional
goals formulated in this study, as follows: a.
Implementing HTML code properly. b.
Implementing CSS code properly. Hyper Text Markup Language HTML is a standard language used to display text,
images, video, and audio on a web page and Cascading Style Sheet CSS is a language that defines how a web page content are presented or displayed in the web browser. Raharjo,
2011.
Step 3. Subject formulation Based on General instructional goals and specific instructional goals, points of learning
material on this learning resources assembled, as follows: a.
HTML •
Introduction to HTML •
Lists •
Table, Div, and Span b.
CSS •
Introduction to CSS •
Class and ID •
Positioning Step 4. Evaluation instrument formulation
Evaluation tool consists of practices relating to each material. To make user able to practice independently, this online learning resources equipped with live editor. Students
can practice what they learn directly through this live editor, and live editor will provide a feedback about the result. The formulation of this evaluation tool cannot be separated from
the specific instructional objectives. Must be able to measure the goals and materials that have been formulated.
Step 5. Media script writing Content that has been formulated then embedded in a web-based learning resource
that can be access from any devices, such as: desktop, laptop, tablet, and smartphone. Software development are done using PHP, HTML, CSS and Java Script. Web programming is
the process of writing and maintaining code to develop a software-based client-server Karim, 2012. Before doing coding and software development, made a series of designs that
will be the basis for development. Documentation generated in the design phase are:
Develoment of online HTML CSS learning resources with Live Editor for Web-Based Programming subject
SWUP
SC.78
a. flowchart
b. data flow diagrams DFD
c. entity relationship diagram ERD
d. data dictionary
e. grapichal user interface GUI design.
Step 6. Test According to Pressman 2010 software testing is a software quality assurance
developed and presented the basic study of the specification, design and coding. The first step for testing this online learning resource is using a white-box testing to
test software algorithms. This test produced only two possibilities, passed or not. If it pass, it does not need revisions. But if it does not pass, should be revised to improve the program
algorithm.
Another test is using a questionnaire assessed by Wahono 2006 for course expert, media expert, and students in small and large groups.
Questionnaires use a Likert scale with a scale of 1 to 4; 1 is the lowest score and 4 is the highest. The type of data collected is quantitative data and qualitative continuum ratio
Sugiyono, 2011 that obtained from testing. Data were analyzed using the equation adapted from Akbar 2013:
V = TSEVSmax x 100 , where V is the validity, TSEV is the total score of validator, and Smax is the maximum score.
Next the results of the data analysis are categorized in level eligibility criteria Akbar, 2013 can be seen in Table 1 to enter into a valid category. If not valid, then the learning resources
need to be revised.
Table 1. Feasible level criteria.
No. Validity Criteria
Description
1 2
3 4
85.01–100.00 70.01–85.00
50.01–70.00 1.00–50.00
Very valid can be used without revision Enough valid can be used with few revision
Less valid suggested not to use Not valid prohibited to use
Source: Akbar 2013
Step 7. Revision If the online learning resources must be revised, it is necessary to validate the stages
in each step starting from the validation phase of the formulation of the material to the media script writing. Revisions were made to improve or enhance the product. This process
is carried out based on data from the test and notes from experts. The data obtained from course expert and media expert.
Step 8. Production If the online learning resources has been declared as feasible for use, the learning
resources is ready to be disseminated. Because the product developed is web-based software, users only need to access it using a web browser. This is the final stage in the
development process.
R.R. Fuadi, M.J. Fuady, A.P. Wibawa
SWUP
SC.79
3. Results and discussion
