WEB DESIGN SPECIALIST CPP002. OUTLINE & SILABUS Versi 1.0

WEB DESIGN SPECIALIST CPP002 OUTLINE & SILABUS Versi 1.0

CERTIFIED PROFESSIONAL PROGRAM – WEB DESIGN SPECIALIST COURSE OUTLINE DESKRIPSI & TUJUAN : CPP WEB DESIGN SPECIALIST merupakan program studi di BINUS CENTER yang mengajarkan kepada peserta bagaimana membuat sebuah website dimana fokus pada PERANCANGAN WEBSITE STATIS. Untuk mampu mencapai hasil yang maksimal maka dibekali berbagai kemampuan yang diajarkan pada modul-modul pelatihan mulai dari konsep, dibantu dengan berbagi software pengolah gambar, animasi, dan sintaks yang dapat membuat website lebih optimal dan tepat sasaran. Guna mendukung kompetensi yang telah didapat dan agar dapat bersaing di dunia industri, program studi ini juga dibekali dengan sertifikasi internasional (ACA – Adobe Photoshop).

METODE BELAJAR : Class / e-Learning / Studio Semua proses belajar mengajar di kelas, kecuali yang disebutkan khusus.

DURASI : Class

: 72 sesi X 3 jam

Online Learning : 6 sesi

PERANGKAT AJAR : e-Book Video Tutorial Image Bank

PERSYARATAN KEMAMPUAN AWAL : Mampu mengoperasikan komputer (mouse dan keyboard) Mampu menggunakan sistem operasi Windows (manajemen file dan folder)

KEBUTUHAN HARDWARE : PC - 1 UNIT (standard peripherals or accessories) PROCESSOR - Intel Pentium IV RAM - 512 MB GRAPHIC CARD - 128 MB

1

KEBUTUHAN SOFTWARE : Microsoft Windows XP or higher Adobe Photoshop CS4 Adobe Illustrator CS4 Adobe Flash CS4 Adobe Dreamweaver CS4 Firefox 3+ Internet Explorer 7+ Notepad, TextPad 4.7+, TopStyle 4+ WS_FTP or CuteFTP or GoodFTP

GRADING SYSTEM : A : 100 – 85 B : 84 – 75 C : 74 – 65 D : 64 – 55 E : < 55 *) Pembulatan ke atas

2

SUSUNAN MATERI MODUL 1 – AC501 – INTERNET TECHNOLOGY AND WEB DESIGN CONCEPT (TEORY) Mempelajari tentang konsep dan alur pembuatan website

MODUL 2 – AD568 – DIGITAL IMAGING AND WEB LAYOUT (ADOBE PHOTOSHOP) Mempelajari bagaimana memanipulasi gambar digital yang digunakan sebagai penunjang dalam sebuah website, termasuk desain layout untuk website, tombol navigasi, dll

MODUL 3 – AD567– DIGITAL GRAPHIC ILLUSTRATION (ADOBE ILLUSTRATOR) Mempelajari bagaimana menciptakan bentuk-bentuk vektor yang digunakan sebagai penunjang dalam sebuah website.

MODUL 4 – AD541 – WEB ANIMATION (ADOBE FLASH) Mempelajari bagaimana membuat animasi yang digunakan dalam website sehingga website terlihat lebih menarik dan interaktif, termasuk di dalamnya dukungan actionScript

MODUL 5 – AC505 – XHTML WEB PAGE AUTHORING AND CSS (ADOBE DREAMWEAVER) Mempelajari bagaimana menyatukan bahan-bahan (gambar, animasi, teks, dll) menjadi sebuah website, serta mengoptimalkan sintak-sintak yang digunakan dengan xhtml dan css

MODUL 6 – AC506 – CLIENT SCRIPTING (JAVASCRIPT) Mempelajari bagaimana teknik scripting untuk keperluan validasi dan animasi sederhana dalam website

MODUL 7 – AH503 – IMPLEMENTATION PROJECT 1 Mengerjakan proyek website statis, kasus #1, mulai dari konsep, desain, animasi, koding, sampai menjadi sebuah website utuh dan diupload ke server, website dapat diakses secara online

MODUL 8 – AD569 – INTERNATIONAL CERTIFICATION – ACA PHOTOSHOP PREPERATION Mempersiapkan diri dan review ulang sebelum mengikuti ujian sertifikasi internasional (ACA – Adobe Photoshop)

3

HUBUNGAN MODUL DENGAN WORKFLOW PROJECT KESELURUHAN

4

CERTIFIED PROFESSIONAL PROGRAM – WEB DESIGN SPECIALIST

>> SILABUS & PANDUAN KELAS MODUL 1 – AC501 – INTERNET TECHNOLOGY AND WEB DESIGN CONCEPT (TEORY) DESKRIPSI & TUJUAN : Modul ini memperkenalkan tentang internet secara umum, esensi dari web design, metode dan tahapan dalam pembuatan sebuah website statis, serta wawasan lain yang berhubungan dengan profesi seorang web designer.

KETENTUAN NILAI : Kehadiran Tugas Mandiri Ujian Final

= 10 % = 30 % = 60 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 – PENGENALAN INTERNET DAN WEBSITE Pengenalan CPP Sejarah dan Layanan Internet, Tentang Website, Web Teknologi, Website Statis dan Dinamis, Sedikit tentang (X)HTML

KASUS LATIHAN Menggunakan fasilitas dan layanan yang tersedia di internet, browsing beberapa website (statis dan dinamis) dan mencari perbedaan statis dan dinamis, membuat satu halaman web yang sangat sederhana

SESI 2 – DOMAIN & HOSTING Domain, Hosting, WhoIs, FTP

KASUS LATIHAN Mencari nama domain, mencari tahu pemilik suatu nama domain, demo FTP, mencari tahu tipe-tipe layout sebuah website.

SESI 3 – TAHAPAN PEMBUATAN WEBSITE Tahapan Pembuatan Website (statis)

KASUS LATIHAN Mencari tahu fitur-fitur yang biasanya digunakan dalam sebuah website (misal website seorang web designer). Membuat sketsa dari website yang ada (ikuti panduan instruktur), cari tahu ide dibalik pembuatan website tersebut.

SESI 4 – INFO LAIN SEPUTAR WEBSITE Struktur sebuah Website (homepage, main section, subsection) Webpage components Web-safe Font

KASUS LATIHAN Browsing beberapa website dan buat struktur websitenya. Cari bentuk-bentuk navigasi dengan cara browsing internet Membuat satu studi kasus dari sebuah website.

SESI 5 – UJIAN

5

CATATAN : Sesi (urutan materi) beserta contoh kasus latihan bukan bersifat baku, penyesuaian bisa dilakukan seperlunya oleh pengajar demi pencapaian proses belajar mengajar yang optimal.

6


>> SILABUS & PANDUAN KELAS MODUL 2 – AD568 – DIGITAL IMAGING AND WEB LAYOUT (ADOBE PHOTOSHOP)

DESKRIPSI & TUJUAN : Program Photoshop merupakan salah satu program pengolah digital yang kaya fitur dan sangat populer sampai saat ini. Program ini biasanya digunakan untuk mengolah gambar digital untuk keperluan desainer grafis, baik untuk cetak, website, multimedia, maupun fotografi digital. Dalam modul ini mengajarkan penggunaan dasar tentang photoshop dan olah digital, dan setelah itu diarahkan pada latihan-latihan kasus yang berhubungan dengan desain layout halaman website, dan mempersiapkan material-material lainnya yang dibutuhkan seperti navigasi, button, ikon, background, gambar produk, foto, dll.

KETENTUAN NILAI : Kehadiran Quiz / Tugas Mandiri Ujian

= 10 % = 30% = 60 %

SUSUNAN MATERI & KASUS LATIHAN : SES1 1 – KOMPONEN DASAR Tujuan Modul Bitmap vs Vector Fungsi Dasar Photoshop Resample Image Drawing Tools Selection Tools

KASUS LATIHAN : Mengubah ukuran gambar dan kanvas. Menggambar dan mewarnai (gambar terlampir paket CD atau diberikan oleh instruktur).

SESI 2 – LAYER, TEXT, TOOLS MANIPULASI Layer Masking Teks

KASUS LATIHAN : Mewarnai (penerapan layer dan seleksi). Manipulasi beberapa gambar menjadi satu komposisi yang menarik. Manipulasi gambar dengan menggabungkan teks dan masking.

SESI 3 – CASE #1 Koreksi Gambar (level, hue/saturation brightness, curve, desaturate) Manipulasi Foto (healing brush, clone stamp, Patch tool, dodge, burn)

KASUS LATIHAN : Memperbaiki foto yang rusak. Digital artist (dasar)

SESI 4 – EFEK KHUSUS Filter Layer Style

KASUS LATIHAN : Memberikan efek khusus pada gambar. Membuat berbagai efek khusus pada teks (gunakan layer style).

7

SESI 5 – CASE #2 Digital Image Compositing

KASUS LATIHAN : Manipulasi beberapa gambar menjadi satu komposisi yang unik dan menarik.

SESI 6 – QUIZ Soal quiz bisa berbeda untuk masing-masing instruktur.

SESI 7 – WEB LAYOUT Web Page Types Web Layout Project Preperation Web Layout Project

KASUS LATIHAN : Desain halaman intro website *) lihat panduan di e-book

SESI 8 – WEB LAYOUT (CONT.) Web Layout Project

KASUS LATIHAN : Desain halaman intro website Desain halaman isi website *) lihat panduan di e-book

SESI 9 – WEB LAYOUT (CONT.) Web Layout Project

KASUS LATIHAN : Desain halaman isi website *) lihat panduan di e-book

SESI 10 – OTHER WEB PAGE ELEMENTS Button/Navigation Background HTML Background Code (demo)

KASUS LATIHAN : Menyelesaikan navigasi untuk kasus pada bab sebelumnya Membuat berbagai pola background yang digunakan pada halaman web Penerapan gambar background yang telah dibuat pada halaman web

SESI 11 – SAVE FOR WEB METHOD Cropping & Slicing Tools Intro PSD to XHTML

KASUS LATIHAN : Melakukan pemotongan gambar (save for web) sebelum disatukan kembali melalui koding xhtml.

SESI 12 - UJIAN SESI 13 – UJIAN (CONT.) CATATAN : Sesi (urutan materi) beserta contoh kasus latihan bukan bersifat baku, penyesuaian bisa dilakukan seperlunya oleh pengajar demi pencapaian proses belajar mengajar yang optimal.

8


>> SILABUS & PANDUAN KELAS MODUL 3 - AD567 – DIGITAL ILLUSTRATION (ADOBE ILLUSTRATOR) DESKRIPSI & TUJUAN : Program Illustrator merupakan salah satu program ilustrasi yang populer. Selain kaya akan berbagai fitur, program ini bisasanya digunakan untuk membuat gambar digital berbasiskan vektor, dan media yang digunakan pun beragam, mulai dari media cetak, majalah, tv, web, multimedia, dan peralatan elektronik lainnya. Dengan belajar modul ini diharapkan dapat menunjang kebutuhan gambar untuk web, terutama ornamen layout, logo, button, navigasi, dll.

KETENTUAN NILAI : Kehadiran Quiz / Tugas Mandiri Ujian

= 10 % = 30% = 60 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 – ENVIRONMENT, SHAPE, BASIC COLOR Vector vs Raster Graphic Illustrator Workspace Tools and Panels Shape and Its Manipulation (transform, pathfinder, liquefy tools) Fill Stroke Basic Gradient and Pattern

KASUS LATIHAN : Membuat gambar bentuk sederhana dengan berbagai variasi yang telah diajarkan.

SESI 2 – TOOLS Fill Gradient and Mesh Tool Type Tool (character and paragraph) Pen Tool and Tracing Object

KASUS LATIHAN : Melakukan tracing terhadap objek foto. Kombinasi shape dan huruf membentuk sebuah artwork.

SESI 3 – ICON Icon for Web Transparent Tool

KASUS LATIHAN : Membuat bentuk-bentuk ikon mulai dari yang sederhana, bentuk 2D dan 3D.

SESI 4 – ORNAMEN Ornamen untuk Web Layout Blend Tool

KASUS LATIHAN : Membuat ornamen yang akan dipersiapkan untuk tampilan halaman web.


9

SESI 6 – WEB LAYOUT Layout web Safe for Web

KASUS LATIHAN : Membuat layout halaman website dan siap digunakan untuk website.

SESI 7 – FINAL EXAM CATATAN : Sesi (urutan materi) beserta contoh kasus latihan bukan bersifat baku, penyesuaian bisa dilakukan seperlunya oleh pengajar demi pencapaian proses belajar mengajar yang optimal.

10


>> SILABUS & PANDUAN KELAS MODUL 4 - AD541 – WEB ANIMATION (ADOBE FLASH) DESKRIPSI & TUJUAN : Flash adalah aplikasi yang paling digemari oleh para designer web karena kaya akan fitur pendukung animasi yang powerfull. Dalam modul ini akan difokuskan pada pembuatan animasi pada halaman web, baik hanya sebagai pendukung, membuat game sederhana, prealoader, navigasi, dll.

KETENTUAN NILAI : Kehadiran Quiz/Tugas Mandiri Ujian

= 10 % = 30 % = 60 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 - PENDAHULUAN Fitur Terbaru Flash Lingkungan Kerja Flash Operasi Dasar Flash Toolbox dan Panel Shape dan Coloring Grouping dan Arrange Object

KASUS LATIHAN : Membuat objek-objek sederhana, mengatur posisi dan urutan, dll.

SESI 2 – ANIMASI FLASH Frame by Frame Animation Motion Tween Animation Classic Tween Animation

KASUS LATIHAN : Membuat beberapa contoh animasi sederhana (animasi frame by frame, classic tween, dan motion tween).

SESI 3 – TWEEN SHAPE DAN MASKING Tween Shape Masking

KASUS LATIHAN : Membuat satu animasi tween shape dengan memanfaatkan fitur masking.

SESI 4 – MOTION GUIDE Motion Guide

KASUS LATIHAN : Membuat animasi dengan memanfaatkan fitur motion guide.

SESI 5 – BUTTON DAN SCENE Button Simple Action Script for Button Scene

11

KASUS LATIHAN : Membuat sekelompok button yang dapat mengoperasikan suatu perintah dengan actionScript. Mengontrol animasi dengan actionScript

SESI 6 – MOVIE CLIP Movie Clip Controlling Movie Clip with ActionScript

KASUS LATIHAN : Membuat animasi pop-up menu. Membuat animasi yang dibentuk dari beberapa movieclip.


SESI 8 – SOUNDS Import Sounds Sound Properties Controlling Sound on Movie Clip with Button and ActionScript

KASUS LATIHAN : Membuat sound player yang dikontrol melalui tombol yang diberi actionScript.

SESI 9 – TEXT Static Text Dynamic Text Input Text

KASUS LATIHAN : Membuat contoh penerapan input text. Membuat contoh text scroll melalui dynamic text.

SESI 10 – PRELOADER DAN PUBLISHING Prealoader Make a Custom Cursor Publishing Attached Flash Movie from Another File

KASUS LATIHAN : Membuat contoh preloader Membuat animasi multiflash. Publishing dan testing.

SESI 11 - UJIAN

CATATAN : Sesi (urutan materi) beserta contoh kasus latihan bukan bersifat baku, penyesuaian bisa dilakukan seperlunya oleh pengajar demi pencapaian proses belajar mengajar yang optimal.

12


>> SILABUS & PANDUAN KELAS MODUL 5 – AC505 – XHTML WEB PAGE AUTHORING & CSS (ADOBE DREAMWEAVER) DESKRIPSI & TUJUAN : Sebuah halaman website dibangun melalui kode-kode XHTML. Seorang web designer harus memiliki kemampuan ini. Halaman website akan jauh lebih handal jika kemampuan XHTML ini dibarengi dengan kemampuan CSS.


= 10 % = 30 % = 60 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 – PENGENALAN XHTML Whats is XHTML XHTML vs HTML XHTML Rules Tag Structure and Basic Element Text and Paragraph Formatting URL and Link List

KASUS LATIHAN : Membuat halaman website sederhana dan menampilkannya melalui browser. Manipulasi paragraf, membuat link untuk teks, membuat format list.

SESI 2 – IMAGE & LAYOUT FORMAT Image and Its Attribut Management Table for Web Layout Management DIV for Web Layout

KASUS KASUS LATIHAN : Memasukkan komponen gambar pada halaman web dan formatnya, termasuk link. Menggunakan table, dan manipulasi baris dan kolom. Membuat layout web dengan tag Table dan tag Div.

SESI 3 – FORM AND IFRAME Form and Its Benefit Iframe and Its benefit

KASUS LATIHAN : Membuat halaman web yang isinya biodata, gunakan form untuk bagian biodata atau registrasi. Membuat website sederhana dengan iframe.

SESI 4 – DREAMWEAVER Introduction Meta, Title, Doctype Header Tag Simple input object (text, image, flash) with Dreamwaever Simple Formating Text & Paragraph using CSS

KASUS LATIHAN : Membuat halaman website sederhana dengan berbagai tipe objek didalamnya.

13

SESI 5 – CSS#1 What is CSS CSS Concept and its Benefits CSS for Text and Paragraph CSS for Table CSS for Div

KASUS LATIHAN : Membuat website yang terdiri dari beberapa halaman, atur tata letak dengan table, dan optimalisasi dengan CSS. Membuat website yang terdiri dari beberapa halaman, atur tata letak dengan Div, dan optimalisasi dengan CSS.

SESI 6 – CSS#2 CSS Div Indepth CSS Div Layout Setting

KASUS LATIHAN : Membuat website yang terdiri dari beberapa halaman (kompleks, isinya berbagai tipe objek), atur tata letak dengan Div, dan optimalisasi dengan CSS.


SESI 8 – WEB STRUCTURE FILE Web Structure Files Upload File to Server

KASUS LATIHAN : Review

SESI 9 – PSD TO XHTML PSD to XHTML Concept How to Convert PSD to XHTML Rollover Image and Menu Navigation

KASUS LATIHAN : Convert PSD to XHTML

SESI 10 – PSD TO XHTML (cont.) Convert PSD to XHTML

KASUS LATIHAN : Convert PSD to XHTML dan sekaligus mengisi konten website secara lengkap.

SESI 11 – CSS#3 Menu Navigation using CSS

KASUS LATIHAN : Membuat menu navigasi (horizontal & vertikal) dengan CSS.

SESI 12 – CSS#3 (cont.) Menu Navigation using CSS

KASUS LATIHAN : Membuat website dengan menu navigasi dengan CSS.

SESI 13 - UJIAN CATATAN : Sesi (urutan materi) beserta contoh kasus latihan bukan bersifat baku, penyesuaian bisa dilakukan seperlunya oleh pengajar demi pencapaian proses belajar mengajar yang optimal.

14


>> SILABUS & PANDUAN KELAS MODUL 6 – AC506 – CLIENT SCRIPTING (JAVASCRIPT) DESKRIPSI & TUJUAN : Adalah bahasa scripting yang populer di internet dan dapat bekerja di beberapa browser seperti Internet Explorer, Mozilla Firefox, Netscape, dan Opera. Javascript banyak digunakan untuk membuat website lebih interaktif, bisa berupa pembuatan validasi, bereaksi terhadap event yang diberikan oleh user, animasi gambar, dll.


= 10 % = 30 % = 60 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 – INTRODUCTION TO JAVASCRIPT Print External File

KASUS LATIHAN : Menampilkan text, membuat variabel dan array. Membuat tipe external javascript dan digunakan oleh HTML.

SESI 2 – JAVASCRIPT FUNDAMENTAL Selection Looping

KASUS LATIHAN : Membuat grading-score dengan fungsi selection. Mendefinisikan angka ganjil dan genap. Membuat table dengan looping. Menampilkan Tahun dengan looping.

SESI 3 – FUNCTION & EVENT HANDLING Function Math Object Event Handling

KASUS LATIHAN : Membuat kalkulator sederhana. Membuat konversi mata uang sederhana. Meanmpilkan gambar secara acak.

SESI 4 – OBJECT Date Object String Object Window Object

KASUS LATIHAN : Nenampilkan tanggal dan status (pagi, siang, malam) berdasarkan waktu. Modifikasi string. Membuat pop-up window.

15

SESI 5 – Review Review. KASUS LATIHAN : Pengumpulan tugas dan review.

SESI 6 – VALIDATION Validation (regex)

KASUS LATIHAN : Membuat form dengan regular expression.

SESI 7 – ANIMATION Make Animation Image

KASUS LATIHAN : Membuat scrolling text dan slideshow sederhana.

SESI 8 – JQUERY JQuery

KASUS LATIHAN : Membuat animasi sederhana dengan JQuery.

SESI 9 – REVIEW Review

KASUS LATIHAN : Pengumpulan tugas dan review.

SESI 10 - UJIAN CATATAN : Sesi (urutan materi) beserta contoh kasus latihan bukan bersifat baku, penyesuaian bisa dilakukan seperlunya oleh pengajar demi pencapaian proses belajar mengajar yang optimal.

16


>> SILABUS & PANDUAN KELAS MODUL 7 - AH503 – IMPLEMENTASI

DESKRIPSI & TUJUAN : Modul ini akan memberikan kesempatan kepada peserta untuk mempraktekkan semua teknik yang telah dipelajari untuk mengerjakan sebuah proyek WEBSITE dengan focus proyek web statis (lihat ketentuan soal “Implementasi 1”) sambil dibimbing oleh instruktur pembimbing. Hasil akhir dari pengerjaan Implementasi berupa : -

1 CD berisi website, softcopy dokumentasi, dan bahan presentasi

-

1 Buku Portfolio / dokumentasi yang berisi ulasan tentang website yang dikerjakan

KETENTUAN NILAI : Kehadiran Implementasi Presentasi (sidang)

= 10 % = 60 % = 30 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 – 16 PROJECT IMPLEMENTATION

17


>> SILABUS & PANDUAN KELAS MODUL 8 - AD569 – INTERNATIONAL CERTIFICATION – ACA PHOTOSHOP PREPERATION

DESKRIPSI & TUJUAN : Persiapan untuk menghadapi ujian sertifikasi internasional, Adobe Certified Associate (ACA) – Photoshop.

KETENTUAN NILAI : Kehadiran Quiz/Tugas Mandiri Ujian/Certification

=0% =0% = 100 %

SUSUNAN MATERI & KASUS LATIHAN : SESI 1 – 3 PREPERATION ACA – Photoshop Preperation

18

WEB DESIGN SPECIALIST CPP002. OUTLINE & SILABUS Versi 1.0

Recommend Documents