PERANCANGAN APLIKASI PEMBELAJARAN CASCADING STYLE SHEETS DENGAN METODE COMPUTER BASED INTRUCTION

ISSN : 2301-9425

Pelita Informatika Budi Darma, Volume III, Maret 2013

PERANCANGAN APLIKASI PEMBELAJARAN CASCADING STYLE SHEETS DENGAN METODE COMPUTER BASED INTRUCTION Guidio Leonarde Ginting Dosen Tetap STMIK Budi Darma Medan Jl. Sisingamangaraja No. 338 Simpang Limun Medan www.stmik-budidarma.ac.id//Email:[email protected] Abstrak Website atau situs dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink,) membuat website dengan desain yang baik, memperhatikan audiens, dan beberapa aspek desain lainnya seperti layout composition, color, texture, typography, dan imagery. Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen dalam bahasa website, baik tata letak, warna dan semua yang berhubungan dengan tampilan. Dalam belajar CSS tentunya calon peserta didik lebih dituntut untuk praktek daripada teoritis tentunya dalam hal ini waktu yang dibutuhkan untuk belajar lebih banyak, untuk itu diperlukan sara/media yang dapat digunakan untuk melengkapi proses pembelajaran konvensiol yang tidak terbatas oleh jarak dan waktu. Pembelajaran berbasis komputer atau lebih dikenal didengar dengan e-learning merupakan salah satu cara untuk meningkatkan kualitas pembelajaran. Berbagai jenis metoda yang dapat diaplikasikan dalam pembelajaran berbasis komputer, misalnya Computer Based Instruction (CBI) yaitu pembelajaran berbantuan komputer dimana secara keseluruhan dari komponen pembelajaran konvensional digantikan dengan komputer, karena dalam pembelajaran konvensional masih terdapat banyak kekurangan misalnya waktu, buku, pengajar, dan jarak. Kata kunci: Cascading Style Sheets, Computer Based Instruction, Pembelajaran 1.

Pendahuluan

Sebuah website haruslah memiliki tampilan yang baik, website desain memiliki peran yang sangat vital bagi peserta didik untuk dapat mengembangankan sebuah web yang memiliki nilai estetika, teknis, hingga navigasi yang baik. Kegiatan pembelajaran konvensional tidak cukup untuk melakukan proses belajar mengajar web desain karena tidak semua peserta didik dapat, berani atau mempunyai kesempatan untuk mengajukan pertanyaan ataupun menyampaikan pendapatnya di dalam diskusi mata pelajaran. Waktu yang terbatas juga menjadi penyebab kurang maksimalnya penyampaian materi bahan ajar pengajar kepada peserta didik, sehingga berakibat kurangnya daya serap peserta didik terhadap materi yang diajarkan. Oleh karena itu perlu dibuat satu sarana/media yang dapat digunakan untuk melengkapi proses pembelajaran konvensional yang tidak terbatas oleh jarak, tempat dan waktu. Maka penulis membuat aplikasi pembelajaran yang bisa digunakan oleh pengajar dan peserta didik tanpa terbatas dengan waktu dan tempat yang berbeda atau sering disebut dengan asynchronous e-learning. Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen dalam bahasa website, baik tata letak, warna dan semua yang berhubungan dengan tampilan.

Diterbitkan Oleh : STMIK Budi Darma Medan

Dalam belajar CSS tentunya calon peserta didik lebih dituntut untuk praktek daripada teoritis tentunya dalam hal ini waktu yang dibutuhkan untuk belajar lebih banyak, untuk itu diperlukan sara/media yang dapat digunakan untuk melengkapi proses pembelajaran konvensiol yang tidak terbatas oleh jarak dan waktu. 2.

Landasan Teori

2.1. Aplikasi Web Pada awalnya aplikasi web dibangun dengan hanya menggunakan bahasa yang disebut HTML (HyperText Markup Langauge). Pada perkembangan berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas kemampuan HTML seperti PHP dan ASP pada skrip dan Apllet pada objek. Aplikasi Web dapat dibagi menjadi dua jenis yaitu aplikasi web statis dan dinamis. Web statis dibentuk dengan menggunakan HTML. Kekurangan aplikasi seperti ini terletak pada keharusan untuk memelihara program secara terus menerus untuk mengikuti setiap perkembangan yang terjadi. Kelemahan ini diatasi oleh model aplikasi web dinamis. Pada aplikasi web dinamis, perubahan informasi dalam halaman web dilakukan tanpa perubahan program tetapi melalui perubahan data.

15


Sebagai implementasi, aplikasi web dapat dikoneksikan ke basis data sehingga perubahan informasi dapat dilakukan oleh operator dan tidak menjadi tanggung jawab dari webmaster. Arsitektur aplikasi web meliputi klien, web server, middleware dan basis data. Klien berinteraksi dengan web server. Secara internal, web server berkomunikasi dengan middleware dan middleware yang berkomunikasi dengan basis data. Contoh middleware adalah PHP dan ASP. Pada mekanisme aplikasi web dinamis, terjadi tambahan proses yaitu server menerjemahkan kode PHP menjadi kode HTML. Kode PHP yang diterjemahkan oleh mesin PHP yang akan diterima oleh klien. (Abdul Kadir, 2009) 2.2. Pembelajaran Pembelajaran adalah proses interaksi peserta didik dengan pendidik dan sumber belajar pada suatu lingkungan belajar. Pembelajaran merupakan bantuan yang diberikan pendidik agar dapat terjadi proses pemerolehan ilmu dan pengetahuan, penguasaan kemahiran dan tabiat, serta pembentukan sikap dan kepercayaan pada peserta didik. Dengan kata lain, pembelajaran adalah proses untuk membantu peserta didik agar dapat belajar dengan baik. Sedangkan mengajar sendiri memiliki pengertian sebagai berikut : 1. Upaya guru untuk “membangkitkan” yang berarti menyebabkan atau mendorong seseorang (siswa) belajar. (Rochman Nata Wijaya,1992) 2. Menciptakan lingkungan yang memungkinkan terjdinya proses belajar. (Hasibuan J.J,1992) 3. Suatu usaha untuk membuat siswa belajar, yaitu usaha untuk terjadinya perubahan tingkah laku. (Gagne) Pembelajaran yang di identikkan dengan kata “mengajar” berasal dari kata dasar “ajar” yang berarti petunjuk yang diberikan kepada orang supaya diketahui (diturut) ditambah dengan awalan “pe” dan akhiran “an” menjadi “pembelajaran”, yang berarti proses, perbuatan, cara mengajar atau mengajarkan sehingga anak didik mau belajar. Pembelajaran adalah proses interaksi peserta didik dengan pendidik dan sumber belajar pada suatu lingkungan belajar. Pembelajaran merupakan bantuan yang diberikan pendidik agar dapat terjadi proses pemerolehan ilmu dan pengetahuan, penguasaan kemahiran dan tabiat, serta pembentukan sikap dan kepercayaan pada peserta didik. Dengan kata lain, pembelajaran adalah proses untuk membantu peserta didik agar dapat belajar dengan baik. (2011: id.Wikipedia.org/pembelajaran) Proses pembelajaran dialami sepanjang hayat seorang manusia serta dapat berlaku di manapun dan kapanpun. Pembelajaran mempunyai pengertian yang mirip dengan pengajaran, walaupun mempunyai


ISSN : 2301-9425

konotasi yang berbeda. Dalam konteks pendidikan, guru mengajar supaya peserta didik dapat belajar dan menguasai isi ajaran hingga mencapai sesuatu objektif yang ditentukan (aspek kognitif), juga dapat mempengaruhi perubahan sikap (aspek efektif), serta keterampilan (aspek psikomotor) seseorang peserta didik. Pengajaran memberi kesan hanya sebagai pekerjaan satu pihak, yaitu pekerjaan guru saja. Sedangkan pembelajaran juga menyiratkan adanya interaksi antara guru dengan peserta didik. Instruction atau pembelajaran adalah suatu sistem yang bertujuan untuk membantu proses belajar siswa, yang berisi serangkaian peristiwa yang dirancang, disusun sedemikian rupa untuk mempengaruhi dan mendukung terjadinya proses belajar siswa yang bersifat internal. Gagne dan Briggs (1979:3) Kegiatan belajar mengajar adalah satu kesatuan dari dua kegiatan yang searah. Kegiatan belajar adalah kegiatan primer, sedangkan mengajar adalah kegiatan sekunder yang dimaksudkan agar terjadi kegiatan secara optimal. Dan dapat ditarik kesimpulan bahwa Pembelajaran adalah usaha sadar dari guru untuk membuat siswa belajar, yaitu terjadinya perubahan tingkah laku pada diri siswa yang belajar, dimana perubahan itu dengan didapatkannya kemampuan baru yang berlaku dalam waktu yang relative lama dan karena adanya usaha. Dengan demikian dapat diketahui bahwa kegiatan pembelajaran merupakan kegiatan yang melibatkan beberapa komponen : 1. Siswa, Seorang yang bertindak sebagai pencari, penerima, dan penyimpan isi pelajaran yang dibutuhkan untuk mencapai tujuan. 2. Guru, Seseorang yang bertindak sebagai pengelola, katalisator, dan peran lainnya yang memungkinkan berlangsungnya kegiatan belajar mengajar yang efektif. 3. Tujuan, Pernyataan tentang perubahan perilaku (kognitif, psikomotorik, afektif) yang diinginkan terjadi pada siswa setelah mengikuti kegiatan pembelajaran. 4. Isi Pelajaran, Segala informasi berupa fakta, prinsip, dan konsep yang diperlukan untuk mencapai tujuan. 5. Metode, Cara yang teratur untuk memberikan kesempatan kepada siswa untuk mendapat informasi yang dibutuhkan mereka untuk mencapai tujuan. 6. Media, Bahan pengajaran dengan atau tanpa peralatan yang digunakan untuk menyajikan informasi kepada siswa. 7. Evaluasi, Cara tertentu yang digunakan untuk menilai suatu proses dan hasilnya. 2.2.1. Teori-Teori Pembelajaran 1. Berhavioristik Pembelajaran selalu memberi stimulus kepada siswa agar menimbulkan respon yang tepat seperti

16


2.

3.

4.

yang kita inginkan. Hubungan stimulus dan respons ini bila diulang kan menjadi sebuah kebiasaan. selanjutnya, bila siswa menemukan kesulitan atau masalah, guru menyuruhnya untuk mencoba dan mencoba lagi (trial and error) sehingga akhirnya diperoleh hasil. Kognitivisme Pembelajaran adalah dengan mengaktifkan indera siswa agar memeperoleh pemahaman sedangkan pengaktifan indera dapat dilaksanakan dengan jalan menggunakan media/alat Bantu. Disamping itu penyampaian pengajaran dengan berbagai variasi artinya menggunakan banyak metode. Humanistic Dalam pembelajran ini guru sebagai pembimbing memberi pengarahan agar siswa dapat mengaktualisasikan dirinya sendiri sebagai manusia yang unik untuk mewujudkan potensipotensi yang ada dalam dirinya sendiri. Dan siswa perlu melakukan sendiri berdasarkan inisisatif sendiri yang melibatkan pribadinya secara utuh (perasaan maupun intelektual) dalam proses belajar, agar dapat memperoleh hasil. Sosial/Pemerhatian/permodelan Proses pembelajaran melalui proses pemerhatian dan pemodelan Bandura (1986) mengenal pasti empat unsur utama dalam proses pembelajaran melalui pemerhatian atau pemodelan, iaitu pemerhatian (attention), mengingat (retention), reproduksi (reproduction), dan penangguhan (reinforcement) motivasi (motivion). Implikasi daripada kaedah ini berpendapat pembelajaran dan pengajaran dapat dicapai melalui beberapa cara yang berikut: a. Penyampaian harus interktif dan menarik b. Demonstasi guru hendaklah jelas, menarik, mudah dan tepat c. Hasilan guru atau contoh-contoh seperti ditunjukkan hendaklah mempunyai mutu yang tinggi.

2.2.2.

Ciri-Ciri Pembelajaran

Menurut Eggen & Kauchak (1998) Menjelaskan bahwa ada enam ciri pembelajaran yang efektif, yaitu: 1. Siswa menjadi pengkaji yang aktif terhadap lingkungannya melalui mengobservasi, membandingkan, menemukan kesamaankesamaan dan perbedaan-perbedaan serta membentuk konsep dan generalisasi berdasarkan kesamaan-kesamaan yang ditemukan, 2. Guru menyediakan materi sebagai fokus berpikir dan berinteraksi dalam pelajaran, 3. Aktivitas-aktivitas siswa sepenuhnya didasarkan pada pengkajian,


4.

5.

6.

ISSN : 2301-9425

Guru secara aktif terlibat dalam pemberian arahan dan tuntunan kepada siswa dalam menganalisis informasi, Orientasi pembelajaran penguasaan isi pelajaran dan pengembangan keterampilan berpikir, serta Guru menggunakan teknik mengajar yang bervariasi sesuai dengan tujuan dan gaya mengajar guru.

Adapun ciri-ciri pembelajaran yang menganut unsur-unsur dinamis dalam proses belajar siswa sebagai berikut : 1. Motivasi belajar Motivasi dapat dikatakan sebagai serangkaian usaha untuk menyediakan kondisi kondisi tertentu, sehingga seseorang itu mau dan ingin melakukan sesuatu, dan bila ia tidak suka, maka ia akan berusaha mengelakkan perasaan tidak suka itu. Jadi, motivasi dapat dirangsang dari luar, tetapi motivasi itu tumbuh di dalam diri seseorang. Dalam kegiatan belajar, maka motivasi dapat dikatakan sebagai keseluruhan daya penggerak di dalam diri seseorang/siswa yang menimbulkan kegiatan belajar, yang menjalin kelangsungan dan memberikan arah pada kegiatan belajar sehingga tujuan yang dihendaki dapat dicapai oleh siswa (Sardiman, A.M. 1992) 2. Suasana belajar Suasana yang dapat menimbulkan aktivitas atau gairah pada siswa adalah apabila terjadi : a. Adanya komunikasi dua arah (antara gurusiswa maupun sebaliknya) yang intim dan hangat, sehingga hubungan guru-siswa yang secara hakiki setara dan dapat berbuat bersama. b. Adanya kegairahan dan kegembiraan belajar. Hal ini dapat terjadi apabila isi pelajaran yang disediakan berkesusaian dengan karakteristik siswa. Kegairahan dan kegembiraan belajar juga dapat dari media, selain isi pelajaran yang disesuaiakan dengan karakteristik siswa, juga didukung oleh factor intern siswa yang belajar yaitu sehat jasmani, ada minat, perhatian, motivasi, dan lain sebagainya. 3. Kondisi siswa yang belajar Mengenai kondisi siswa, adapat dikemukakan di sini sebagai berikut : a. Siswa memiliki sifat yang unik, artinya anatara anak yang satu dengan yang lainnya berbeda. b. Kesamaan siswa, yaitu memiliki langkahlangkah perkenbangan, dan memiliki potensi yang perlu diaktualisasikan melalui pembelajaran. Kondisi siswa sendiri sangat dipengaruhi oleh factor intern dan juga faktor luar, yaitu segala sesuatu yang ada di luar diri siswa, termasuk situasi pembelajaran yang

17

ISSN : 2301-9425


diciptakan guru. Oleh Karena itu kegiatan pembelajaran lebih menekankan pada peranan dan partisipasi siswa, bukan peran guru yang dominan, tetapi lebih berperan sebagai fasilitator, motivator, dan pembimbing. 2.2.3.

Implementasi Pembelajaran

Meskipun implementasi sistem pembelajaran yang ada sekarang ini sangat bervariasi, namun semua itu didasarkan atas suatu prinsip atau konsep bahwa e- learning dimaksudkan sebagai upaya pendistribusian materi pembelajaran melalui media elektronik atau Internet sehingga peserta didik dapat mengaksesnya kapan saja dari seluruh penjuru dunia. Ciri pembelajaran dengan e-leaning adalah terciptanya lingkungan belajar yang flexible dan distributed. Fleksibilitas menjadi kata kunci dalam sistem Pembelajaran. Peserta didik menjadi sangat fleksibel dalam memilih waktu dan tempat belajar karena mereka tidak harus datang di suatu tempat pada waktu tertentu. Dilain pihak, dosen dapat memperbaharui materi pembelajarannya kapan saja dan dari mana saja. Dari segi isi, materi pembelajaranpun dapat dibuat sangat fleksibel mulai dari bahan kuliah yang berbasis teks sampai materi pembelajaran yang sarat dengan komponen multimedia. Namun demikian kualitas pembelajaran dengan Pembelajaran pun juga sangat fleksibel atau variatif, yakni bisa lebih jelek atau lebih baik dari sistem pembelajaran tatap muka (konvensional). Untuk mendapatkan sistem Pembelajaran yang baik diperlukan perancangan yang baik pula. Distributed learning menunjuk pada pembelajaran dimana pengajar, mahasiswa, dan materi pembelajaran terletak di lokasi yang berbeda, sehingga mahasiswa dapat belajar kapan saja dan dari mana saja. Dalam merancang sistem Pembelajaran perlu mempertimbangkan dua hal, yakni peserta didik yang menjadi target dan hasil pembelajaran yang diharapkan. Pemahaman atas peserta didik sangatlah penting, yakni antara lain adalah harapan dan tujuan mereka dalam mengikuti Pembelajaran, kecepatan dalam mengakses internet atau jaringan, keterbatasan bandwidth, biaya untuk akses internet, serta latar belakang pengetahuan yang menyangkut kesiapan dalam mengikuti pembelajaran. Pemahaman atas hasil pembelajaran diperlukan untuk menentukan cakupan materi, kerangka penilaian hasil belajar, serta pengetahuan awal. Sistem Pembelajaran dapat diimplementasikan dalam bentuk asynchronous, synchronous, atau campuran antara keduanya. Contoh Pembelajaran asynchronous banyak dijumpai di Internet baik yang sederhana maupun yang terpadu melalui


portal Pembelajaran. Sedangkan dalam Pembelajaran synchronous, pengajar dan siswa harus berada di depan komputer secara bersamasama karena proses pembelajaran dilaksanakan secara live, baik melalui video maupun audio conference. Selanjutnya dikenal pula istilah blended learning yakni pembelajaran yang menggabungkan semua bentuk pembelajaran misalnya on-line, live, maupun tatap muka (konvensional).

2.3. Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah salah satu bahasa pemrograman desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan bahasa penanda (markup language). Biasanya CSS digunakan untuk mendesain sebuah malam HTML dan XHTML, tetapi sekarang bahasa pemrograman CSS bisa diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL. CSS dibuat untuk memisahkan kontek utama (biasanya dibuat dengan menggunakan bahasa HTML dan sejenisnya) dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkan daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi banyak halaman untuk sebuah formating dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tables pada layout desain web (layout tanpa tabel) CSS adalah rekomendasi dari W3C (World Wide Web Consortium). W3C adalah sebuah konsorsium/gabungan dari pemilik web, universitas, perusahaan seperti Microsoft, Netscape, Apple, Opera, Mozilla, dan Macromedia serta juga para juga para ahli dalam bidang web. W3C dapat dikatakan sebagai acuan dalam menentukan teknologi paling mutahir pada web. W3C yang diprakarsai oleh TIM BennersLee juga juga bertujuan untuk mempertahankan World Wide Web serta mengembangkannya lebih jauh. Style Sheet adalah sebuah text file yang sederhana (dimana berekstensi .css), ditulis menurut aturan bahasa yang dipaparkan pada rekomendasi CSS1 atau CSS2. Berikut contoh file CSS : Body { Font-family: Helvetica, sans-Serif; Font-size: 12pt; Text-align: justify; } h2 { Font-family: Arial, sans-serif; Font-size: 14pt; } code{

18

ISSN : 2301-9425


font-family: Curier, sans-serif; font-size: 12pt; } .note{ Background-color: #cbcbcb; } Cara kerja CSS dengan menggunakan dua buah elemen penting untuk pemformatan tampilannya, diantaranya selektor dan deklarator. Dua buah elemen ini berfungsi sebagai penentu format tampilan dan lainnya menempatkan format tampilan tersebut. Deklarator berisi beberapa perintah-perintah CSS untuk menentukan format dari sebuah elemen pada halaman web. Sedangkan selektor adalah sebuah perintah lanjut dari deklarator dan berfungsi menempatkan format tampilan dari deklarator. Dalam Cascading Style Sheets ada dua cara menghubungkan sebuah dokumen HTML dengan CSS 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Selector class Selector ID Selector Descendant (turunan) Selector Link Pseudo Class Selector Pseudo elemen Selector dynamic pseudo class Selector languange Selector child Selector first-child Selector adjacent (berdekatan)

2.3.1.

Komponen CSS dan Properti

Untuk mengaplikasi CSS pada halaman web, kita juga perlu mengenal properti. Properti merupakan bagian penting dalam CSS. Properti biasanya berada dalam bagian deklarator. Properti biasanya akan diikuti dengan value-nya (nilainya). Ada beberapa tipe yang berbera dari nama properti yang dapat dikelompokkan menjadi beberapa jenis sebagai berikut : 1. Properti Text Style (Gaya Tulisan) Properti Text style ini berpengaruh terhadap jenis dan gaya tulisan pada halaman HTML. Jika tampilan hanya berdasarkan design HTML, maka text style yang kita dapat hanya seperti font, font color, font size dan font weight, tetapi dengan menggunakan CSS, kita mendapatkan design untuk gaya tulisan lebih luas dan lebih mempunyai kontrol terhadap gaya tulisan lebih mendalam. 2. Properti Text Layout (Tampilan Tulisan) Group properti ini mempunyai efek bagaimana sebuah tulisan tersebut tampil pada halaman web. Properti ini lebih terfokus pada text, bagaimana penempatannya dan tampilannya pada halaman web seperti tinggi garis (line-height) dan jarak spasi antar huruf (letter spacing) 3. Properti Background (Tampilan Latar Belakang)


4.

5.

6.

7.

8.

Properti background berpengaruh pada bagaimana sebuah elemen tersebut tampil pada halaman web. Tidak seperti pada halaman HTML biasa, dengan CSS, semua elemen bisa mempunyai background dengan gambar atau warna. Properti Border (Garis) Dengan menggunakan CSS, setiap elemen akan mempunyai garis dengan berbagai variasi lebar, warna dan gaya tampilan. Elemen bisa mempunyai setiap garis (atas, kiri, kanan, atas) gaya, lebar dan warna yang berbeda. Properti Margin (Ruang/Jarak Pembatas) Setiap elemen dapat memiliki margin. Margin adalah ruang atau jarak batasan antar elemen dan antara elemen dengan bagian atas, kiri bawah dan kanan dari elemen itu sendiri. Properti Padding Setiap elemen bisa mempunyai padding. Padding adalah ruang antara sisi sebuah elemen (garis luarnya) dengan konten di dalamnya. terdapat beberapa padding diantaranya, padding-left, padding-top, padding-right, padding-bottom. Properti Tipe Elemen Jika anda sudah secara mendalam memahami HTML, maka anda akan mengetahui ada beberapa tipe yang berlainan dari elemen. Tipe utama dari elemen-elemen diantaranya inline, block dan list item Properti User Interface (Tampilan Pengguna) CSS2 memperkenalkan properti user interface, dimana properti ini memperbolehkan bentuk dari kursor untuk diatur tergantung pada objek yang dihover oleh kursor ini dan properti ini juga dapat digunakan untuk mendefenisikan outline dari sebuah elemen.

2.4. Computer Base Intruction Menurut Criswell (1989: 1) menyatakan bahwa computer base instruction (CBI) merupakan penggunaan komputer untuk menyajikan materi pembelajaran yang memberikan kesempatan kepada peserta didik untuk berpartisipasi secara aktif dan merespon aktivitas peserta didik. Pendapat lain dikemukakan oleh Kemp dan Dayton (1985: 40) sebagai berikut: Computer Based Instruction refers to any application of computer technology to the instructional process. It includes using a computer to present information, to tutor a learner, to provide practice for developing a skill, to simulate a process which is being studied, and manipulate to solve problem. Istilah computer based instruction (CBI) umumnya menunjuk pada semua software pendidikan yang diakses melalui komputer dimana peserta didik dapat berinteraksi dengannya. Sistem komputer menyajikan serangkaian program pengajaran kepada

19

ISSN : 2301-9425


peserta didik baik berupa informasi maupun latihan soal untuk mencapai tujuan pengajaran tertentu dan peserta didik melakukan aktivitas belajar dengan cara berinteraksi dengan sistem komputer. Berdasarkan uraian tersebut dapat disimpulkan bahwa media pembelajaran berbasis komputer adalah penggunaan komputer sebagai media penyampaian informasi pembelajaran, latihan soal, umpan balik, dan skor jawaban peserta didik. Komputer berfungsi sebagai sumber belajar yang dapat digunakan secara mandiri oleh peserta didik. Menurut Alessi & Trollip (1985: 60) bahwa program CBI yang baik haruslah meliputi empat aktivitas, yaitu: 1. Informasi (materi pelajaran) harus diberikan, 2. Peserta didik harus diarahkan, 3. Peserta didik diberi latihan-latihan, Berbagai hasil penelitian eksperimen menunjukkan bahwa belajar dengan menggunakan alat bantu komputer dalam bentuk program CBI ternyata lebih efektif dibanding dengan alat bantu lainnya. Menurut Ehman & Glenn (Shaver, 1991: 516) beberapa penelitian (Bradley, 1983; Marsh, 1984, 1986; Bellows, 1987; Feldhausen, 1985) menyatakan bahwa penggunaan media berbasis komputer sangat potensial untuk menciptakan pembelajaran yang efektif. Ada beberapa keuntungan dalam mendayagunakan komputer dalam pembelajaran, yaitu: 1. Membangkitkan motivasi kepada peserta didik dalam belajar, 2. Warna, musik, dan grafis animasi dapat menambahkan kesan realisme, 3. Menghasilkan penguatan yang tinggi, 4. Kemampuan memori memungkinkan penampilan peserta didik yang telah lampau direkam dan dipakai dalam merencanakan langkah-langkah selanjutnya di kemudian hari, 5. Berguna sekali untuk peserta didik yang lamban, 6. Kemampuan daya rekamnya memungkinkan pengajaran individual bisa dilaksanakan, 7. Rentang pengawasan guru diperlebar sejalan dengan banyaknya informasi yang disajikan dengan mudah yang diatur oleh guru, dan membantu pengawasan lebih dekat kepada kontak langsung dengan para peserta didik. Dari uraian-uraian diatas terdapat model-model CBI sebagai berikut: 1. Tutorial, 2. Drill and practice, 3. Simulasi, 4. Game, dan 5. Hybrid (model gabungan).


Beberapa hal yang perlu diperhatikan dalam merancang desain visual, yaitu: 1. Kejelasan tampilan visual, 2. Energi yang diperlukan untuk menginterprestasikan pesan, 3. Keterlibatan keaktifan peserta didik dalam belajar, dan 4. Fokus perhatian pada bagian penting dari pesan. Terdapat macam desain Computer Based Instruction (CBI), yaitu: 1. Desain dokumentasi, 2. Desain navigasi, dan 3. Desain grafis. Berbagai macam pendekatan instruksional yang dikemas dalam bentuk program pembelajaran berbasis komputer atau Computer Based Instruction (CBI) seperti: drill and practice, simulasi, tutorial dan permainan. Media pembelajaran berbasis komputer yang dikembangkan, jika dimanfaatkan dengan baik akan dapat meningkatkan hasil belajar siswa. Sebelum topik IMK dianggap sebagai obyek penelitian yang cukup penting, banyak penelitian telah dilakukan untuk mengetahui bagaimana siswa berinteraksi dengan system instruksional terkomputerisasi. Perkembangannya: 1. CMI (Computer Managed Instruction), suatu komponen yang melakukan pekerjaan administratif seperti penyimpanan rekord, update data, pendaftaran menggunakan komputer. Material presentasi diberikan dalam bentuk dengan komputer atau dengan pengajaran tradisional atau dalam grup diskusi. 2. CAI (Computer Assisted Instruction), disini komputer mengambil lebih banyak bagian dari pekerjaan seorang instruktur. Seluruh material dapat dipresentasikan dengan komputer sementara sebagian lain material masih dapat dipresentasikan oleh instruktur. ICAI (Intelligent CAI), dilakukan dengan teknik kecerdasan buatan. Tutorial, tanyajawab dalam bahasa natural, dan petunjuk dilakukan komputer. 3.

Algoritma dan Implementasi

3.1. Algoritma Simulasi Materi Simulasi materi digunakan untuk menampilkan hasil dari penggunaan property yang telah disedikan berdasarkan materi. Algoritma Simulasi Materi Selektor Link Pseudo Class dapat diuraikan sebagai berikut : Input : bgColor, text, ahover, active, avisited, fFamily, fsize Output : Selektor link Proses : var csstext = <style type="text/css">

20

ISSN : 2301-9425


csstext = body {background-color: txt.value; csstext = color: txt.value; csstext = fontfamily:txt.options.selectedIndex.text; csstext = font-size:txt.value txt.[options[txt].selectedIndex].text; csstext = margin-top:txt.value txt.[options[txt].selectedIndex].text; csstext = margin-left:txt.value txt.[options[txt].selectedIndex].text; csstext = margin-right:txt.value txt[options[txt.selectedIndex].text; csstext = margin-bottom:txt.value txt[options[txt.selectedIndex].text; csstext = }; csstext = p{ csstext = fontfamily:txt.options[txt.selectedIndex].text; csstext = font-size: txt.value + txt[options[txt.selectedIndex].text; csstext = }; csstext = a:link {color: txt.value}; csstext = a:visited {color: txt.value}; csstext = a:hover {color: txt.value}; csstext = a:active {color: txt[3].value }; csstext = ;

Gambar 1 : Tampilan Menu Utama b. Halaman Forum Halaman Forum merupakan kumpulan dari beberapa pertanyaan dari peserta didik atau administrator. Halaman Forum dapat dilihat pada gambar 2 :

3.2 Implementasi Program Pembelajaran Casscading Style Sheets (CSS) yang telah dirancang merupakan aplikasi pembelajaran yang menggunakan bahasa pemrograman PHP, dimana untuk mengetik listing program dilakukan pada Macromedia Dreamweaver 8 yang merupakan perangkat lunak editor untuk pembuatan web dan untuk aplikasi databasenya penulis menggunakan PHP Triad. Pembelajaran Casscading Style Sheets yang dirancangan menggunakan metode Computer Based Instruction (CBI), dimana pada metode tersebut berguna agar peserta didik yang menggunakan aplikasi tersebut dapat melakukan simulasi dari program materi yang telah diberikan. Berikut hasil dari implementasi program keseluruhan yang telah dirancang: a. Halaman Utama Halaman utama dapat dikatakan sebagai antar muka (user interface) antara user dengan program. Halaman utama menampilkan pilihan menu yang tersedia pada program. Pada Halaman utama tersedia lima pilihan menu yaitu Home, Artikel, Forum, Register dan Login. Gambar untuk tampilan Halaman utama dapat dilihat pada gambar 1 :


Gambar 2 : Halaman Forum c. Halaman Materi Pada halaman ini berisikan pengelajasan dari kategori materi yang telah dipilih, peserta didik juga dapat mempraktekkan langsung dari materi yang telah dijelaskan dengan cara mengklik menu coba sekarang, dapat dilihat pada gambar 3 :

21


ISSN : 2301-9425

pada pembelajaran sudah disediakan properti yang akan digunakan. Metode Computer Based Instuction (CBI) diterapkan pada pembelajaran Casscading Style Sheets (CSS) untuk mempermudah peserta didik dalam memahami CSS tanpa terbatas oleh waktu dan jarak.

Gambar 3 : Halaman Materi Peserta Didik d.

Daftar Pustaka [1]. http://staff.uny.ac.id/sites/default/files/1315683 00/ pembelajaranberbantuan komputer. [2]. http://repository.upi.edu/operator/upload/s_ktp _ 060110_chapter2.pdf [3]. http://www.sabah.edu.my/skpmtdon/notes/Teori model p p.pdf. [4]. Wiratmoko Yumono, Pemrograman Web PHPOracle. [5]. Modul Pemrograman Web PPPG Kesenian Yogyakarta, Rusfansyah. [6]. Toturial Cascading Style Sheet, Copyright©2003 Ilmu Komputer.com

Halaman Simulasi Materi Pada gambar 4 Menampilkan halaman simulasi dari materi yang telah dipilih, dimana peserta didik dapat melakukan menampilkan langsung dari source code yang telah disediakan dan dapat juga memodifikasi sesuai keinginan peserta didik.

Gambar 4 : Halaman Simulasi Materi 4. Kesimpulan Perbandingan dapat memberikan perbaikanperbaikan pada masa yang akan datang, Adapun kesimpulan yang penulis peroleh adalah Cascading Style Sheets (CSS) dapat membantu dalam mendesian web, sesuai dengan yang direkomendasikan oleh W3C (World Wide Web Consortium). Penerapan metode Computer Based Instuction (CBI) pada pembelajaran Cascading Style Sheets (CSS) dapat membantu para peserta didik dalam penggunaan properti CSS karena


22

PERANCANGAN APLIKASI PEMBELAJARAN CASCADING STYLE SHEETS DENGAN METODE COMPUTER BASED INTRUCTION

Recommend Documents