Disain dan Pembuatan Bahan Ajar Online Learning

(1)

1 Disain dan Pembuatan Bahan Ajar

Online Learning

Oleh :

Ir. Sutrisno Koswara, MSi

Disampaikan pada

PELATIHAN INSTRUCTIONAL DESIGN FOR ONLINE LEARNING Paket 2 :

INSTRUCTIONAL DESIGN TECHNIQUE FOR ONLINE LEARNING

Bogor, 1-2 Juni 2006 Penyelenggara : SEAFAST CENTER-IPB

Kebutuhan PMB eLearning

1. Informasi unit-unit dalam proses belajar mengajar

• Tujuan dan sasaran • Silabus

• Metode pengajaran

• Jadwal kuliah dan Sistem Penilaian • Tugas

• Jadwal Ujian

• Daftar referensi atau bahan bacaan • Profil dan kontak pengajar

2. Akses ke sumber referensi

• Diktat dan catatan kuliah • Bahan presentasi • Contoh ujian yang lalu

• FAQ (frequently asked questions) • Sumber-sumber referensi untuk

pengerjaan tugas • Situs-situs bermanfaaat • Artikel-artikel dalam jurnal online

3. Komunikasi dalam kelas

• Forum diskusi online • Mailing list diskusi • Papan pengumuman yang

menyediakan informasi (perubahan jadwal kuliah, informasi tugas dan deadline-nya)

4. Sarana untuk melakukan kerja kelompok

• Sarana untuk sharing file dan direktori dalam kelompok

• Sarana diskusi untuk mengerjakan tugas daam kelompok

5. Sistem ujian online dan pengumpulan feedback

(2)

2 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 lokasikarena

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.

(3)

3 PEMAKAI MOODLE

Currently there are 12222 sites from 155 countries who have registered. 1908 of these have requested privacy and are not shown in the lists below.

ALL

(4)

4 KEADAAN ELEARNING DI PT

• IPB (IPB, MB-IPB, ITP, TEP, Seafast-Center), UGM,

UI, UNHAS, UNPAD, dll. sudah punya

• IPB dan MB-IPB menggunakan CMS Claronline153

(openSource), ITP-Moodle, Seafast-CourseInsite,

UGM-Portal, UNHAS-masih Forum Diskusi, UNPAD

belum terakses.

• Ummnya format hampir sama dengan perkuliahan

offline (sebagian besar dokumen yang diupload

berupa slide ppt atau dokumen pdf).

• Sebagian besar Folder Dokumen Bahan Ajar masih

kosong.

• Instruktur/dosen “terasa jauh”dengan mahasiswa

atau tidak dirasakan interaksinya.

• Umumnya hanya untuk pasar intern/mahasiswa

• Fasilitas Aktivitas masih belum banyak digunakan

(5)

5 Claronline-eLearning IPB

(6)

6 Claronline-eLearning IPB

(7)

7 Claronline-eLearning MB IPB

(8)

8 Elearning UGM – Basis Portal

(9)

9 MOODLE-ITP

(10)

10 CourseInsite-Seafast Center

(11)

11 CourseInsite-Seafast Center

(12)

12 CourseInsite Seafast Center

(13)

13 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

(14)

14 Bagian Pengantar

Biasanya berbentuk :

• 1 halaman web yang berisi :

– Judul Kuliah dan Pengajarnya

– Adanya link-link ke :

• Course Procedure

• Biodata dan Foto Instruktur • Schedule

• Registration • Assignment Detail • Course Sillabus

• Dll yang dianggap perlu

• Beberapa halaman web yang berisi hal-hal

di atas.

Course Procedure

– Communication Procedure

• Office Call

• Direct Call/Home Call • Email

– How to submit Assignment

– Technical Support

Schedule (Time and Deadline)

– Unit Lectures (Read and Listen Online)

– Unit Activities (Discussion Board, reflection Log)

– Unit Assesment (Quizzes)

(15)

15 Assignment Detail (Graded)

• Course With Project

• Class Participation (+ 10%)

• Quizzes (+ 10%) everage of 3x opportunity. • Reflection Log (+10%)

• Project (20-50%) • Presentation (+20%)

• Course Without project

• Pre Test (1x)

• Post Test (1-3 x, everage)

Course Sillabus

• Goal

• Outline

• Prerequisite

• Recommended References

• Course Grading

• Instruction contact Information

Bagian Administrasi

• Untuk Mahasiswa

– Login

– Announcement

– People/User/participant

• List and Photo • Email Box • Who’s online • Instruktur yang aktif • Mengajak Chat/Diskusi – Your Grade – Etc

• Untuk Pengajar/Instruktur

– Create a course – Messege Center – etc

(16)

16

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 handout Gambar Audio Video Animasi Text Activity Text Assignment

(17)

17

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

Isi Unit/Bab/Topik Bahan Ajar

Contoh halaman unit : Text HTML, Gambar, link ke Video Lecture menggunakan gambar, link ke gambar, link ke halaman HTML lain dengan Next dan Back

(18)

18

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 .

(19)

19

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

(20)

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

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

(21)

21 Pembuatan Halaman Web Dasar

1. Bahasa Pembuat Situs Website :

HTML, PHP, ASPX

2. Program Pembuat Halaman Website

• Notepad

• Macromedia Dreamweaver MX2004

• Microsoft FrontPage

• Macromedia Flash

• Microsoft Word

• Open Office

Bahasa Pembuat Situs Website

1. HTML (HyperText MarkUP Language)

• Merupakan bahasa utama yang digunakan untuk membuat web.

• Pemrograman menggunakan pengolah text standar, misalnya notepad dan disimpan sebagai (save as) : nama dokumen.html.

2. PHP (HyperText PreProcessor)

• Ditemukan oleh Rasmus Lerdoff

• Fitur ringan, opensource (tidak perlu membayar), memberi dukuman terhadap database (MySQL, MSAccess, dll)

3. ASPX (Active Serper Pages

• PHP-nya Microsoft, kemampuan hampir sama dengan PHP • Harus membayar ke Vendor (Microsoft)

• Bahasa pemrograman : Visual Studio.NET atau Microsoft ASP. Net Web Matrix Project

(22)

22 Program Aplikasi Pembuat Situs

(Halaman Website)

• Notepad

– Digunakan untuk menlis bahasa program seperti

HTML dan PHP

– Sulit karena harus menulis kode-kode program

dan mengerti pemrograman HTML dan PHP

• Macromedia Dreamweaver

– Tidak memerlukan pemrograman karena bersifat

drag and drop.

– Mendukung database, flash, video, audio, dll.

Sangat lengkap untuk pengguna profesional

(webmaster)

– Dapat disimpan sebagai file HTML, HTM, php,

dll.

• Microsoft Front Page

– Program aplikasi sepaket dengan MSOFFICE

– Mudah dan lengkap, didisain untuk penggunarumahan yang ingin membuat situis dengan mudah.

• Macromedia Flash

– Biasa digunakan untuk animasi dan membuat kartun. – Banyak digunakan untuk membuat animasi yang akan

ditampilkan oleh browser web.

– Animasi flash jadi halaman web : File >Publish>html.

• Microsoft Word

– Gunakan File>Save as Web Page

• Open Office

– Officenya LINUX – Gratis

– Banyak dinilai sebagai aplikasi office masa depan.

Program Aplikasi Pembuat Situs (Halaman

Website)

(23)

23 Membuat situs dengan Notepad

(Pemrograman HTML)

• Bahasa HTML merupakan bahasa markup (pelekat)

untuk menampilkan teks. gambar dan multi media.

• Dalam html terdapat tag-tag (kode-kode

pemrograman) yang mampu dibaca oleh browser

web sehinggatampilan informasi luar biasa dapat

kita nikmati.

• Penulisan bahasa HTML dapat dilakukan dengan

software word processor seperti Microsoft word,

word pad, kword atau notepad.

• Untuk memulai menggunakan notepad pada

windows, klik start, lalu program kemudian

accessories lalu klik notepad.

Membuat situs dengan Notepad

(Pemrograman HTML)

Contoh pada notepad ditulis program html sbb : <html>

<body>

Web Pertamaku !!! </body>

</html>

Selanjutnya simpan dengan nama index.html, panggil dengan browser anda misalnya internet explorer , hasilnya sbb :

(24)

24 Membuat situs dengan Notepad

(Pemrograman HTML)

<TITLE> Tebal dan miring </TITLE> </HEAD>

<Body> huruf tebal Huruf miring huruf biasa Garis bawah huruf tebal dan miring

</Body> </HTML>

tampilan dari code HTML diatas adalah

Membuat situs dengan Notepad (Pemrograman

HTML)

<TITLE> Memahami Paragraf </TITLE> </HEAD>

<Body>

tulisan ini merupakan paragraph pertama dalam document yang saya tulis baris ini merupakan paragraph kedua, paragraph kedua, silahkan buat tag paragraph

sebanyak mungkin sebagai contoh agar lebih mudah memahami tentang paragraph, dalam paragraph anda dapat mengubah format sebagian huruf atau karakter misalnya text miring test tebal .

</Body> </HTML>

(25)

25 Macromedia Dreamweaver MX 2004

Antarmuka Dreamweaver MX 2004

Document Window Insert bar Document toolbar Property inspector Panel groups

• 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

(26)

26

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

Antarmuka Dreamweaver MX 2004

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.

(27)

27 MS Front Page

MS Front Page

(28)

28 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

Macromedia Flash MX 2004

timeline Keyframe Tools Box Action panel Properties Panel Stage Title bar

Antar Muka Flash

(29)

29

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

Antar Muka Flash

(30)

30 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

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 to…secure a Document kemudian pilih apa yang ingin diketahui.

(31)

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

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.

(32)

32 PEMBUATAN FILE AUDIO DAN VIDEO

• Audio dalat menggunakan berbagai program antara

lain :

• 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

Advanced MP3/WMA Recorder 5.2

http://www.download.com/Advanced-MP3-W MA-Recorder/3000-2168-10316173.html?tag=lst- 0-1

MP3 Recor der

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

Sound Forage – Academic version can be purchased for $159.98 at Journeyed.com

http://mediasoftware.sonypictures.com/Products/ShowProduct.asp?PID =668