1. Pendahuluan
Perkembangan penggunaan bahasa Mandarin membuat sebagian sekolah menengah pertama memasukan bahasa tersebut dalam kurikulum. Bahkan
beberapa sekolah dasar pun sudah mencantumkan bahasa Mandarin dalam kurikulum pelajarannya. Bahasa Mandarin menjadi bahasa yang sangat penting
saat ini karena bahasa ini adalah salah satu bahasa internasional selain bahasa Inggris.
Sebuah bahasa memiliki huruf abjad vokal dan konsonan, misalnya bahasa Inggris atau bahasa Indonesia, begitu pula dengan bahasa Mandarin. Hal utama
yang harus diperhatikan dalam pembelajaran bahasa Mandarin adalah cara pengucapann ejaannya
拼音 pīnyīn yang baik dan benar sesuai dengan nada
baca. Bahasa Mandarin merupakan bahasa nada, maka setiap nada atau intonasi yang berbeda memiliki arti yang berbeda pula. [1]
Berdasarkan wawancara dengan guru bahasa Mandarin di SMP Kristen Satya Wacana, sebagian besar pelajar kurang paham dalam penggunaan pelafalan
atau nada dalam bahasa Mandarin. Kebanyakan dari pelajar hanya mengerti abjad atau penulisannya saja, namun kurang memahami akan pelafalan nada sehingga
kata yang diucapkan menjadi kurang tepat atau bahkan salah arti. Kegiatan belajar mengajar bahasa Mandarin di dalam SMP Kristen Satya Wacana hanya memakai
buku sebagai panduan belajar. Cara seperti ini saja belum cukup memadai dalam membantu pelajar menyelesaikan berbagai masalah yang dialaminya. Oleh karena
itu sangatlah diperlukan adanya model pembelajaran yang ideal agar dapat bermanfaat untuk pelajar.
Sesuai dengan uraian pada latar belakang di atas, maka yang menjadi masalah dalam penelitian ini adalah bagaimana untuk merancang
website
pembelajaran bahasa Mandarin menggunakan audio yang
responsive
terhadap semua layar. Berdasarkan observasi siswa kelas 7 di SMP Kristen Satya Wacana,
55 dari 74 siswa sudah memiliki
sma rtphone
atau
Tablet PC
milik pribadi ataupun milik orangtua, 40 siswa memiliki
smartphone iPhone
,
Blackberry
dan
Android Phone
, 15 siswa memiliki tablet
iPad
dan
tablet android
, sisanya mengakses internet melalui PC atau laptop.
Berdasarkan hal tersebut tujuan dibuatnya aplikasi pembelajaran ini adalah untuk membantu pelajar kelas 7 SMP Kristen Satya Wacana agar dapat mengerti
pelafalan nada bahasa mandarin dan meningkatkan minat belajar bahasa Mandarin. Di dalam aplikasi ini berisi pembelajaran dengan gambar dan pelafalan
suara dari setiap Pīnyīn dan Hànzì yang mempermudah dalam mempelajari materi bahasa mandarin. Teknologi yang mendukung untuk membuat aplikasi tersebut
adalah dengan
Responsive Web Design
dan HTML5.
Responsive Web
Design
adalah pendekatan yang menunjukkan desain
website
harus menanggapi perilaku user dan lingkungan berdasarkan pada layar,
platform
ukuran dan orientasi. Sebagai contoh adalah campuran dari
flexible grids
dan
la yout
, gambar dan penggunaan CSS, misalnya jika
user
beralih dari
laptop
mereka ke
iPad
,
website
secara otomatis harus beralih untuk mengubah resolusi dan ukuran gambar. Dengan memanfaatkan teknologi HTML5 yang akan diterapkan pada website ini,
sehingga setiap ejaan 拼音
pīnyīn Bahasa Mandarin akan dapat ditampilkan visual dan didengarkan audio.
2.
Kajian Pustaka
Penelitian berjudul Media Pembelajaran Bahasa Mandarin Berbasis
Client Server
Pada Sistem Operasi
Android
membahas tentang aplikasi pembelajaran bahasa mandarin dengan menggunakan fasilitas multimedia digunakan dalam
sistem operasi
Android
. Penelitian ini membahas mengenai pembuatan materi secara menarik dan kreatif, dengan menggunakan gambar, animasi dan audio. [2]
Pemanfaatan
Responsive Web
Design
dan HTML 5 dalam pengembangan
website
juga pernah dilakukan, salah satunya “
Web Responsive
Design
Untuk Situs Berita Menggunakan
Framework Codeigniter
”. Penelitian ini menggunakan
Responsive Web
Design
agar dapat menampilkan halaman situs sesuai dengan layar perangkat dan dapat mengenali setiap ukuran perangkat atau platform
pengguna.
Responsive Web
Design
membuat pengguna dengan nyaman dan mudah membaca konten isi berita tanpa harus menggeser layar kesamping.[3]
Dari beberapa artikel dan penelitian ilmiah tersebut didapatkan sebuah gagasan untuk membangun sebuah
website
menggunakan teknologi
Responsive Web Design
yang dapat secara
responsive
berubah sesuai dengan layar perangkat
mobile
yang dipakai. Setiap materi yang ada dibuat dengan menarik menggunakan gambar sebagai bantuan visualisasi dan juga suara sebagai bantuan
audio.
Digunakan juga Teknologi HTML5 untuk menampilkan setiap file
audio
yang ada.
Bahasa Mandarin adalah bahasa yang bernada. Pelafalan bahasa Mandarin pada dasarnya ada 4. Masing-masing menggunakan tanda nada yang dinyatakan :
“ˉ” nada 1 , ” ” nada 2 ”ˇ” nada 3 ” ” nada 4 . Nada juga dianggap
sebagai bagian yang membentuk suku kata, karena nada berfungsi untuk membedakan makna d
alam bahasa Mandarin. Contoh “tāng, táng, tăng, tàng” 4 huruf ini initial semuanya [tang], finalnya semuanya [ang], hanya karena nada
berbeda, makna tentu tidak sama, masing-masing mewakili 4 sifat yang berbeda dalam bahasa Mandarin minimal ada satuan bahasa yang bermakna, dalam
penulisannya menjadi 4 huruf yang berbeda.
Bagian dasar terbesar dari bahasa dalam bahasa Mandarin adalah suku kata
手 │
洗 │
民 │
失 . suku kata dan suku kata berkombinasi menjadi kata
马 +路
→马 路
│ 开
关 →
开关 . Ada suku kata yang bisa berdiri sendiri
sebagai kata 手
洗 ada suku kata yang tidak bisa berdiri sebagai kata, hanya
bisa membentuk kata majemuk dengan bergabung dengan suku kata yang lain 民
→ 人民
│ 失
→丧 失)
. Dalam bahasa Mandarin modern proporsi sepasang suku kata merupakan yang paling besar. Sebagian besar pasangan suku kata
tergantung pola majemuk pembentuknya yang terletak di depannya. Pada pelafalannya, bahasa Mandarin memiliki suku kata untuk melambangkan bunyi
– bunyi dalam Mandarin atau disebut Bopomofo, terbagi atas pelafalan huruf mati
konsonan dan huruf hidup vokal.[1]
Responsive Web Design
RWD pada dasarnya menunjukan bahwa situs
website
dibuat menggunakan W3C CSS3 media dengan proporsi berbasis
grid
, untuk beradaptasi tata letak dengan melihat lingkungan
platform
dan gambar fleksibel sebagai hasilnya. Pengguna di berbagai
platform
dan
browser
akan
memiliki akses ke satu sumber konten, ditata sehingga mudah dibaca dan navigasi dengan minimal mengubah ukuran,
panning
dan
scrolling
.[4]
Responsive Web Design
pertama kali diperkenalkan oleh Ethan Marcotte pada artikelnya yang sangat inspiratif
Responsive Web
Design
. Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka sebuah situs
perlu untuk mengenali ukuran perangkat pengguna. Ketika masih berpikir saat ada perangkat baru yang dirilis dan akan memperbarui situs agar sesuai, maka harus
mencari solusi yang lebih efektif dan responsif bagaimana cara agar situs hanya mengakui lebar browser saja tanpa melakukan pembaruan yang lebih spesifik.[3]
Menurut Ethan Marcotte didalam bukunya A Book Apart, ada 3 hal yang harus dipakai agar dapat membuat
design website
yang
Responsive
yaitu : 1
The Flexible Grid
, 2
The Flexible Images
, 3
Media Queries. The Flexible Grid,
Kerangka dasar yang fleksibel, dibentuk oleh 5 komponen yaitu
Flexible Type, Flexible Containers, Flexible Margins, Flexible Padding,
dan
Flexible Image.
Pendekatan yang paling umum untuk ukuran dalam css pada hari ini adalah dengan menggunakan
pixel
.
Pixel
dapat memberikan desainer kontrol yang tepat dan akurat dalam penggunaannya. Jika desainer ingin mengubah ukuran teks
yang lebih kecil atau teks yang lebih besar berdasarkan ukuran layar, maka akan mengubah elemen css induk. Hal seperti ini biasa disebut
fixed width
. Tetapi karena
Responsive Web
Design
menggunakan
Flexible Grid
agar dapat menyesuaikan jenis ukuran layar sesuai dengan perangkat yang dipakai, maka
pixel
tidak digunakan melainkan digantikan dengan ukuran ems.
Flexible Images
berarti setiap
image
yang ada didalam
website
tidak melebihi lebar
container
dari
layout
yang dirancang. Saat merancang desain
website responsive
bukan hanya tampilan
layout
yang harus dirancang tetapi juga harus memperhatikan bagaimana
image
akan ditampilkan. Dengan menuliskan aturan didalam CSS3 maka setiap
image
dapat menjadi
flexible image
. Pertama kali ditemukan oleh desainer Richard Rutter, satu aturan ini telah
membuat perubahan yang sangat berguna untuk setiap gambar dalam
website
. Sekarang, elemen img akan cukup pada ukuran apapun yang diinginkan asalkan
elemen yang terkandung itu lebih kecil dari elemen yang mengandung. Tetapi jika ternyata elemen yang terkandung lebih lebar daripada elemen yang mengandung,
maka
max
-
width
:100 akan digunakan untuk memaksakan elemen yang terkandung muat dengan elemen yang mengandung.
Media Queries
Adalah bagian dalam CSS3 yang digunakan untuk menerapkan style layoutnya dan menentukan target lebar layarnya. Dengan tata
letak yang fleksibel membuat kita bisa mengubah ukuran jendela
browser
untuk lebar yang berbeda beda. Ukuran jendela
browser
yang berbeda-beda menyebabkan kita harus menangani perbedaan desain dalam resolusi layar yang
berbeda sesuai dengan perangkat.
Media Queries
membuat desain dapat beradaptasi pada perubahan resolusi layar dengan mengoptimalkan halaman setiap
desain agar menjadi lebih responsive.[5] CSS 3 adalah versi CSS terbaru yang masih dikembangkan oleh W3C.
Namun beberapa
web browser
sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan,
sehingga ketika bermigrasi dari CSS 2 ke CSS 3, tidak perlu mengubah apapun.
CSS3 memiliki salah satu fitur yakni
media queries
yang merupakan salah satu fitur utama untuk
responsive design
dan tentunya didukung fitur-fitur lain untuk menghasilkan
web
yang fleksibel.[6] CSS2 memungkinkan kita untuk menentukan
stylesheet
untuk jenis media tertentu seperti layar atau tampilan. Sekarang CSS3 bahkan membuat lebih efisien
dengan menambahkan
media queries
. Dengan kondisi tertentu pada setiap jenis media CSS3 dapat menerapkan
stylesheet
yang berbeda. Sebagai contoh, CSS3 dapat memiliki satu
stylesheet
untuk menampilkan tampilan yang besar, dan
stylesheet
yang berbeda khusus untuk perangkat
mobile
. Hal ini membuat CSS3 dapat menyesuaikan dengan resolusi layar yang berbeda tanpa mengubah konten
isi.[7] HTML
Hyper Text Ma rkup Language
adalah file teks yang berisi instruksi
script
kepada
web browser
untuk menampilkan suatu tampilan grafis dari sebuah halaman
website
. HTML 5 menyediakan video dan unsur-unsur audio melalui halaman
website
yang dapat memutar video dan audio tanpa memerlukan
plug-in
pihak ketiga. Sampai saat ini, belum ada standar untuk memutar file audio pada halaman
website
, saat ini, kebanyakan file audio diputar melalui
plug-in
seperti
flash
. Namun,
browser
yang berbeda mungkin memiliki berbagai
plug
-
in
. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan
file audio pada halaman
web
: elemen audio. Konten teks harus dituliskan diantara
tag
audio dan audio untuk
browser
yang tidak mendukung elemen audio. Tabel 1 menunjukan perbandingan beberapa
browser
yang mendukung format audio yang digunakan di HTML 5.
Tabel 1 Tabel perbandingan
browser
pendukung format audio untuk HTML 5
Browser MP3
Wav Ogg
IE 9+ Ya
Tidak Tidak
Chrome 6+ Ya
Ya Ya
Firefox 3.6+ Tidak
Ya Ya
Safari 5+ Ya
Ya Tidak
Opera 10+ Tidak
Ya Ya
Seiring dengan berkembangnya pertumbuhan perangkat
mobile
, penggunaan HTML5 dalam
mobile
juga sudah banyak kemajuan. Berikut ini adalah tabel hasil dari pengujian sejauh mana HTML5 dapat dipakai dari berbagai
sistem operasi
mobile
.[8]
Tabel 2 Tabel perbandingan sistem operasi
mobile
pendukung untuk HTML5
3. Metode Pengembangan Sistem