Webinar nasional pada 27 Desember 2021 membahas literasi dan inovasi digital dalam pembelajaran sains berbasis web, dengan fokus pada istilah-istilah terkait seperti e-learning, web-based learning, dan distance learning. Diskusi mencakup pro dan kontra dari pembelajaran berbasis web, langkah-langkah pengembangan, serta contoh implementasi yang dapat dibuat menggunakan HTML, CSS, dan JavaScript. Tujuan dari webinar ini adalah untuk meningkatkan kualitas pendidikan sains dengan memanfaatkan teknologi digital.

1. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
1
Pembelajaran sains berbasis web
Sparisoma Viridi
Institut Teknologi Bandung, Jl. Ganesha 10, Bandung 40132, Indonesia
v9_20211227 | https://doi.org/10.17605/osf.io/h94cf

2. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
2

3. Kerangka
• Istilah
• Pro dan kontra
• Studi komparasi
• Langkah pengembangan
• Halaman web lokal
• Beberapa contoh
• Penutup
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
3

4. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
4
Istilah

5. Istilah dari konsep baru
• Arti istilah-istilah teknis ditentukan dengan berbagai cara
• Konsep-konsep baru sering diturunkan secara intuitif dari
konsep yang terkait (seperti e-learning dan web-based
learning dari konsep e-mail, web, dan learning)
• Diturunkan dengan menaungi maknanya dengan kata sifat
agregat (seperti online learning, distance learning, serta
termasuk pula web-based learning)
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
5
Susanna Tsai, Paulo Machado, “E-learning, Online Learning, Web-based Learning, or Distance Learning: Unveiling the
Ambiguity in Current Terminology”, eLearn [eLearn], vol 2002, no 7, p 3, Jul 2002, url
https://doi.org/10.1145/566778.568597.

6. E-learning
• Paling banyak diasosiasikan dengan aktivitas yang melibatkan
komputer dan jaringan interaktif secara bersama-sama.
• Komputer tidak perlu menjadi elemen utama aktivitas atau
menyediakan isi pembelajaran.
• Keterlibatan komputer dan jaringan dalam kegiatan
pembelajaran harus berarti.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
6

7. Web-based learning
• Terkait dengan bahan pembelajaran yang disampaikan
menggunakan suatu penjelajah web.
• Bahan-bahan tersebut dapat dikemas pada CD-ROM atau
media lainnya, tidak harus lewat internet.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
7

8. Online learning
• Dikaitkan dengan konten yang siap diakses pada suatu
komputer
• Konten dapat berada di Web atau internet.
• Konten dapat pula hanya terinstal pada CD-ROM atau hard
disk komputer secara lokal.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
8

9. Distance learning
• Melibatkan interaksi jarak jauh antara instruktur dan peserta
pembelajaran
• Memungkinkan reaksi sesaat instruktur pada peserta.
• Hanya menyediakan atau menyiarkan bahan pembelajaran
pada peserta belum merupakan distance learning.
• Instruktur harus terlibat dalam menerima umpan balik dari
para peserta.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
9

10. Terjemahan
Istilah Terjemahan Sumber
e-learning pembelajaran elektronik Google Translate
web-based learning pembelajaran berbasis web Google Translate
online learning pembelajaran daring Google Translate
distance learning pembelajaran jarak jauh Google Translate
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
10

11. Pembelajaran / pendidikan jarak jauh
• Khusus untuk pembelajaran jarak jauh, istilah ini lebih dikenal
sebagai pendidikan jarah jauh (PJJ), terdapat arti resminya
Pendidikan jarak jauh (PJJ) adalah proses belajar
mengajar yang dilakukan secara jarak jauh melalui
penggunaan berbagai media komunikasi.
• Tertuang dalam Peraturan Menteri nomor 7 tahun 2020
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
11

12. Pembelajaran berbasis web (PBW)
• Pembelajaran disampaikan melalui aplikasi penjelajah web,
e.g. Google Chrome, Microsoft Edge, Apple Safari, Opera, atau
Mozilla Firefox,
• Materi dapat bersifat daring (internet, intranet) ataupun
luring (CD-ROM, USB flash drive, HDD),
• Materi disampaikan dalam format web, yaitu HTML yang
dilengkapi dengan CSS untuk tampilan dan JS untuk sifat
interaktifnya, di mana PDF, gambar, dan suara dapat
digunakan sebagai elemen isi halaman web.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
12

13. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
13
Pro dan kontra

14. Kekurangan dan kelebihan PBW
• Terdapat beberapa kekurangan dan kelebihan PBW.
• Perlu dilakukan antisipasi terhadap kekurangan dari PBW
serta benar-benar memanfaatkan keuntungannya sehingga
menghasilkan pembelajaran yang diharapkan.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
14
Judy McKimm, Carol Jollie, Peter Cantillon, “McKimm J, Jollie C, Cantillon P. ABC of learning and teaching: Web based
learning”, British Medical Journal (Clinical Research ed) [Brit Med J], vol 326, no 7394, p 870-873, Apr 2003, url
https://dx.doi.org/10.1136%2Fbmj.326.7394.870.

15. Kelebihan PBW
• Kemampuan untuk menautkan sumber bahan ajar dalam
berbagai format.
• Suatu cara yang efisien untuk menyampaikan bahan
pembelajaran.
• Sumber bahan ajar dapat dibuat tersedia dari lokasi mana saja
dan pada saat kapan saja (luring).
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
15

16. Kelebihan PBW (lanj.)
• Potensial untuk akses yang lebih luas, sebagai contoh paruh
waktu, dewasa, atau peserta ajar yang bekerja.
• Mendorong pembelajaran yang lebih mandiri dan aktif.
• Menyediakan sumber berguna sebagai bahan pelengkap dari
program konvensional.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
16

17. Kekurangan PBW
• Akses pada peralatan komputer yang sesuai spesifikasinya
dapat menjadi permasalahan bagi peserta ajar.
• Dapat membuat peserta ajar menjadi frustasi saat tidak dapat
mengakses grafik, gambar, dan video clip dikarenakan
peralatan yang kurang memadai.
• Terdapat kebutuhan infrastruktur yang harus tersedia dan
terjangkau.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
17

18. Kekurangan PBW (lanj.)
• Informasi dapat amat bervariasi dalam kualitas dan ketepatan,
sehingga panduan and petunjuk arah diperlukan.
• Peserta ajar dapat merasa terisolasi.
• Perlu kemampuan pendahuluan bagi para peserta untuk
mengoperasikan fitur-fitur tertentu.
• Pengajar perlu pula memahami troubleshooting (pemecahan
masalah secara teknis) untuk membantu peserta.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
18

19. Strategi
• Strategi pembelajaran: PBW merupakan media utama pem-
belajaran ataukah media pendukung dari pembelajaran kon-
vensional (PK), di mana cara konvensional memiliki keun-
tungan utama yaitu konfirmasi langsung atas ketidakjelasan
bahan ajar kepada pengajar oleh peserta ajar.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
19

20. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
20
Studi komparasi

21. PBW vs CBI
• Umumnya untuk menguji apakah PBW efektif, dilakukan
pembandingan dengan PK.
• Tetapi terdapat pula yang membandingkannya dengan
computer-based instruction (CBI) yang dirasakan lebih tepat.
• Dalam hal ini membandingkan antara sumber bahan ajar
tersedia di web (PBW) atau terinstal pada komputer secara
lokal (CBI).
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
21
Tatana Olson, Robert A. Wisher, “The Effectiveness of Web-Based Instruction: An Initial Inquiry”, The International
Review of Research in Open and Distributed Learning [Int Rev Res Open Distributed Learn], vol 3, no 2, p, Oct 2002,
url https://doi.org/10.19173/irrodl.v3i2.103.

22. PBW vs CBI (lanj.)
• Diperoleh bahwa
– PBW terlihat sebagai peningkatan dari PK,
– CBI belum terlihat lebih favorit dari PBW,
– Efek ukuran kelas terlihat tidak penting untuk PBW dan CBI.
• Batasan ukuran sampel
– 9-50 (13),
– 51-100 (10),
– lebih dari 100 (11).
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
22

23. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
23
Langkah pengembangan

24. Langkah-langkah pengembangan
• analisis konten,
• analisis sumber bahan,
• analisis pengguna,
• analisis kebutuhan perangkat lunak,
• analisis kebutuhan perangkat keras,
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
24
Lia Astuti, Yaya Wihardi, Diana Rochintaniawati, “The Development of Web-Based Learning using Interactive Media for
Science Learning on Levers in Human Body Topic”, Journal of Science Learning [J Sci Learn], vol 3, no 2, p 89-98, Mar
2020, url https://doi.org/10.17509/jsl.v3i2.19366.

25. Langkah-langkah pengembangan (lanj.)
• tahap perancangan web edukasi
– analisis materi pembelajaran,
– diagram alir (flowchart),
– panel cerita (storyboard),
• tahap pengembangan
– konstruksi antarmuka,
– coding untuk membuat situs web berjalan,
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
25

26. Langkah-langkah pengembangan (lanj.)
• tahap evaluasi oleh pakar
– evaluasi konten,
– evaluasi bahasa,
– evaluasi media,
• tahap revisi (berdasarkan ulasan pakar)
– masukan dari pengajar,
– masukan dari peserta ajar,
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
26

27. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
27

28. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
28
Halaman web lokal

29. Media penyebaran dan perangkat lunak
• Halaman web dapat dibangun secara local dan disebarkan
menggunakan CD-ROM, USB flash drive, HDD.
• Software
– penjelajah web, seperti Google Chrome, Microsoft Edge, Apple Safari,
Opera, atau Mozilla Firefox ,
– penyunting text polos seperti Notepad++.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
29
Don Ho, “What is Notepad++”, version 8.1.9.3, 6 Dec 2021, url https://notepad-plus-plus.org/ [20211227].

30. HTML + CSS + JS
• Halaman web dewasa ini telah dapat memiliki gaya dan tata
letak yang menarik serta interaktif
– Format  HTML
– Gaya  CSS
– Interaktif  JS
• Ketiganya berdasarkan teks polos (plain teks) sehingga aman
dan berukuran kecil untuk ditransmisikan melalu internet, dan
dapat digunakan secara lokal.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
30

31. HTML
• HTML (Hyper Text Markup Langunage),
• Bahasa markup standar untuk membuat halaman web,
• Mendeskripsikan struktur suatu halaman web,
• Terdiri sejumlah elemen yang dapat memberitahu penjelajah
bagaimana menampilkannya.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
31
..

32. CSS
• CSS (Cascading Style Sheets),
• Mendeskripsikan bagaimana elemen-elemen HTML
ditampilkan pada layar, kertas, atau media lainnya,
• Dapat mengendalikan tata letak banyak halaman web
sekaligus (menghemat energi, mengurangi pekerjaan),
• Dapat disimpan pada berkas eksternal terpisah
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
32
..

33. JS
• JS (JavaScript),
• Suatu bahasa skrip atau bahasa pemrograman yang
mengijinkan untuk melakukan implementasi fitur-fitur rumit
pada halaman web,
• Mengubah elemen (HTML) dan cara menampilkan elemen
(CSS) yang digunakan.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
33
..

34. Aktivitas
• Pembuatan suatu halaman web dapat dilakukan dengan
1. membuat halaman web (HTML + CSS + JS) menggunakan
peyunting teks polos seperti Notepad++,
2. menyunting dan menyimpan perubahan yang telah dilakukan,
3. melihat hasilnya pada suatu penjelajah web seperti Google
Chrome.
• Langkah kedua dan ketiga akan dilakukan berulang-ulang
sampai diperoleh hasil yang diharapkan.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
34
..

35. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
35

36. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
36
Beberapa contoh

37. Hyperphysics – Peta konsep
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
37
Carl R. Nave, “Hyperphysics”, HyperPhysics, 2017, url http://hyperphysics.phy-astr.gsu.edu/hbase/index.html
[20200901].

38. Hyperphysics -- JS
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
38

39. myPhysicsLab.com
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
39
Erik Neumann, "Physics Simulations", myPhysicsLab, 6 Feb 2021, url https://www.myphysicslab.com/ [20211227].

40. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
40
url
https://www.myphysicslab.com/sp
rings/collide-blocks-en.html

41. matter.js
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
41
Liam, “matter.js", brm.io, url https://brm.io/matter-js/ [20211227].

42. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
42
Penutup

43. Ringkasan
• Pembalajaran sains dapat dibuat menjadi lebih bergaya dan
interaktif menggunakan halaman web (HTML + CSS + JS).
• Materi pembelajaran dapat disebarkan secara daring
(internet) ataupun luring (CD-ROM, USB flash drive).
• Perangkat lunak penampil umumnya sudah ada berupa
penjelajah web, e.g. Google Chrome, Microsoft Edge, Apple
Safari, Opera, atau Mozilla Firefox.
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
43

44. Ringkasan (lanj.)
• Terdapat perangkat lunak penyunting yang bebas untuk
diunduh dan diinstal, seperti Notepad++.
• Batas materi pembelajaran yang dapat dibuat adalah
imaginasi pembuat dan skillnya (HTML + CSS + JS + konsep
sains), serta kemampuan perangkat keras (untuk interaksi
yang amat rumit atau membutuhkan data besar).
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
44

45. Dukungan
• Fakultas Keguruan dan Ilmu Pendidikan Universitas Bosowa
url https://fkip.universitasbosowa.ac.id/
• Kementrian Pendidikan, Kebudayaan, Riset, dan Teknologi
url https://dikti.kemdikbud.go.id/
• Lembaga Pengelola Dana Pendidikan
url https://lpdp.kemenkeu.go.id/
27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
45

46. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
46
Sparisoma Viridi, "Pembelajaran Sains Berbasis Web", Webinar Nasional: Literasi dan Inovasi Digital dalam
Pembelajaran, 27 Desember 2021, Universitas Bosowa, Makassar, Indonesia, url https://doi.org/10.17605/osf.io/h94cf.

47. 27 Desember 2021
Webinar Nasional: Literasi dan Inovasi
Digital dalam Pembelajaran
47
Terima kasih