Perancangan dan Implementasi Media Ajar Wayang Mahabarata Menggunakan HTML5 dan CSS3

Artikel Ilmiah

Peneliti

Yohanes Kristiana (672008306) Hendry, M.Kom Adriyanto Juliastomo Gundo, S.Si., M.Pd

Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen Satya

Wacana Salatiga April 2013

Perancangan dan Implementasi Media Ajar Wayang Mahabarata Menggunakan HTML5 dan CSS3

1) Yohanes Kristiana,2)Hendry,3)Adriyanto Juliastomo Gundo

Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

Jl. Diponegoro 52-60, Salatiga 50711, Indonesia

Email :1) kristianayohanes@gmail.com 2)hendry.honk@gmail.com3)adriyanto.j@gmail.com

Abstract

Wayang or Puppet Shadow is one of big famous Indonesian Art that has been patented by UNESCO since 2003 as a world heritage. But preservation of wayang or pupet shadow heritage is less, thats seenseen through a search on the site www.google.com, no wayang or pupet shadow instructional media as way to preservation of wayang or puppet shadow heritage. Using HTML5 and CSS3 are true problem solving because with a new HTML5 element that is multimedia is used for containing video as a material of learning. Using CSS3 also helpful to make a good website design. According to problem and problem solving method, produced Website Of Learning that can load video as a material of learning using HTML5 and CSS3.

Keyword :Instructional Media, Wayang Mahabarata, HTML5, CSS3

Abstrak

Wayang merupakan kesenian asli Indonesia yang sudah diresmikan sebagai warisan budaya dunia/internasional sejak tahun 2003 oleh UNESCO. Namun pelestarian budaya wayang sangatlah kurang, terlihat melalui pencarian di situs www.google.com, tidak ada media ajar wayang sebagai salah satu cara pelestarian wayang. Penggunaan HTML5 dan CSS3 merupakan pemecahan masalah yang tepat dikarenakan dengan adanya elemen baru pada HTML5 yaitu multimedia yang digunakan untuk memuat video sebagai materi ajar. Penggunaan CSS3 juga membantu dalam pembuatan desain website. Berdasarkan pada masalah dan metode pemecahan masalah yang ada, maka dibangun sebuah media ajarwayang mahabaratayang dapat memuat video salah satu materi ajar menggunakan HTML5 dan CSS3.

Kata kunci : Media ajar, Wayang Mahabarata, HTML5, CSS3

1 Mahasiswa Fakultas Teknologi Informasi Universitas Kristen Satya Wacana 2 Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana 3 Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

1. Pendahuluan

Wayang merupakan kesenian asli Indonesia yang sudah diresmikan sebagai warisan budaya dunia/internasional sejak tahun 2003 oleh UNESCO jauh lebih dulu daripada Batik, Keris, dan Angklung dipatenkan.wayang haruslah dilakukan karena wbudaya bangsa yang sarat dengan nilai edukaedukatif dalam wayang dapat dilakukan melalui pembelajaran disekolah.

Permasalahan yang dihadapi dalam pelestarian budaya wayang adalah minimnya keberadaan media ajar wayang yangmedia ajar wayang yang terdapat budayawayang melalui pendidikanmenunjukkan pencarian websitemahabarata” pada situs pencari www.namun setelah dilusuri tidak ada satupun media ajar wayang mahabarata.

Gambar 1

Penelusuran selanjutnya dilakukan untuk mencari bahan ajar wayang mahabarata yang dilakukan dengan cara mengganti kata kunci menjadi bahan ajar wayang mahabarata. Hasil yang didapat adalah

Wayang merupakan kesenian asli Indonesia yang sudah diresmikan budaya dunia/internasional sejak tahun 2003 oleh UNESCO jauh

lebih dulu daripada Batik, Keris, dan Angklung dipatenkan.Pelestarian budaya wayang haruslah dilakukan karena wayangjuga merupakan salah satu kekayaan budaya bangsa yang sarat dengan nilai edukatif, informasi dan hiburan. Nilai-edukatif dalam wayang dapat dilakukan melalui pembelajaran disekolah.

Permasalahan yang dihadapi dalam pelestarian budaya wayang adalah minimnya keberadaan media ajar wayang yang terdapat di Indonesia.Keberadaan

ia ajar wayang yang terdapat pada intenet sebagai salah satu cara pelestarian pendidikan dapat dikatakan kurang. Gambar 1 website dengan kata kunci “media ajar wayang

situs pencari www.google.com menghasilkan 142.000websitetidak ada satupun website yang dapat digunakan sebagai

ajar wayang mahabarata.

Gambar 1Pencarian Website Sebagai Media Ajar

Penelusuran selanjutnya dilakukan untuk mencari bahan ajar wayang mahabarata yang dilakukan dengan cara mengganti kata kunci menjadi bahan ajar wayang mahabarata. Hasil yang didapat adalah 83.300 website ditemukan namun

Wayang merupakan kesenian asli Indonesia yang sudah diresmikan budaya dunia/internasional sejak tahun 2003 oleh UNESCO jauh

Pelestarian budaya salah satu kekayaan

-nilai

Permasalahan yang dihadapi dalam pelestarian budaya wayang adalah Keberadaan

lestarian Gambar 1

wayang website,

yang dapat digunakan sebagai

Penelusuran selanjutnya dilakukan untuk mencari bahan ajar wayang mahabarata yang dilakukan dengan cara mengganti kata kunci menjadi bahan ajar

website ditemukan namun

tidak ada satupun website yang mahabarata. Gambar 2 menunjukkan penelusuran website sebagai bahan ajar.

Gambar Permasalahan lainnya adalah ksebagai bahan ajar juga menyulitkan Siswa harus melihat ataupun mengunduh video yang terdapat pada situs youtube.com dengan cara mencari menggunakan kata kunci wayang mahabarata. Tidak ada website ataupun media ajarkhusus sehingga dapat digunakan sebagai bahan ajar.adalah keterbatasan buku bacaan dan sumber lain mengenai kisah mahabarata. Perpustakaan Nasional Republik Indonesia bahkan tidak memuat bacaanwayang mahabarata. Gambar 3 merupakan hasil pencarian bacaan yang memuat tentang wayang mahabarata yang terdapat pada Republik Indonesia.

tidak ada satupun website yang dapat digunakan sebagai bahan ajar wayang . Gambar 2 menunjukkan penelusuran website sebagai bahan ajar.

Gambar 2 Pencarian Website Sebagai Bahan Ajar

Permasalahan lainnya adalah keberadaan video yang tersedia diinternetmenyulitkan dalam mempelajari wayang mahabarata.

Siswa harus melihat ataupun mengunduh video yang terdapat pada situs youtube.com dengan cara mencari menggunakan kata kunci wayang mahabarata.

ataupun media ajar yang menampilkan video wayang secara khusus sehingga dapat digunakan sebagai bahan ajar. Masalah lain yang dihadapi adalah keterbatasan buku bacaan dan sumber lain mengenai kisah mahabarata. Perpustakaan Nasional Republik Indonesia bahkan tidak memuat bacaan tentang wayang mahabarata. Gambar 3 merupakan hasil pencarian bacaan yang memuat tentang wayang mahabarata yang terdapat pada website Perpustakaan Nasional

wayang . Gambar 2 menunjukkan penelusuran website sebagai bahan ajar.

yang tersedia diinternet pelajari wayang mahabarata.

Siswa harus melihat ataupun mengunduh video yang terdapat pada situs youtube.com dengan cara mencari menggunakan kata kunci wayang mahabarata.

ng menampilkan video wayang secara Masalah lain yang dihadapi

adalah keterbatasan buku bacaan dan sumber lain mengenai kisah mahabarata. tentang

wayang mahabarata. Gambar 3 merupakan hasil pencarian bacaan yang memuat Perpustakaan Nasional

Gambar 3

Penenitian ini menghasilkan sebuah website sebagai media ajar wayang mahabarata. Teknologi yang digunakan adalah HTML5 dan CSS3. ElemenHTML5 yang digunakan untuk membantu penelitian ini adalah HTML5 Multimedia yang digunakan untuk memasukkan video dan audio tanpa menggunakan script yang panjang. Elemen lain yang digunakan dalam penelitian ini adalah dapat menggunakan CSSteknologi sebelumya.CSS3 dapat membantu dalam menetukan tampilan suatu bagian yang sama pada setiap halaman kode program secara berulangAdanya semua teknologi ini akan diteliti bagaimanaCSS3 dalammembuat sebuah

2. Tinjauan Pustaka

Penelitian terdahulu menjelaskan tentang sistem Pembelajaran memudahkan siswa untuk melengkapi materi pembelajaran yang diterima siswa di dalam kelas, jika siswa kurang memahami materi pelajaran yang diberikan di kelas atau ingin belajar lagi donline.Sistem ini berisi soal latihan atau soal ujian mengunduh materi pelajaran, serta informasi dan berita yang ditujukan untuk siswa. Hadirnya sistem ini, siswa akan lebih semangat dan lebih aktif dengan pembeladiluar sekolah dengan menggunakan media internet. Sistem Pembelajaran di SMPN 284 Jakarta Timur dapat membantu siswa dalam melengkapi

3 Pencarian BahanBacaan Wayang Mahabarata

menghasilkan sebuah website sebagai media ajar wayang . Teknologi yang digunakan adalah HTML5 dan CSS3.

HTML5 yang digunakan untuk membantu penelitian ini adalah HTML5 Multimedia yang digunakan untuk memasukkan video dan audio tanpa

akan script yang panjang. Elemen lain yang digunakan dalam penelitian dapat menggunakan CSS. CSS3 juga merupakan perkembangan dari

dapat membantu dalam menetukan tampilan suatu bagian yang sama pada setiap halaman website tanpa perlu melakukan penulisan kode program secara berulang-ulang untuk menampilkan tampilan yang sama. Adanya semua teknologi ini akan diteliti bagaimana memanfaatkan HTML5 dan CSS3 dalammembuat sebuah website Wayang Mahabarata.

menjelaskan tentang sistem Pembelajaran Onlinememudahkan siswa untuk melengkapi materi pembelajaran yang diterima siswa di dalam kelas, jika siswa kurang memahami materi pelajaran yang diberikan di kelas atau ingin belajar lagi di rumah, siswa bisa megakses pembelajaran

.Sistem ini berisi soal latihan atau soal ujian mengunduh materi pelajaran, serta informasi dan berita yang ditujukan untuk siswa. Hadirnya sistem ini, siswa akan lebih semangat dan lebih aktif dengan pembelajaran di sekolah maupun diluar sekolah dengan menggunakan media internet. Sistem Pembelajaran Onlinedi SMPN 284 Jakarta Timur dapat membantu siswa dalam melengkapi

menghasilkan sebuah website sebagai media ajar wayang . Teknologi yang digunakan adalah HTML5 dan CSS3.

HTML5 yang digunakan untuk membantu penelitian ini adalah HTML5 Multimedia yang digunakan untuk memasukkan video dan audio tanpa

akan script yang panjang. Elemen lain yang digunakan dalam penelitian . CSS3 juga merupakan perkembangan dari

dapat membantu dalam menetukan tampilan suatu tanpa perlu melakukan penulisan

ulang untuk menampilkan tampilan yang sama. memanfaatkan HTML5 dan

Onlineakan memudahkan siswa untuk melengkapi materi pembelajaran yang diterima siswa di dalam kelas, jika siswa kurang memahami materi pelajaran yang diberikan di

i rumah, siswa bisa megakses pembelajaran .Sistem ini berisi soal latihan atau soal ujian mengunduh materi pelajaran,

serta informasi dan berita yang ditujukan untuk siswa. Hadirnya sistem ini, siswa jaran di sekolah maupun

Online di SMPN 284 Jakarta Timur dapat membantu siswa dalam melengkapi

pembelajaran di sekolah dengan konsep aktif dan rajin dalam pembelajaran baik di sekolah maupun dirumah.

Penelitian terdahulu lainnya sistem antrian layanan dibank menggunakan sebuah teknologi yaitu HTML 5. HTML5 adalah sebuah standard script HTMLmenggunakan HTML5, dapat dikatakan lebih mudah dan hasilnyapun lebih interaktif[2]

Penelitian yang dilakukan ini memiliki perbedaan dengan penelitian terdahulu yaitu penggunaan HTML5 dalam pembuatan membedakan dengan penelitian yang dilakukan oleh Rochmawati.Perbedaan lainnya adalah penelitian ini tidak hanya menggCSS3.Penelitian yang dilakukan adalah merancang sebuah digunakan sebagai media ajardiIndonesia.

Penelitian ini menggunakanditandai dengan adanya HTML5 sebagai penerus versi sebelumnya yaitu HTML4.HTML5 sendiri muncul dengan harapan dapat menangani animasi dengan gambar pada web browserserta tanpa memerlukan instalasi perangkat lunak tambahan. Pada HTML5 ada beberapa tag baru yang tidak ada pada HTML4.

Ada banyak elemen yang disediakan oleh HTML5, yaitu : HTML5 Tags, HTML 5 Multimedia (VideoCSS, 2D/3D), HTML5 ApplicationsHTML5 Forms, CSS3 Supportdilihat pada Gambar 4.

HTML5 akan mempermudah dalam pembuatan multimedia dan juga dalam penanganan dalam pembuatan kode untuk mengubah tampilan menggunakan teknologi CSS yang disebut sebagai sectioning yang merupakan bagian dari elemen HTML5 yaitu Semantics.Elemen Semantics menggunakan teknologi CSS yang ada pada HTML5.

pembelajaran di sekolah dengan konsep online sehingga siswa diharapkan lebih n dalam pembelajaran baik di sekolah maupun dirumah.[1]

terdahulu lainnya menjelaskan tentang cara pembuatan sebuah sistem antrian layanan dibank menggunakan sebuah teknologi yaitu HTML 5.

standard baru untuk HTML.Pembuatan multimedia dalam enggunakan HTML5, dapat dikatakan lebih mudah dan

[2]. Penelitian yang dilakukan ini memiliki perbedaan dengan penelitian

terdahulu yaitu penggunaan HTML5 dalam pembuatan media ajaronline membedakan dengan penelitian yang dilakukan oleh Rochmawati.Perbedaan lainnya adalah penelitian ini tidak hanya menggunakan HTML5, tetapi juga

Penelitian yang dilakukan adalah merancang sebuah website yang dapat digunakan sebagai media ajar sebagai salah satu cara pelestarian budaya wayang

Penelitian ini menggunakan teknologi HTML5.Perkembangan HTMLditandai dengan adanya HTML5 sebagai penerus versi sebelumnya yaitu HTML4.HTML5 sendiri muncul dengan harapan dapat menangani animasi

web browser tanpa tergantung pada jenis browser tertentuserta tanpa memerlukan instalasi perangkat lunak tambahan. Pada HTML5 ada

baru yang tidak ada pada HTML4. Ada banyak elemen yang disediakan oleh HTML5, yaitu : HTML5

Video dan Audio), HTML5 Graphics (Canvas, SVG, Applications (Local data Storage), Semantic ElementsSupport [3]. Logo untuk masing-masing elemen dapat

Gambar 4 Elemen HTML5[3]

HTML5 akan mempermudah dalam pembuatan multimedia dan juga ganan dalam pembuatan kode untuk mengubah tampilan

menggunakan teknologi CSS yang digunakan adalah teknlogi CSS3. Elemen ini yang merupakan bagian dari elemen HTML5 yaitu akan mempermudah dalam membuat desain website

menggunakan teknologi CSS [4]. Tabel 1 menjelaskan elemen sectioning

sehingga siswa diharapkan lebih

menjelaskan tentang cara pembuatan sebuah sistem antrian layanan dibank menggunakan sebuah teknologi yaitu HTML 5.

embuatan multimedia dalam enggunakan HTML5, dapat dikatakan lebih mudah dan

Penelitian yang dilakukan ini memiliki perbedaan dengan penelitian yang

membedakan dengan penelitian yang dilakukan oleh Rochmawati.Perbedaan unakan HTML5, tetapi juga

yang dapat gai salah satu cara pelestarian budaya wayang

HTML ditandai dengan adanya HTML5 sebagai penerus versi sebelumnya yaitu HTML4.HTML5 sendiri muncul dengan harapan dapat menangani animasi

ung pada jenis browser tertentu, serta tanpa memerlukan instalasi perangkat lunak tambahan. Pada HTML5 ada

Ada banyak elemen yang disediakan oleh HTML5, yaitu : HTML5 New , SVG,

Semantic Elements , emen dapat

HTML5 akan mempermudah dalam pembuatan multimedia dan juga ganan dalam pembuatan kode untuk mengubah tampilan

gunakan adalah teknlogi CSS3. Elemen ini yang merupakan bagian dari elemen HTML5 yaitu

website baru

Tabel 1 Elemen Sectioning HTML5 [4]

Elemen Sectioning Keterangan Header Header konten ( baik untuk seksi

maupun halaman website) Footer Footer konten ( baik untuk seksi

maupun halaman website) Section Seksi/bagian dari website Article Artikel tersendiri dalam website Nav Link yang ada pada website

Cascading Style Sheets (CSS) dikeluarkan pada tahun1966 oleh W3C

dengan tujuan untuk merubah property font, warna teks, background, spasi, ukuran teks, gambar serta margin border dan padding. Setelah itu teknologi CSS berkembang hingga sekarang yaitu CSS3. Banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model[5].Teknologi juga ini mempermudah dalam pembuatan tampilan website lebih indah tanpa harus menulis berulang-ulang kode HTML.

CSS3 juga digunakan untuk membuat garis tepi menjadi bulat, dan pegerakan berputar [4].Garis tepi yang bulat dapat membuat tampilan website dengan garis tepi berbentuk kotak menjadi tidak kaku. Fungsi CSS3 yang lain adalah penggunaan elemen HTML5 yaitu semantics.

Teknologi CSS3 ini mempunyai perbedaan dengan teknologi CSS terdahulu. Ada beberapa tabahan fitur yang dikeluarkan oleh CSS3 antara lain property border, property backgrounds, color, text effect, using interface, selector, basic box model, generated content dan other modul. CSS3 juga digunakan untuk membuat animasi lebih baik dan beberapa fitur yang lebih baik dibandingkan dengan versi sebelumnya [3].

3. Metode dan Perancangan Sistem

Metode penelitian yang digunakan dalam membuat media ajar iniadalahprototype model. Model prototype adalah sebuah metode pengembangan sistem yang membuat prototype, lalu mengujiprototype, kemudian kembali dibangun, dan proses tersebut di ulang sampai prototype sesuai dengan yang diingankan oleh client. Prototype model memungkinkan adanya interaksi yang lebih baik antara pengembang program dan pengguna, sehingga sistem yang dibuat hasilnya lebih maksimal [8].

Kelebihan dari metode prototype adalah hasil yang bisa memuaskan pengguna. Hal ini dikarenakan pengembang dan pemakai bekerja dalam satu tim, banyak komunikasi yang terjadi sehingga pengembang dapat mengerti yang dibutuhkan oleh pengguna. Selain itu pembuatan prototype dapat mempercepat proses pengembangan selanjutnya. Walaupun biaya analisis menjadi meningkat, tetapi biaya lain seperti perancangan, pengujian, penulisan dokumen akan berkurang. Komunikasi yang aktif antar pengembang dan pengguna adalah inti

dari kesuksesan metode ini, sehingga pengguna dapat benar-benar puas dengan sistem yang telah dikembangkan.

Tahapan yang dilakukan pada metode prototype dalam pengembangan sistem ini dimulai dengan pengumpulan kebutuhan dengan cara dikumpulkan data-data yang diperlukan untuk membangun website ini. Wawancara dilakukan untuk mengumpulkan kebutuhan yang digunakan untuk membuat media ajar ini. Wawancara ini bertujuan untuk mengetahui informasi apa saja yang dibutuhkan guru sebagai sarana media ajar. Tahap selanjutnya dalam prototype model adalah perancangan dilakukan dengan cara pembuatan desain sistem berdasarkan kebutuhan yang telah dikumpulkan pada tahap pertama. Pembuatan desain dilakukan agar prototype yang nantinya dibuat, dapat menjawab atau memenuhi kebutuhan yang ada. Adanya desain yang jelas pembuatan prototypeakan lebih terarah. Prototype ini memang tidak langsung akan menjadi sempurna sesuai dengan apa yang diinginkan pengguna, tetapi dengan adanya pengujian dan evaluasi di tahap berikutnya, maka setelah terjadi beberapa kali pengulangan, prototype ini akan dapat menjawab kebutuhan.Berdasarkan kebutuhan untuk media ajar, dirancang aplikasi yang dapat menampilkan video dan gambar tokoh wayang, menampilkan evaluasi pembelajaran dengan pilihan ganda.Sistem ini dibangun menggunakan perangkat lunak dengan menggunakan sistem operasi Microsoft Windows 7 Ultimate, Web ServerXampp Server, Web BrowserGoogleChrome, Web EditorAdobe Dreamweaver CS5 danbasis data menggunakan MySQL 5.0. Media ajar ini dibuat untuk 2 pemakai yang mempunyai hak akses yang berbeda yakni Admin dan Siswa sebagai Pengguna. Adminmempunyai hak memanipulasi data wayang baik gambar maupun video juga soal latihan yang ada pada basis data yaitu dapat menambah gambar dan video wayang juga soal latihan, menganti gambar dan video wayang juga soal latihan, dan menghapus gambar dan video wayang juga soal latihan. Sedangkan siswa dapat melihat materi berupa video dan gambar wayang dan memengerjakan soal latihan juga melihat hasilnya.Gambar 5 menunjukkan diagram alir data media ajar wayang.

Gambar 5Data Flow Diagram0Media Ajar

Penguna menegerjakan soal latihan dengan cara memilih jawaban yang dianggap benar, setelah itu jawaban akan dikoreksi aplikasi dan akan terlihat hasil nilai pengerjaan soal. Gambar 6 merupakan ERD dari pengguna mengerjakan soal

Gambar 6Perancangan Entity Relational DiagramMedia Ajar wayang

Nama website ini adalah “Belajar Mahabarata”.Ketika siswa membuka website maka akan terlihat video-video wayang yang diunggah oleh admin. Link Tokoh Wayang digunakan untuk berpindah kehalaman tokoh wayang yang berisi gambar-gambar wayang dan nama wayang tersebut. Link Lihat Top Score digunakan untuk berpindah kehalaman top score untuk melihat 10 besar nilai hasil latihan soal yang sudah dikerjakan. Sedangkan link Latihan Soal digunakan untuk berpidah kehalaman latihan soal yang berguna sebagai bahan evaluasi siswa.

Gambar 7 Halaman Utama

Pada halaman tokoh wayang ditampilkan nama tokoh wayang dan gambar wayang, apabila gambar wayang dipilih maka akan keluar deskripsi dan biografi dari wayang yang terdapat pada halaman deskripsi wayang dapat dilihat pada Gambar 8 Pada bagian video wayang yang terdapat pada Gambar 7akan diganti dengan “Tokoh Wayang”. Link yang ada berfungsi sama seperti pada tampilan video wayang

Gambar 8 Halaman Deskripsi Tokoh wayang

Halaman latihan soal akan menampilkan form yang harus diisi oleh siswa sebelum mengerjakan latihan soal, setelah itu siswa baru bisa mengerjakan soal latihan. Halaman mengerjakan soal latihan berupa latihan pilihan ganda dengan gambar dan soal, namun juga tanpa gambar.Halaman Top Score akanmenampilkan 10 besar siswa yang medapatkan nilai dari soal yang telah dikerjakan sebelumnya.

Tahapan selanjutnya dalam prototype model adalah evaluasi prototype. Setelah prototype dibuat, pengujian dan evaluasi dilakukan untuk mengetahui apa saja yang perlu ditambahkan atau dikurangi dari media ajar ini. Pembuatan media ajar ini menggunakan dua kali evaluasi prototype.Pada prototype pertama fungsi utama untuk menampilkan video dan gambar wayang juga untuk latihan soal, sudah bisa berjalan dengan baik.Tetapi masih banyak kondisi-kondisi yang belum diberi penanganan khusus.Setelah prototype pertama diujikan, hasilnya adalah masih ada beberapa kekurangan yang belum memenuhi kebutuhan pemakai, juga antarmuka yang kurang memudahkan pemakai dalam menggunakan website ini, sehingga terjadi beberapa tambahan seperti penambahan video wayang dan perbaikan antarmuka.

Pada prototype kedua, semua fungsi yang belum dimasukkan, sudah diperbaiki, sehingga website dapat berjalan dengan baik.Hasil dari pengujian prototype kedua ini adalah mengenai desain dan grafis tampilan antarmuka.Pada bagian ini ditambahkan halaman video wayang sebagai halaman utama seperti yang diingkan oleh pengguna. 4. Hasil dan Pembahasan

Prototype pertama pada media ajar ini dapat dilihat pada Gambar 9. Prototype ini terdapat beberapa kekurangan sehingga diperbaiki pada prototype kedua.

Kekurangan-kekurangan pada hanya menampilkan tokoh-tokoh wayang dengan latar belakang warna putih.Kemudian evaluasi menghasilkan pberdasarkan evaluasi dari prototypebelum terlihat pada prototype 10.Beberapa perbaikan dari prototype pertama antara lain penyempurnaan tampilan menggunakan teknologi CSS3. dengan video wayang juga dilengkapi dengan beberapa komponen dalam sesuai dengan evaluasi yang dilakukanditambahkannya latihan soal dan penggunaan koreksi dalam penilaian latihan soal.

Gambar

Terlihat pada Gambar halaman menu awal dan rancangan halaman menu utama, maka pada halaman ini terdapat video wayang dan linkLatihan Soal dan Top Score. Halaman ini menggunakan HTML5 untuk menampilkan video yang diambil dari basisProgram 1 menunjukkan tag HTML5 yang digunakan untuk menampilkan video.

Kode Program 1 Perintah Untuk Menampilkan Video Dari Basis Data

1.

Pada Kode Program 1 dapat dilihat bahwa video diambil dari data yang sebelumnya sudah diunggah oleh admin kedalam directory Videos dan selanjutnya akan ditampilkan dengan menggunakan tag. Tag ini merupakan tag yang sudah disediakan oleh HTML5 untuk memudahkan dalam menampilkan video tanpa menggunakan kode program yang panjang.

Adapun elemen semantic HTML5 pada media ajar ini adalah beberapa tag yang yaitu header, footer,nav dan,article keempat tag ini berfungsi dalam pemanfaatan CSS3 dalam membuat tampilan website.Kode Program2 menunjukkan kode program penggunaan elemen semantic HTML5dalam media ajar mahabarata.

Kode Program 2 Penggunaan Elemen Semantic HTML5

Pembuatan garis tepi yang menggunakan bayangan dan garis lengkung menggunakan teknologi CSS3. Garis tepi yang melengkung pada bagian header article yang merupakan sectioning HTML5 menggunakan teknologi CSS3. Kode

1. 2. 6. 7. 8. Belajar Mahabarata | Media Pembelajaran Online 9. Wayang Mahabarata 10. 12. 13. 14. 15. 16. 17. 18. Video Wayang 19. 20. 21. 22. 23.

Program 3 menunjukkan kode CSS3 untuk pemheaderarticle.

Kode Program 3 Perintah CSS3 Untuk Membuat Garis Tepi Header Melengkung

Halaman tokoh wayang adalah halaman yang menampilkan tokoh wayang

yang terdaftar dalam basis data. Halaman ininama wayang saja saja. Tidak dapat melihat deskripsi wayang tersebut. Jika gambar wayang dipilih, maka akan berpindah ke halaman deskripsi wayang.

Gambar

Gambar11 adalah halaman deskripsi wayang yang berisi nama wayang dan ganbar juga detail biografi dari tokoh wayang tersebut. teknologi CSS3 untuk membuat bagian deskripsi wayang menjadi oval.lainnya adalah halaman mengerjakan soal, pada halaman ini terdapat dan gambar.Radio button ganda.Apabila gambar tidak diberikan oleh guru, maka tampilan gambar menggunakan gambar defaultsoal maka ada tombol jawab untuk melterbuka, maka data akan tersimpan dalam basis data. Halaman halaman detail dari siswa yang mengerjakan latihan soal juga nilai yang didapat siswa tersebut.Halaman Top Scorenilai yang didapat pada setelahdari basis data yang sudah tersimpan.Setelahberdasarkan nilai dari siswa dan yang ditkelas siswa.

Setelah itu dilakukan pdapat berjalan dan apa saja kekurangan dari aplikasi ini. menggunakan teknik black-boxalur eksekusi program, namun cukup memperhatikan apakah fungsi berjalan sesuai dengan yang diharapkan

1. header { 2. -webkit-border- radius: 5px;3. -moz-border-radius: 5px; 4. }

enunjukkan kode CSS3 untuk pembuatan garis tepi melengkung pada

Perintah CSS3 Untuk Membuat Garis Tepi Header Melengkung

Halaman tokoh wayang adalah halaman yang menampilkan tokoh wayang r dalam basis data. Halaman inihanya memperlihatkan gambar dan

nama wayang saja saja. Tidak dapat melihat deskripsi wayang tersebut. Jika , maka akan berpindah ke halaman deskripsi wayang.

Gambar11 Halaman Deskripsi Wayang

adalah halaman deskripsi wayang yang berisi nama wayang dan ganbar juga detail biografi dari tokoh wayang tersebut. Halaman ini menggunakan teknologi CSS3 untuk membuat bagian deskripsi wayang menjadi oval.Halaman

mengerjakan soal, pada halaman ini terdapat radio buttonRadio button merupakan pilihan jawaban berupa pilihan

k diberikan oleh guru, maka tampilan gambar default yang sudah ada.Setelah siswa selesai mengerjakan

soal maka ada tombol jawab untuk melihat hasil koreksi.Ketika halaman ini terbuka, maka data akan tersimpan dalam basis data. Halaman koreksi merupakan halaman detail dari siswa yang mengerjakan latihan soal juga nilai yang didapat

Top Score menampilkan data 10 besar terbaik siswa dari elah mengerjakan soal latihan. Data tersebut diambil

dari basis data yang sudah tersimpan.Setelah itu, data tersebut diurutkan berdasarkan nilai dari siswa dan yang ditampilkan adalah, Nama, No.Absen

Setelah itu dilakukan pengujian untuk mengetahui sejauh mana aplikasi ini n apa saja kekurangan dari aplikasi ini. Pengujian aplikasi

box, yaitu pengujian fungsional tanpa memperhatikan alur eksekusi program, namun cukup memperhatikan apakah fungsi berjalan sesuai dengan yang diharapkan [9].Hal yang diuji dapat dilihat di tabel 2

radius: 5px;

buatan garis tepi melengkung pada

Halaman tokoh wayang adalah halaman yang menampilkan tokoh wayang hanya memperlihatkan gambar dan

nama wayang saja saja. Tidak dapat melihat deskripsi wayang tersebut. Jika

adalah halaman deskripsi wayang yang berisi nama wayang dan menggunakan

alaman radio button

merupakan pilihan jawaban berupa pilihan k diberikan oleh guru, maka tampilan gambar

selesai mengerjakan Ketika halaman ini

merupakan halaman detail dari siswa yang mengerjakan latihan soal juga nilai yang didapat

menampilkan data 10 besar terbaik siswa dari mengerjakan soal latihan. Data tersebut diambil

data tersebut diurutkan ampilkan adalah, Nama, No.Absen,dan

engujian untuk mengetahui sejauh mana aplikasi ini Pengujian aplikasi

, yaitu pengujian fungsional tanpa memperhatikan alur eksekusi program, namun cukup memperhatikan apakah fungsi berjalan

Tabel 2Tabel Pengujian Website Pengujian Hasil yang

diharapkan Hasil

Siswa memutar video yang sudah ada dalam website

Video dapat berputar Video dapat berputar

Siswa Melihat gambar tokoh wayang secara detail dengan memilih gambar wayang

Muncul Halaman detail Gambar

Muncul halaman Detail Gambar

Siswa mengerjakan soal latihan dengan memasukkan identitas siswa sebelumnya

Soal bisa dikerjakan dan keluar hasilnya melalui halaman koreksi.Nilai tersimpan dalam basis data

Soal bisa dikerjakan dan keluar hasilnya melalui halaman koreksi. Nilai tersimpan dalam basis data

Siswa melihat top score dengan memilih link Top Score

10 Besar Nilai dan data siswa dapat terlihat.

10 Besar Nilai dan data siswa dapat terlihat.

Admin Melakukan login Admin bisa login dan mengelola website.

Admin bisa login dan mengelola website.

Admin memasukkan Gambar tokoh wayang dan deskripsinya.

Data tersimpan dalam basis data dan keluar alert data tersimpan

Data tersimpan dalam basis data dan keluar alert data tersimpan

Admin mengubah tokoh wayang

Data berubah sesuai keinginan.

Data berubah sesuai keinginan.

Admin menghapus tokoh wayang

Data Terhapus Data terhapus

Admin memasukkan video wayang.

Data tersimpan dalam basis data dan keluar alert data tersimpan

Data tersimpan dalam basis data dan keluar alert data tersimpan

Admin mengubah video wayang

Data berubah sesuai keinginan.

Data berubah sesuai keinginan.

Admin menghapus video wayang

Data Terhapus Data terhapus

Admin memasukkan soal latihan

Data tersimpan dalam basis data dan keluar alert data

Data tersimpan dalam basis data dan keluar alert data tersimpan

tersimpan

Admin mengubah soal latihan

Data berubah sesuai keinginan.

Data berubah sesuai keinginan.

Admin menghapus soal latihan

Data Terhapus Data terhapus

Admin melihat daftar nilai melalui halaman nilai.

Nilai siswa dapat terlihat

Nilai siswa dapat terlihat

Pada pengujianmanfaatdilakukan dengan cara mengambil 30 responden

sebagai sampel. Sampel adalah sekelompok kecil yang secara nyata kita teliti dan tarik kesimpulan dari padanya[10]. Penelitian hanya dilakukan terhadap sekelompok anggota populasi yang mewakili populasi.Populasi adalah wilayah generalisasi yang terdiri atas obyek/subyek yang mempunyai kualitas dan karakteristik tertentu yang ditetapkan oleh peneliti untuk dipelajari dan kemudian ditarik kesimpulannya[11]. Pengambilan sample ini didasarkan pada website yang dibangun, menggunakan metode random sampling. Pengujian dimulai dengan pengarahan dalam penggunaan website kepada responden kemudian dilanjutkan dengan mencoba dan memberikan penilaian website dengan cara menjawab 2 pertanyaan kuisioner yang telah disediakan. Pengujian dilakukan dengan cara penghitungan menggunakan skala Likert. Penghitungan ini dilakukan untuk menghitung skala variabel, masing-masing jawaban diberi skala skor 1-4 dengan rincian sebagai berikut:

• Sangat Setuju (SS) = 4 • Setuju (S) = 3 • Tidak Setuju = 2 • Sangat Tidak Setuju = 1

Skala likert biasanya menggunakan 5 skala skor dengan peryataan netral sebagai nilai tenga. Namun penelitian ini menggunakan skala likert dengan 4 skala skor. Penggunan 4 skala skor dikarenakan agar responden memberikan perspekif dengan pilihan yang pasti tanpa adanya nilai tengah[12].

Penghitunganprosentase untuk masing-masing kategori jawaban digunakan rumus: P = F/N x 100%, dimana P adalah prosentase data, F adalah frekuensi/jumlah data, dan N adalah jumlah responden [13].Berikut hasil analisis dari masing-masing subyek pemeriksaan.

a. Website memberikan informasi yang berguna sebagai pelestarian wayang

mahabarata. Tabel 3Analisa Data Kuesioner Pertanyaan Nomor Satu

Skala (S)

Hasil Pemeriksaan

Jumlah (F)

Prosentase (P=F/N x

100%) N=30

4 Sangat Setuju 7 23.3%

3 Setuju 23 76.7%

2 Tidak Setuju 0 0%

1 Sangat Tidak Setuju

0 0%

Jumlah 30 100%

b. Video yang ditampilkan dapat berjalan dengan baik. Tabel 4Analisa Data Kuesioner Pertanyaan Nomor Dua

Skala (S)

Hasil Pemeriksaan

Jumlah (F)

Prosentase (P=F/N x

100%) N=30

4 Sangat Setuju 7 23.3%

3 Setuju 22 73.4%

2 Tidak Setuju 1 3.3%

1 Sangat Tidak Setuju

0 0%

Jumlah 30 100%

Cara untuk memudahkan penafsiran terhadap prosentase yang diolah maka digunakan parameter penaksiran sebagai berikut :0 % = tidak satu pun, 1-25% = sebagian kecil, 26-49% = hampir setengahnya 50% = setengahnya, 51-75% = sebagian besar, 76-99% = hampir seluruhnya, 100% = seluruhnya [15].Berdasarkan pada hasil tersebut dapat disimpulkanseluruhnya setuju bahwa website juga memberikan informasi yang berguna sebagai pelestarian wayang Mahabarata terbukti dengan 76,7% responden menyatakan setuju dengan pernyataan tersebut. Kesimpulan lainnya berdasarkan pada prosentase jawaban menyatakan sebagian besar (73.4%) setuju dengan pernyataan bahwa video yang ditampilkan dapat berjalan dengan baik juga membuktikan video yang nantinya akan digunakan sebagai media pembelajaran dapat berjalan dengan baik. Pengujian lainnya dilakukan dengan mencobakan website kepada guru mata pelajaran bahasa jawa dalam hal ini adalah SMP Stella Matutina, setelah itu diajukan wawancara dan mencapatkan hasil bahwa madia ajar ini dapat digunakan sebagai salah satu media ajar di Sekolah sebagai alat pelestarian budaya wayang mahabarata. 5. Simpulan

Website pembelajaran juga dapat membantu siswa untuk belajar mandiri.Penggunaan video dalam media ajar juga dapat berjalan dengan baik. Sehingga dapat disimpulkan bahwa penggunaan HTML5 dan CSS3 dalam media ajar dapat membuat video dan grafis dapat ditampilkan dengan baik. Sehingga media ajar dapat digunakan disekolah-sekolah sebagi salah satu sarana dalam pelestarian budaya wayang mahabarata.

Saran pengembangan website ini adalah ditambahnya sarana untuk siswa bercakap-cakap dengan guru secara online. Penambahan fasilitas lain seperti materi menggunakan file pdf. Disarankan juga untuk mengembangkan penelitian ini kedalam media mobile seperti Smartphone, Blackberry maupun media mobile lainnya. 6. Daftar Pustaka [1] Rochmawati,dkk..2011.Sistem Pembelajaran Online Pada Sekolah Menengah

Pertama (SMP) Berbasis Web (Studi Kasus: SMPN 284 JAKARTA).http://ebookbrowse.com/jurnal-pa-sistem-pembelajaran-online-pada-sekolah-menengah-pertama-berbasis-web-pdf-d349292678 diakses tanggal 12 April 2013

[2] Dinata,dkk. 2010. Pembuatan Aplikasi Tampilan Utama dalam Sistem Antrian Layanan Nasabah di Bank berbasis Web Dengan Memanfaatkan HTML 5.Bali : Konferensi Nasional Sistem dan Informatika 2010

[3] Nugroho, Andi Taru .2012.Pemrograman Game Berbasis Web Menggunakan Javascript + HTML5.Yogyakarta : Penerbit Andi.

[4] Lubbers, Peter, dkk.2011. Pro HTML5 Programming 2nd Edition.California :Appress.

[5] Irawan, Diky. 2012. Cascading Style Sheet (CSS).http://www.ummi.ac.id/ti/detail_jurnal.php?page=ZGV0YWlsX2p1cm5hbHBocA==&no=VGtSVlBRPT0=.Diakses Tanggal 1 April 2013

[6] Aripin, 2010. Pembelajaran Berbasis Web. Universitas Pendidikan Indonesia. [7] Sinurat, Sunardy Iwan Sahputra, dkk.2012.Implementasi Media Pembelajaran

Interaktif Sekolah Dasar Kelas 5 IPA Dan IPS Menggunakan HTML 5. Jurnal Sistem Informasi Vol 1 September 2012.

[8] Pressman, S. Roger. 1995. Software Engineering.New York : McGraw-Hil. [9] Nandiwardhana, Indrayasa.2011. Pengembangan Physics Game “FIX and

FIT” Berbasis Android Smartphone Menggunakan ActionScript 3.0 dan QuickBox2D.AITI : FTI Jurnal Teknologi Informasi. 8(2) 117-132

[10] Sukmadinata, Nana Syaodih 2008, Metode Penelitian Pendidikan, Bandung: Remaja Rosdakarya

[11] Sugiyono, 2009, Statistika Untuk Penelitian, Bandung: Alfabet [12] Garland, Ron, 1991,The Mid-Point on a Rating Scale: Is it Desirable?.

Marketing Bulletin, 1991, 2, 66-70, Research Note 3 [13] Warsito, Hermawan. 1992. Pengantar Metodologi Penelitian. Jakarta:

GramediaPustaka Utama