web-based science learning

Kajian bagaimana pembelajaran berbasis web berdasarkan beberapa literatur dan pengalaman dipresentasikan pada suatu webinar nasional [ 1 ]. Dengan hanya berbekal aplikasi peyunting teks polos dan penjelajah internet pembuatan suatu halaman web, yang bergaya dan interaktif, serta dapat disisipkan berbagai jenis media, dapat dibuat secara lokal. Lebih lanjut halaman web ini dapat dikemas dalam media penyimpanan untuk dikirimkan dengan pos sehingga menjadi media pembelajaran secara luring, ataupun dibagikan secara daring melalui internet. Media berbentuk halaman web inilah yang merupakan hal utama dari pembelajaran berbasis web.

terms

Arti istilah-istilah teknis dapat ditentukan dengan berbagai cara, yang untuk 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) atau diturunkan dengan menaungi maknanya dengan kata sifat agregat (seperti online learning, distance learning, serta termasuk pula web-based learning), dengan keempat contoh telah disebutkan memiliki definisi [ 2 ] sebagai berikut.

E-learning paling banyak diasosiasikan dengan aktivitas yang melibatkan komputer dan jaringan interaktif secara bersama-sama, di mana komputer tidak perlu menjadi elemen utama aktivitas atau menyediakan isi pembelajaran, akan tetapi keterlibatan komputer dan jaringan dalam kegiatan pembelajaran harus berarti.

Web-based learning terkait dengan bahan pembelajaran yang disampaikan menggunakan suatu penjelajah web, walaupun bahan-bahan tersebut dikemas pada CD-ROM atau media lainnya.

Online learning dikaitkan dengan konten yang siap diakses pada suatu komputer, dengan konten dapat berada di Web atau internet, atau hanya terinstal pada CD-ROM atau hard disk komputer.

Distance learning melibatkan interaksi jarak jauh antara instruktur dan peserta pembelajaran dan memungkinkan reaksi sesaat instruktur pada peserta, dengan demikian hanya menyediakan atau menyiarkan bahan pembelajaran pada peserta belum merupakan distance learning, karena instruktur harus terlibat dalam menerima umpan balik dari para peserta.

Tiga dari empat istilah di atas diterjemahkan per kata sedangkan terdapat satu istilah yang telah memiliki tertentu.

Table 1. Terjemahan keempat istilah asing terkait pembelajaran.

Istilah	Terjemahan	Sumber
e-learning	pembelajaran elektronik	Google Translate [ 3 ]
web-based learning	pembelajaran berbasis web	Google Translate [ 4 ]
online learning	pembelajaran daring	Google Translate [ 5 ]
distance learning	pembelajaran jarak jauh	Google Translate [ 6 ]

Khusus untuk pembelajaran jarak jauh, istilah ini lebih dikenal sebagai pendidikan jarah jauh (PJJ) telah terdapat arti resminya, yaitu

Pendidikan jarak jauh (PJJ) adalah proses belajar mengajar yang dilakukan secara jarak jauh melalui penggunaan berbagai media komunikasi.

yang tertuang adalam Peraturan Menteri nomor 7 tahun 2020, sebagaimana dicantumkan oleh institutsi pendidikan penyelenggaranya [ 7 ], dengan pelopornya di Indonesia adalah Universitas Terbuka [ 8 ].

web-based learning

Dengan demikian dapat kembali ditegaskan bahwa untuk pembelajaran berbasis web (PBW) bahwa

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.

pros and cons

Terdapat kelebihan dan kekurangan dalam PBW [ 9 ].

advantages

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).
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.

disadvantages

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.
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.

Dengan demikian perlu dilakukan antisipasi terhadap kekurangan dari PBW serta benar-benar memanfaatkan keuntungannya sehingga menghasilkan pembelajaran yang diharapkan. Selain itu perlu pula dipikirkan strategi pembelajarannya, seperti apakah PBW merupakan media utama pembelajaran ataukah hanya merupakan media pendukung dari pembelajaran konvensional (PK), di mana cara konvensional memiliki keuntungan utama yaitu konfirmasi langsung atas ketidakjelasan bahan ajar kepada pengajar oleh peserta ajar.

comparison study

Umumnya untuk menguji apakah PBW efektif, dilakukan pembandingan dengan PK, tetapi terdapat pula yang membandingkannya dengan computer-based instruction (CBI) yang dirasakan lebih tepat [ 10 ], yang dalam hal ini membandingkan antara sumber bahan ajar tersedia di web (PBW) atau terinstal pada komputer secara lokal (CBI).

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.

dengan batasan ukuran sampel 9-50 (13), 51-100 (10), lebih dari 100 (11).

development steps

Terdapat langkah-langkah untuk mengembangkan suatu web-based learning, seperti

analisis konten,
analisis sumber bahan,
analisis pengguna,
analisis kebutuhan perangkat lunak,
analisis kebutuhan perangkat keras,
tahap perancangan web edukasi
- analisis materi pembelajaran,
- diagram alir (flowchart)
- panel cerita (storyboard)
tahap pengembangan
- konstruksi antarmuka,
- coding untuk membuat situs web berjalan,
tahap evaluasi oleh pakar
- evaluasi konten,
- evaluasi bahasa,
- evaluasi media,
tahap revisi (berdasarkan ulasan pakar)
- masukan dari pengajar
- masukan dari peserta ajar

yang telah diterapkan untuk pengungkit pada topik tubuh manusia menggunakan media interaktif yang mendapatkan nilai 82/100 dari peserta ajar dan 91/100 dari kolega pengajar [ 11 ].

local web pages

Halaman web dapat dibangun secara local dan disebarkan menggunakan CD-ROM, USB flash drive, HDD.

software

Perangkat lunak yang diperlukan adalah

penjelajah web, seperti Google Chrome, Microsoft Edge, Apple Safari, Opera, atau Mozilla Firefox [ 12 ],
penyunting text polos seperti Notepad++ [ 13 ].

html + css + js

Halaman web dewasa ini dapat menjadi terlihat bergaya dan interaktif.

HTML (Hyper Text Markup Language) adalah bahasa markup standar untuk membuat halaman web, yang mendeskripsikan struktur suatu halaman web, terdiri sejumlah elemen yang dapat memberitahu penjelajah bagaimana menampilkannya [ 14 ].

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 [ 15 ].

JS (JavaScript) adalah suatu bahasa skrip atau bahasa pemrograman yang mengijinkan untuk melakukan implementasi fitur-fitur rumit pada halaman web, dengan mengubah elemen (HTML) dan cara menampilkan elemen (CSS) yang digunakan [ 16 ].

activities

Pembuatan suatu halaman web dapat dilakukan dengan

membuat halaman web (HTML + CSS + JS) menggunakan peyunting teks polos seperti Notepad++,
menyunting dan menyimpan perubahan yang telah dilakukan,
melihat hasilnya pada suatu penjelajah web seperti Google Chrome.

Langkah kedua dan ketiga akan dilakukan berulang-ulang sampai diperoleh hasil yang diharapkan.

examples

Terdapat banyak contoh-contoh materi PBW yang menggunakan HTML + CSS + JS. Beberapa akan disajikan secara ringkas berikut ini.

HyperPhysics [ 17 ]
Pada HyperPhysics konsep-konsep fisika dihubungkan menggunakan peta konsep, yang membantu peserta ajar untuk melihat keterkaitan antar konsep. Suatu konsep dapat pula terdiri dari konsep-konsep lain. Di halaman depannya HyperPhysics menyajikan konsep-konsep utama fisika. Kemudian bila dipilih konsep Mekanika, maka akan muncul konsep-konsep yang termasuk di dalam bagian Mekanika. Salah satu bagian dari mekanika adalah hukum-hukum Newton, yang apabila dipilih di dalamnya akan ada halaman peta konsep lainnya. Pada halaman terakhir ini terdapat bagian Problem Standar dengan Gesekan yang akan membawa pengakses situs ini pada contoh-contoh sistem dengan gaya gesek. Selain menyajikan peta konsep, HyperPhysics juga menyajikan contoh soal yang memanfaatkan JavaScript sehingga pengguna bisa berinteraksi dengan mengubah-ubah nilai variabel-variabel untuk memahami bagaimana cara mendapatkan hasilnya. Rumusannya diberikan pada bagian sebelumnya, yaitu bagian sebelum adanya contoh perhitungan.
myPhysicsLab [ 18 ]
Situs ini menyajikan berbagai simulasi gerak benda secara dinamis, dengan contoh-contohnya terdapat pada halaman utamanya. Pada setiap contoh simulasi yang ditawarkan setidaknya terdapat simulasi gerak benda, grafik ruang fasa, grafik besaran fisis sebagai fungsi waktu dan panel berisikan angka-angka yang dapat diubah nilai-nilainya. Setelah panel simulasi, terdapat teori dan persamaan yang menjelaskan apa yang disimulasikan sehingga pengguna dapat memahami mengapa gerak sistem seperti itu dan tidak hanya sekedar menikmati kedinamisan sistem fisis tersebut. Interaksi dengan tetikus pun telah diimplementasikan sehingga pengguna dapat menyeret benda dan melepaskannya, yang merupakan cara lain dalam memberikan syarat awal pada simulasi, ketimbang mengubah nilai-nilai pada panel yang disediakan.
matter.js [ 19 ]
Terdapat pustaka JS bernama matter.js yang kode sumbernya tersedia di Github untuk dimodifikasi. Interaksi banyak benda telah diakomodasi oleh pustaka matter.js, yang didemokan pada halaman utama situs ini. Interaksi-interaksi fisis yang diakomodasi adalah gaya gravitasi, gaya pegas, tumbukan, dan elastisitas.

Untuk melihat dengan cepat suatu halaman web yang berformat HTML menggunakan CSS dan JS dapat dilihat menggunakan kode halaman tersebut dengan berbagai tombol pintas [ 20 ].

summary

Dengan demikian hal-hal berikut dapat disarikan seperti di bawah ini.

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.
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).

note

Sparisoma Viridi, “Pembelajaran sains berbasis web”, Webinar Nasional: Literasi dan Inovasi Digital dalam Pembelajaran, 27 Desember 2021, Indonesia, url https://doi.org/10.17605/osf.io/h94cf .
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 . Tsai2002-eLearn-2002-7-3-2002
“e-learning”, Google Translate, url https://translate.google.com/?sl=en&tl=id&text=e-learning&op=translate [20211226].
“web-based learning”, Google Translate, url https://translate.google.com/?sl=en&tl=id&text=web-based%20learning [20211226].
“pembelajaran daring”, Google Translate, url https://translate.google.com/?sl=id&tl=en&text=pembelajaran%20daring [20211226].
“distance learning”, Google Translate, url https://translate.google.com/?sl=en&tl=id&text=distance%20learning [20211226].
Admin, “Apa itu pendidikan jarak jauh?”, PJJ Universitas Indonesia, 15 Mar 2020, url https://pjj.ui.ac.id/ufaqs/apa-itu-pendidikan-jarak-jauh/ [20211226].
Syafnidawaty, “Apa itu Pembelajaran Jarak Jauh?”, Universitas Raharja, 17 Nov 2020, url https://raharja.ac.id/2020/11/17/apa-itu-pembelajaran-jarak-jauh/ [20211226].
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 . McKimm2003-BritMedJ-326-7394-870-2003
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 . Olson2002-IntRevResOpenDistanceLearn-3-2-2002
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 . Astuti2020-JSciLearn-3-2-89-2020
Vijay Shinde, “Top 10 BEST Browsers For PC [2022 Web Browser Ranking]”. Software Testing Help, 20 Dec 2021, url https://www.softwaretestinghelp.com/best-browser-ranking/ [20211227].
Don Ho, “What is Notepad++”, version 8.1.9.3, 6 Dec 2021, url https://notepad-plus-plus.org/ [20211227].
Refsnes Data, “HTML Introduction”, W3Schools, url https://www.w3schools.com/html/html_intro.asp [20211227].
Refsnes Data, CSS Introduction", W3Schools, url https://www.w3schools.com/css/css_intro.asp [20211227].
MDN contributors, “What is JavaScript?”, 7 Dec 2021, url https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript [20211227].
Carl R. Nave, “Hyperphysics”, HyperPhysics, 2017, url http://hyperphysics.phy-astr.gsu.edu/hbase/index.html [20201227].
Erik Neumann, “Physics Simulations”, myPhysicsLab, 6 Feb 2021, url https://www.myphysicslab.com/ [20211227].
Liam, “matter.js", brm.io, url https://brm.io/matter-js/ [20211227].
Scott Orgera, “How to View the Source Code of a Web Page”, Lifewire, 27 Dec 2021, url https://www.lifewire.com/view-web-source-code-4151702 [20211228].

comments

{% comment %} • {% endcomment %}

{% comment %} {% endcomment %}