Pembelajaran berbasis web dengan Scratch

Pembelajaran berbasis web
Pesatnya laju perkembangan teknologi informasi dan komunikasi dan besarnya
tingkat penggunakan internet menjadi dasar bagi penggiat pendidikan untuk membuat
suatu inovasi media pendidikan yang dapat diakses secara bebas dan interaktif yakni
dengan memanfaatkan laman web.
Khan dalam Herman Dwi Surjono (1999) mendefinisikan pengajaran berbasis web
(WBL) sebagai program pengajaran berbasis hypermedia yang memanfaatkan atribut dan
sumber daya World Wide Web (Web) untuk menciptakan lingkungan belajar yang
kondusif. Sedangkan menurut Clark WBI adalah pengajaran individual yang dikirim melalui
jaringan komputer umum atau pribadi dan ditampilkan oleh web browser. Oleh karena itu
kemajuan WBI akan terkait dengan kemajuan teknologi web (perangkat keras dan
perangkat lunak) maupun pertumbuhan jumlah situs-situs web di dunia yang sangat cepat.
Walter Dick, dkk (2005: 1) dalam pengantar desain pembelajaran menyatakan
bahwa:
”In a contemporary e-learning or distance learning course, students are brought together

with an instructor (perhaps) and textbook or online content, and are guided through class
activities such as online exercises, question/answer/discussion boards, projects, and
interaction with classmates”.
Pernyataan di atas menunjukkan bahwa dalam pembelajaran berbasis web pengajar
menyajikan materi secara online, memandu siswa melalui aktivitas kelas dalam bentuk

latihan, ruang diskusi/tanya jawab, tugas, dan berinteraksi dengan teman sekelas secara
online.
Menurut Herman Dwi Surjono & Maltby (2003), ada dua keuntungan dari pembelajaran
berbasis web, yaitu kebebasan platform dan ruang kelas. Dengan demikian pembelajaran
berbasis web memiliki fleksibilitas tinggi untuk mengubah setting, struktur, maupun
konten sesuai dengan kebutuhan dan karakteristik pengguna.
Menurut Mc.Manus dalam Herman Dwi Surjono (1999) ternyata jaringan internet bukanlah
semata-mata suatu media, tetapi lebih dari itu juga merupakan pemberi materi dan

sekaligus materinya. Seorang guru yang mengajarkan suatu topik tertentu melalui web
akan dengan mudah menghubungkannya dengan situs-situs web yang berkaitan dengan
topik tersebut. Kemampuan ini meliputi:
1. Penyampaian materi dalam berbagai bentuk data serta dapat dihubungkan ke
berbagai sumber informasi lainnya (hypermedia).
2. Pendaftaran mahasiswa secara on-line sehingga bisa dilakukan setiap saat.
3. Identifikasi akses berikutnya bagi mahasiswa yang sudah terdaftar.
4. Penelusuran kemajuan belajar.
5. Evaluasi.
6. Fleksibilitas kontrol terhadap alur pembelajaran dan lain-lain.
Dengan fasilitas yang dimilikinya, internet menurut Onno W. Purbo paling tidak ada tiga

hal dampak positif penggunaan internet dalam pendidikan yaitu:
1. Peserta didik dapat dengan mudah mengambil mata kuliah dimanapun di seluruh
dunia tanpa batas institusi atau batas negara.
2. Peserta didik dapat dengan mudah berguru pada para ahli di bidang yang
diminatinya.
3. Kuliah/belajar dapat dengan mudah diambil di berbagai penjuru dunia tanpa
bergantung pada universitas/sekolah tempat si mahasiswa belajar. Di samping itu
kini hadir perpustakan internet yang lebih dinamis dan bisa digunakan di seluruh
jagat raya” (Oos M. Anwas: 2003).

Pendapat di atas menunjukkan bahwa manfaat internet bagi pendidikan adalah dapat
menjadi akses kepada sumber informasi, akses kepada narasumber, dan sebagai media
kerjasama. Akses kepada sumber informasi yaitu sebagai perpustakaan on-line, sumber
literatur, akses hasil-hasil penelitian, dan akses kepada materi pembelajaran. Akses kepada
narasumber bisa dilakukan komunikasi tanpa harus bertemu secara fisik. Sedangkan
sebagai media kerjasama internet bisa menjadi media untuk melakukan penelitian
bersama atau membuat semacam makalah bersama.

Pengenalan HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk

membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah
penjelajah web (web browser) Internet dan pemformatan hiperteks sederhana yang ditulis
dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Secara sederhananya adalah file HTML merupakan file dasar dari sebuah halaman web
yang dapat dijalankan di web browser.
Dengan membuat sebuah file HTML dan menjalankannya di web browser kita dapat
menyusun sebuah materi pembelajaran interaktif dan terstruktur dalam satu maupun
berbagai file. Pada modul ini akan dibahas pembuatan sebuah media pembelajaran
berbasis web yang dapat menyajikan berbagai media seperti gambar, video, dan animasi.
Dalam Penyusunan file HTML kita menggunakan aplikasi Text Editor seperti Notepad,
Notepad++, Sublime Text, dan sejenisnya

Struktur dasar file HTML
Sebelum melangkah jauh ke dalam pembuatan media, kita perlu terlebih dahulu
untuk mengenal struktur dasar dari file HTMlL yang diikuti dengan aturan penulisannya. Di
bawah ini struktur dasar file HTML

Isi (content) pada file HTML dipenuhi oleh tag. Tag inilah yang akan menentukan
bagaimana tampilan materi jika dijalankan pada sebuah web browser
Dalam menuliskan dokumen HTML, ada aturan yang perlu diikuti. Ada beberapa tag

atau atribut HTML yang kita harus tuliskan dan memang sudah menjadi ketentuan di
kancah internasional.
Berikut Penjelasan menyenai Penulisan (Syntax) file HTML sebelumnya :
1. Line (1) Tag ini jelas sebagai tag pembuka pada halaman HTML yang akan kita buat.
Ingat, setiap setiap tag HTML memiliki tag penutup yang ditandai dengan tanda
slash “/” dan dibarengi dengan nama tag itu sendiri.

2. Line (2) Tag ini akan digunakan untuk menyimpan berbagai informasi tentang
dokumen HTML yang akan kita buat. Hanya saja lebih detailnya tidak akan kita
temukan saat kita menjalankan file tersebut di halaman web browser secara
langsung.
3. Line (3) Salah satu bentuk informasi yang konkrit pada halaman wesite adalah judul
dokumen. Apapun yang ada di antara tag TITLE, maka akan ditampilkan pada judul
browser di tab browser.
4. Line (6) Dengan tag inilah, seluruh halaman atau berkas akan ditampilkan di jendela
web browser. Dokumen diawali dengan atribut “” dan diakhiri dengan tag
terakhir “”.

Berikut table tag HTML dasar yang sering digunakan
Tag html

…

…
…
…

…
…
…
…

Fungsi html
Menyatakan pada browser bahwa dokumen Web yang digunakan
adalah HTML
Kepala dari dokumen HTML
Tag untuk menampilkan isi dokumen HTML
Judul dari dokumen HTML yang ditampilkan pada judul jendela
browser
Tag untuk ganti baris
Membuat paragraf

Header 1, untuk judul sebuah web
Header 2, sub judul sebuah web
Header 3, sub judul sebuah web

…
…
…
…
…

…

…
…


…

…
…

…

Header 4, sub judul sebuah web
Header 5, sub judul sebuah web
Header 6, sub judul sebuah web
Bold, tag html yang berfungsi untuk mempertebal teks
Italic, tag html yang berfungsi untuk membuat tampilan teks
tercetak miring
Underline, tag html yang berfungsi untuk membuat tampilan teks
tercetak garis bawah
Tag html berfungsi untuk menampilkan teks dengan posisi
horizontal ditengah
Tag html berfungsi untuk merubah jenis, ukuran dan warna dari
tampilan huruf
Tag html berfungsi untuk membuat suatu garis horizontal
Order List, tag html berfungsi untuk membuat nomor daftar urut,
bisa berupa angka, huruf atau angka romawi.
Unorder List, tag html berfungsi untuk membuat daftar tanpa
nomor urut (dalam format bullet)

List Item, tag yang berada di elemen OL dan UL yang berbentuk list
Tag html untuk menampilkan gambar
Tag html yang berfungsi untuk menghubungkan ke internal atau
eksternal halaman web

Sebagai Contoh Pada File berikut kia menginginkan sebuah tampilan paragraph yang
disertai judul dari media yang dihiasi dengan warna tertentu

Berikut tampilan file HTML yang kita buat jika dijalankan dengan web browser

Berikut Penjelasan mengenai file HTML yang telah kita buat
1. Line (1) Tag ini jelas sebagai tag pembuka pada halaman HTML yang akan kita buat.
Ingat, setiap setiap tag HTML memiliki tag penutup yang ditandai dengan tanda
slash “/” dan dibarengi dengan nama tag itu sendiri.

2. Line (2) Tag ini akan digunakan untuk menyimpan berbagai informasi tentang
dokumen HTML yang akan kita buat. Hanya saja lebih detailnya tidak akan kita
temukan saat kita menjalankan file tersebut di halaman web browser secara
langsung.
3. Line (3) Salah satu bentuk informasi yang konkrit pada halaman wesite adalah judul

dokumen. Pada kasus ini tulisan “Media berbasis Web”ditampilkan pada judul

browser di tab browser.

4. Line (6) Dengan tag inilah, seluruh halaman atau berkas akan ditampilkan di jendela
web browser. Dokumen diawali dengan atribut “” dan diakhiri dengan tag
terakhir “”.

5. Pada kata “Gerak Jatuh Bebas” diapit dengan tag “..” yang memberikan
efek sebagai judul pada kata tersebut

6. Pada kata “Free Fall Motion” diapit dengan tag “..” yang memberi efek cetak
miring dan tag “…” yang memberikan efek warna biru
pada kata tersebut

Menambatkan (embed) gambar pada file HTML
Gambar merupakan salah satu media yang paling sederhana dalam sebuah media
interaktif. Pada pokok bahasan kali ini kita akan menambatkan gambar benda Jatuh bebas
pada file HTML yang telah kita buat

Berikut tampilannya jika dijalankan di web browser

Perhatikan pada baris ke 10 kode yang kita tulis. “” merupakan tag tanpa tag

penutup yang digunakan nntuk menampilkan gambar. Attribute “src” menandakan sumber
gambar. Pada kasus ini gambar dengan nama file “free-fall.jpg” yang ditaruh setara dalam

satu folder dengan file HTMl yang kita buat. Attribute “height” digunakan untuk mengatur
lebar gambar. Sebenarnya ada attribute “width” yang digunakan untuk mengatur panjang
gambar, namun karena yang diinginkan adalah proporsi gambar tidak berubah maka kita
hanya perlu mengatur salah satu dari attribute “height” atau “width”. Pada baris ke 9

ditambahkan tag “,,” yang digunakan untuk mengapit gambar sehingga
posisi gambar akan berada pada posisi di tengah layar

Menambatkan (embed) video youtube pada file HTML
Youtube merupakan situs web video sharing yang menjadikan tempat berbagi video
pengguna di seluruh penjuru dunia. Tidak sedikit penggiat media pendidikan yang
membagikan media video buatannya di youtube sehingga kita dapat memanfaatkan video
tersebut untuk memperkaya media pembelajaran yang kita susun.

Pada kasus pembuatan media pembelajaran pokok bahasan Gerak Jatuh bebas
misalnya. Kita dapat mencari video yang berhubungan entah itu analisa video dari gerak
benda, eksperimen benda, penjelasan dari pengajar luar negeri, maupun simulasi dalam
bentuk video di youtube kemudian menambatkan video tersebut ke file HTML yang telah
kita buat
Langkah Penambatan Video dari Youtube adalah sebagai berikut:
1. Cari video yang diinginkan misalnya pada kasus ini saya ingin menambatkan video
eksperimen benda jatuh bebas yang dilakukan oleh peneliti dari luar negeri
2. Tekan tombol SHARE yang ada di bagian bawah frame video
3. Tekan tombol EMBED
4. Salin kode pada file HTML yang kita buat. Untuk menambahkan keterangan kita bias
menambahkan tag “..” untuk memberi judul video dan tag
“..” untuk menampilkan video di tengah layar

5. Save file HTML

6. Uji coba di browser. Karena video merupakan hasil penambatan dari youtube maka
agar dapat memutar video tersebut kita harus dapat terhubung dengan server
Youtube

Berikut kode pada file HTML yang telah selesai dengan penambatan video dari
Youtube

Berikut tampilan pada web brower

Pengenalan dan Instalasi Scratch
Apa itu Scratch?
Scratch adalah bahasa pemrograman visual berbasis blok kode yang didesain oleh
Kindergarden Lifelong Learning Group di MIT untuk memperkenalkan konsep dasar
pemrograman dalam bahasan yang interaktif dan menyenangkan. Scratch merupakan
bahasa visual yaitu pembuatan proyek dengan menggunakan perantara berupa gambar
(Kadir, 2011:12).Dalam bahasa pemrograman Scratch, objek (sprites) dimanipulasi dalam
background (stage) dengan menggunakan berbagai script. Setiap sprite memiliki script yang
mengontrol interaksinya dengan sprite yang lain.
Perangkat lunak ini menggunakan lisensi opensource MIT sehingga dapat digunakan
secara gratis dan bebas oleh siapa saja. Perbedaan yang mendasar jika dibandingkan
dengan program konvensional, kode pada program Scratch disusun dengan menggunakan
gambar. Tipe penyusunan kode yang mirip dengan permainan lego ini diharapkan dapat
memudahkan pembuat aplikasi pemula maupun yang sudah mahir.
Scratch

dikembangkan

sebagai

aplikasi

berbasis

Cloud

Computing

yang

memungkinkan pengguna dan pembuat aplikasi berbantuan Scractch dapat membagikan
(sharing) ke pengguna lainnya, bahkan melihat kode sumber
dikerjakan oleh pengguna lainnya.

(source code ) yang

Scratch secara online dapat anda akses di laman

http://scratch.mit.edu/.
Pembuatan aplikasi dengan bantuan Scratch selain dapat dikerjakan secara online,
anda juga dapat mengerjakan secara offline dengan menginstall aplikasi Scratch Offline
Editor yang dapat anda unduh di laman http://scratch.mit.edu/scratch2download/ namun
sebelumnya anda harus memiliki Adobe Air terlebih dahulu untuk menjalankan aplikasi ini.
Scratch dapat dijalankan di berbagai sistem operasi seperti Mac, Windows dan Linux
1. Kebutuhan Minimum Instalasi Scratch Offline Editor
Untuk memasang ( meng-install ) atau menjalankan Scratch membutuhkan:
1) Layar (display) : 800 x 480 atau lebih besar (warna 16-bit atau lebih).

2) Sistem operasi : Windows 2000 atau yang terbaru, Mac OS X 10.4 atau yang
terbaru, Linux Ubuntu 9.04 atau yang terbaru.
3) Hard disk 120 MB ruang bebas
4) Sebagian besar komputer memiliki memori yang cukup untuk menjalankan
tetapi pada komputer yang sangat tua (komputer dengan spesifikasi rendah)
Scratch dapat berjalan lambat.
5) Instalasi Adobe AIR

Instalasi Scratch Offline Editor
1) Instalasi Adobe AIR
Adobe AIR ini singkatan dari Adobe Integrated Runtime yang merupakan
Runtime Environment antar platform yang dibangun menggunakan Adobe
Flash, Adobe Flex, HTML, dan Ajax yang dapat dipasang sebagai aplikasi
desktop.

Aplikasi

Adobe

Air

dapat

anda

unduh

di

laman

http://get.adobe.com/air/ , Kemudian jalankan aplikasi Adobe Air dengan
klik ganda file tersebut.

Gambar 1. 1 . Jendela instalasi Adobe AIR

2) Instalasi Scratch Offline Editor
Setelah sukses Adobe Air sukses terinstal, jalankan aplikasi Scratch.air yang
telah anda unduh di laman : http://scratch.mit.edu/scratch2download/

Klik ganda file Scratch.air Kemudian tentukan lokasi tempat instalasi, secara
default biasanya terletak di C:\Program Files. Jika ingin mengubah lokasi
install, klik tombol bergambar folder. Setelah itu klik Continue Kemudian Klik
Finish sebagai langkah akhir instalasi

Gambar 1. 2 Jendela Instalasi Scratch Offline

Mengenal Lingkungan Kerja Scratch
Lingungan kerja Scratch atau yang sering dikenal sebagai Scratch IDE (ntegrated
Development Environment) terdiri dari 3 bagian penting, yakni Code Block Area, Sprite Area
dan Stage. Code Block Area menampilkan blok kode yang dapat kita masukkan ke dalam
script aplikasi yang akan kita buat.Code Block terdiri dari beberapa kategori seperti
Motion, Looks, Sound, Pen, Data, Evente,Control, Sensing, Operators, dan More Block. Masingmasing kategori memiliki warna yang berbeda sehingga mudah ditentukan suatu blok kode
berasal dari kategori yang mana.

Gambar 1. 3 Tampilan IDE Scratch 2 Offline Editor
Di sebelah kanan area blok kode (Code Block Area) adalah area sprite. Informasi
tentang sprite yang dipilih akan ditampilkan di bagian atas daerah ini. dia area ini tersedia
tiga tab yang digunakan untuk mengontrol akses ke script (Script Tab), tampilan sprite
(Custom Tab), dan Suara sprite (Sound Tab) .
Di sebelah kiri area area blok kode (Code Block Area) adalah Stage, Stage berfungsi
sebagai layar dalam pembuatan aplikasi. di bagian bawah Stage terdapat daftar sprite
(Sprite List) yang menampilkan daftar semua sprite yang digunakan dalam pembuatan
aplikasi.

Tabel 1. 1 Daftar Scratch Block Category
No
1

Keterangan

Block Category
Motion Blocks

Block

Blok berwarna biru

Move () Steps • Turn () Degrees •

medium, digunakan untuk

Point in Direction () • Point

mengontrol gerakan sprite

Towards () • Go to X: () Y: () • Go to
() • Glide () Secs to X: () Y: () •
Change X by () • Set X to () • Change
Y by () • Set Y to () • If on Edge,
Bounce • Set Rotation Style () • X
Position • Y Position • Direction

2

Looks Blocks

Blok berwarna ungu ,

Say () for () Secs • Say () • Think ()

digunakan untuk

for () Secs • Think () • Show • Hide •

mengontrol penampilan

Switch Costume to () •Next Costume

sprite

• Switch Backdrop to () • Change ()
Effect by () • Set () Effect to () •
Clear Graphic Effects • Change Size
by () • Set Size to ()% • Go to Front
• Go Back () Layers •Costume # •
Backdrop Name • Size

3

Sound Blocks

Blok berwarna ungu cerah,

Play Sound () • Play Sound () Until

berfungsi untuk mengontrol

Done • Stop All Sounds • Play Drum

suara dan fungsi MIDI

() for () Beats • Rest for () Beats •
Play Note () for () Beats • Set
Instrument to () • Change Volume
by () • Set Volume to () % • Volume
• Change Tempo by () • Set Tempo
to () bpm • Tempo

4

Pen Blocks

Blok berwarna hijau gelap,

Clear • Stamp • Pen Down • Pen Up

digunakan untuk

• Set Pen Color to () • Change Pen

mengontrol aspek pena

Color by () • Change Pen Shade by

Program Scratch

() •Set Pen Shade to () • Change Pen
Size by () • Set Pen Size to ()

5

Control Blocks

Blok berwarna emas,

Wait () Secs • Repeat () • Forever •

digunakan untuk

If () Then • If () Then, Else • Wait

mengontrol script

Until () • Repeat Until () • Stop () •
When I Start as a Clone • Create
Clone of () • Delete This Clone

6

Events Blocks

Blok berwarna coklat,

When Green Flag Clicked • When ()

digunakan untuk memicu

Key Pressed • When This Sprite

script berjalan, Events Block Clicked • When Backdrop Switches
sangat penting untuk setiap

to ()• When () > () • When I Receive

project aplikasi. Tanpa

() • Broadcast () • Broadcast () and

kategori ini project yang

Wait

dikerjakan tidak akan bisa
berjalan (running)
7

Sensing Blocks

Blok berwarna biru muda,

Touching ()? • Touching Color ()? •

digunakan untuk

Color () is Touching ()? • Distance

mendeteksi faktor yang

to () • Ask () and Wait • Answer •

berbeda dari proyek

Key () Pressed? • Mouse Down? •
Mouse X • Mouse Y • Loudness •
Video () on () • Turn Video () • Set
Video Transparency to ()% • Timer
• Reset Timer • () of () • Current () •
Days Since 2000 • Username • ()
Sensor Value • Sensor ()?

8

Operators

Blok berwarna hijau muda,

() + () • () - () • () * () • () / () • Pick

Blocks

digunakan untuk script

Random () to () • () < () • () = () • ()

persamaan matematika dan

> () • () and () • () or () • Not () •

penanganan string

Join ()() •Letter () of () • Length of
() • () Mod () • Round () • () of ()

9

Data Blocks

Blok berwarna oranye

() • Set () To () • Change () by () •

digunakan untuk

Show Variable () • Hide Variable ()

mengontrol variabel

• Add () to () • Delete () of () •
Insert () at () of () • Replace Item ()
of () with () • Item () of () •Length
of () • () Contains () • Show List () •
Hide List ()

10

More Blocks

Blok berwarna ungu,

Define () • () (Custom block)

digunakan untuk membuat
Blok

Membuat Animasi Sederhana
Sebelum memulai pembuatan animasi sederhana kita perlu terlebih dahulu
mengetahui cara untuk memasukkan sprite ke dalam Scratch. Terdapat 4 metode untuk
memasukkan sprite ke dalam aplikasi Scratch yakni dengan menginput dari pustaka
(library) Scratch, menggambar dengan editor Scratch, Input melalui direktoti komputer
dan menggunakan kamera jika tersedia. Pada contoh kali ini kita akan menggunakan
metode pertama yakni dengan menggunakan input melalui pustaka Scratch.
Langkah-langkah input melalui pustaka Scratch adalah sebagai berikut :
1. Klik Pilih sprite dari pustaka

2. Pilh sprite yang akan dimasukkan kemudian Klik OK

Membuat Animasi Kontrol Gerak Sederhana
Langkah awal ketika kita membuat animasi adalah proses ketika animasi dimulai.
Kondisi mulai ini juga merupakan kondisi reset pada sebuah animasi. Pada Scratch kita
dapat menggunakan tombol bendera hijau (green flag) untuk menjadi pemicu kejadian
(event trigger) pada keadaan mulai dan reset animasi. Pada saat reset kita juga
menentukan posisi koordinat objek sprite

Untuk membuat gerakan kita menggunakan block perintah yang ada pada kejadian
ketika tombol keyboard ditekan. Dengan memanfaatkan tombol panah atas, bawah, kiri dan
kanan sebagai pemicu kejadian kita dapat membuat kontrol gerakan pada sprite yakni
dengan mengubah posisi koordinat x dan y dari sprite

Sebagai pemanis, ketika benda menyentuh sisi layar kita dapat menambahkan suara
dengan memanfaatkan fungsi kontrol, Sensor dan suara

Sebagai tambahan lanjutan kita juga dapat memberikan efek garis lintasan ketika sprite
bergerak dengan fungsi pena

Penambahan fungsi pena menyebabkan kita harus menambahkan kondisi clear
ketika animasi dalam keadaan reset, maka kita harus mengubahkan kembali perintah reset
yang kita buat sebelumnya

Berikut Contoh Animasi kontrol gerakan dengan Scratch yang telah kita buat.
Contoh file disertakan pada direktori scratch_file/gerakan_sederhana.sb2

Membuat Animasi Dialog Sederhana
Dalam pembuatan animasi dialog terlebih dahulu persiapkan terlebih dahulu
skenario percakapan yang akan digunakan. Pada contoh kali ini kita menggunakan
percapakan antara Kalong dan Lowo. Lowo yang lama tidak pulang kampung menyapa dan
kalong terjadi interaksi dua arah di antara mereka.
Sprite yang kita gunakan berasal dari pustaka sprite, untuk perintah menampilkan dialog
ada di block Tampilan

Untuk mewujudkan terjadinya interaksi antara 2 sprite kita menggunakan block
Kejadian dengan fungi broadcast (siarkan). Kegunaan fungsi broadcast terjadi
ketika ada respon dari penerima broadcast yakni semua sprite yang terpengaruh
dari broadcast tersebut.

Pada contoh broacast pertama setelah Lowo berkata Mohon maaf lahir batin ada
broadcast pesan tanya_1 kemudian pada Sprite Kalong ada kondisi ketika sprite
tersebut menerima broadcast tanya_1, sprite kalong memberi respon dari broadcast
tersebut

Berikut Skrip yang terdapat pada sprite Lowo

Berikut sprite yang terdapat pada sprite Kalong

Mengenal Cara Pembuatan Tombol
Konsep pembuatan tombol sesuai yang telah dijelaskan pada contoh pembuatan
dialog. Kuncinya adalah sprite yang digunakan sebagai tombol memberikan broadcast
kepada sprite yang akan berjalan menerima broadcast. Pada contoh ini tombol hijau
berfungsi sebagai tombol yang memicu naga untuk bergerak

Berikut skrip pada tombol hijau yang memberikan broadcast jalan

Berikut skrip pada sprite naga yang menerima perintah broadcast jalan

Mengenal Cara Pembuatan Presentasi Sederhana
Pembuatan presentasi menggunakan konsep perubahan latar (backdrop) ketika ada
perintah broadcast dari tombol. Dengan pengetahuan dasar yang kita dapatkan dari
pembuatan animasi sebelumnya kita dapat membuat sebuah presentasi sederhana dengan
Scratch.
Jumlah latar (backdrop) yang kita gunakan sebagai slide presentasi

Berikut Skrip pada latar (backdrop)

Unttuk skrip pada tombol kita hanya menambahkan perintah broadcast “next” pada

tombol panah kanan dan broadcast “prev” pada tombol arah kiri.

Menambatkan (Embed) File Scratch pada file HTML
Penambatan File Scratch serupa dengan penambatan video dari Youtube. Maka
dapat mencari simulasi yang kita inginkan atau mengunggah hasil karya kita di
scratch.mit.edu.
Berikut langkah –langkah untuk menambatkan file Scratch ke dalam file HTML

1. Login ke situs scratch.mit.edu . Berdasarkan pembaharuan situs Scratch MIT menu
Embed hanya muncul jika kita sudah login ke dalam web Scratch

2. Temukan file Scratch yang diinginkan
3. Tekan tombol EMBED

4. Salin kode embed tersebut pada file HTML yang telah kita buat
5. Perhatikan bahwa kode EMBED yang diberikan Scratch ternyata tidak sempurna
maka kita perlu menyunting kode tersebut pada bagian “src="//” menjadi
“src=”https://”

6. Simpan file kemudian Uji coba di web browser

Berikut tampilan kode pada file HTML

Berikut tampilan pada web browser

Daftar Pustaka
Association for Educational Communications and Technology (AECT) Task Force on
Definition and Terminology. 1977. The Definition of Educational Technology.
Washington, D.C: AECT.
Heinich,R.. Molenda, M., Russell, James D., and Smaldino, S.E. 2005. Instructional
Technology and Media for Learning. Prentice Hall, New Jersey
Malan, D.J., & Leitner, H.H. 2007. Scratch for budding computer scientists. ACM
SIGCSE Bulletin, 39, 223–227.
Maloney, J., Burd, L., Kafai, Y., Rusk, N., Silverman, B., and Resnick, M. 2004.
Scratch: A Sneak Preview. Second International Conference on Creating,
Connecting, and Collaborating through Computing. Kyoto, Japan, pp. 104-109.
Resnick, M., Maloney, J., Monroy-Hernández, A., Rusk, N., Eastmond, E., Brennan, K.,
Millner, A., Rosenbaum, E., Silver, J., Silverman, B., Kafai, Y. 2009. Scratch:
Programming for All. Communications of the ACM, November 2009
Muller, D.A. 2008. Designing Effective Multimedia for Physics Education. Thesis.
Sydney : School of Physics University of Sydney. Peppler, Kylie & Kafai,
Yasmin. 2007. From SuperGoo To Scratch: Exploring Creative Digital
Media Production In Informal Learning. Learning, Media and Technology.
Vol. 32, 149-166.
Resnick, M. et al. 2009. Scratch: Programming For All. Communications Of The ACM.
Vol.52, 60-67.
Rias, R.M. & Zaman, H.B. 2011. The Effects of Varied Animation in Multimedia
Learning : Is the extra effort worthy?.International Journal of Digital
Information and Wireless Communication (IJDIWC) 1 (3). 582-590.
Suryadi, A. 2007. Pemanfaatan ICT dalam Pembelajaran. Jurnal Pendidikan
Terbuka dan Jarak Jauh. Vol 8, 83-98.
Tambade, P.S. & Wagh, B.G. 2011. Assessing the Effectiveness of Computer Assisted
Instructions in Physics at Undergraduate Level. Eurasian Journal of Physics
and Chemistry Education. Vol. 3, 127-136.

Lampitran : Kode File HTML


Media Berbasis Web



Gerak Jatuh Bebas
Gerak jatuh bebas (Free Fall
Motion) adalah salah satu bentuk gerak lurus dalam satu
dimensi yang hanya dipengaruhi oleh adanya gaya gravitasi. Variasi
dari gerak ini adalah gerak jatuh dipercepat dan gerak peluru.





Eksperimen Gerak Jatuh Bebas



Simulasi Gerak Jatuh Bebas