UNIVERSITAS KLABAT
FAKULTAS ILMU KOMPUTER
PROGRAM STUDI INFORMATIKA

RPS-57202-IFGI241
RENCANA PEMBELAJARAN SEMESTER
MATA KULIAH (MK) KODE Rumpun MK BOBOT (sks) SEMESTER Tanggal Penyusunan
Perancangan Web/Web Design IFGI241 Social Issues and Professional Practice T= 3 3 22 Jul 2024
Pengesahan Dosen Pengembang RPS Koordinator RMK Ka PRODI

Rolly Junius Lontaan
Rolly Junius Lontaan
Semmy Wellem Taju, S.Kom., M.S., PhD
Capaian Pembelajaran CPL-PRODI yang dibebankan pada MK
CPL07 Menguasai konsep teoritis bidang pengetahuan Ilmu Komputer/Informatika dalam mendesain dan mensimulasikan aplikasi teknologi multi-platform yang relevan dengan kebutuhan industri dan masyarakat.
CPL11 Kemampuan menganalisis, merancang, membuat dan mengevaluasi user interface dan aplikasi interaktif dengan mempertimbangkan kebutuhan pengguna dan perkembangan ilmu transdisiplin.
CPL12 Kemampuan mendesain, mengimplementasi dan mengevaluasi solusi berbasis computing multi-platform yang memenuhi kebutuhan-kebutuhan computing pada sebuah organisasi.
Capaian Pembelajaran Mata Kuliah (CPMK)
CPMK14 Mampu merancang dan mengembangkan aplikasi web front-end dan back-end secara terintegrasi.
CPMK16 Mampu mengembangkan aplikasi berbasis platform spesifik (mobile, web, desktop, embedded) dengan arsitektur yang tepat.
CPMK22 Mampu mengimplementasikan solusi komputasi menggunakan bahasa pemrograman dan framework yang sesuai.
CPMK23 Mampu mengintegrasikan komponen sistem (database, jaringan, UI, logika bisnis) dalam satu solusi utuh.
CPMK25 Mampu menganalisis kebutuhan pengguna dan merancang antarmuka yang ergonomis dan aksesibel.
CPMK27 Mampu melakukan usability testing dan iterasi desain berdasarkan feedback pengguna.
CPMK28 Mampu merancang solusi TI terintegrasi untuk organisasi (web, mobile, cloud, IoT, keamanan).
Kemampuan akhir tiap tahapan belajar (Sub-CPMK)
sub.cpmk.IFGI241.CPMK14.1 Mahasiswa mampu menjelaskan konsep aplikasi web modern
sub.cpmk.IFGI241.CPMK16.1 Mahasiswa mampu mengembangkan tampilan web responsif pada berbagai perangkat
sub.cpmk.IFGI241.CPMK16.2 Mahasiswa mampu mengembangkan aplikasi web sesuai karakteristik platform
sub.cpmk.IFGI241.CPMK22.1 Mahasiswa mampu menggunakan HTML dasar untuk membangun halaman web
sub.cpmk.IFGI241.CPMK22.2 Mahasiswa mampu membuat halaman informasi berbasis web
sub.cpmk.IFGI241.CPMK22.3 Mahasiswa mampu membuat formulir web interaktif
sub.cpmk.IFGI241.CPMK22.4 Mahasiswa mampu menggunakan CSS dasar untuk mempercantik halaman web
sub.cpmk.IFGI241.CPMK22.5 Mahasiswa mampu membuat layout website modern
sub.cpmk.IFGI241.CPMK22.6 Mahasiswa mampu menggunakan framework Bootstrap
sub.cpmk.IFGI241.CPMK23.1 Mahasiswa mampu mengintegrasikan halaman website
sub.cpmk.IFGI241.CPMK25.1 Mahasiswa mampu menganalisis kebutuhan pengguna
sub.cpmk.IFGI241.CPMK27.1 Mahasiswa mampu melakukan usability testing
sub.cpmk.IFGI241.CPMK28.1 Mahasiswa mampu merancang website organisasi
Korelasi CPMK terhadap Sub-CPMK
CPMK14 sub.cpmk.IFGI241.CPMK14.1
CPMK22 sub.cpmk.IFGI241.CPMK22.1
sub.cpmk.IFGI241.CPMK22.2
sub.cpmk.IFGI241.CPMK22.3
sub.cpmk.IFGI241.CPMK22.4
sub.cpmk.IFGI241.CPMK22.5
sub.cpmk.IFGI241.CPMK22.6
CPMK25 sub.cpmk.IFGI241.CPMK25.1
CPMK16 sub.cpmk.IFGI241.CPMK16.1
sub.cpmk.IFGI241.CPMK16.2
CPMK23 sub.cpmk.IFGI241.CPMK23.1
CPMK27 sub.cpmk.IFGI241.CPMK27.1
CPMK28 sub.cpmk.IFGI241.CPMK28.1
Deskripsi Singkat MK Pada mata kuliah ini mahasiswa mempelajari tentang: (1) cara kerja jaringan Internet dan teknologi Web; (2) merancang halaman Web di sisi client menggunakan HTML; (3) mengatur tampilan halaman Web agar menjadi menarik dengan CSS; (4) menambah interaksi dengan pengguna Web menggunakan JavaScript; (5); menggunakan library/framework CSS Bootstrap untuk mengembangkan halaman Web. Mahasiswa secara langsung mempraktekan materi yang ada melalui pengembangan halaman Web untuk pendaftaran, berita, halaman login, dan halaman dashboard.
Bahan Kajian : Materi Pembelajaran 1. Fondasi Internet & HTML 2. Styling dengan CSS 3. Framework Modern & Project
Pustaka Utama
  • 1. MDN Web Docs, HTML: Hypertext Markup Language, https://developer.mozilla.org/en-US/docs/Web/HTML
  • 2. MDN Web Docs, CSS: Cascading Style Sheets, https://developer.mozilla.org/en-US/docs/Web/CSS.
  • 3. https://getbootstrap.com/docs/5.3/getting-started/introduction/
Pendukung
Dosen Pengampu Lontaan, Rolly Junius, Tombeng, Marchel
Mata Kuliah Syarat Pemrograman Komputer / Computer Programming
Pertemuan Ke Kemampuan akhir tiap tahapan belajar (Sub-CPMK) Penilaian Bentuk Pembelajaran; Metode Pembelajaran; Penugasan Mahasiswa; Materi Pembelajaran Bobot Penilaian
Indikator Kriteria & Teknik Luring Daring
1 sub.cpmk.IFGI241.CPMK14.1-Mahasiswa mampu menjelaskan konsep aplikasi web modern Mahasiswa mampu menjelaskan konsep internet, web, dan arsitektur aplikasi web dengan benar Kriteria

Teknik
Kuliah, Diskusi 		kehadiran,Ceramah,[CR=30 Menit]
Diskusi,Diskusi Kelompok,[DK=60 Menit]
 Diskusi,Diskusi Kelompok,[DK=50 Menit]
 Topik
Pengantar internet, web, website, dan arsitektur web
Sub Topik

 5
2 sub.cpmk.IFGI241.CPMK22.1-Mahasiswa mampu menggunakan HTML dasar untuk membangun halaman web Mahasiswa mampu membuat struktur halaman HTML dengan elemen dasar yang tepat Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik 		Latihan,Project Based Learning,[PBL=90 Menit]
 Topik
Struktur HTML, heading, paragraf, list
Sub Topik

 5
3 sub.cpmk.IFGI241.CPMK22.2-Mahasiswa mampu membuat halaman informasi berbasis web Mahasiswa mampu menampilkan gambar, tabel, link, audio, dan video pada halaman web Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik Coding 		Praktikum,Project Based Learning,[PBL=90 Menit]
 Topik
Hyperlink, gambar, tabel, audio, video
Sub Topik

 5
4 sub.cpmk.IFGI241.CPMK22.3-Mahasiswa mampu membuat formulir web interaktif Mahasiswa mampu membuat form input dan validasi dasar pada halaman web Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik, Demonstrasi 		Praktikum,Project Based Learning,[PBL=89 Menit]
 Topik
Form HTML, input, validasi dasar
Sub Topik

 5
5 sub.cpmk.IFGI241.CPMK25.1-Mahasiswa mampu menganalisis kebutuhan pengguna Mahasiswa mampu membuat wireframe dan user flow berdasarkan kebutuhan pengguna Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Studi Kasus, Diskusi 		Praktikum,Project Based Learning,[PBL=89 Menit]
 Topik
Konsep UI/UX, user flow, wireframe
Sub Topik

 5
6 sub.cpmk.IFGI241.CPMK22.4-Mahasiswa mampu menggunakan CSS dasar untuk mempercantik halaman web Mahasiswa mampu menerapkan CSS untuk mengatur tampilan halaman web Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik Coding 		Praktikum,Project Based Learning,[PBL=89 Menit]
 Topik
Selector, property, color, typography
Sub Topik

 5
7 sub.cpmk.IFGI241.CPMK22.5-Mahasiswa mampu membuat layout website modern Mahasiswa mampu membuat layout web menggunakan flexbox dan grid Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik, Diskusi 		Praktikum,Project Based Learning,[PBL=90 Menit]
 Topik
Box model, flexbox, grid system
Sub Topik

 20
8 sub.cpmk.IFGI241.CPMK16.1-Mahasiswa mampu mengembangkan tampilan web responsif pada berbagai perangkat Mahasiswa mampu membuat tampilan web yang responsif pada desktop dan mobile Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik Project 		Praktikum,Project Based Learning,[PBL=89 Menit]
 Topik
Responsive web design, media query, mobile-friendly design
Sub Topik

 5
9 sub.cpmk.IFGI241.CPMK23.1-Mahasiswa mampu mengintegrasikan halaman website Mahasiswa mampu menghubungkan beberapa halaman website dengan navigasi yang baik Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik Coding 		Praktikum,Project Based Learning,[PBL=89 Menit]
 Topik
Navigasi website, multi-page website
Sub Topik

 5
10 sub.cpmk.IFGI241.CPMK16.2-Mahasiswa mampu mengembangkan aplikasi web sesuai karakteristik platform Mahasiswa mampu menerapkan tampilan web yang optimal pada berbagai ukuran layar Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik, Demonstrasi 		Praktikum,Project Based Learning,[PBL=90 Menit]
 Topik
Progressive Web App (PWA) dasar, viewport, optimasi tampilan mobile
Sub Topik

 5
11 sub.cpmk.IFGI241.CPMK22.6-Mahasiswa mampu menggunakan framework Bootstrap Mahasiswa mampu menggunakan komponen Bootstrap untuk membangun halaman web Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Praktik Coding 		Praktikum,Project Based Learning,[PBL=89 Menit]
 Topik
Container, grid, navbar, card, form Bootstrap
Sub Topik

 5
12 sub.cpmk.IFGI241.CPMK27.1-Mahasiswa mampu melakukan usability testing Mahasiswa mampu melakukan evaluasi usability dan mengumpulkan feedback pengguna Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Observasi, Diskusi 		Praktikum,Collaborative Learning,[=89 Menit]
 Topik
Evaluasi tampilan, usability testing, feedback pengguna
Sub Topik

 5
13 sub.cpmk.IFGI241.CPMK28.1-Mahasiswa mampu merancang website organisasi Mahasiswa mampu merancang struktur dan halaman website organisasi secara terintegrasi Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Project 		Project,Project Based Learning,[PBL=89 Menit]
 Topik
Struktur website organisasi/profil, integrasi halaman
Sub Topik

 5
14 sub.cpmk.IFGI241.CPMK28.1-Mahasiswa mampu merancang website organisasi Mahasiswa mampu mempresentasikan website yang fungsional, responsif, dan sesuai kebutuhan pengguna Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Presentasi, Review 		Project,Project Based Learning,[PBL=89 Menit]
 Topik
Presentasi dan evaluasi project akhir website
Sub Topik

 20

Teknik Penilaian CPMK

CPL MK CPMK Quiz Latihan Tugas Praktek Mid Test (UTS) Final Test (UAS)
CPL07 Perancangan Web/Web Design CPMK14 Y
CPL07 Perancangan Web/Web Design CPMK16 Y Y
CPL10 Perancangan Web/Web Design CPMK22 Y Y Y Y Y
CPL10 Perancangan Web/Web Design CPMK23 Y
CPL11 Perancangan Web/Web Design CPMK25 Y
CPL11 Perancangan Web/Web Design CPMK27 Y
CPL12 Perancangan Web/Web Design CPMK28 Y Y

Prosedur Penilaian CPMK

1. Komponen Penilaian CPMK
CPL CPMK Sub-CPMK Detail Penugasan (Teknik Penilaian) Bobot % Kriteria Penilaian
CPL07 CPMK14 sub.cpmk.IFGI241.CPMK14.1 Kuliah, Diskusi 5
CPL10 CPMK22 sub.cpmk.IFGI241.CPMK22.1 Praktik 5 Kesesuaian output dengan spesifikasi yang diminta
CPL10 CPMK22 sub.cpmk.IFGI241.CPMK22.2 Praktik Coding 5 Kesesuaian output dengan spesifikasi yang diminta
CPL10 CPMK22 sub.cpmk.IFGI241.CPMK22.3 Praktik, Demonstrasi 5 Kesesuaian output dengan spesifikasi yang diminta
CPL11 CPMK25 sub.cpmk.IFGI241.CPMK25.1 Studi Kasus, Diskusi 5 Kesesuaian output dengan spesifikasi yang diminta
CPL10 CPMK22 sub.cpmk.IFGI241.CPMK22.4 Praktik Coding 5 Kesesuaian output dengan spesifikasi yang diminta
CPL10 CPMK22 sub.cpmk.IFGI241.CPMK22.5 Praktik, Diskusi 20 Kesesuaian output dengan spesifikasi yang diminta
CPL07 CPMK16 sub.cpmk.IFGI241.CPMK16.1 Praktik Project 5 Kesesuaian output dengan spesifikasi yang diminta
CPL10 CPMK23 sub.cpmk.IFGI241.CPMK23.1 Praktik Coding 5 Kesesuaian output dengan spesifikasi yang diminta
CPL07 CPMK16 sub.cpmk.IFGI241.CPMK16.2 Praktik, Demonstrasi 5 Kesesuaian output dengan spesifikasi yang diminta
CPL10 CPMK22 sub.cpmk.IFGI241.CPMK22.6 Praktik Coding 5 Kesesuaian output dengan spesifikasi yang diminta
CPL11 CPMK27 sub.cpmk.IFGI241.CPMK27.1 Observasi, Diskusi 5 Kesesuaian output dengan spesifikasi yang diminta
CPL12 CPMK28 sub.cpmk.IFGI241.CPMK28.1 Project 5 Kesesuaian output dengan spesifikasi yang diminta
CPL12 CPMK28 sub.cpmk.IFGI241.CPMK28.1 Presentasi, Review 20 Kesesuaian output dengan spesifikasi yang diminta
Total 100
2. Penilaian CPMK
CPL MK CPMK Quiz Latihan Tugas Praktek Mid Test (UTS) Final Test (UAS) Total
CPL07 Perancangan Web/Web Design CPMK14 5% 0% 0% 0% 0% 0% 5%
CPL07 Perancangan Web/Web Design CPMK16 5% 0% 0% 5% 0% 0% 10%
CPL10 Perancangan Web/Web Design CPMK22 5% 5% 5% 10% 20% 0% 45%
CPL10 Perancangan Web/Web Design CPMK23 0% 0% 0% 5% 0% 0% 5%
CPL11 Perancangan Web/Web Design CPMK25 0% 0% 0% 5% 0% 0% 5%
CPL11 Perancangan Web/Web Design CPMK27 5% 0% 0% 0% 0% 0% 5%
CPL12 Perancangan Web/Web Design CPMK28 5% 0% 0% 0% 0% 20% 25%
100%