Fakultas Teknologi Informasi Program Studi Sistem Informasi

Transkripsi

1 Desain dan Pemrograman Web 1 Halaman : 1 dari 6 Kode Mata Kuliah : PG110 Nama Mata Kuliah : Desain & Pemrograman Web 1 Beban Kredit : 3 Prasyarat : - : 1. Menjelaskan konsep 2. Memperagakan 3. Studi Kasus 4. Praktikum 5. Presentasi+Diskusi Media : 1. White Board+Spidol 2. LCD+Komputer Evaluasi : 1. Tanya Jawab 2. Quiz 3. Paper/Proyek 4. Tugas Uraian : Mata kuliah Design dan Pemrograman Web 1 memberikan : Pemahaman seni desain web sebagai sarana komunikasi dan informasi digital trampilan teknis menata sebuah website (layout) secara runtut dan benar dengan berbagai web development tools. mampuan dan ketrampilan teknis dalam membuat suatu website dengan desain yang menarik dan informatif web development dan image manipulation tools yang tersedia. tiganya dicapai melalui pemahaman : 1. Tag-tag html secara baik sebagai dasar penyusunan sebuah halaman web 2. Konsep dan penggunaan aplikasi manipulasi gambar, seperti dengan Adobe PhotoShop. 3. Penggunaan aplikasi web development tools, seperti. Sasaran : Setelah mengikuti mata kuliah Desain dan Pemrograman Web 1, mahasiswa mampu dan trampil menyajikan rancangan web secara utuh baik dari isi (content) ataupun dari visualisasi grafis, meliputi : Grafis Sistem Navigasi, Grafis Identitas (logo) yang memenuhi nilai-nilai artisitik, komunikatif dan informatif. Daftar Pustaka : 1. Craig Grannell, Foundation Web Design with 8, Apress, Marc Campbell, 8 Design and Construction, O'Reilly, Jason Beaird, The Principles of Beautiful Web Design, SitePoint, STEP by Step Web Design Theory and Practices, ANDI, Adobe Photoshop untuk Desainer Web, ANDI, Animasi Web dengan Photoshop CS2, Elex Media Komputindo, Cara Cepat Membuat Animasi Flash Menggunakan Swishmax, Andi, 2006

2 Desain dan Pemrograman Web 1 Halaman : 2 dari 6 Tatap 1. Pengenalan Internet dan Teknologi di dalamnya memahami konsep Internet dan Teknologi di dalamnya 2. HTML mengerti dan dapat tag-tag dasar HTML. 3. Desain Web dapat melakukan surfing dengan internet terbiasa dengan segala fasilitas yang ada di internet. mengetahui konsep dan cara kerja mengetahui istilahistilah teknologi yang terkait dengan mengerti mengenai struktur dasar HTML. melakukan manipulasi pada huruf, tabel, gambar, link dengan HTML. mengetahui dasar- 1. Pengenalan internet, sejarah, web pages, web browser, World Wide Web 2. Fasilitas apa saja yang ada di internet 3. Prinsip dan cara kerja 4. Apa yang dibutuhkan untuk membuat web pages Definisi dan pengertian HTML Tags untuk teks/ huruf [paragraph, list, hr, br] HTML Tags untuk warna HTML Tags untuk gambar [JEPG/ GIF/ PNG] HTML Tags untuk hyperlinks HTML Tags untuk tabel Apa itu desain dan desain web? 1, :ch 1 Notepad/ 1,3 2:ch 6 1, 5 2 1, 4 4

3 Desain dan Pemrograman Web 1 Halaman : 3 dari 6 Tatap 4. Pengenalan 5. Layout Design dengan Tabel 6. Layout Design dengan Layer memahami konsep-konsep perancangan halaman web yang baik. dapat mengenal dan dengan baik membuat layout sesuai content web dengan tabel membuat layout sesuai content web dengan dasar web desain. mengetahui kriteria website yang baik. memberikan contoh website yang baik dan tidak baik. dapat mengenal dan web tool untuk membuat halaman web dengan baik mengerti prinsip pembuatan layout halaman. mengerti cara penataan letak pembuatan layout dengan tabel. mengerti cara penataan letak pembuatan layout dengan layer (div). Mengapa membuat web page? Kriteria website yang baik Memberikan informasi yang baik Memberikan nilai tambah halaman web Mengenal area kerja dan menu-menu Membuat site definition di. Apa itu layout? Bagaimana layout yang baik? Desain untuk halaman Membuat dan mengatur tampilan halaman web dengan Tabel Desain untuk halaman Membuat dan mengatur tampilan halaman web 1, 3 1:ch 2, ch 3 2:ch 7 1,3 2:ch 9 1,3 2:ch 10

4 Tatap 7. Menu dan Navigasi Fakultas Teknologi Informasi Desain dan Pemrograman Web 1 Halaman : 4 dari 6 Layer (div) dan navigasi mengetahui konsep dasar menu dan navigasi yang baik. tabel. fasilitas yang sudah tersedia di. dengan Layer Jenis-jenis menu (navigasi) Kriteria menu dan navigasi yang baik. Membuat menu (navigasi) dengan tabel Membuat menu (navigasi) dengan fasilitas yang sudah tersedia di. 8. Ujian Tengah Semester (UTS) 9. Menu dan Navigasi dengan memahami dasardasar. Apa itu? Class, ID, dan Properti Membuat menu dengan 1,3 1:ch 7 2:ch 13, ch 16 1,3 1:ch 4 2:ch Template Apa itu template? 1,3 1:ch 10

5 Tatap 11. Form dan Validasi dengan JavaScript 12. Membuat Header Situs dengan Photoshop Fakultas Teknologi Informasi Desain dan Pemrograman Web 1 Halaman : 5 dari 6 mengerti dan dapat membuat template untuk halaman dapat mengerti cara pembuatan form dengan dan melakukan validasi dikenalkan teknik penggunaan Adobe Photoshop membuat halaman web dan menjadikannya template. membuat halaman baru dari template yang sudah dibuat Mahasiwa mengetahui dan membuat jenis-jenis form inputan. menambahkan validasi sederhana pada form dengan Javascript. Mahasiwa mengetahui elemen yang ada di dalam photoshop. membuat header situs dengan Photoshop. Membuat dan menjadikan halaman sebagai template. Membuat editable ron pada template. Membuat halaman baru dari template yang sudah dibuat Mengenal jenis-jenis form inputan Membuat form dengan Apa itu JavaScript Membuat validasi form dengan JavaScript Mengenal Area rja [Menu bar, Option bar, Toolbox, Layer, Palet, Status bar] Mode dan Model Warna [RGB, CMYK, Bitmap Mode, Grayscale Mode, Duotone Mode, Multichanel Mode] Membuat header situs Photoshop CS2 2:ch 11 1,3 2:ch 18 1,3 3:ch Membuat Animasi dapat Konsep dasar animasi 1,3 6

6 Desain dan Pemrograman Web 1 Halaman : 6 dari 6 Tatap dengan Photoshop dapat mengerti teknik dasar pembuatan animasi 14. Flash (Swish) dikenalkan konsep kerja Flash atau Swish 15. Aplikasi dapat mengenal, memahami dan mengimplementasikan materi yang telah diberikan membuat animasi sederhana dengan Adobe Photoshop. dapat membuat animasi gambar, pembuatan movie. mampu membuat web dengan aplikasi yang telah diberikan Membuat animasi sederhana dengan Adobe Photoshop Toolbar Swishmax Drawing Tool Symbols, Instance dan Behaviour Movie Clips, Frame, y Frame dan Tweening Action Script, Button Publish swishmax ke HTML Membuat web site secara utuh Photoshop CS2 SwishMax 1,3 1,3 7