1. Pendahuluan Perkembangan dan pengembangan website saat ini sangat cepat. Website dikembangankan dari berbagai sisi seperti bentuk, tamplate, desain editor dan tampilan. Bahasa pemrograman yang digunakan juga mengalami perubahan seperti HTML (Hypertext Markup Language). Saat ini W3C (World Wide Web Consorsium) sedang dalam proses pembangunan HTML5. HTML5 menggantikan standardisasi bahasa HTML, XHTML, dan HTML DOM.[1] Keistimewaan HTML5 antara lain adalah fitur canvas yang berfungsi untuk menggambar dengan menggunakan javascript, tanpa menggunakan plug-ins[2]. Fitur canvas dari HTML5 tidak membutuhkan instalasi perangkat pihak ketiga. Selain itu, HTML5 juga memiliki fitur untuk melakukan drag-and-drop, serta memainkan musik dan video. Dengan perkembangan teknologi ini juga mengakibatkan pembelajaran Bahasa Inggris dasar tidak lagi dilakukan oleh anak-anak dengan mengikuti sistem pembelajaran yang konvensional, yang mengharuskan untuk hadir di kelas pada jam-jam tertentu tapi lebih fleksibel karena pembelajaran bahasa inggris sudah bersifat online atau berbasis web.[3]. Faktanya anak usia pre-school saat ini sudah menggunakan tablet Pc seperti ipad yang memudahkan mereka untuk melakukan proses pembelajaran bahasa inggris dasar tanpa dibatasi ruang dan waktu. Masalah lain yang ada yaitu banyak website yang tidak interaktif dan kurang menarik, yang biasanya hanya berupa tulisan-tulisan yang dapat membuat siswa jenuh. Sebuah website sebagai media pembelajaran membutuhkan tampilan yang lebih animatif, menarik dan dapat membantu siswa memahami materi khususnya Bahasa Inggris dasar dengan benar dan cepat. Pengoprasian pembelajaran bahasa inggris dasar berbasis web juga harus mudah karena penggunanya adalah anak pre-school. Untuk itu penulis menggunakan HTML5 dalam membangun sebuah media pembelajaran bahasa inggris dasar berbasis web, karena keunggulan HTML5 dengan fitur canvas-nya dalam pembuatan animasi , tidak tergantung pada plug-ins dalam pengoprasiannya, serta dapat di jalankan di berbagai tablet Pc dan smartphone dan diberbagai browser.
2. Tinjauan Pustaka 2.1 Penelitian Terdahulu Media pembelajaran asinkronus berbasis web sebagai media alternatif pembelajaran matematika dijenjang sekolah dasar merupakan hasil penelitian dari I Nyoman Sukajaya yang mengimplementasikan rancangan pembelajaran matematika SD kelas 4 menggunakan skrip ASP dengan bahasa pemrograman Visual Basic 6.0. Pengimplementasian perangkat lunak pembelajaran matematika berbasis web yang dibangun, bertujuan untuk menghasilkan rancangan dan implementasi media alternatif pembelajaran matematika di SD yang mampu mengatasi hambatan klasik pada pembelajaran tradisional, yakni dimensi ruang dan waktu. Rancangan pembelajaran ini menganut sistem basis data sebagai pusat
3
pengetahuan yang diimplementasikan melalui simulasi client-server pada sebuah Personal Computer. Basis data pengetahuan dikelola melalui paket aplikasi Microsoft Acces. [4] Penelitian terbaru dari Strategy Analytics, menyatakan bahwa penjualan smartphone yang mengadopsi HTML5 akan terus meningkat pada tahun 2011 sampai 2013 mendatang. HTML5 telah dengan cepat menjadi teknologi tinggi yang membantu pertumbuhan smartphone, fitur ponsel, tablet, notebook, PC desktop, televisi dan kendaraan. Pertumbuhan untuk HTML5 didorong oleh permintaan yang kuat dari beberapa vendor hardware dan pengembang perangkat lunak di Amerika Utara, Eropa dan Asia yang ingin mengembangkan layanan media yang kaya di beberapa platform, termasuk perusahaan seperti Adobe, Apple, Google dan Microsoft." Salah satu smartphone yang mengusung teknologi HTML5 adalah iPone 4S. [5] Dari dua penelitian terdahulu yang sudah ada, muncul pemikiran untuk menggabungkan antara HTML5 dengan media pembelajaran berbasis web, karena melihat media pembelajaran berbasis web masih dibangun dengan menggunakan visual basic 6.0. Media pembelajaran yang dipilih untuk menunjang penggunaan HTML5 yang dapat dijalankan disemua platform yang ada, adalah media pembelajaran bahasa inggris dasar. Media pembelajaran bahasa inggris berbasis web yang dibangun menggunakan HTML5 akan memberikan kemudahan dalam pembuatan web maupun kemudahan dalam pengoprasiannya.
2.2 Konsep Dasar Web Secara terminology ,website adalah kumpulan dari halaman-halaman situs yang biasa terrangkum dari sebuah domain atau subdomain, yang tempatnya berada di World Wide Web di internet.[6] Website merupakan kumpulan halaman yang menampilkan informasi data, teks, gambar, data animasi, suara dan gabungan dari semuanya, baik yang bersifat dinamis maupun yang bersifat statis yang membentuk suatu rangkaian bangunan yang saling terkait dengan jaringan-jaringan halaman atau Hyperlink. 2.3 Media Pembelajaran Media pembelajaran secara umum adalah alat bantu dalam proses belajarmengajar. Jenis media pembelajaran dapat di kalasifikasikan secara umum menjadi media visual, media audio dan media audio-visual.[7] Media visual terbagi dalam 2 jenis yaitu media yang tidak dapat diproyeksikan dan media yang dapat diproyeksikan. Media yang tidak dapat di proyeksikan adalah media yang tidak membutuhkan alat bantu seperti proyektor atau layar untuk menyampaikan materi.
4
Ada banyak media yang tidak dapat diproyeksikan contohnya media benda nyata, media model dan media visual. Transparansi OHP atau proyektor merupakan contoh dari media yang dapat di proyeksikan dimana kedua alat ini membutuhkan alat bantu seperti layar dan proyektor dalam menyampaikan materi. Media audio terbagi menjadi 2 jenis yaitu radio dan kaset-audio. Radio merupakan perlengkapan elektronika yang dapat digunakan untuk mendengarkan berita yang bagus dan aktual dan dapat mengetahui beberapa kejadian dan peristiwa-peristiwa penting dan baru. Kaset Audio yang sering digunakan di sekolah memiliki keuntungan yaitu merupakan media yang ekonomis karena biaya pengadaan dan perawatan murah. Media Audio-Visual adalah media yang paling baru dan paling efektif dan efisien karena menggabungan media audio dan visual.Media ini terbagi menjadi 2 yaitu media video dan media komputer. Media video berupa film banyak dikembangkan untuk keperluan pembelajaran dan biasa dikemas dalam bentuk VCD. Media komputer dan internet memiliki kelebihan yaitu mampu menampilkan teks, gerak, suara dan gambar, komputer juga dapat digunakan secara interaktif dalam dua arah, bahkan komputer yang terhubung dengan internet dapat memberikan keleluasaan dan pemahaman tentang materi yang lebih baik dan cepat. 2.4 Pembelajaran Bahasa Inggris Dasar Pre-school Pre-school bukan hanya dapat dilakukan di sekolah, tetapi dapat juga di lakukan di rumah. Maria Herlina Limyati, M.Si, P.Si, dalam salah satu pernyataannya yang di muat di situs lifestyle.okezone.com menyatakan bahwa seorang anak sesungguhnya dapat merasakan suasana pre-school di dalam rumah. Ada pendekatan pembelajaran yang dapat dilakukan oleh orang tua yaitu pendekatan montessori dan high.[8] Montessori mengajarkan kepada anak pentingnya semua makhluk hidup. Selain membaca , bahasa dan matematika, anak juga diajarkan budaya, binatang, dan tumbuhan. Pendekatan montessori cocok untuk anak yang ingin merasakan lingkungan belajar sesuai yang dibutuhkan mereka. Ada 5 fokus tentang pendekatan montessori seperti: a. Kehidupan Praktis adalah mengajarkan bagaimana anak menjalani kehidupan sehari-harinya. Contohnya mengikat sepatu, menyiapkan makan dan minum dan mandi. b. Kesiapan indra adalah mengajarkan anak berlatih panca indranya, contohnya mengajarkan anak di luar rumah. c. Bahasa dan seni adalah mengajarkan anak tentang penguasaan bahasa dan seni. Fokus ini dapat dilakukan dengan mendengarkan musik kepada anak, dan untuk mengasah kemampuan bahasanya bisa dimulai dengan
5
memperkenalkan dengan kosa kata yang dapat disajikan dalam bentuk permainan gambar dan kata. d. Matematika dilakukan dengan mengenalkan angka. Selain di ajarkan dengan gambar dan permainan. Pembelajaran dapat dilakukan dengan mengajak anak beraktifitas di luar. e. Budaya mengajarkan tentang budasa bangsa kepada anak pre-school. Ini dapat dilakukan dengan mendengarkan musik daerah kepada anak dan juga dapat dilakukan dengan memutar film animasi yang bertemakan cerita rakyat Indonesia.
2.5 Pembelajaran Berbasis Web Pembelajaran berbasis web merupakan suatu kegiatan pembelajaran yang memanfaatkan media situs web yang bisa di akses melalui jaringan internet. Pembelajaran berbasis web merupakan salah satu jenis penerapan dari pembelajaran e-learning. [9]. Fungsi dan manfaat dari pembelajaran berbasis web antara lain: a. Access is available anytime, anywhere, around the globe. Artinya adalah dengan adanya internet sebagai sarana komunikasi 2 arah yang sangat banyak digunakan, saat ini seorang peserta didik memiliki akses yang besar terhadapt informasi apapun, termasuk informasi pembelajaran. Dengan adanya koneksi internet pada laptop, komputer, telepon genggam, atau koneksi internet di sarana umum, siswa dapat melakukan pembelajaran dimana saja. b. Pre-student equipment cost are affordable. Artinya dari segi biaya, biaya oprasional dari setiap siswa untuk mengikut kegiatan pembelajaran menjadi lebih terjangkau. c. Student tracking is made easy. Melalui pembelajaran berbasis web, segala aktifitas pembelajaran siswa akan dicatat dalam sebuah database yang tersimpan di server. Administrator, guru, orang tua dan siswa sendiri dapat melihat data-data akademik dari siswa. Hak akses terhadap informasi akademik bisa diatur seusai kebutuhan. d. Possible “Learning Object” architecture support on demand, personalized learning. Ini berarti bahwa siswa dapat melakukan pembelajaran yang lebih terporsonalisasi. Siswa dapat mengakses meteri apa saja yang harus dipelajari tanpa harus menunggu guru menjelaskan di ruang kelas. e. Content is easily updated. Poin terakhir ini merupakan keunggulan terbesar dari pembelajaran berbasis web. Dengan materi yang sangat cepat berubahrubah, pembelajaran yang bersifat konvensional yang menggunakan buku, CDROM, tidak bisa di peraharui dengan mudah, melainkan harus melalui proses revisi cetak ulang atau mebuatan ulang.
6
2.6 Teknologi HTML5 HTML5 memiliki banyak fitur baru yang dapat membuat HTML lebih unggul dan cocok untuk membentuk aplikasi yang berbasis web yang di pakai untuk menunjang pembuatan media pembelajaran Bahasa Inggris berbasis website.[10] Beberapa fitur baru HTML5 antara lain: Native Video and Audio adalah tag yang berfungsi untuk menyisipkan file audio dan video tertentu. Berbeda dengan versi HTML sebelumnya yang harus menyisipkan flash untuk memutar audio dan video. HTML5 akan mudah menyisipkan file multimedia kedalam web. Canvas Drawing API adalah fitur baru yang berfungsi untuk menggambar menggunakan JavaScript. Canvas berfungsi untuk membuat web yang interaktif tanpa membutuhkan plug-in seperti flash. Local Storage berfungsi untuk menggantikan cache sebagai penyimpanan history halaman web. Memungkinkan web untuk menyimpan data cache lebih besar di tempat pemyimpanan lokal daripada cache pada browser biasa. Web Worker adalah threading pada saat komputer melambat yang disebabkan javascript. Sehingga ketika JavaScript melakukan banyak aktifitas sekaligus, kinerjanya tidak akan terhambat dan lambat. Semantics adalah fitur yang sering digunakan untuk web developers untuk membuat web lebih dinamis dan menarik. 2.7 Arsitektur HTML5 Arsitektur dasar dari HTML5 sebenarnya sama dengan versi HTML sebelumnya, karena HTML5 merupakan hasil upgrade dari HTML sebelumnya, dan tidak ada perubahan arsitektur dari HTML versi sebelumya. HTML5 dibuat untuk mengatasi masalah yang di alami oleh HTML versi sebelumnya yakni masalah ketergantungan terhadap plug-in yang dapat membuat kinerja dari CPU menjadi lambat. HTML5 merupakan sebuah Bahasa standar pemrograman pembuatan website, yang nanti akan dibaca oleh web browser. HTML5 memberikan dukungan standar untuk beberapa fitur yang sebelumnya tidak mungkin bisa digunakan tanpa adanya plug-in, misalnya ada beberapa API untuk drawing, dan soket, sedangkan tidak semua browser mendukung plug-in. Plug-in biasa di blok dan di-disable oleh komputer, serta bisa menjadi sasaran hacking. Spesifikasi HTML5 tidak hanya memberikan perintah apa yang seharusnya browser lakukan ketika mereka melakukan proses, tetapi juga memberikan fasilitas kepada browser untuk dapat langsung menjalankan atau mengeksekusi perintah. Dengan adanya HTML5 pembuat web browser dapat lebih menghemat waktu dalam menghadapi kesalahan sintaks.
7
3. Metode Penelitian Metode perancangan sistem menggunakan metode Waterfall. Metode waterfall adalah metode yang sifatnya sistematik dan sekuensial, dimana tiap tahap yang dilalui harus menanti tahap yang sebelumnya selesai dikerjakan. Metode waterfall merupakan metode yang sesuai dengan kasus yang dibahas, yakni dalam Perancangan Media Pembelajaran Bahasa Inggris Dasar berbasis Website Menggunakan HTML5. Metode ini dipilih dengan beberapa alasan karena sifatnya sistematik dan sekuensial. Keuntungan dari model waterfall ini, yaitu setiap tahapan akan dievaluasi secara teliti untuk mendapatkan hasil yang maksimal.
Gambar 1 Struktur Metode waterfall [11]
Tahapan-tahapan dari metode waterfall adalah tahapan requirements yang berfungsi untuk mengumpulkan data dan menganalisa kebutuhan sistem yang dikembangkan berdasarkan permintaan pengguna sistem. Kegiatan dari tahapan requirements dalam penelitian adalah pengumpulan data secara langsung dengan metode wawancara kepada narasumber yang berkompeten di bidang pembelajaran Bahasa Inggris dasar dan juga metode kepustakaan untuk menunjang data yang diperoleh dari hasil wawancara. Proses wawancara dilakukan dengan mendatangi sebuah pre-school di kota Solo, yang bernama “Smart” Pre-school. Proses wawancara di lakukan terhadap bapak Willy Setiawan.S.Pd selaku kepala sekolah. Pokok wawancara yang di tanyakan adalah materi apa yang di berikan di preschool dan bagaimana cara penyajian materi bahasa inggris dasarnya. Dari wawacara yang sudah dilakukan hasilnya adalah materi yang disampaikan adalah kosa kata yang mencakup dari dasar bahasa inggris seperti warna, huruf, angka, dan bentuk. Dan juga dijelaskan bahwa proses pembelajaran dilakukan dengan menggunakan textbook atau alat peraga. Selain wawancara, dilakukan studi kepustakaan dimana untuk menunjang penggunaan HTML5 dalam membuat rancang bangun media pembelajaran bahasa inggris dasar berbasis web menggunakan HTML5. Tahap kedua adalah tahapan analysis sistem yang berfungsi untuk mendapatkan gambaran sistem yang akan dikembangkan sesuai keinginan penguna. Kegiatan yang dilakukan pada tahapan ini dilakukan perancangan proses sistem dan perancangan antar muka atau interface. Setelah 8
merancang proses sistem dan interface selesai, akan dilakukan evaluasi terhadap hasil rancangan. Tahap ketiga adalah tahapan implementation and unit testing yang berfungsi untuk membuat dan menguji coba aplikasi. Kegiatan yang dilakukan pada tahapan ini yaitu mulai membuat hasil rancangan dari tahapan sebelumnya dengan menggunakan HTML5. Pada tahapan ini juga dilakukan proses uji coba, untuk mengetahui apakah aplikasi ini memiliki kesalahan dalam pembuatannya. Tahap keempat adalah tahapan integration and system testing yang berfungsi untuk menyatukan program dan melakukan pengujian sistem, apakah benar-benar memberikan manfaat serta memudahkan pengguna dalam pemakaiannya sehingga bisa menciptakan sebuah sistem yang terkomputerisasi dengan baik. Pengujian dilakukan secara langsung terhadap siswa di “SMART” pre-school, selain itu pengujian dilakukan pengujian secara tidak langsung, yaitu user atau pengguna bisa melakukan pembelajaran dimana saja. Tahapan terakhir yaitu operation and maintenance yang berfungsi menjaga dan merawat, serta terus dievaluasi kelemahan-kelemahan yang ada untuk mendapatkan hasil yang maksimal. 3.1 Perancangan Sistem
Gambar 2 Use Case Diagram Sistem
Gambar 2 merupakan gambaran use-case dari sistem pembelajaran Bahasa Inggris berbasis website menggunakan HTML5. Use-case di atas memiliki dua actor yaitu admin dan user. Admin memiliki fungsi lebih dibanding dengan dengan user. Admin dapat melakukan login ke dalam database yang ada, sedangkan user hanya dapat melakukan proses pembelajaran saja. User harus melakukan proses registrasi untuk dapat melakukan kegiatan pembelajaran Bahasa Inggris. Seorang administrator dapat melakukan pengolahan database hasil quiz, dan database user, sedangkan user dapat melakukan proses pembelajaran Bahasa Inggris seperti: pembelajaran bentuk, pembelajaran huruf, pembelajaran angka, dan pembelajaran warna. User juga dapat mengikuti quiz 9
yang ada dalam setiap proses pembelajaran, serta dapat melihat hasil dari pada quiz yang sudah di ikuti.
3.2 Perancangan Basis Data Dalam perancangan aplikasi pembelajaran bahasa inggris dasar diperlukan sebuah media penyimpanan berupa basis data. Basis data akan digunakan sebagai media penyimpanan data yang ada dalam aplikasi pembelajaran bahasa inggris dasar. Aplikasi ini membutuhkan dua tabel masing-masing adalah tabel member dan tabel test. Tabel member berfungsi untuk menyimpan informasi data member yang sudah melakukan registrasi, sehingga user dapat melakukan proses login ke dalam aplikasi. Id merupakan primary key dimana tidak ada user yang mempunyai id yang sama. Informasi lain dari Tabel member dapat dilihat pada Tabel 1. Tabel 1 Tampilan dari tabel member
Nama Kolom ID Nama Umur Alamat Sekolah Username Password
Tipe Data Int Varchar Int Text Varchar Varchar Varchar
Lebar Data 11 255 11 255 255 255
Tabel test berfungsi untuk menyimpan informasi data hasil test yang sudah di lakukan oleh user di aplikasi proses pembejaran bahasa inggris dasar berbasis web. Id_member dalam tabel merupakan primary key dimana id_member ini adalah id yang di miliki oleh user yang sudah melakukan proses registrasi. Informasi lain dari Tabel test dapat dilihat pada Tabel 2. Tabel 2 Tampilan dari tabel test
Nama Kolom ID ID_member Quiz Tanggal Jumlah Berhasil Nilai
Tipe Data Int Int Varchar Datetime Int Int Int .
10
Lebar Data 11 11 255 11 11 11
Tabel member dan tabel tes memiliki hubungan atau relasi.Relasi antara tabel member dan tabel test adalah one to many. Setiap ID dapat memiliki banyak ID tabel test. Penghubung antara tabel member dan tabel tes adalah ID pada tabel member sebagai primary key dan ID_member pada tabel tes sebagai foraign key Relasi dari tabel member dan tabel test dapat dilihat di Gambar 5
Tabel Member
Tabel Member
ID Nama Umur Alamat Sekolah Username Password
ID
..ID_member Quiz Tanggal Jumlah Berhasil Nilai
Gambar 3 Tampilan relasi tabel
3.3 Perancangan Antar Muka Perancangan antar muka merupakan langkah akhir yang dilakukan dalam tahap perancangan. Perancangan antar muka ini memberi gambaran bagaimana tampilan antar muka yang akan digunakan dalam pengembangan aplikasi media pembelajaran Bahasa Inggris berbasis website menggunakan HTML5. Perancangan antar muka merupakan media berkomunikasi antara user dan aplikasi. JUDUL WEB Home
Pembelejaran
Login
Register
Pengantar Media Pembelajaran Bahasa Inggris Dasar Berbasis Website Menggunakan HTML5 GAMBAR
Gambar 4 Rancangan Halaman Home
11
Gambar 3 merupakan rancangan untuk halaman Home. Halaman ini memberikan tampilan berupa pengantar dari aplikasi pembelajara Bahasa Inggris dasar dan menjelaskan apa saja yang bisa dilakukan user dalam aplikasi ini. User yang sudah memiliki password dan username, dapat melakukan login dan masuk ke halaman pembelajaran, sedangkan user yang belum memiliki password dan username dapat melakukan proses registrasi untuk mengakses ke halaman selanjutnya.
JUDUL WEB Home
Pembelajaran
Login
Register
Form Registrasi Member Baru
Gambar 5 Rancangan Halaman Register
Gambar 4 merupakan rancangan untuk halaman Register. Halaman ini menyediakan form dimana user baru dapat mengimput data agar dapat menjadi member dan dapat melakukan proses login ke dalam aplikasi. User telah mengisi form registrasi dapat melakukan penyimpanan data dengan menekan tombol “daftar”. JUDUL WEB Home
Belajar Warna
Pembelajaran
Belajar Bentuk
Belajar Huruf
Gambar 6 Rancangan Halaman Login
12
Login
Register
Belajar Angka
Gambar 6 merupakan rancangan untuk halaman Pembelajaran. Halaman ini menampilkan jenis-jenis pembelajaran yang dapat di ikuti oleh user. Halaman pembelajaran menampilkan 4 jenis pembelajaran yang dapat di pilih oleh user yaitu pembelajaran warna, pembelajaran bentuk, pembelajaran huruf, dan pembelajaran angka. Setiap pembelajaran memiliki dua level berdasarkan tingkat kesuliatan. Setiap media pembelajaran yang ada di halaman pembelajaran, sudah terhubung dengan halaman pembelajaran masing-,masing. Halaman-halaman yang digunakan untuk melakukan proses pembelajaran Bahasa Inggris dasar berbasis website menggunakan HTML5 adalah sebagai berikut: - Halaman Belajar Warna level 1, merupakan halaman yang digunakan oleh user untuk belajar warna-warna dasar yaitu red, green, blue(RGB). - Halaman Belajar Warna level 2, merupakan halaman yang digunakan oleh user untuk belajar warna-warna yang lebih banyak, lebih interaktif dan lebih nyata. - Halaman Belajar Bentuk level 1, merupakan halaman yang digunakan oleh user untuk belajar bentuk-bentuk dasar dua dimensi seperti lingkaran(circle), persegi(rectangle ), belah ketupat(diamond). - Halaman Belajar Bentuk level 2, merupakan halaman yang digunakan oleh user untuk belajar bentuk-bentuk dari bangun ruang seperti kubus(cube), limas(pyramid), dan tabung(tube) - Halaman Belajar Huruf level 1, merupakan halaman yang digunakan oleh user untuk belajar huruf-huruf sesuai abjat. Dari huruf “A” sampai dengan huruf “Z” - Halaman Belajar Huruf level 2, merupakan halaman yang digunakan oleh user untuk belajar kata yang kata depannya didasarkan sesuai dengan abjat dari abjat “A” sampai abjat “Z”. - Halaman Belajar Angka level 1, merupakan halaman yang digunakan oleh user untuk belajar angka sederhana, dari angka “0”(zero) sampai angka “9”(nine). - Halaman Belajar Angka level 2, merupakan halaman yang digunakan oleh user untuk belajar angka yang lebih kompleks yaitu angka-angka yang memiliki dua digit angka.
4. Hasil dan Pembahasan 4.1 Proses Sistem Komponen yang dibutukan yaitu web server, PHP5, web browser, dan yang paling penting adalah HTML5. Proses sistem ini akan menunjukan proses dari fitur dari HTML5 terutama canvas, serta proses-proses lain yang menunjang untuk membuat aplikasi media pembelajaran Bahasa Inggris dasar berbasis website menggunakan HTML5.
13
Kode Program 1 Perintah mouse click 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
function MouseDown(e) { if (data.showHelp == 1) { data.showHelp = 0; } else { if (data.animate_up == 1) { data.global_alpha = 1.0; data.animate_up = 0; } else { for (i=0; i<6; i++) { if (mouseX >= numbers[i+(page*6)].x && mouseX <= numbers[i+(page*6)].x + numbers[i+(page*6)].w && mouseY >= numbers[i+(page*6)].y && mouseY <= numbers[i+(page*6)].y + numbers[i+(page*6)].h) { sounds[i+(page*6)].play(); imgTemp = numbers[i+(page*6)].img; data.teks = numbers[i+(page*6)].id; data.global_alpha = 0.0; data.animate_up = 1; break; } }
Kode Program 1 merupakan baris perintah yang digunakan untuk melakukan proses mouse click. Fungsi ini adalah fungsi saat user mengklik mouse pada objek yang diinginkan. Sehingga sistem merespon dengan memberikan frame baru yang menunjukan objek yang di pilih beserta suara sesuai objek yang di klik. Hasil dari proses mouse click dapat dilihat pada Gambar 8
Gambar 7 Frame Mouse Click
Gambar 7 merupakan hasil dari proses mouse click. Output yang terjadi setelah mouse click adalah gambar objek yang dipilih beserta suara dari objek yang dipilih.
14
Kode Program 2 Perintah Mouse Detection 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46.
function MouseMove(e) { var x; var y; if (e.offsetX) { x = e.offsetX; y = e.offsetY; } else if (e.layerX) { x = e.layerX; y = e.layerY; } mouseX = x; mouseY = y; startQuizOver = false; if (mouseX >= 180 && mouseX <= 180+300 && mouseY >= 395 && mouseY <= 395+73) { startQuizOver = true; } startHelpOver = false; if (mouseX >= 580 && mouseX <= 580+50 && mouseY >= 10 && mouseY <= 10+50) { startHelpOver = true; } anyOver = false; for (i=0; i<6; i++) { if (mouseX >= numbers[i+(page*6)].x && mouseX <= numbers[i+(page*6)].x + numbers[i+(page*6)].w && mouseY >= numbers[i+(page*6)].y && mouseY <= numbers[i+(page*6)].y + numbers[i+(page*6)].h) { anyOver = true; overIndex = i; break; } } }
Kode Program 2 merupakan baris perintah dari mouse detection. Proses mouse detection ini merupakan proses yang akan membuat objek yang berada dalam frame pembelajaran bereaksi pada saat kursor berada di atas objek. Objek yang berada di bawah kursor akan terseleksi. Hasil interface dari mouse detection dapat di lihat di gambar 10
15
Gambar 8 Frame Mouse Detection
Gambar 8 merupakan hasil output dari proses mouse detection. Pada gambar 10 terlihat hasil seleksi yang terjadi di objek mobil yang berwarna merah. Objek yang terseleksi adalah hasil ketika mouse berada di atas objek tersebut. Kode Program 3 Perintah Load images and sounds 1. function Init() { 2. // load images 3. imgBgHelp.src = "img/help/help1A.jpg"; 4. imgHelp.src = "img/others/help.png"; 5. imgHelpOver.src = "img/others/help_over.png"; 6. imgStartQuiz.src = "img/others/start_quiz.png"; 7. imgStartQuizOver.src = "img/others/start_quiz_over.png"; 8. imgFrame.src = "img/frame.png"; 9. imgBg.src = "img/bg/bg4.png"; 10. img0.src = "img/colors/red.png"; 11. img0Over.src = "img/colors/red_over.png"; 12. 13. snd0.src = "snd/colors/red.ogg"; 14. 15. obj0 = { 16. img:img0, 17. imgOver:img0Over, 18. x:20, 19. y:50, 20. w:img0.width, 21. h:img0.height, 22. }; 23. 24. colors[0] = obj0; 25. 26. sounds[0] = snd0; 27. 28. content = document.getElementById('content'); 29. 30. // click event 31. eCanvas = document.getElementById('canvas'); 32. 33. // timer loop 34. setInterval(Update,60); 35. }
16
Kode Program 3 merupakan baris perintah Load images and sounds. Proses ini akan melakukan pemanggilan gambar dan suara yang sudah dideklarasikan dalam proses variables declaration. Setelah melakukan loading, proses ini akan mengklasifikasian gambar dan suara yang sama ke dalam objekobjek. Contoh dari proses ini dapat dilihat di baris coding 15-21. Di baris tersebut menjelaskan penggabungan image dan audio disatukan ke dalam sebuah objek. Kode Program 4 Perintah Drawing Animation
1. function Draw() { 2. eCanvas = document.getElementById('canvas'); 3. canvasOffsetLeft = eCanvas.offsetLeft; 4. canvasOffsetTop = eCanvas.offsetTop; 5. g = eCanvas.getContext('2d'); 6. g.drawImage(imgBg,0,0); 7. 8. if (data.showHelp == 1) { 9. g.drawImage(imgBgHelp,0,0); 10. } else { 11. if (data.animate_up == 1) { 12. g.globalAlpha = data.global_alpha; 13. g.drawImage(imgFrame,10,40); 14. g.drawImage(imgTemp,32015. imgTemp.width/2,150); 16. g.fillStyle = "black"; 17. g.font = "bold 40px sans-serif"; 18. g.fillText(data.teks,180,350); 19. } else { 20. if (startHelpOver) 21. g.drawImage(imgHelpOver,580,10); 22. else g.drawImage(imgHelp,580,10); 23. 24. if (startQuizOver) 25. g.drawImage(imgStartQuizOver,180,330); 26. else g.drawImage(imgStartQuiz,180,330); 27. 28. for (i=0; i<3; i++) { 29. if (anyOver && overIndex == i) 30. g.drawImage(colors[i].imgOver, colors[i].x, colors[i].y); 31. 32. else g.drawImage(colors[i].img, 33. colors[i].x, colors[i].y); 34. } 35. } 36. } 37.}
Kode Program 4 merupakan baris perintah dari Drawing animation. Proses ini melakukan penggambaran animasi dalam website dengan menggunakan fitur canvas HTML5. Baris 2-5 merupakan elemen dasar dari canvas HTML5.
17
4.1 Pengujian dengan Metode Blackbox Blackbox testing terfokus pada spesifikasi fungsional dari perangkat lunak. Tester dapat mendefinisikan kumpulan kondisi input dan melakukan pengetesan pada spesifikasi fungsional program. Blackbox testing dilakukan untuk menemukan fungsi-fungsi yang tidak benar, kesalahan antarmuka, dan kesalahan basis data. [12] Berikut ini adalah tabel pengujian dari sistem yang dibuat seperti yang terlihat pada tabel 2 setelah diujicobakan kepada 10 siswa di “SMART” preschool .
Tabel 3 Black Box Aplikasi
Nama Modul : REGISTRASI Test Case : Input Data User Input: Mengisi kolom yang ada di dalam halaman registrasi yaitu, nama lengkap, umur, alamat, sekolah, username, password, ulangi password. Output : Mendapatkan password dan username untuk login Hasil : Sesuai dengan yang diharapka. Nama Modul : LOGIN Test Case : Validasi User Input : Memasukan username dan password Output : Jika username dan password valid, login sukses. Hasil : Sesuai dengan yang diharapkan. Nama Modul : PEMBELAJARAN Test Case : Memilih jenis pembelajaran Bahasa Inggris dasar. Input : Memilih jenis pembelajaran yang akan dilakukan yaitu pembelajaran warna, pembelajaran huruf, pembelajaran bentuk, dan pembelajaran angka. Output : User langsung bisa melakukan proses pembelajaran Bahasa Inggris dasar Hasil: Sesuai dengan yang diharapkan. Nama Modul : PROSES BELAJAR Test Case : Proses belajar warna, bentuk, huruf, angka. Input : User memilih dengan cara mengklik objek Output : Pembesaran gambar objek dan suara objek Hasil: Sesuai dengan yang diharapkan. Nama Modul : PROSES QUIZ Test Case : Proses quiz belajar warna, quiz belajar bentuk, quiz belajar huruf, quiz belajar angka Input : - Memilih objek sesuai suara dari soal. - Klik tombol more test untuk melanjutkan soal. - Klik tombol save test untuk menyimpan hasil. Output : - Gambar checklist jika benar dan gambar cross
18
jika jawaban salah. - Test count bertambah - Test success bertambah jika jawaban benar - Dapat melihat review test yang sudah dilakukan Hasil: Sesuai dengan yang diharapkan. Nama Modul : TANPA PLUG-IN Test Case Pengoprasian aplikasi di browser yang mendukung HTML5 tanpa menggunakan plug-in Input: Menjalankan aplikasi di browser yang mendukung HTML5 tanpa meng-install plug-in. Output : Aplikasi dapat berjalan dengan baik. Hasil : Sesuai dengan yang diharapkan. Dari pengujian blackbox yang sudah dilakukan, kesimpulannya adalah aplikasi media pembelajaran Bahasa Inggris dasar berbasis website menggunakan HTML5 sudah berjalan sesuai yang diharapkan. Pengujian fungsi-fungsi dari aplikasi ini sesuai dengan yang tujuan. Yang paling penting adalah aplikasi media pembelajaran Bahasa Inggris berbasis website menggunakan HTML5 dapat dijalankan pada browser yang medukung HTML5 tanpa menggunakan plug-in. 4.2 Pengujian HTML5 Tabel 4 Tabel pengujian terhadap piranti
Piranti Canvas 2d context Ipad Galaxy Tab Desktop Computer Blackberry Smartphone Samsung Smartphone
Ogg vorbis support x
Pengujian terhadap jenis-jenis piranti untuk membuktikan apakah rancang bangun media pembelajaran bahasa inggris dasar berbasis web menggunakan HTML5 dapat berjalan di semua jenis piranti terutama ipad, galaxy tab dan smartphone yang sering digunakan anak usia pre-school dalam melakukan pembelajaran bahasa inggris dasar. Parameter pengujian yang di ambil adalah canvas 2d context dan ogg vorbis support. Canvas 2d context dijadikan parameter pengujian karena elemen canvas ini yang digunakan dalam menggambar animasi, sedangkan ogg vorbis adalah audio support dalam website media pembelajaran bahasa inggris dasar. Dari pengujian di atas secara keseluruhan semua piranti yang ada dapat menjalankannya dengan baik.
19
Tabel 5 Tabel pengujian terhadap browser
Browser Internet Explorer 6,7 &8 Google Chrome 18 FireFox 11 Opera 11 Safari 5.1 Internet Explorer 9
Canvas 2d context x
Ogg vorbis support x x x
Pengujian browser dilakukan untuk mengetahui apakah website media pembelajaran bahasa inggris dapat berjalan diberbagai browser. Dengan pengujian yang sudah dilakukan seperti dalam gambar 2. Hampir semua browser dapat menjalankan animasi yang ada tanpa menggunakan plug-ins, tetapi masalah yang masih di hadapi oleh HTML5 adalah masih banyak browser belum bisa menjalankan audio file yang bertipe vorbis.
5. Simpulan Perkembangan terknologi HTML yaitu HTML5 memberikan perubahan yang sangat besar dalam membangun dan menjalankan sebuah website. Fitur canvas HTML5 sangat membantu dalam membuat animasi tanpa menggunakan plug-ins dalam pengoprasiannya. Sedangkan untuk anak usia pre-school, mereka dapat mengakses aplikasi ini dimana saja dangan menggunakan piranti apa saja seperti tablet Pc dan smartphone untuk melakukan proses pembelajaran bahasa inggris dasar, tanpa harus belajar di ruang kelas yang menyita waktu dan biaya.
6. Daftar Pustaka [1]
Solusindo.2010. Perkembangan website. http://www.smartsolutions.co.id/perkembangan-website (Diakses 8 April 2012).
[2]
Heriyanto. 2010. Apa Kehebatan HTML5. http://www.computesta.com/blog/2010/05/apa-kehebatanhtml5/#.T1DQW4caMx4 .(Diakses 7 Desember 2011).
[3]
Bahri, Alim.2008. Pembelajaran Online Via Internet dan Intranet. http://www.ubb.ac.id/menulengkap.php?judul=manfaat%20Elearning%20 /%20ELearning%20%20%20Pembelajaran%20Online%20via%20atau% 20intranet%20services// (Diakses 10 September 2011).
20
[4]
Sukajaya,I. Nyoman. 2004. Media Pembelajaran Asinkronus Berbasis Web sebagai Media Alternatif Pembelajaran Matematika dijenjang Sekolah Dasar.
[5]
Rizkia, Choiru. 2011. Riset,Penggunaan HTML5 Bakal Meningkat Hingga 2013. http://www.selular.co.id/berita/BNews/2011/12/368421985426/RisetPenggunaan-HTML5-Bakal-Meningkat-Hingga-2013 (Diakses 11 April 2011).
[6]
Ahira, Anne.2011. Mengenal Pengertian Website. http://www.anneahira.com/pengertian-website.htm (Diakses 15 Oktober 2011).
[7]
Adriani. 2009. Berbagai Jenis Media Pembelajaran. http://www.edu-articles.com/berbagai-jenis-media-pembelajaran/. (Diakses 4 Januari 2012).
[8]
Okezone, 2011. Ciptakan Pre-school Sendiri di Rumah. http://www.lifestyle.okezone.com/read/2011/06/24/196/472413/ciptakanpre-school-sendiri-di-rumah. (Diakses 4 April 2012)
[9]
Aripin, 2010. Pembelajaran Berbasis Web. Universitas Pendidikan Indonesia
[10]
Babtista,Reyva, 2011. HTML5, Apa Fitur Tambahannya?. http://www.reybabtista.com/2011/12/html5-apa-fitur-tambahannya.html. (Diakses 4 April 2012)
[11]
Pressman, S. Roger. 1995. Software Engineering.
[12]
Sukamto,Rosa.2009.Black-Box Testing.
21
