Silabus Mata Kuliah Perancangan Web

Transkripsi

1 A. IDENTITAS MATA KULIAH Program Studi : Mata kuliah : Kode : Bobot : 2 SKS Kelas : Semester : Prasyarat : Deskripsi singkat : Setelah mengikuti mata kuliah, mahasiswa dapat memahami materi yang meliputi pengenalan web, dasar HTML, pengaturan teks, daftar item (list), gambar, tabel, link, frame, formulir dan multimedia. Standar kompetensi : Mmengerti dan memahami konsep dasar membuat web, membangun halaman web yang bersifat statik, serta mudah untuk dijalankan. B. PENILAIAN Tugas : Kuis : UTS : UAS : C. DOSEN Koordinator : Anggota : 1. Dedy hermanto D. PUSTAKA Buku wajib : Kadir, Abdul. Pemrograman Web Mencakup : HTML CSS JAVASCRIPT & PHP. Andi. Yogyakarta Buku pelengkap : E. JADWAL KONSULTASI Hari : Jam : F. SANKSI 1. Tugas yang dikumpulkan terlambat tidak diberi nilai. 2. Bagi mahasiswa yang memiliki tingkat kehadiran kurang dari 75% tidak diizinkan untuk mengikuti UAS. 3. Mahasiswa yang memakai sandal dianggap tidak hadir.

2 TABEL KULIAH POKOK BAHASAN DAN TUGAS Pertemuan Ke Pokok Bahasan 1 Pengenalan HTML, TAG, list, Tabel dan Hyperlink 2 Pengenalan Frontpage, memasukkan gambar dan suara 3 Menggunakan interaktif button dan pembuatan Formulir dalam Frontpage 4 Pengenalan CSS, penggunaan atribut SPAN, STYLE 5 Penggunaan CSS untuk mengatur FONT, frame dan background 6 Pengenalan Javascript, oprator dan Logika dalam javascript 7 Penggunaan Javascript dalam penerapan Text Scrolling dan background animasi UJIAN TENGAH SEMESTER 8 Photoshop (Pengenalan tool) bag. 1 9 Photoshop (konsep layer, adjustment) bag Photoshop (filter, slice) bag Flash (Pengenalan tool) bag Flash (animasi) bag Mendesian website 14 Mendesain website lanjutan Membaca Tugas Soal

3 Pokok Bahasan : Pengenalan HTML, TAG, List Standar : Menggunakan Hyper Text Markup Language(HTML) dalam mendesain sebuah website 1. Memahami sintaks dasar 1. Mendefinisikan 1. HTML, Body 1. Menggunakan sintaks HTML HTML Penggunaan Body dalam 2. Membuat TAG 2. Membuat TAG, List HTML 3. Membuat List 3. Membuat Tabel 2. Menggunakan TAG, List 4. Membuat Tabel 4. Membuat Hyperlink dalam HTML 3. Menggunakan Tabel dalam 5. Membuat Hyperlink HTML 4. Menggunakan Hyperlink dalam HTML Pokok Bahasan : Pengenalan dan Penggunaan Program Frontpage dalam mendesain website Standar : Menerapkan Frontpage sebagai tool pembantu dalam pembuatan website 1. Menggunakan Frontpage 1.1 Mendefinisikan Frontpage pada pembuatan website 1.2 Menggunakan Marquee, Teks, TAG dan List 2. Menerapkan aplikasi Frontpage Untuk penggunaan dalam mendasain 2.1 Menggunakan Hyperlink 2.2 Menyisipkan gambar dalam area kerja front page 2.3 Efek gambar dengan Marquee 2.4 Memasukkan suara dalam area kerja frontpage 1. Pengenalan Frontpage 2. Memasukkan Teks 3. Marquee 4. TAG, List 1. Hyperlink 2. Memasukkan Gambar 3. Efek Gambar dengan Marquee 4. Memasukkan Suara 1. Mengenal prinsip kerja dan fungsi frontpage 2. Memanfaatkan kemudahan penggunaan teks 3. Menggunakan marquee, TAG dan List 1. Menggunakan Hyperlink sebagai penghubung setiap halaman website 2. Memasukkan gambar dalam area frontpage 3. Memasukkan Suara ke dalam desain sebuah website 2x50 menit 4x50 menit

4 3. Menggunakan Frontpage dalam pembuatan Formulir, interaktif button 3.1 Menggunakan frame 1. Membuat Frame dalam pembuatan website 2. Menerapkan formulir 3.2 Menggunakan formulir 3. Menerapkan interaktif button dalam perancangan dengan frontpage 3.3 Memanfaatkan interaktif button dalam frontpage 1. Membuat Frame dengan menggunakan frontpage 2. Membuat Formulir dan memanfaatkan interaktif button Pokok Bahasan : CSS Standar : Menggunakan CSS dalam pengaturan tabel, font dan frame 1. Menggunakan CSS 1.1 Mendefinisikan Fungsi 1. Pengertian CSS 1. Sintak CSS sebagai bantuan dalam CSS dalam HTML 2. Pengaturan tabel 2. Merancang sebuah web merancang sebuah web 1.2 Mendefinisikan CSS 3. Table style (pewarnaan) menggunakan CSS dalam mengubah Font, teks dan warna latar 2. Menggunakan Font dalam CSS 2.1 Menggunakan font dalam CSS 2.2 Menggunakan Efek font dengan CSS 1. Font dengan CSS 2. Font size, font type and text 3. Text Alignment dalam CSS 1. Memanfaatkan CSS dalam pengaturan font 2. Menggunakan pengaturan CSS untuk posisi sebuah teks 4 X Menggunakan CSS dalam pengaturan bingkai, garis tepi dan 3.1 Menggunakan CSS untuk pembuatan dan pengaturan sebuah 1. Pembuatan Bingkai 2. Garis tepi dari bingkai 3. Pengaturan warna background 1. Memanfaatkan CSS untuk pengaturan pembuatan sebuah bingkai

5 pewarnaan background bingkai 3.2 Menggunakan CSS dalam mengubah warna background 4. Background image 2. Menggunakan css sebagai perancang website untuk perubahan warna background

6 Pokok Bahasan : Javascript Standar : Menggunakan JavaScript untuk mempercantik tampilan dalam sebuah website 1. Memahami penggunaan 1. Mendefinisikan dasar-dasar 1. Pengertian JavaScript 1. Memahami Komponen pembentuk operator dan logika pembentuk JavaScript 2. Pengenalan javascript JavaScript 2. Mendefinisikan Operator dan 3. Pengenalan Properti JavaScript 2. Memahami penggunaan operator logika 1. Pengertian Logika dan Logika dalam JavaScript 2. Operator Logika 4. Logika If, If bersarang dan Switch 2. Memahami perulangan dan fungsi 3. Menggunakan JavaScript sebagai pembuatan efek animasi dalam pembuatan sebuah website 1. Mendefinisikan perulang 2. Menggunakan perulang do, while dan for 3. Mendefinisikan Penggunaan Fungsi 1. Menggunakan Efek scorlling dalam JavaScript 2. Menggunakan efek Background 1. Pengertian perulangan 2. Operator-operator perulangan 1. Pengertian Fungsi 2. Variabel Lokal dan global 3. Menampilkan jam 1. Efek teks scrolling dengan JavaScript 2. Efek Background dengan JavaScript 1. Memahami penggunaan perulangan dalam JavaScript 2. Memahami penggunaan sebuah fungsi 1. Membuat efek scrolling dalam JavaScript 2. Membuat efek background dalam pembuatan sebuah website dengan JavaScript 4 X 50

7 Pokok Bahasan : Photoshop Standar : Menggunakan Photoshop untuk mendesain tampilan dalam sebuah website 1. Memahami dan mampu 1. Memahami penggunaan area 1. Menu Bar 1. Mempelajari setiap tools dan menggunakan setiap kerja dari photshop 2. Tools options yang terdapat dalam tools dan options dalam 2. Menerapkan penggunan 2.1 Move photoshop photoshop. tools, option. 2.2 Marquee 2. Menerapkan tools dan option pada 2.3 Lasso sebuah gambar. 2.4 Crop 2.5 Brush 2.6 Erase 2.7 Gradient 2.8 Pen 2.9 Teks 3. Options 4. Color, Adjustment, Layer 2. Memahami dan dapat menggunakan adjustment (levels, hue/saturation, color balance) 3. Memahami konsep layer dan dapat menggunakannya sebagai lapisan dari setiap gambar. 1. Memahami dan menerapkan penggunaan adjustment 2. Memahami dan menggunakan layer. 1. Adjustment 1.1 Brightness/Contrast 1.2 Levels 1.3 Curves 1.4 Exposure 1.5 Hue/Saturation 1.6 Color Balance 1.7 Photo Filter 1.8 Channel Mixer 2. Layer 1. Menerapkan adjustment dan mengatur parameter didalamnya pada gambar. 2. Menggunakan layer untuk pemisah antar gambar. 6 X 50

8 2.1 Layer Style 2.2 Layer Mask 2.3 Group 2.4 Hidden 2.5 Merge 2.6 Blending 3. Menggunakan filter untuk menambah efek dalam gambar. 4. Menggunakan slice untuk efisiensi gambar 1. Menerapkan filter untuk memberikan efek pada gambar 2. Menggunakan slice untuk efisiensi dalam mendesain website. 1. Filter 1.1 Artistic 1.2 Brush 1.3 Distort 1.4 Noise 1.5 Sharp 1.6 Blur 2. Slice 2.1 Slice Tool 2.2 Format gambar 2.3 Save for Web 1. Memberikan efek pada teks/gambar 2. Melakukan pemotongan gambar menjadi bagian-bagian kecil. 3. Melakukan import gambar ke dalam format yang lebih efisien.

9 Pokok Bahasan : Flash Standar : Menggunakan Flash untuk mendesain animasi tampilan dalam sebuah website 1. Memahami dan 1. Menggunakan document menggunakan tools sebagai area kerja 2. Memahami cara kerja 2. Menerapkan penggunaan dari properties tools (Selection, Pen, Text, Lasso) 1. Memahami dan menggunakan timeline untuk animasi 2. Menggunakan frame dalam membuat sebuah animasi 1. Menerapkan penggunaan timeline (layer, convert gambar, movie clip, button dan graph) 2. Menggunakan frame 1. Document 2. Tools 2.1 Selection 2.2 Pen 2.3 Text 2.4 Lasso 2.5 Rectangle, Oval 3. Properties 1. Timeline 1.1 Layer 1.2 Frame Rate 1.3 Elapse Time 1.4 Convert 1.5 Movie Clip 1.6 Button 1.7 Graph 2. Frame 2.1 Insert Keyframe 2.2 Insert Frame 2.3 Insert Blank Keyframe 1. Menggunakan document sebagai area kerja 2. Menggunakan tools dalam flash untuk pembuatan animasi 3. Memanfatkan properties untuk mengatur efek animasi 1. Merancang sebuah objek. 2. Membuat animasi objek. 3. Mengatur durasi animasi. 4. Export image dan movie. 4 X 50

10