PENGEMBANGAN BAHAN AJAR KIMIA

BERBASIS WEB DENGAN HTML5 SEBAGAI

PENDUKUNG PEMBELAJARAN ABAD 21
Arief Fadillah
SMA-IT Thariq Bin Ziyad
Latar Belakang

Perkembangan Teknologi Informasi dan Komunikasi yang semakin pesat

Survey 2016
Latar Belakang

Paradigma kemampuan Guru yang mendukung

pembelajaran abad 21
 Latar Belakang
Terdapat 4 aspek representasi untuk memahami ilmu kimia secara
komprehensif, yaitu:

Aspek Makroskopik Aspek Mikroskopik Aspek Simbolik Aspek Matematik

Rumusan Masalah

Bagaimana mengembangkan bahan ajar kimia

berbasis web dengan HTML 5?
Kegunaan
• Dihasilkannya bahan ajar kimia berbasis
web dengan HTML5
• Sumber belajar bagi siswa serta siapa
saja yang tertarik mempelajari kimia
terutama pada materi pokok bentuk
molekul
• Solusi alternatif untuk menunjang
pembelajaran khususnya pada materi
pokok bentuk molekul
Bahan Ajar Berbasis Web
Bahan ajar berbasis web merupakan bahan ajar yang disiapkan,
dijalankan, dan dimanfaatkan melalui media web. Bahan ajar ini juga
dapat disebut sebagai bahan ajar berbasis internet atau bahan ajar
dalam jaringan (online)
 HTML5

• HTML (Hyper Text Markup

Language) adalah bahasa
pemrograman yang berupa
kode dan simbol yang
dimasukkan kedalam sebuah
file yang ditujukan untuk
ditampilkan di dalam sebuah
website
• HTML5 adalah versi terakhir
dari HTML saat ini
Tahap Penyusunan Bahan Ajar
Perencanaan

Penyusunan Garis Besar Isi

Media, Jabaran Materi,
Flow Chart, dan Naskah
Bahan Ajar
Tahap Penyusunan Bahan Ajar
Perencanaan

Pengembangan

Pengembangan bahan ajar

berbasis web dengan
HTML5
Tahap Penyusunan Bahan Ajar
Perencanaan

Pengembangan

Pengujian
Pengujian aspek multi
platform dan responsive
web page dari bahan ajar
yang dihasilkan
Tahap Perencanaan
➢ Penyusunan Garis Besar Isi Media (GBIM) pada materi pokok bentuk
molekul
Garis Besar Isi Media (GBIM) merupakan cetak biru (blueprint) bagi bahan
ajar yang akan dikembangkan dan biasanya dituangkan dalam suatu
format matriks yang memuat berbagai aspek terutama menyangkut
kompetensi, dan cakupan materi (Purwanto, Rahadi, & Lasmono, 2007)

➢ Penyusunan Jabaran Materi pada materi pokok bentuk molekul

Jabaran materi merupakan langkah lanjutan setelah GBIM telah disusun
dengan baik. Melalui penyusunan jabaran materi maka poin-poin/aspek-
aspek yang terdapat pada GBIM mulai dikembangkan dan diberikan
penjelasan yang lebih rinci
Tahap Perencanaan
3. Pengembangan flow chart bahan ajar berbasis web

Login User

Teori Domain Simulasi Bentuk

Identitas Materi Pendahuluan Latihan
Elektron Molekul

Kompetensi Domain
Dasar Elektron

Indikator Bentuk Molekul

Penentuan
Bentuk Molekul
Tahap Pengembangan

GBIM

Naskah
JM Bahan
Ajar

Flow
Chart Perangkat Lunak (software)
Aplikasi yang Digunakan
• Incomedia Website X5
Aplikasi untuk membuat website dengan cepat dan
mudah, tanpa harus menuliskan kode HTML5 yang
rumit

• Wondershare Quiz Creator

Aplikasi untuk pembuatan soal, kuis atau tes secara
online (berbasis web)

• Simulasi bentuk molekul berbasis HTML5

Simulasi bentuk molekul yang dikembangkan oleh
PhET Interactive Simulations dipilih karena memiliki
daya dukung terhadap web berbasis HTML5
Pengujian Bahan Ajar

• Multi platform: Kemampuan dari aplikasi yang bersifat cross platform untuk dapat
bekerja di hampir semua sistem dengan atau tanpa modifikasi

• Hasil Pengujian: bahan ajar berbasis web pada materi pokok bentuk molekul dapat
berjalan di semua browser. Namun, terjadi degradasi kualitas grafis simulasi pada
browser Google Chrome dan Opera
Pengujian Bahan Ajar

Opera Mobile Emulator

• Responsive Web Page: Kemampuan halaman web untuk menyesuaikan

tampilan pada semua perangkat teknologi informasi (desktop, tablet, dan
smartphone)
• Hasil Pengujian: Fitur kuis tidak mampu berjalan dengan baik yang ditandai
dengan loading page yang berhenti pada angka 10%. Sementara itu, fitur-fitur
lain mampu berjalan dengan baik.
Kesimpulan
Secara umum bahan ajar kimia berbasis
web pada materi pokok bentuk molekul
yang dikembangkan telah memiliki
kualitas yang baik dilihat dari
kemampuan multi platform dan
responsive web page. Namun demikian,
terjadi penurunan kualitas grafis
simulasi ketika dijalankan pada browser
Google Chrome dan Opera, serta kurang
berfungsinya fitur latihan soal ketika
diemulasikan pada perangkat
smartphone dan tablet.
Saran
Dilakukan pengembangan bahan ajar berbasis web menggunakan perangkat lunak
authoring tools dan e-learning yang telah memiliki dukungan HTML5 seperti:
• Adobe Captivate 9
• Articulate Storyline 360
• Lectora Inspire 12
Belajar untuk semua, dimana saja, kapan saja

TERIMA KASIH