T1 672008306 Full text
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
hendry.honk@gmail.com3)adriyanto.j@gmail.com
2)
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
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
2
1. Pendahuluan
Wayang merupakan kesenian
k
asli Indonesia yang sudah diresmi
smikan
sebagai warisan budaya dunia/
ia/internasional sejak tahun 2003 oleh UNESCO
O jauh
lebih dulu daripada Batik, K
Keris, dan Angklung dipatenkan.Pelestarian bud
budaya
wayang haruslah dilakukan karena
ka
wayangjuga merupakan salah satu keka
kayaan
budaya bangsa yang sarat deng
engan nilai edukatif, informasi dan hiburan. Nilai--nilai
edukatif dalam wayang dapat
at dilakukan
d
melalui pembelajaran disekolah.
Permasalahan yang di
dihadapi dalam pelestarian budaya wayang adalah
ad
minimnya keberadaan media
ia ajar
a wayang yang terdapat di Indonesia.Keberad
radaan
media ajar wayang yang terda
rdapat pada intenet sebagai salah satu cara pelesta
starian
budayawayang melalui pen
endidikan dapat dikatakan kurang. Gamba
mbar 1
menunjukkan pencarian website
web
dengan kata kunci “media ajar way
ayang
mahabarata” pada situs penca
cari www.google.com menghasilkan 142.000web
ebsite,
namun setelah dilusuri tidak
k ada
a satupun website yang dapat digunakan seb
sebagai
media ajar wayang mahabarata
ata.
Gamba
bar 1Pencarian Website Sebagai Media Ajar
Penelusuran selanjutny
tnya dilakukan untuk mencari bahan ajar way
ayang
mahabarata yang dilakukan dengan
de
cara mengganti kata kunci menjadi bahan
an ajar
wayang mahabarata. Hasil yan
ang didapat adalah 83.300 website ditemukan na
namun
tidak ada satupun website yang
y
dapat digunakan sebagai bahan ajar way
ayang
mahabarata. Gambar 2 menunj
unjukkan penelusuran website sebagai bahan ajar.
r.
Gamba
bar 2 Pencarian Website Sebagai Bahan Ajar
Permasalahan lainnya
ya adalah keberadaan video yang tersedia diinte
internet
sebagai bahan ajar juga menyulitkan
men
dalam mempelajari wayang mahaba
barata.
Siswa harus melihat ataupu
pun mengunduh video yang terdapat padaa situs
youtube.com dengan cara mencari
men
menggunakan kata kunci wayang mahaba
barata.
Tidak ada website ataupun media
me
ajar yang menampilkan video wayang se
secara
khusus sehingga dapat digunak
nakan sebagai bahan ajar. Masalah lain yang diha
ihadapi
adalah keterbatasan buku bac
acaan dan sumber lain mengenai kisah mahaba
barata.
Perpustakaan Nasional Repub
ublik Indonesia bahkan tidak memuat bacaan tentang
ten
wayang mahabarata. Gambar
ar 3 merupakan hasil pencarian bacaan yang memu
memuat
tentang wayang mahabarataa yang
y
terdapat pada website Perpustakaan Nasi
asional
Republik Indonesia.
Gambar 3 Pencarian BahanBacaan Wayang Mahabarata
Penenitian ini mengha
hasilkan sebuah website sebagai media ajar way
ayang
mahabarata. Teknologi yang
ya
digunakan adalah HTML5 dan C
CSS3.
ElemenHTML5 yang digunak
akan untuk membantu penelitian ini adalah HTM
TML5
Multimedia yang digunakan
kan untuk memasukkan video dan audio ta
tanpa
menggunakan script yang pan
anjang. Elemen lain yang digunakan dalam penel
nelitian
ini adalah dapat menggunaka
kan CSS. CSS3 juga merupakan perkembangan
an dari
teknologi sebelumya.CSS3 dapat
da
membantu dalam menetukan tampilan suatu
s
bagian yang sama pada setiap
iap halaman website tanpa perlu melakukan penul
nulisan
kode program secara berulan
lang-ulang untuk menampilkan tampilan yang sa
sama.
Adanya semua teknologi inii akan
a
diteliti bagaimana memanfaatkan HTML5
L5 dan
CSS3 dalammembuat sebuah
h website Wayang Mahabarata.
2. Tinjauan Pustaka
Penelitian terdahulu menjelaskan
me
tentang sistem Pembelajaran Online
ineakan
memudahkan siswa untuk melengkapi
mele
materi pembelajaran yang diterima sisw
iswa di
dalam kelas, jika siswa kuran
rang memahami materi pelajaran yang diberika
ikan di
kelas atau ingin belajar lagi
lag di rumah, siswa bisa megakses pembelaj
lajaran
online.Sistem ini berisi soall latihan
la
atau soal ujian mengunduh materi pelaja
lajaran,
serta informasi dan berita yang
ang ditujukan untuk siswa. Hadirnya sistem ini,, ssiswa
akan lebih semangat dan leb
lebih aktif dengan pembelajaran di sekolah mau
maupun
diluar sekolah dengan menggu
gunakan media internet. Sistem Pembelajaran On
Online
di SMPN 284 Jakarta Timu
imur dapat membantu siswa dalam meleng
ngkapi
pembelajaran di sekolah deng
ngan konsep online sehingga siswa diharapkann lebih
l
aktif dan rajin dalam pembelaj
lajaran baik di sekolah maupun dirumah.[1]
Penelitian terdahulu lainnya
lai
menjelaskan tentang cara pembuatan seb
sebuah
sistem antrian layanan dibank
ank menggunakan sebuah teknologi yaitu HTM
ML 5.
HTML5 adalah sebuah standa
dard baru untuk HTML.Pembuatan multimedia da
dalam
script HTMLmenggunakann HTML5, dapat dikatakan lebih mudahh dan
hasilnyapun lebih interaktif[2]
[2].
Penelitian yang dilak
akukan ini memiliki perbedaan dengan penel
nelitian
terdahulu yaitu penggunaann HTML5
H
dalam pembuatan media ajaronline yang
membedakan dengan penelit
litian yang dilakukan oleh Rochmawati.Perbed
bedaan
lainnya adalah penelitian ini tidak hanya menggunakan HTML5, tetapii juga
CSS3.Penelitian yang dilakuk
ukan adalah merancang sebuah website yang ddapat
digunakan sebagai media ajar
jar sebagai salah satu cara pelestarian budaya way
ayang
diIndonesia.
Penelitian ini menggu
ggunakan teknologi HTML5.Perkembangan HTML
HT
ditandai dengan adanya HTML5
HT
sebagai penerus versi sebelumnya yyaitu
HTML4.HTML5 sendiri mu
muncul dengan harapan dapat menangani anim
nimasi
dengan gambar pada web bro
rowser tanpa tergantung pada jenis browser terte
ertentu,
serta tanpa memerlukan insta
stalasi perangkat lunak tambahan. Pada HTML5
L5 ada
beberapa tag baru yang tidakk ada
a pada HTML4.
Ada banyak elemen yang
ya disediakan oleh HTML5, yaitu : HTML55 New
Tags, HTML 5 Multimedia (V
Video dan Audio), HTML5 Graphics (Canvas,, S
SVG,
CSS, 2D/3D), HTML5 Applic
plications (Local data Storage), Semantic Eleme
ments ,
HTML5 Forms, CSS3 Suppo
pport [3]. Logo untuk masing-masing elemen ddapat
dilihat pada Gambar 4.
Gambar 4 Elemen HTML5[3]
HTML5 akan mempe
permudah dalam pembuatan multimedia dann juga
dalam penanganan dalam
m pembuatan kode untuk mengubah tamp
mpilan
menggunakan teknologi CSS
S yang digunakan adalah teknlogi CSS3. Elemen
men ini
disebut sebagai sectioning yang
ya merupakan bagian dari elemen HTML55 yyaitu
Semantics.Elemen Semantics akan mempermudah dalam membuat desain web
website
menggunakan teknologi CSS
S [4]. Tabel 1 menjelaskan elemen sectioning baru
yang ada pada HTML5.
Tabel 1 Elemen Sectioning HTML5 [4]
Elemen Sectioning
Header
Footer
Section
Article
Nav
Keterangan
Header konten ( baik untuk seksi
maupun halaman website)
Footer konten ( baik untuk seksi
maupun halaman website)
Seksi/bagian dari website
Artikel tersendiri dalam website
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.
Gambar 9 Antarmuka
Kekurangan-kekuranga
gan pada prototype pertama pada antarmuka ad
adalah
hanya menampilkan tokoh-to
tokoh wayang dengan latar belakang warna putih.
p
Kemudian evaluasi menghas
asilkan prototype kedua yang telah dikembang
angkan
berdasarkan evaluasi dari prototype
pro
pertama. Pengunaan elemen semantic
ticjuga
belum terlihat pada prototyp
type pertama.Prototype kedua terlihat pada Gam
ambar
10.Beberapa perbaikan dari
ri prototype pertama antara lain penyempurn
urnaan
tampilan menggunakan tekno
nologi CSS3. Prototype ini juga sudah dileng
ngkapi
dengan video wayang juga dilengkapi
dil
dengan beberapa komponen dalam web
website
sesuai dengan evaluasi yang
ng dilakukan sebelumnya. Perbaikan lainnyaa juga
ditambahkannya latihan soal
al dan penggunaan koreksi dalam penilaian lat
latihan
soal.
Gambar10
G
Halaman Utama
Terlihat pada Gamba
mbar 10 yang merupakan gabungan dari rancan
cangan
halaman menu awal dan ranca
cangan halaman menu utama, maka pada halama
man ini
terdapat video wayang dan link-link
lin
navigasi yaitu Home, Tokoh-tokoh Way
ayang,
Latihan Soal dan Top Sco
core. Halaman ini menggunakan HTML5 uuntuk
menampilkan video yang dia
diambil dari basis data yang sudah tersimpan.. Kode
K
Program 1 menunjukkan tag HTML5
H
yang digunakan untuk menampilkan video.
vid
Kode Program 1 Perintah Untuk Menampilkan
M
Video Dari Basis Data
1.
2.
3.
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
hendry.honk@gmail.com3)adriyanto.j@gmail.com
2)
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
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
3
Staff Pengajar Fakultas Teknologi Informasi Universitas Kristen Satya Wacana
2
1. Pendahuluan
Wayang merupakan kesenian
k
asli Indonesia yang sudah diresmi
smikan
sebagai warisan budaya dunia/
ia/internasional sejak tahun 2003 oleh UNESCO
O jauh
lebih dulu daripada Batik, K
Keris, dan Angklung dipatenkan.Pelestarian bud
budaya
wayang haruslah dilakukan karena
ka
wayangjuga merupakan salah satu keka
kayaan
budaya bangsa yang sarat deng
engan nilai edukatif, informasi dan hiburan. Nilai--nilai
edukatif dalam wayang dapat
at dilakukan
d
melalui pembelajaran disekolah.
Permasalahan yang di
dihadapi dalam pelestarian budaya wayang adalah
ad
minimnya keberadaan media
ia ajar
a wayang yang terdapat di Indonesia.Keberad
radaan
media ajar wayang yang terda
rdapat pada intenet sebagai salah satu cara pelesta
starian
budayawayang melalui pen
endidikan dapat dikatakan kurang. Gamba
mbar 1
menunjukkan pencarian website
web
dengan kata kunci “media ajar way
ayang
mahabarata” pada situs penca
cari www.google.com menghasilkan 142.000web
ebsite,
namun setelah dilusuri tidak
k ada
a satupun website yang dapat digunakan seb
sebagai
media ajar wayang mahabarata
ata.
Gamba
bar 1Pencarian Website Sebagai Media Ajar
Penelusuran selanjutny
tnya dilakukan untuk mencari bahan ajar way
ayang
mahabarata yang dilakukan dengan
de
cara mengganti kata kunci menjadi bahan
an ajar
wayang mahabarata. Hasil yan
ang didapat adalah 83.300 website ditemukan na
namun
tidak ada satupun website yang
y
dapat digunakan sebagai bahan ajar way
ayang
mahabarata. Gambar 2 menunj
unjukkan penelusuran website sebagai bahan ajar.
r.
Gamba
bar 2 Pencarian Website Sebagai Bahan Ajar
Permasalahan lainnya
ya adalah keberadaan video yang tersedia diinte
internet
sebagai bahan ajar juga menyulitkan
men
dalam mempelajari wayang mahaba
barata.
Siswa harus melihat ataupu
pun mengunduh video yang terdapat padaa situs
youtube.com dengan cara mencari
men
menggunakan kata kunci wayang mahaba
barata.
Tidak ada website ataupun media
me
ajar yang menampilkan video wayang se
secara
khusus sehingga dapat digunak
nakan sebagai bahan ajar. Masalah lain yang diha
ihadapi
adalah keterbatasan buku bac
acaan dan sumber lain mengenai kisah mahaba
barata.
Perpustakaan Nasional Repub
ublik Indonesia bahkan tidak memuat bacaan tentang
ten
wayang mahabarata. Gambar
ar 3 merupakan hasil pencarian bacaan yang memu
memuat
tentang wayang mahabarataa yang
y
terdapat pada website Perpustakaan Nasi
asional
Republik Indonesia.
Gambar 3 Pencarian BahanBacaan Wayang Mahabarata
Penenitian ini mengha
hasilkan sebuah website sebagai media ajar way
ayang
mahabarata. Teknologi yang
ya
digunakan adalah HTML5 dan C
CSS3.
ElemenHTML5 yang digunak
akan untuk membantu penelitian ini adalah HTM
TML5
Multimedia yang digunakan
kan untuk memasukkan video dan audio ta
tanpa
menggunakan script yang pan
anjang. Elemen lain yang digunakan dalam penel
nelitian
ini adalah dapat menggunaka
kan CSS. CSS3 juga merupakan perkembangan
an dari
teknologi sebelumya.CSS3 dapat
da
membantu dalam menetukan tampilan suatu
s
bagian yang sama pada setiap
iap halaman website tanpa perlu melakukan penul
nulisan
kode program secara berulan
lang-ulang untuk menampilkan tampilan yang sa
sama.
Adanya semua teknologi inii akan
a
diteliti bagaimana memanfaatkan HTML5
L5 dan
CSS3 dalammembuat sebuah
h website Wayang Mahabarata.
2. Tinjauan Pustaka
Penelitian terdahulu menjelaskan
me
tentang sistem Pembelajaran Online
ineakan
memudahkan siswa untuk melengkapi
mele
materi pembelajaran yang diterima sisw
iswa di
dalam kelas, jika siswa kuran
rang memahami materi pelajaran yang diberika
ikan di
kelas atau ingin belajar lagi
lag di rumah, siswa bisa megakses pembelaj
lajaran
online.Sistem ini berisi soall latihan
la
atau soal ujian mengunduh materi pelaja
lajaran,
serta informasi dan berita yang
ang ditujukan untuk siswa. Hadirnya sistem ini,, ssiswa
akan lebih semangat dan leb
lebih aktif dengan pembelajaran di sekolah mau
maupun
diluar sekolah dengan menggu
gunakan media internet. Sistem Pembelajaran On
Online
di SMPN 284 Jakarta Timu
imur dapat membantu siswa dalam meleng
ngkapi
pembelajaran di sekolah deng
ngan konsep online sehingga siswa diharapkann lebih
l
aktif dan rajin dalam pembelaj
lajaran baik di sekolah maupun dirumah.[1]
Penelitian terdahulu lainnya
lai
menjelaskan tentang cara pembuatan seb
sebuah
sistem antrian layanan dibank
ank menggunakan sebuah teknologi yaitu HTM
ML 5.
HTML5 adalah sebuah standa
dard baru untuk HTML.Pembuatan multimedia da
dalam
script HTMLmenggunakann HTML5, dapat dikatakan lebih mudahh dan
hasilnyapun lebih interaktif[2]
[2].
Penelitian yang dilak
akukan ini memiliki perbedaan dengan penel
nelitian
terdahulu yaitu penggunaann HTML5
H
dalam pembuatan media ajaronline yang
membedakan dengan penelit
litian yang dilakukan oleh Rochmawati.Perbed
bedaan
lainnya adalah penelitian ini tidak hanya menggunakan HTML5, tetapii juga
CSS3.Penelitian yang dilakuk
ukan adalah merancang sebuah website yang ddapat
digunakan sebagai media ajar
jar sebagai salah satu cara pelestarian budaya way
ayang
diIndonesia.
Penelitian ini menggu
ggunakan teknologi HTML5.Perkembangan HTML
HT
ditandai dengan adanya HTML5
HT
sebagai penerus versi sebelumnya yyaitu
HTML4.HTML5 sendiri mu
muncul dengan harapan dapat menangani anim
nimasi
dengan gambar pada web bro
rowser tanpa tergantung pada jenis browser terte
ertentu,
serta tanpa memerlukan insta
stalasi perangkat lunak tambahan. Pada HTML5
L5 ada
beberapa tag baru yang tidakk ada
a pada HTML4.
Ada banyak elemen yang
ya disediakan oleh HTML5, yaitu : HTML55 New
Tags, HTML 5 Multimedia (V
Video dan Audio), HTML5 Graphics (Canvas,, S
SVG,
CSS, 2D/3D), HTML5 Applic
plications (Local data Storage), Semantic Eleme
ments ,
HTML5 Forms, CSS3 Suppo
pport [3]. Logo untuk masing-masing elemen ddapat
dilihat pada Gambar 4.
Gambar 4 Elemen HTML5[3]
HTML5 akan mempe
permudah dalam pembuatan multimedia dann juga
dalam penanganan dalam
m pembuatan kode untuk mengubah tamp
mpilan
menggunakan teknologi CSS
S yang digunakan adalah teknlogi CSS3. Elemen
men ini
disebut sebagai sectioning yang
ya merupakan bagian dari elemen HTML55 yyaitu
Semantics.Elemen Semantics akan mempermudah dalam membuat desain web
website
menggunakan teknologi CSS
S [4]. Tabel 1 menjelaskan elemen sectioning baru
yang ada pada HTML5.
Tabel 1 Elemen Sectioning HTML5 [4]
Elemen Sectioning
Header
Footer
Section
Article
Nav
Keterangan
Header konten ( baik untuk seksi
maupun halaman website)
Footer konten ( baik untuk seksi
maupun halaman website)
Seksi/bagian dari website
Artikel tersendiri dalam website
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.
Gambar 9 Antarmuka
Kekurangan-kekuranga
gan pada prototype pertama pada antarmuka ad
adalah
hanya menampilkan tokoh-to
tokoh wayang dengan latar belakang warna putih.
p
Kemudian evaluasi menghas
asilkan prototype kedua yang telah dikembang
angkan
berdasarkan evaluasi dari prototype
pro
pertama. Pengunaan elemen semantic
ticjuga
belum terlihat pada prototyp
type pertama.Prototype kedua terlihat pada Gam
ambar
10.Beberapa perbaikan dari
ri prototype pertama antara lain penyempurn
urnaan
tampilan menggunakan tekno
nologi CSS3. Prototype ini juga sudah dileng
ngkapi
dengan video wayang juga dilengkapi
dil
dengan beberapa komponen dalam web
website
sesuai dengan evaluasi yang
ng dilakukan sebelumnya. Perbaikan lainnyaa juga
ditambahkannya latihan soal
al dan penggunaan koreksi dalam penilaian lat
latihan
soal.
Gambar10
G
Halaman Utama
Terlihat pada Gamba
mbar 10 yang merupakan gabungan dari rancan
cangan
halaman menu awal dan ranca
cangan halaman menu utama, maka pada halama
man ini
terdapat video wayang dan link-link
lin
navigasi yaitu Home, Tokoh-tokoh Way
ayang,
Latihan Soal dan Top Sco
core. Halaman ini menggunakan HTML5 uuntuk
menampilkan video yang dia
diambil dari basis data yang sudah tersimpan.. Kode
K
Program 1 menunjukkan tag HTML5
H
yang digunakan untuk menampilkan video.
vid
Kode Program 1 Perintah Untuk Menampilkan
M
Video Dari Basis Data
1.
2.
3.