Tujuan Pembelajaran
Setelah mempelajari materi ini, guru diharapkan mampu:
Menjelaskan pengertian media All-in-One HTML.
Memahami peran HTML, CSS, dan JavaScript dalam sebuah media interaktif.
Mengenali struktur dasar sebuah file HTML.
Menggunakan bantuan AI untuk menghasilkan satu file HTML lengkap.
Menambahkan desain, tombol, dan interaksi pada media.
Mengelola gambar, audio, ikon, serta aset media lainnya.
Memahami penggunaan localStorage dan fungsi reset.
Menguji dan memperbaiki media sebelum digunakan melalui PID/IFP.
Video Pengantar All-in-One HTML
Saksikan video pengantar untuk memahami bagaimana sebuah media pembelajaran dapat disimpan dalam satu file HTML dan langsung dijalankan melalui browser.
Mengenal All-in-One HTML
All-in-One HTML adalah satu file berformat .html yang di dalamnya sudah terdapat struktur halaman, desain, dan fungsi interaktif.
Artinya, HTML, CSS, dan JavaScript tidak harus disimpan dalam tiga file berbeda. Ketiganya dapat digabungkan dalam satu file sehingga lebih mudah disimpan, dipindahkan, dibagikan, dan digunakan.
Guru tidak perlu memasang aplikasi khusus. File cukup dibuka melalui browser seperti Chrome atau browser yang tersedia pada PID/IFP.
Satu File
Lebih mudah disimpan dan dipindahkan.
Dibuka melalui Browser
Tidak memerlukan instalasi aplikasi khusus.
Dapat Digunakan Offline
Jika seluruh aset sudah berada di dalam file atau disimpan secara lokal.
Cocok untuk PID/IFP
Tombol dan interaksi dapat dibuat ramah layar sentuh.
Bagian HTML, CSS, dan JavaScript
Media All-in-One HTML dibangun dari tiga komponen utama yang memiliki fungsi berbeda.
HTML — Struktur
HTML digunakan untuk membuat isi halaman seperti judul, teks, tombol, gambar, pertanyaan, dan bagian permainan.
CSS — Tampilan
CSS digunakan untuk mengatur warna, ukuran, posisi, font, kartu, animasi, dan tampilan responsif.
JavaScript — Fungsi
JavaScript digunakan untuk menjalankan interaksi seperti tombol, skor, timer, soal berikutnya, suara, dan reset.
HTML adalah rangka bangunan.
CSS adalah desain dan dekorasi.
JavaScript adalah mesin yang membuatnya dapat bergerak dan merespons pengguna.
Struktur Dasar File
Guru tidak perlu menghafal seluruh kode. Namun, memahami susunan dasarnya akan membantu saat meminta AI melakukan perbaikan.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Media Pembelajaran</title>
<style>
/* CSS ditulis di sini */
</style>
</head>
<body>
<h1>Judul Media</h1>
<button id="mulai">
Mulai
</button>
<script>
// JavaScript ditulis di sini
</script>
</body>
</html><head>
Menyimpan informasi halaman, judul, pengaturan layar, dan CSS.
<body>
Menyimpan seluruh bagian yang terlihat oleh pengguna.
<style>
Tempat menuliskan CSS ketika semua dibuat dalam satu file.
<script>
Tempat menuliskan JavaScript yang menjalankan fungsi media.
Menambahkan Tampilan
Tampilan media tidak harus rumit. Prioritaskan keterbacaan, kemudahan navigasi, dan kenyamanan saat digunakan pada layar besar.
Warna
Gunakan palet warna yang konsisten dan memiliki kontras yang cukup.
Tipografi
Gunakan ukuran teks yang cukup besar agar terbaca dari belakang kelas.
Kartu dan Panel
Kelompokkan informasi menggunakan kartu agar halaman lebih rapi.
Tombol Besar
Tombol pada PID/IFP harus mudah disentuh menggunakan jari.
Responsif
Tampilan harus tetap rapi pada PID, laptop, tablet, dan ponsel.
Animasi Secukupnya
Animasi digunakan untuk membantu pengalaman, bukan mengganggu perhatian.
Media yang baik tidak harus penuh efek. Teks harus jelas, tombol mudah ditemukan, dan pengguna langsung memahami apa yang harus dilakukan.
Menambahkan Interaksi
JavaScript membuat halaman HTML dapat merespons tindakan pengguna.
Tombol Mulai
Membuka aktivitas utama setelah pengguna menekan tombol.
Navigasi
Memindahkan pengguna ke soal atau halaman berikutnya.
Skor
Menghitung nilai berdasarkan tindakan atau jawaban pengguna.
Umpan Balik
Memberikan respons untuk jawaban benar maupun salah.
Timer
Mengatur batas waktu jika aktivitas membutuhkannya.
Reset
Mengembalikan media ke kondisi awal untuk dimainkan kembali.
“Tambahkan tombol mulai, tombol berikutnya, skor otomatis, umpan balik benar dan salah, halaman hasil akhir, serta tombol reset. Pastikan semua fungsi dapat digunakan tanpa me-refresh browser.”
Gambar, Audio, dan Aset
Media pembelajaran dapat menggunakan gambar, ikon, audio, dan aset lainnya. Namun, cara penyimpanannya perlu diperhatikan.
Gambar Lokal
Gambar dapat disimpan di folder yang sama dan dipanggil menggunakan alamat file relatif.
Audio Lokal
File MP3 atau WAV dapat digunakan untuk narasi maupun efek suara.
Emoji dan Ikon
Untuk media sederhana, emoji dapat mengurangi kebutuhan aset tambahan.
Aset Online
Membutuhkan koneksi internet dan dapat gagal jika sumber berubah.
Sebisa mungkin gunakan aset lokal atau aset yang sudah ditanam langsung di dalam file agar media tidak bergantung pada internet.
Gunakan gambar, audio, ikon, dan sumber lain yang memang diizinkan untuk digunakan. Hindari mengambil karya orang lain tanpa memperhatikan hak cipta dan lisensinya.
LocalStorage dan Reset
Browser memiliki penyimpanan sederhana yang disebut localStorage. Fitur ini dapat digunakan untuk menyimpan progres pengguna pada perangkat yang sama.
Menyimpan Progres
Pos, soal, atau aktivitas terakhir dapat disimpan.
Menyimpan Skor
Skor permainan dapat tetap tersedia ketika halaman dibuka kembali.
Menyimpan Status Selesai
Media dapat mencatat apakah pengguna sudah menyelesaikan aktivitas.
Menghapus Progres
Tombol reset dapat menghapus data dan mengembalikan permainan ke awal.
Media sudah selesai dimainkan, tetapi ketika dibuka kembali masih menampilkan progres lama.
Solusinya adalah menyediakan tombol reset yang menghapus data localStorage yang digunakan oleh media tersebut.
// Menyimpan skor
localStorage.setItem("skorGame", skor);
// Membaca skor
const skorTersimpan =
localStorage.getItem("skorGame");
// Menghapus satu data
localStorage.removeItem("skorGame");
// Menghapus semua data website
localStorage.clear();Jangan menyimpan informasi pribadi atau data sensitif murid melalui localStorage. Gunakan hanya untuk kebutuhan sederhana seperti progres, pengaturan, atau skor lokal.
Pengujian dan Perbaikan
Jangan langsung menggunakan media di kelas hanya karena tampilannya sudah terlihat bagus. Uji setiap fungsi terlebih dahulu.
Buka file melalui browser
Pastikan file dapat dijalankan tanpa pesan kesalahan.
Uji semua tombol
Periksa mulai, berikutnya, kembali, selesai, dan reset.
Periksa skor
Coba jawaban benar dan salah untuk memastikan nilai dihitung tepat.
Periksa audio
Pastikan suara tidak tumpang tindih atau terus berulang.
Uji localStorage
Tutup dan buka kembali media untuk memeriksa penyimpanan progres.
Uji reset
Pastikan skor dan progres benar-benar kembali ke kondisi awal.
Uji tampilan
Periksa pada tablet, laptop, ponsel, dan PID/IFP.
Periksa materi
Pastikan soal, jawaban, bahasa, dan informasi pembelajaran sudah benar.
“Perbaiki hanya bagian perhitungan skor. Saat ini skor selalu menjadi 100 walaupun terdapat jawaban salah. Jangan mengubah desain atau bagian lain.”
Instruksi yang spesifik membantu AI memperbaiki satu masalah tanpa merusak bagian yang sudah berjalan baik.
Ringkasan Materi
All-in-One HTML berarti satu file
HTML, CSS, dan JavaScript dapat digabungkan dalam satu dokumen.
HTML membentuk struktur
HTML berisi konten dan elemen yang tampil pada halaman.
CSS mengatur tampilan
Warna, layout, ukuran, dan responsif dibuat melalui CSS.
JavaScript mengatur interaksi
Tombol, skor, timer, audio, dan reset dijalankan melalui JavaScript.
Aset perlu dikelola
Gambar dan audio harus tersedia agar media dapat berjalan dengan baik.
LocalStorage dapat menyimpan progres
Namun, tombol reset juga harus mampu menghapus progres tersebut.
Selalu lakukan pengujian
Media harus diuji sebelum digunakan bersama murid.
Yang penting adalah memahami kebutuhan media, mampu menyusun prompt dengan jelas, menguji hasilnya, serta memberikan instruksi perbaikan kepada AI.
Tugas Praktik
Sebelum mengerjakan tugas, saksikan contoh proses membuat game edukasi interaktif berbasis HTML menggunakan bantuan AI.
Buat Satu Media Pembelajaran All-in-One HTML
Gunakan ChatGPT, Gemini, Canva AI Code, atau platform AI lain yang mendukung pembuatan media interaktif.
- Pilih mata pelajaran dan materi.
- Tentukan kelas atau jenjang pengguna.
- Tuliskan tujuan pembelajaran.
- Tentukan bentuk media yang akan dibuat.
- Susun alur penggunaan media.
- Tentukan tampilan dan fitur.
- Susun prompt lengkap.
- Minta AI menghasilkan satu file All-in-One HTML.
- Simpan file dengan ekstensi .html.
- Buka melalui browser.
- Uji seluruh tombol dan interaksi.
- Periksa skor, audio, dan reset jika fitur tersebut digunakan.
- Lakukan minimal tiga perbaikan.
- Simpan versi final media.
1. Judul media.
2. Mata pelajaran, kelas, dan materi.
3. Tujuan pembelajaran.
4. Prompt yang digunakan.
5. File All-in-One HTML.
6. Catatan hasil pengujian.
7. Daftar revisi yang dilakukan.
Refleksi Pembelajaran
Isilah refleksi berikut setelah menyelesaikan materi dan praktik.