COMPUTER ASISTED LEARNING DALAM

KAJIAN FISIOLOGI DAN METABOLISME

Sutrisno Koswara
Departemen Ilmu dan Teknologi Pangan
Fateta-IPB
 Latar Belakang

The next big killer application for the

Internet is going to be education
John Chambers, CEO of Cisco Systems

Adanya komputer dan internet melahirkan konsep

elearning : transformasi pendidikan konvensional ke
dalam bentuk digital, baik secara isi (contents) dan
sistemnya.

Implementasi e-Learning di lembaga pendidikan

(sekolah, training dan universitas) dan industri (Cisco
System, IBM, HP, Oracle, Perusahaan penerbangan
termasuk di Indonesia, dsb).
KEUNTUNGAN
Menghemat waktu proses belajar mengajar
Mengurangi biaya perjalanan
Menghemat biaya pendidikan secara
keseluruhan (infrastruktur, peralatan, buku-
buku)
Menjangkau wilayah geografis yang lebih
luas
Melatih pembelajar lebih mandiri dalam
mendapatkan ilmu pengetahuan
Penggunaan waktu dan SDM instruktur lebih
efektif.
KONDISI PEMBELAJARAN BERBASIS IT

1. MURAH DAN JANGKAUAN LEBIH LUAS

2. WAKTU BELAJAR FLEKSIBEL
3. HARUS INTERAKTIF DAN
MENYENANGKAN
4. ANIMASI DAN VIDEO UNTUK
MEMUDAHKAN PEMAHAMAN KONSEP.
 BENTUK BAHAN AJAR/LEARNING OBJECT

1. TEXT BENTUK HTML DAN PDF (UNEDITABLE)

2. IMAGES
3. ANIMASI
4. VIDEO
5. KUIS
6. SOFTWARE
TIGA KELOMPOK m.k. BERBASIS IT:
1. Berbasis CD Rom
2. Berbasis konten dalam website
3. Berbasis website berupa kontent
yang dimuat dalam LMS (elearning)
Adanya LMS (Learning Manajemen
Sistem) : sistem administrasi proses
belajar mengajar
Isi atau Konten mata kuliah yang
diupload/dimuat dalam LMS
BERBASIS CD ROM

Berbentuk Bahan ajar dalam format

multimedia interactive
Content berupa : text, image, animasi,
video, kuis dll
Contoh :
UNDERSTANDING BIOCHEMISTRY
COLLEGPRO SCIENCE BIOCHEMISTRY
COLLEGPRO MOLECULAR CELL
BIOLOGY
Berbasis website
Bisa berupa versi online dari text book
Content : bisa multimedia interactive
atau tidak.
Mudah dicari di website menggunakan
mesin pencari : contoh
Contoh :
THE Medical Biochemistry Page
Interactive Concepts in Biochemistry
MIT Biology Hipertexbook
Berbasis LMS (ELEARNING)
ADANYA ADMINISTRASI PMB DALAM BENTUK
LEARNING MANAJEMEN SISTEM (LMS)
HAMPIR SEMUA PT SUDAH
MENERAPKAN/MEMPUNYAI ELEARNING
Standar content belum ada atau belum seragam,
dikehendaki adanya interactivity yang tinggi dengan
mahasiswa
Learning obyek : text, image, animasi, video, kuis
 Course Management Systems

Merupakan software aplikasi e-

Learning berbasis Web yang
mengakomodasi kebutuhan
penyelenggaraan eLearning.
Memungkinkan peserta (student)
menikmati semua aspek online
learning dalam satu lokasi karena
menyimpan bahan ajar, dan fitur-
fitur lain seperti administrasi PBM
dan tool-tool komunikasi
Beberapa contoh Course
Management Systems antara lain
WebCT, Course Insite, Blackboard,
Angel, dan lain-lain. Empat nama
yang disebutkan merupakan CMS
dengan fitur paling banyak
dibandingkan dengan CMS
lainnya.
Daftar CMSdan featurnya pada http://www.edutols.info
Claronline-eLearning IPB
Claronline-eLearning IPB
Claronline-eLearning IPB
Claronline-eLearning IPB
CourseInsite-Seafast Center
CourseInsite-Seafast Center
CourseInsite-Seafast Center
CourseInsite Seafast Center
CourseInsite Seafast Center
CourseInsite Seafast Center
Pendekatan online ~ offline learning

Tujuan : peserta elearning agar merasakan kesetaraan antara

online dan offline learning.
Adanya Lecture dan Penjelasan Audio dan Video (seperti
kuliah dalam kelas dan melihat layar OHP atau layar LCD)
Adanya handout berbentuk slide powerpoint dan text yang bisa
diprint, atau link ke halaman website yang relevan.
Adanya interaksi dengan pengajar melalui email, discussion
board, assignment, assesment, dan adanya feedback.
Adanya interaksi dengan peserta lain melalui list dan photo
peserta, discussion board, chat., dan email peserta.
Merasakan kehadiran pengajar melalui biodata pengajar,
Photo, video clip/album photo, bibliografi dan nomor kontak
(kantor dan rumah).
Komposisi Isi eLearning

1. Bagian Pengantar
Course Procedure
Biodata dan Foto Instruktur
Schedule
Registration
Assignment Detail
Course Sillabus
Dll yang dianggap perlu
2. Bagian Bahan Ajar (Unit-Unit) : berupa
Bahan Ajar berbasis elearning (content)
3. Bagian Administrasi PBM
Bagian Administrasi
Untuk Mahasiswa
Login
Announcement
People/User/participant
List and Photo
Email Box
Whos online
Instruktur yang aktif
Mengajak Chat/Diskusi
Your Grade
Etc
Untuk Pengajar/Instruktur
Create a course
Messege Center
etc
Isi Unit/Bab/Topik Bahan Ajar
1. Konsep/Teori/Bahan Belajar
HTML page/webpage sebagai halaman utama yang
dapat berisi text, gambar dan animasi dan mempunyai
link ke :
Animation/interactive (concept, game, self quez)
Penjelasan Konsep dengan Audio
Kuliah atau Lecture berupa Video (ppt atau flash yang
berbentuk Video)
Text handout
Menggantikan teks tapi penyajian dalam ppt atau pdf
Sebaiknya ppt yang ditransfer ke pdf
Reading Article (webpage, pdf, doc)
Unit Assignment detail (pdf, doc)
2. Activity (Discusion board, reading, chat, sharing)
3. Assignment (Reflection log, Weekly Mini Project,
Project)
Isi Unit/Bab/Topik Bahan Ajar

Mata Kuliah

Unit /Lesson Unit /Lesson Unit /Lesson Unit /Lesson

Halaman/page Halaman/page Halaman/page Halaman/page

Text Assignment
Text handout Animasi Video

Audio Text Activity

Gambar

Isi tiap halaman/page bervariasi tergantung kebutuhan

Isi Unit/Bab/Topik Bahan Ajar
Suatu mata kuliah tersusun atas unit-unit atau lesson-lesson,
misalnya unit 1, unit 2, dst. Tiap unit bisa diberi judul unit.
Satu unit sebaiknya berupa satu folder, misalnya folder unit1,
folder unit2, dst.
Tiap folder unit berisi halaman-halaman web, misalnya
unit1halaman1 (disingkat Unit_1p_1.html atau u_1p_1.html),
dan dilengkapi dengan dokumen-dokumen pendukungnya,
baik berupa text pdf, text word, slide powerpoint berbentuk pdf,
animasi flash, file suara, file video, text untuk tugas atau
aktivitas dll.
Penamaan file dokumen pendukung sebaiknya dihubunkan
dengan unitnya, misalnya U_1_ppt_slide.pdf atau
Unit_1_Lecture.Mov, dll
Untuk gambar umumnya dibuat folder khusus yaitu folder
images.
Tiap halaman disertai keterangan : halaman berapa dari
berapa halaman (misal : hal 2 dari 7) dan ada navigasinya
(Next-Back)
Contoh halaman unit : Text HTML, Gambar, link ke Video
Lecture menggunakan gambar, link ke gambar, link ke halaman
HTML lain dengan Next dan Back
Contoh halaman unit : Text HTML; Gambar; link ke file suara/audio, text
bahan bacaan dan activitas/kuis menggunakan gambar; link ke halamanHTML
lain dengan Next dan Back
Contoh halaman unit : Text HTML, Gambar, link ke Audio
Lecture menggunakan gambar, link ke halaman text pdf berisi Slide ppt untuk
diprint; link ke halaman HTML berikutnya dengan Next .
Contoh halaman unit : Text HTML, link ke Animasi Game,
link ke Kuis, Link ke halaman Word yang berisi form; link ke halaman HTML
lain dengan Next dan Back
Contoh Halaman /dokumen Video Lecture
yang dibuat dengan Camtasia Studio
contoh

http://www.seafast.ipb.ac.id/moodle
 Software yang Diperlukan
Software untuk membuat halaman web (halaman
HTML) : Macromedia Dreamweaver, MSFrontpage,
Macromedia Flash, MsWord, notepad.
Software untuk mencari/membuat gambar :
Photoshop, Coreldraw dan software Screen Capture
(tehnik printscreen dan Paint dengan Windows;
SnagIt7.)
Software untuk membuat dokumen pdf dari ppt, xls,
word atau html : Adobe Acrobat Professional 7;
cutepdf dll.
Software untuk membuat animasi : Macromedia Flash.
: sangat penting dalam Biokimia dan fisiologi untuk
menunjukkan proses2 biokimia dengan lebih jelas.
Software untuk membuat file audio :Sound Forge 6.0;
Camtasio Studio3 .
Software untuk membuat Lecture Video : Camtasia
Studio3
Software lain : MSWord dan Powerpoint
Ketrampilan yang Diperlukan
(akan dipraktikumkan)

Pembuatan Halaman Web (Dasar)

Pembuatan dokumen pdf
Pembuatan atau Capture Gambar
Pembuatan Animasi (Memperjelas Konsep,
Feedback Quiz)
Pembuatan File Suara/Audio (penjelasan konsep)
Pembuatan Video (untuk Lecture atau Kuliah)
Pembuatan Aktivitas Belajar Mengajar
(Assessment, Mini project, Project, Reflection Log,
Discussion Board).
Upload (sebagai teacher) ke Development Tools
(Moodle, Claronline, WebCT atau CourseInsite).
 Macromedia Dreamweaver MX 2004

Antarmuka Dreamweaver MX 2004

Insert
bar

Document
toolbar

Panel
Document Window groups

Property
inspector
Antarmuka Dreamweaver MX 2004
Insert Bar
Berfungsi sebagai alat bantu untuk memasukkan
obyek seperti text, gambar, form, tabel, layer,
frame dan lainnya ke dalam dokumen website.
Terdapat tujuh menu utama dalam Insert Bar
yaitu : Common, Layout, Forms, Text, HTML,
Application dan Flash element.
Docement Toolbar
Menginformasikan nama file website yang
sedang dibuka.
Merubah tampilan dokumen dengan cara
mengklik View Code, Split dan Design.
Antarmuka Dreamweaver MX 2004
Docement Window
Pada saat View Design :fungsi document window adalah untuk
meletakkan (drag and drop) obyek-obyek seperti form, tabel,
frame, text, gambar dll ke dalam halaman website.
Pada saat View Code :digunakan untuk menuliskan kode-kode
HTML atau script pemrograman.
Property Inspector
Digunakan untuk melihat dan mengubah properti sebuah obyek.
Obyek website seperti teks, tabel, gambar memiliki properti yang
dapat diatur nilai-nilainya. Misalnya Text mempunyai properti font
color, font alignment, bold, italic dll.
Properti akan berubah dengan sendirinya sesuai dengan obyek
yang dipilih.
Berfungsi juga untuk melink-kan obyek dengan halaman web atau
dokumen yang lain.
Panel Groups
Digunakan untuk melihat atau mengubah pengaturan halaman
website yang sedang atau telah didisain misalnya dengan melihat
CSS Style yang digunakan atau mengeditnya kembali; Melihat
atau mengubah atribut tag HTML; dan membuka file dll.
TIPS MEMBUAT HALAMAN WEBSITE UNTUK ELEARNING

1. Dari hasil praktikum anda akan dapat membuat satu halaman

website yang dapat dijadikan sebagai template untuk membuat
halaman-halaman isi unit yang lain.
2. Misalkan halaman yang dihasilkan dari praktikum diberi nama file
unit1_p1.html.
3. Buka file unit1_p1.html dengan dreamweaver mx2004, kemudian
save as dan diberi nama baru menjadi unit1_p2.html. Buat juga
dengan cara yang sama sehingga diperoleh file-fila baru dengan
nama unit1_p3.html; unit1_p4.html, dst sesuai jumlah halaman
yang anda rencanakan untuk unit1 pada bahan ajar anda.
4. Halaman-halaman tersebut masih kosong (belum ada teks atau
gambar dan obyek lain).
5. Isi masing-masing halaman sesuai dengan isi yang anda
rencanakan.
6. Buat link dan navigasi pada masing-masing halaman.
7. Semua halaman pada unit terebut disimapan pada satu folder,
misalnya folder unit1.
Macromedia Flash MX 2004

Karakteristik Flash
1. Vector Environtment
2. Bitmap Graphics
3. Animation
4. Sound
5. Video
6. Interactivity and User Interface
7. Scripting
8. File dalam flash
fla file,
swf file, and
html file
Antar Muka Flash
Title bar Menu bar Panel

timeline

Keyframe

Tools Box
Stage

Action panel
Properties Panel
Antar Muka Flash
Title bar
Menampilkan nama program dan file dokumen yang sedang aktif.
Menu bar
Terdiri atas 10 menu utama yang masing-masing berisi sub menu atau
perintah lagi.
Timeline
Berguna untuk mengorganisasi dan mengontrol waktu pemutaran movie
atau frame.
Dokumen flash membagi waktu pemutaran movi ke dalam beberapa
frame.
Komponen utama dari Timeline adalah layer, frame, dan playhead.
Panel
Berfungsi untuk mengatur penggunaan warna, component, library, scene,
actions, behavior, dan lain-lain.
Toolbox
Terdiri atas beberapa tool untuk membuat gambar, mewarnai dan
mengatur tampilan gambar pada stage.
Stage
Merupakan lembar kerja dimana gambar, teks, dan tombol navigasi dibuat
untuk keperluan animasi atau aplikasi.
Property Inspector
Berguna untuk mengatur ukuran dan warna stage, menentukan framerate,
dan memilih ruler unit atau satuan ukuran yang akan digunakan dalam
menggambar obyek.
Modul Training dalam Flash
Pembuatan dokumen pdf
A. Install Software Adobe Acrobar professional 7
B. Membuat pdf dari Word atau Powerpoint
1. Jika sudah terinstall maka dalam interface Word dan
PowerPoint sudah terdapat icon atau menu Adobe PDF untuk
mengkonversi menjadi pdf.
2. Buka File word atau Powerpoint, tekan icon Adobe PDF>
Convert to PDF
3. Tunggu sampai konversi sel;esai
4. Save File
5. Cara lain adalah dengan membuka File>Print>pilih printer
Adobe PDF atau Cute PDF Printer dan kemudian Save sebagai
dokumen pdf

C. Membuat dokumen pdf dengan Adobe Acrobat Professional

7
1. Buka Program Adobe acrobat professional 7
2. Clik icon Create pdf atau buka File>Create PDF>From
File>pilih jenis file MS Office (*.doc, *.ppt, *.xls, *.rtf)
3. Buka File yang akan dikonversi ke pdf
4. Tunggu sampai konversi selesai
5. Save file atau bias dipasang proteksi lebih dulu
Pembuatan dokumen pdf
D. Memproteksi Dokumen PDF
1. File yang dibuat dengan cara B dan C belum diproteksi.
Jika diproteksi maka file pdf anda dapat bersifat : tidak
dapat diedit (copy, paste), tidak dapat diprint, atau tidak
dapat dibuka (perlu password).
2. Buka Program Adobe Acrobat professional 7
3. Buka File pdf yang akan diproteksi atau membuka file
word atau ppt yang kemudian dikonversi dengan cara C.
4. Buka Documen>Security>Show Security Settings for this
document>
5. Isi Password security pada security method
6. Isi Password to open document
7. Isi Permission password
8. Pastikan Printing Allowed dan Change Allowed berisi None
9. Save File
10.Untuk belajar bagaimana memproteksi dokumen : Buka
Documen>Security>How tosecure a Document
kemudian pilih apa yang ingin diketahui.
Screen Capture

1. Screen Capture dengan PrintScreen dan Paint

Buka halaman yang ingin discreen capture atau ada
bagian yang akan dibuat gambar, misalnya tampilan awal
Windows XP
Tekan tombil PrtSc
Buka Start>Program>Accessories>Paint
Buka Edit>Paste
Pilih icon select pada Toolbox
Pilih bagian screen yang akan dibuat menjadi gambar
Buka Edit>Cut
Buka File>New (pilih No untuk menjawab apakah gambar
sebelumnya perlu disave)
Buka Edit>Paste
Save Gambar dengan dengan nama file ekstension yang
dikehendaki (BMP,JPG, Gif dll)
Screen Capture
2. Screen Capture dengan Software Snat It
Install Program Snat It 7 dari TechSmith
Biasanya program atomatis diload pada desktop
pada saat menyalakan Windows
Buka halaman apa saja yang akan dicapture bagian
tertentu menjadi gambar, teks, video atau web. Kita
hanya mencoba mengcapture sebagai gambar.
Setting yang dipakai pada SnatIt untuk tujuan di atas
adalah : Mode : Image, Input : region, Output : File
Buka Snat It kemudian click tombol Capture dan
lakukan Capture pada Gambar yang dikehendaki.
Save gambar dengan nama file dan pilihan
ekstension (jpg, gif, bmp, dll) yang dikehendaki.
PEMBUATAN FILE AUDIO DAN VIDEO
Audio dalat menggunakan berbagai program antara
lain :
Sound Forage Academic version can be purchased for $159.98 at
Journeyed.com
http://mediasoftware.sonypictures.com/Products/ShowProduct.asp?PID
=668
Adobe Audition Academic Version can be purchased for $149.98
http://www.adobe.com/products/audition/main.html
No video has been provided for this product
MP3 Advanced MP3/WMA Recorder 5.2
Recor http://www.download.com/Advanced-MP3-W MA-Recorder/3000-
der 2168-10316173.html?tag=lst- 0-1

Dapat pula menggunakan Camtasia Studio untuk

sound recorder dan On-Screen Video recorder.
Harga Camtasia - $299 .
Download the free trial of Camtasia pada
http://www.techsmith.com/download/studiofreetrial.asp
TERIMA KASIH