Develoment of online HTML & CSS learning resources with Live Editor for Web-Based Programming subject

Transcription

1 SC.75 Proceedings of the IConSSE FSM SWCU (2015), pp. SC ISBN: Develoment of online HTML & CSS learning resources with Live Editor Rifki Rizkia Fuadi *, Muhammad Jauharul Fuady, Aji Prasetya Wibawa Department of Electrical Engineering, State University of Malang, Indonesia Abstract Web-Based Programming is one of the compulsory subjects for S1 PTI students in State University of Malang. Of course, learning to master less effective because these languages requires intensive practice. If students rely on teachers, assistants, and lab module, the results obtained may not be maximal. To facilitate students in independent learning, we need a new learning resources that more flexible, accessible, make students interested, interactive, and easy to use in mastering HTML and CSS. Development model in 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. The result of this development is a learning resources that can be accessed online at containing learning materials, live editor and mini browser to practice what they have learned, and feedback, so the student knows is he doing a correct code or wrong. Keywords CSS, HTML, learning resources, web 1. Introduction Web-Based Programming is one of compulsory subjects that must be taken by students of S1 Educational Information Engineering (PTI), Department of Electrical Engineering, Faculty of Engineering, State University of Malang (UM). Students are expected to understand various languages, both programming languages or markup languages that are used in developing a website. HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) the most important language. Both are markup language that standard for web creation. Based on interviews with students, most of them say having problems in learning HTML and CSS. The amount of material, time constraints for lab practice, and the limited learning resources is one of the reasons for learning problems. Learning resources commonly used is a slide presentation that contains material from lectures, lab module, and other sources from the internet. Slide presentation basically key points which will be explained in detail by the lecturer. Lab module is also deemed less interesting. Students were only asked to do exercises and were not given feedback directly stating that the exercise has been done correctly or not. Therefore, students can not learn independently, and need guidance from the lecturers and lab assistant. Learning resources from internet are less structured. * Corresponding author. Tel.: ; address: riffrizz@gmail.com

2 Develoment of online HTML & CSS learning resources with Live Editor 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 Subject Formulation Yes Goal Formulation Evaluation Instrument Formulation Revision Media Script Writing No Test Production 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.

3 SC.77 R.R. Fuadi, M.J. Fuady, A.P. Wibawa 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 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:

4 Develoment of online HTML & CSS learning resources with Live Editor 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 = TSEV/Smax 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. No Step 7. Revision Table 1. Feasible level criteria. Validity Criteria Description (%) 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) 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.

5 SC.79 R.R. Fuadi, M.J. Fuady, A.P. Wibawa 3. Results and discussion The result of this study is an online HTML and CSS learning resources named Kelasweb, that can be access from This product has gone through several stages of testing and validation. The first test was done with white-box. From White-box test results, the entire algorithm of software pass the test. It can be concluded that the software works properly and ready next test. The next test is validation by course expert. The results are showed in Table 2. Overall testing results of course experts, obtained a score of 98%. If referring to the criteria of feasibility level in Table 1, it can be concluded that the learning resources are feasible for use. The next test is validation by media expert. The results are shown in Table 3. Overall testing results of media experts, obtained a score of 88%. If referring to the criteria of feasibility level in Table 1, it can be concluded that the learning resources feasible for use. The next test is small students group test. The results are shown in Table 4. Overall testing results of small group, obtained a score of 91.53%. If referring to the criteria of feasibility level in Table 1, it can be concluded that the learning resources feasible for use. The last test is large students group test. The results are shown in Table 5. Overall testing results of large group, obtained a score of 94.79%. If referring to the criteria of feasibility level in Table 1, it can be concluded that the learning resources feasible for use. The whole testing result is shown in table 6. Table 2. Result of course expert validation. Software aspect 95 Learning design acpect 100 Visual communication aspect 100 Total 98 Table 3. Result of media experts validation. Software aspect 87 Learning design acpect 85 Visual communication aspect 92 Total 88 Table 4. Result of small group test. Software aspect Learning design acpect Visual communication aspect Total Table 5. Result of large group test. Software aspect Learning design acpect Visual communication aspect Total 94.79

6 Develoment of online HTML & CSS learning resources with Live Editor SC.80 Table 6. Result of whole test. Test (%) Scoring Aspect Material Media Score (%) Students Expert Expert Aspek Rekayasa Perangkat Lunak Aspek Desain Pembelajaran Aspek Komunikasi Visual Total Conclusion and remarks This study produce an online HTML and CSS learning resources named Kelasweb, that can be access from Features of product: (1) live editor that can be used for direct practice, (2) mini-browser that display the results of syntax written in live editor in realtime, (3) the exercise of each material, (4) learning progress (5) user profile page, and (6) user guide. This product has gone through several stages of validation and testing. Results of the validation at each stage are: (1) course expert is 98%, (2) media expert is 88%, (3) testing of students in a small group is 91.53% and (4) testing of students ia a large groups is 94.79%. From the data obtained, it can be concluded that the product deserves to be exploited as a learning resources of HTML and CSS. References Akbar, S. (2013). Instrumen perangkat pembelajaran. Bandung: PT Remaja Rosdakarya Offset. Azizah, R. (2012). Pengembangan sumber belajar berbasis web untuk matakuliah praktikum dasar pemrograman komputer Jurusan Teknik Elektro FT UM (unpublished final assignment). Fakultas Teknik Universitas Negeri Malang. Fanani, A.C. (2013). Pengembangan sumber belajar SQL berbasis web untuk matakuliah basis data Prodi S1 Pendidikan Teknik Informatika Universitas Negeri Malang (unpublished final assignment). Fakultas Teknik Universitas Negeri Malang. Karim, S.W. (2012). Pemrograman web. Retrieved from Pemrograman-Web.pdf Pressman, R.S. (2010). Software engineering: A practicioner's approach (7th ed.). New York: McGraw- Hill. Raharjo, B. (2011). Belajar pemrograman web. Bandung: Modula. Sadiman, A.S. (2009). Media pendidikan: Pengertian, pengembangan, dan pemanfaatannya. Jakarta: Rajawali Press. Sugiyono (2011). Statistika untuk pendidikan. Bandung: Alfabeta. Wahono, R.S. (2006). Aspek dan kriteria penilaian media pembelajaran. Retrieved from