Disain dan Pembuatan Bahan Ajar Online Learning - Tropedu

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 3. Komunikasi dalam kelas belajar mengajar • Forum diskusi online • Tujuan dan sasaran • Mailing list diskusi • Silabus • Papan pengumuman yang • Metode pengajaran menyediakan informasi (perubahan • Jadwal kuliah dan Sistem Penilaian jadwal kuliah, informasi tugas dan • Tugas deadline-nya) • • •

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

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

1

Course Management Systems

•

•

•

Merupakan software aplikasi eLearning berbasis Web yang mengakomodasi kebutuhan penyelenggaraan eLearning. Memungkinkan peserta (student) menikmati semua aspek online learning dalam satu lokasi karena menyimpan bahan ajar, dan fiturfitur 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

2

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. Albania | Algeria | American Samoa | Andorra | Angola | Anguilla | Antigua and Barbuda | Argentina | Armenia | Australia | Austria | Azerbaijan | Bahamas | Bahrain | Bangladesh | Barbados | Belarus | Belgium | Belize | Bhutan | Bolivia | Bosnia and Herzegovina | Botswana | Brazil | Brunei Darussalam | Bulgaria | Burkina Faso | Burundi | Canada | Chile | China | Colombia | Costa Rica | Croatia (Hrvatska) | Cuba | Cyprus | Czech Republic | Denmark | Dominican Republic | Ecuador | Egypt | El Salvador | Estonia | Ethiopia | Fiji | Finland | France | France; Metropolitan | Gabon | Gambia | Georgia | Germany | Ghana | Greece | Guam | Guatemala | Honduras | Hong Kong | Hungary | Iceland | India | Indonesia | Iran (Islamic Republic of) | Ireland | Israel | Italy | Jamaica | Japan | Jordan | Kazakhstan | Kenya | Korea; Republic of | Kosovo | Kuwait | Kyrgyzstan | Lao People's Democratic Republic | Latvia | Lebanon | Lithuania | Luxembourg | Macedonia; Former Yugoslav Republic of | Malaysia | Mali | Malta | Mauritius | Mexico | Moldova; Republic of | Monaco | Mongolia | Morocco | Mozambique | Myanmar | Namibia | Nepal | Netherlands | Netherlands Antilles | New Zealand | Nicaragua | Nigeria | Northern Mariana Islands | Norway | Oman | Pakistan | Palestine | Panama | Papua New Guinea | Paraguay | Peru | Philippines | Poland | Portugal | Puerto Rico | Qatar | Reunion | Romania | Russian Federation | Saint Lucia | Saint Vincent and the Grenadines | Samoa | Saudi Arabia | Senegal | Serbia and Montenegro | Singapore | Slovakia (Slovak Republic) | Slovenia | Solomon Islands | South Africa | Spain | Sri Lanka | Sudan | Suriname | Sweden | Switzerland | Syrian Arab Republic | Taiwan | Tajikistan | Thailand | Togo | Trinidad and Tobago | Tunisia | Turkey | Turkmenistan | Ukraine | United Arab Emirates | United Kingdom | United States of America | Uruguay | Uzbekistan | Venezuela | Vietnam | Virgin Islands (U.S.) | Wales | Yemen | Zambia | Zimbabwe | SHOW ALL

PEMAKAI MOODLE DI INDONESIA

3

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

Claronline-eLearning IPB

4



5


Claronline-eLearning MB IPB

6

Claronline-eLearning MB IPB

Elearning UGM – Basis Portal

7

Elearning UGM – Basis Portal

MOODLE-ITP

8

MOODLE-ITP

9

CourseInsite-Seafast Center


10


CourseInsite Seafast Center

11



12

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 3. Bagian Administrasi PBM

13

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) Unit Assignment

14

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

15

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

•

– – – –

2. 3.

Menggantikan teks tapi penyajian dalam ppt atau pdf Sebaiknya ppt yang ditransfer ke pdf Reading Article (webpage, pdf, doc) Unit Assignment detail (pdf, doc)

Activity (Discusion board, reading, chat, sharing) 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 Gambar

Video

Animasi Audio

Text Activity

Isi tiap halaman/page bervariasi tergantung kebutuhan

16

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

17

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 .

18

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

19

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

20

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

2.

Merupakan bahasa utama yang digunakan untuk membuat web. Pemrograman menggunakan pengolah text standar, misalnya notepad dan disimpan sebagai (save as) : nama dokumen.html.

PHP (HyperText PreProcessor) • •

3.

Ditemukan oleh Rasmus Lerdoff Fitur ringan, opensource (tidak perlu membayar), memberi dukuman terhadap database (MySQL, MSAccess, dll)

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

21

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.

Program Aplikasi Pembuat Situs (Halaman Website) • 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.

22

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 : Web Pertamaku !!! Selanjutnya simpan dengan nama index.html, panggil dengan browser anda misalnya internet explorer , hasilnya sbb :

23

Membuat situs dengan Notepad (Pemrograman HTML) Tebal dan miring huruf tebal Huruf miring huruf biasa Garis bawah huruf tebal dan miring tampilan dari code HTML diatas adalah

Membuat situs dengan Notepad (Pemrograman HTML) Memahami Paragraf
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
. tampilan dari kode diatas adalah :

24

Macromedia Dreamweaver MX 2004 Antarmuka Dreamweaver MX 2004 Insert bar Document toolbar

Document Window

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

25

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.

2. 3.

4. 5. 6. 7.

Dari hasil praktikum anda akan dapat membuat satu halaman website yang dapat dijadikan sebagai template untuk membuat halaman-halaman isi unit yang lain. Misalkan halaman yang dihasilkan dari praktikum diberi nama file unit1_p1.html. 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. Halaman-halaman tersebut masih kosong (belum ada teks atau gambar dan obyek lain). Isi masing-masing halaman sesuai dengan isi yang anda rencanakan. Buat link dan navigasi pada masing-masing halaman. Semua halaman pada unit terebut disimapan pada satu folder, misalnya folder unit1.

26

MS Front Page

MS Front Page Tampilan normal

Tampilan di browser

27

Macromedia Flash MX 2004 Karakteristik Flash 1. 2. 3. 4. 5. 6. 7. 8.

Vector Environtment Bitmap Graphics Animation Sound Video Interactivity and User Interface Scripting File dalam flash – fla file, – swf file, and – html file

Antar Muka Flash Menu bar

Title bar

Panel

timeline

Keyframe Tools Box

Stage Action panel

Properties Panel

28

Antar Muka Flash •

Title bar

•

Menu bar

– Menampilkan nama program dan file dokumen yang sedang aktif. – 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

29

Pembuatan dokumen pdf A. B.

Install Software Adobe Acrobar professional 7 Membuat pdf dari Word atau Powerpoint 1. 2. 3. 4. 5.

C.

Jika sudah terinstall maka dalam interface Word dan PowerPoint sudah terdapat icon atau menu Adobe PDF untuk mengkonversi menjadi pdf. Buka File word atau Powerpoint, tekan icon Adobe PDF> Convert to PDF Tunggu sampai konversi sel;esai Save File Cara lain adalah dengan membuka File>Print>pilih printer Adobe PDF atau Cute PDF Printer dan kemudian Save sebagai dokumen pdf

Membuat dokumen pdf dengan Adobe Acrobat Professional 7 1. 2. 3. 4. 5.

Buka Program Adobe acrobat professional 7 Clik icon Create pdf atau buka File>Create PDF>From File>pilih jenis file MS Office (*.doc, *.ppt, *.xls, *.rtf) Buka File yang akan dikonversi ke pdf Tunggu sampai konversi selesai 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 to…secure a Document kemudian pilih apa yang ingin diketahui.

30

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.

31

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 Recor der

Advanced MP3/WMA Recorder 5.2 http://www.download.com/Advanced-MP3-W MA-Recorder/30002168-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

32