e3e1e8db41
- slide/: 16 Marp slide files with inline UPB CSS theme (slide-01 through slide-16, covering all RTI-20252 topics) - slide/theme/: upb.css canonical theme + logo-upb.png - docs/AI-BOOK-PROMPT-TEMPLATE.md: RTI-20252 book authoring prompt
1430 lines
41 KiB
Markdown
1430 lines
41 KiB
Markdown
---
|
||
marp: true
|
||
paginate: true
|
||
header: 'RTI — Riset Teknologi Informasi | Universitas Putra Bangsa Kebumen'
|
||
footer: 'Helmi Bahar Alim, S.Kom., M.Kom. | 2026'
|
||
---
|
||
|
||
|
||
|
||
|
||
|
||
<style>
|
||
/* UPB Theme (inline) */
|
||
|
||
/*
|
||
============================================================
|
||
UPB MARP THEME — Riset Teknologi Informasi
|
||
Universitas Putra Bangsa (UPB), Kebumen
|
||
Fak. Sains & Teknologi | Prodi Teknik Informatika
|
||
------------------------------------------------------------
|
||
Penggunaan di frontmatter slide:
|
||
theme: upb
|
||
class: bagian-ii ← opsional; ganti warna Bagian
|
||
|
||
Kelas per Bagian:
|
||
(kosong / default) = Bagian I — Biru #2563EB
|
||
bagian-ii = Bagian II — Hijau #059669
|
||
bagian-iii = Bagian III — Oranye #d97706
|
||
bagian-iv = Bagian IV — Ungu #7c3aed
|
||
|
||
Kelas layout khusus (gunakan via <!-- _class: ... -->):
|
||
cover = Cover / halaman judul
|
||
section-header = Pembatas antar-topik
|
||
integrative = Bab 8 (UTS — gradien biru-ungu)
|
||
fullcircle = Bab 16 penutup (gradien gelap)
|
||
============================================================
|
||
*/
|
||
|
||
/* ============================================================
|
||
1. CSS CUSTOM PROPERTIES — DEFAULT (Bagian I · Biru)
|
||
============================================================ */
|
||
section {
|
||
--accent: #2563EB;
|
||
--accent-dark: #1e3a5f;
|
||
--accent-light: #eff6ff;
|
||
--accent-border: #bfdbfe;
|
||
--cover-grad: linear-gradient(135deg, #1e3a5f 0%, #2563EB 100%);
|
||
--cover-sub: #bfdbfe;
|
||
--cover-meta: #93c5fd;
|
||
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
font-size: 1.1em;
|
||
color: #1e293b;
|
||
padding: 40px 60px;
|
||
}
|
||
|
||
/* ============================================================
|
||
2. VARIAN WARNA PER BAGIAN
|
||
============================================================ */
|
||
|
||
/* Bagian II — Hijau */
|
||
section.bagian-ii {
|
||
--accent: #059669;
|
||
--accent-dark: #064e3b;
|
||
--accent-light: #ecfdf5;
|
||
--accent-border: #a7f3d0;
|
||
--cover-grad: linear-gradient(135deg, #064e3b 0%, #059669 100%);
|
||
--cover-sub: #a7f3d0;
|
||
--cover-meta: #6ee7b7;
|
||
}
|
||
|
||
/* Bagian III — Oranye */
|
||
section.bagian-iii {
|
||
--accent: #d97706;
|
||
--accent-dark: #78350f;
|
||
--accent-light: #fffbeb;
|
||
--accent-border: #fde68a;
|
||
--cover-grad: linear-gradient(135deg, #78350f 0%, #d97706 100%);
|
||
--cover-sub: #fde68a;
|
||
--cover-meta: #fcd34d;
|
||
}
|
||
|
||
/* Bagian IV — Ungu */
|
||
section.bagian-iv {
|
||
--accent: #7c3aed;
|
||
--accent-dark: #3b0764;
|
||
--accent-light: #f5f3ff;
|
||
--accent-border: #ddd6fe;
|
||
--cover-grad: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
|
||
--cover-sub: #ddd6fe;
|
||
--cover-meta: #c4b5fd;
|
||
}
|
||
|
||
/* ============================================================
|
||
3. LAYOUT: COVER
|
||
============================================================ */
|
||
section.cover {
|
||
background: var(--cover-grad);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Logo dimuat dari CSS — tidak perlu tag img di markdown */
|
||
section.cover::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.cover h1 {
|
||
color: white;
|
||
font-size: 2em;
|
||
margin-bottom: 8px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.cover h2 {
|
||
color: var(--cover-sub);
|
||
font-size: 1.1em;
|
||
font-weight: normal;
|
||
}
|
||
|
||
section.cover p { color: var(--cover-meta); font-size: 0.85em; }
|
||
section.cover strong { color: white; }
|
||
|
||
/* ============================================================
|
||
4. LAYOUT: SECTION HEADER (pembatas topik)
|
||
============================================================ */
|
||
section.section-header {
|
||
background: var(--accent);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.section-header h1 {
|
||
color: white;
|
||
font-size: 2.5em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.section-header h2 { color: rgba(255, 255, 255, 0.85); }
|
||
|
||
/* ============================================================
|
||
5. LAYOUT: INTEGRATIVE (Bab 8 — UTS Checkpoint)
|
||
============================================================ */
|
||
section.integrative {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.integrative::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.integrative h1 {
|
||
color: white;
|
||
font-size: 2.2em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.integrative h2 { color: #ddd6fe; font-size: 1.1em; }
|
||
section.integrative p { color: #c4b5fd; font-size: 0.85em; }
|
||
section.integrative strong { color: white; }
|
||
|
||
/* ============================================================
|
||
6. LAYOUT: FULLCIRCLE (Bab 16 — Penutup)
|
||
============================================================ */
|
||
section.fullcircle {
|
||
background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 50%, #1e293b 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.fullcircle h1 {
|
||
color: #ddd6fe;
|
||
font-size: 2.2em;
|
||
border-bottom: 3px solid #7c3aed;
|
||
}
|
||
|
||
section.fullcircle blockquote {
|
||
border-left: 5px solid #7c3aed;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #ddd6fe;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
7. ELEMEN KONTEN — menggunakan CSS vars dari bagian
|
||
============================================================ */
|
||
|
||
h1 {
|
||
color: var(--accent);
|
||
border-bottom: 3px solid var(--accent);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
h2 { color: var(--accent-dark); font-size: 1.3em; }
|
||
h3 { color: var(--accent); font-size: 1.05em; }
|
||
|
||
blockquote {
|
||
border-left: 5px solid var(--accent);
|
||
background: var(--accent-light);
|
||
padding: 12px 20px;
|
||
margin: 16px 0;
|
||
color: var(--accent-dark);
|
||
font-style: italic;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
table { font-size: 0.82em; width: 100%; border-collapse: collapse; }
|
||
th { background: var(--accent); color: white; padding: 8px 12px; }
|
||
td { padding: 6px 12px; border-bottom: 1px solid var(--accent-border); }
|
||
tr:nth-child(even) td { background: var(--accent-light); }
|
||
|
||
code {
|
||
background: var(--accent-light);
|
||
color: var(--accent-dark);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
pre {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--accent-border);
|
||
}
|
||
|
||
ul li, ol li { margin-bottom: 6px; line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
8. HELPER CLASSES
|
||
============================================================ */
|
||
|
||
/* Status / penekanan */
|
||
.warn { color: #d97706; font-weight: bold; }
|
||
.good { color: #059669; font-weight: bold; }
|
||
.bad { color: #dc2626; font-weight: bold; }
|
||
|
||
/* Kotak pernyataan akhir */
|
||
.final {
|
||
background: #fef3c7;
|
||
border-left: 5px solid #d97706;
|
||
padding: 14px 20px;
|
||
border-radius: 0 8px 8px 0;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* Kotak highlight */
|
||
.highlight-box {
|
||
background: var(--accent);
|
||
color: white;
|
||
padding: 16px 20px;
|
||
border-radius: 8px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* Kotak checkpoint bab 8 */
|
||
.checkpoint {
|
||
background: #f5f3ff;
|
||
border: 2px solid #7c3aed;
|
||
border-radius: 8px;
|
||
padding: 16px 24px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
9. PAGINATION & HEADER/FOOTER
|
||
============================================================ */
|
||
section::after {
|
||
font-size: 0.7em;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
section[data-marpit-advanced-background] > div:last-child { padding: 40px 60px; }
|
||
</style>
|
||
|
||
<style>
|
||
/* UPB Theme (inline) */
|
||
|
||
/*
|
||
============================================================
|
||
UPB MARP THEME — Riset Teknologi Informasi
|
||
Universitas Putra Bangsa (UPB), Kebumen
|
||
Fak. Sains & Teknologi | Prodi Teknik Informatika
|
||
------------------------------------------------------------
|
||
Penggunaan di frontmatter slide:
|
||
class: bagian-ii ← opsional; ganti warna Bagian
|
||
|
||
Kelas per Bagian:
|
||
(kosong / default) = Bagian I — Biru #2563EB
|
||
bagian-ii = Bagian II — Hijau #059669
|
||
bagian-iii = Bagian III — Oranye #d97706
|
||
bagian-iv = Bagian IV — Ungu #7c3aed
|
||
|
||
Kelas layout khusus (gunakan via <!-- _class: ... -->):
|
||
cover = Cover / halaman judul
|
||
section-header = Pembatas antar-topik
|
||
integrative = Bab 8 (UTS — gradien biru-ungu)
|
||
fullcircle = Bab 16 penutup (gradien gelap)
|
||
============================================================
|
||
*/
|
||
|
||
/* ============================================================
|
||
1. CSS CUSTOM PROPERTIES — DEFAULT (Bagian I · Biru)
|
||
============================================================ */
|
||
section {
|
||
--accent: #2563EB;
|
||
--accent-dark: #1e3a5f;
|
||
--accent-light: #eff6ff;
|
||
--accent-border: #bfdbfe;
|
||
--cover-grad: linear-gradient(135deg, #1e3a5f 0%, #2563EB 100%);
|
||
--cover-sub: #bfdbfe;
|
||
--cover-meta: #93c5fd;
|
||
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
font-size: 1.1em;
|
||
color: #1e293b;
|
||
padding: 40px 60px;
|
||
}
|
||
|
||
/* ============================================================
|
||
2. VARIAN WARNA PER BAGIAN
|
||
============================================================ */
|
||
|
||
/* Bagian II — Hijau */
|
||
section.bagian-ii {
|
||
--accent: #059669;
|
||
--accent-dark: #064e3b;
|
||
--accent-light: #ecfdf5;
|
||
--accent-border: #a7f3d0;
|
||
--cover-grad: linear-gradient(135deg, #064e3b 0%, #059669 100%);
|
||
--cover-sub: #a7f3d0;
|
||
--cover-meta: #6ee7b7;
|
||
}
|
||
|
||
/* Bagian III — Oranye */
|
||
section.bagian-iii {
|
||
--accent: #d97706;
|
||
--accent-dark: #78350f;
|
||
--accent-light: #fffbeb;
|
||
--accent-border: #fde68a;
|
||
--cover-grad: linear-gradient(135deg, #78350f 0%, #d97706 100%);
|
||
--cover-sub: #fde68a;
|
||
--cover-meta: #fcd34d;
|
||
}
|
||
|
||
/* Bagian IV — Ungu */
|
||
section.bagian-iv {
|
||
--accent: #7c3aed;
|
||
--accent-dark: #3b0764;
|
||
--accent-light: #f5f3ff;
|
||
--accent-border: #ddd6fe;
|
||
--cover-grad: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
|
||
--cover-sub: #ddd6fe;
|
||
--cover-meta: #c4b5fd;
|
||
}
|
||
|
||
/* ============================================================
|
||
3. LAYOUT: COVER
|
||
============================================================ */
|
||
section.cover {
|
||
background: var(--cover-grad);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Logo dimuat dari CSS — tidak perlu tag img di markdown */
|
||
section.cover::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.cover h1 {
|
||
color: white;
|
||
font-size: 2em;
|
||
margin-bottom: 8px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.cover h2 {
|
||
color: var(--cover-sub);
|
||
font-size: 1.1em;
|
||
font-weight: normal;
|
||
}
|
||
|
||
section.cover p { color: var(--cover-meta); font-size: 0.85em; }
|
||
section.cover strong { color: white; }
|
||
|
||
/* ============================================================
|
||
4. LAYOUT: SECTION HEADER (pembatas topik)
|
||
============================================================ */
|
||
section.section-header {
|
||
background: var(--accent);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.section-header h1 {
|
||
color: white;
|
||
font-size: 2.5em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.section-header h2 { color: rgba(255, 255, 255, 0.85); }
|
||
|
||
/* ============================================================
|
||
5. LAYOUT: INTEGRATIVE (Bab 8 — UTS Checkpoint)
|
||
============================================================ */
|
||
section.integrative {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.integrative::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.integrative h1 {
|
||
color: white;
|
||
font-size: 2.2em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.integrative h2 { color: #ddd6fe; font-size: 1.1em; }
|
||
section.integrative p { color: #c4b5fd; font-size: 0.85em; }
|
||
section.integrative strong { color: white; }
|
||
|
||
/* ============================================================
|
||
6. LAYOUT: FULLCIRCLE (Bab 16 — Penutup)
|
||
============================================================ */
|
||
section.fullcircle {
|
||
background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 50%, #1e293b 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.fullcircle h1 {
|
||
color: #ddd6fe;
|
||
font-size: 2.2em;
|
||
border-bottom: 3px solid #7c3aed;
|
||
}
|
||
|
||
section.fullcircle blockquote {
|
||
border-left: 5px solid #7c3aed;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #ddd6fe;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
7. ELEMEN KONTEN — menggunakan CSS vars dari bagian
|
||
============================================================ */
|
||
|
||
h1 {
|
||
color: var(--accent);
|
||
border-bottom: 3px solid var(--accent);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
h2 { color: var(--accent-dark); font-size: 1.3em; }
|
||
h3 { color: var(--accent); font-size: 1.05em; }
|
||
|
||
blockquote {
|
||
border-left: 5px solid var(--accent);
|
||
background: var(--accent-light);
|
||
padding: 12px 20px;
|
||
margin: 16px 0;
|
||
color: var(--accent-dark);
|
||
font-style: italic;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
table { font-size: 0.82em; width: 100%; border-collapse: collapse; }
|
||
th { background: var(--accent); color: white; padding: 8px 12px; }
|
||
td { padding: 6px 12px; border-bottom: 1px solid var(--accent-border); }
|
||
tr:nth-child(even) td { background: var(--accent-light); }
|
||
|
||
code {
|
||
background: var(--accent-light);
|
||
color: var(--accent-dark);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
pre {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--accent-border);
|
||
}
|
||
|
||
ul li, ol li { margin-bottom: 6px; line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
8. HELPER CLASSES
|
||
============================================================ */
|
||
|
||
/* Status / penekanan */
|
||
.warn { color: #d97706; font-weight: bold; }
|
||
.good { color: #059669; font-weight: bold; }
|
||
.bad { color: #dc2626; font-weight: bold; }
|
||
|
||
/* Kotak pernyataan akhir */
|
||
.final {
|
||
background: #fef3c7;
|
||
border-left: 5px solid #d97706;
|
||
padding: 14px 20px;
|
||
border-radius: 0 8px 8px 0;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* Kotak highlight */
|
||
.highlight-box {
|
||
background: var(--accent);
|
||
color: white;
|
||
padding: 16px 20px;
|
||
border-radius: 8px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* Kotak checkpoint bab 8 */
|
||
.checkpoint {
|
||
background: #f5f3ff;
|
||
border: 2px solid #7c3aed;
|
||
border-radius: 8px;
|
||
padding: 16px 24px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
9. PAGINATION & HEADER/FOOTER
|
||
============================================================ */
|
||
section::after {
|
||
font-size: 0.7em;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
section[data-marpit-advanced-background] > div:last-child { padding: 40px 60px; }
|
||
</style>
|
||
|
||
<style>
|
||
/* UPB Theme (inline) */
|
||
|
||
/*
|
||
============================================================
|
||
UPB MARP THEME — Riset Teknologi Informasi
|
||
Universitas Putra Bangsa (UPB), Kebumen
|
||
Fak. Sains & Teknologi | Prodi Teknik Informatika
|
||
------------------------------------------------------------
|
||
Penggunaan di frontmatter slide:
|
||
class: bagian-ii ← opsional; ganti warna Bagian
|
||
|
||
Kelas per Bagian:
|
||
(kosong / default) = Bagian I — Biru #2563EB
|
||
bagian-ii = Bagian II — Hijau #059669
|
||
bagian-iii = Bagian III — Oranye #d97706
|
||
bagian-iv = Bagian IV — Ungu #7c3aed
|
||
|
||
Kelas layout khusus (gunakan via <!-- _class: ... -->):
|
||
cover = Cover / halaman judul
|
||
section-header = Pembatas antar-topik
|
||
integrative = Bab 8 (UTS — gradien biru-ungu)
|
||
fullcircle = Bab 16 penutup (gradien gelap)
|
||
============================================================
|
||
*/
|
||
|
||
/* ============================================================
|
||
1. CSS CUSTOM PROPERTIES — DEFAULT (Bagian I · Biru)
|
||
============================================================ */
|
||
section {
|
||
--accent: #2563EB;
|
||
--accent-dark: #1e3a5f;
|
||
--accent-light: #eff6ff;
|
||
--accent-border: #bfdbfe;
|
||
--cover-grad: linear-gradient(135deg, #1e3a5f 0%, #2563EB 100%);
|
||
--cover-sub: #bfdbfe;
|
||
--cover-meta: #93c5fd;
|
||
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
font-size: 1.1em;
|
||
color: #1e293b;
|
||
padding: 40px 60px;
|
||
}
|
||
|
||
/* ============================================================
|
||
2. VARIAN WARNA PER BAGIAN
|
||
============================================================ */
|
||
|
||
/* Bagian II — Hijau */
|
||
section.bagian-ii {
|
||
--accent: #059669;
|
||
--accent-dark: #064e3b;
|
||
--accent-light: #ecfdf5;
|
||
--accent-border: #a7f3d0;
|
||
--cover-grad: linear-gradient(135deg, #064e3b 0%, #059669 100%);
|
||
--cover-sub: #a7f3d0;
|
||
--cover-meta: #6ee7b7;
|
||
}
|
||
|
||
/* Bagian III — Oranye */
|
||
section.bagian-iii {
|
||
--accent: #d97706;
|
||
--accent-dark: #78350f;
|
||
--accent-light: #fffbeb;
|
||
--accent-border: #fde68a;
|
||
--cover-grad: linear-gradient(135deg, #78350f 0%, #d97706 100%);
|
||
--cover-sub: #fde68a;
|
||
--cover-meta: #fcd34d;
|
||
}
|
||
|
||
/* Bagian IV — Ungu */
|
||
section.bagian-iv {
|
||
--accent: #7c3aed;
|
||
--accent-dark: #3b0764;
|
||
--accent-light: #f5f3ff;
|
||
--accent-border: #ddd6fe;
|
||
--cover-grad: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
|
||
--cover-sub: #ddd6fe;
|
||
--cover-meta: #c4b5fd;
|
||
}
|
||
|
||
/* ============================================================
|
||
3. LAYOUT: COVER
|
||
============================================================ */
|
||
section.cover {
|
||
background: var(--cover-grad);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Logo dimuat dari CSS — tidak perlu tag img di markdown */
|
||
section.cover::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.cover h1 {
|
||
color: white;
|
||
font-size: 2em;
|
||
margin-bottom: 8px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.cover h2 {
|
||
color: var(--cover-sub);
|
||
font-size: 1.1em;
|
||
font-weight: normal;
|
||
}
|
||
|
||
section.cover p { color: var(--cover-meta); font-size: 0.85em; }
|
||
section.cover strong { color: white; }
|
||
|
||
/* ============================================================
|
||
4. LAYOUT: SECTION HEADER (pembatas topik)
|
||
============================================================ */
|
||
section.section-header {
|
||
background: var(--accent);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.section-header h1 {
|
||
color: white;
|
||
font-size: 2.5em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.section-header h2 { color: rgba(255, 255, 255, 0.85); }
|
||
|
||
/* ============================================================
|
||
5. LAYOUT: INTEGRATIVE (Bab 8 — UTS Checkpoint)
|
||
============================================================ */
|
||
section.integrative {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.integrative::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.integrative h1 {
|
||
color: white;
|
||
font-size: 2.2em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.integrative h2 { color: #ddd6fe; font-size: 1.1em; }
|
||
section.integrative p { color: #c4b5fd; font-size: 0.85em; }
|
||
section.integrative strong { color: white; }
|
||
|
||
/* ============================================================
|
||
6. LAYOUT: FULLCIRCLE (Bab 16 — Penutup)
|
||
============================================================ */
|
||
section.fullcircle {
|
||
background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 50%, #1e293b 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.fullcircle h1 {
|
||
color: #ddd6fe;
|
||
font-size: 2.2em;
|
||
border-bottom: 3px solid #7c3aed;
|
||
}
|
||
|
||
section.fullcircle blockquote {
|
||
border-left: 5px solid #7c3aed;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #ddd6fe;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
7. ELEMEN KONTEN — menggunakan CSS vars dari bagian
|
||
============================================================ */
|
||
|
||
h1 {
|
||
color: var(--accent);
|
||
border-bottom: 3px solid var(--accent);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
h2 { color: var(--accent-dark); font-size: 1.3em; }
|
||
h3 { color: var(--accent); font-size: 1.05em; }
|
||
|
||
blockquote {
|
||
border-left: 5px solid var(--accent);
|
||
background: var(--accent-light);
|
||
padding: 12px 20px;
|
||
margin: 16px 0;
|
||
color: var(--accent-dark);
|
||
font-style: italic;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
table { font-size: 0.82em; width: 100%; border-collapse: collapse; }
|
||
th { background: var(--accent); color: white; padding: 8px 12px; }
|
||
td { padding: 6px 12px; border-bottom: 1px solid var(--accent-border); }
|
||
tr:nth-child(even) td { background: var(--accent-light); }
|
||
|
||
code {
|
||
background: var(--accent-light);
|
||
color: var(--accent-dark);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
pre {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--accent-border);
|
||
}
|
||
|
||
ul li, ol li { margin-bottom: 6px; line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
8. HELPER CLASSES
|
||
============================================================ */
|
||
|
||
/* Status / penekanan */
|
||
.warn { color: #d97706; font-weight: bold; }
|
||
.good { color: #059669; font-weight: bold; }
|
||
.bad { color: #dc2626; font-weight: bold; }
|
||
|
||
/* Kotak pernyataan akhir */
|
||
.final {
|
||
background: #fef3c7;
|
||
border-left: 5px solid #d97706;
|
||
padding: 14px 20px;
|
||
border-radius: 0 8px 8px 0;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* Kotak highlight */
|
||
.highlight-box {
|
||
background: var(--accent);
|
||
color: white;
|
||
padding: 16px 20px;
|
||
border-radius: 8px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* Kotak checkpoint bab 8 */
|
||
.checkpoint {
|
||
background: #f5f3ff;
|
||
border: 2px solid #7c3aed;
|
||
border-radius: 8px;
|
||
padding: 16px 24px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
9. PAGINATION & HEADER/FOOTER
|
||
============================================================ */
|
||
section::after {
|
||
font-size: 0.7em;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
section[data-marpit-advanced-background] > div:last-child { padding: 40px 60px; }
|
||
</style>
|
||
|
||
<style>
|
||
/* UPB Theme (inline) */
|
||
|
||
/*
|
||
============================================================
|
||
UPB MARP THEME — Riset Teknologi Informasi
|
||
Universitas Putra Bangsa (UPB), Kebumen
|
||
Fak. Sains & Teknologi | Prodi Teknik Informatika
|
||
------------------------------------------------------------
|
||
Penggunaan di frontmatter slide:
|
||
class: bagian-ii ← opsional; ganti warna Bagian
|
||
|
||
Kelas per Bagian:
|
||
(kosong / default) = Bagian I — Biru #2563EB
|
||
bagian-ii = Bagian II — Hijau #059669
|
||
bagian-iii = Bagian III — Oranye #d97706
|
||
bagian-iv = Bagian IV — Ungu #7c3aed
|
||
|
||
Kelas layout khusus (gunakan via <!-- _class: ... -->):
|
||
cover = Cover / halaman judul
|
||
section-header = Pembatas antar-topik
|
||
integrative = Bab 8 (UTS — gradien biru-ungu)
|
||
fullcircle = Bab 16 penutup (gradien gelap)
|
||
============================================================
|
||
*/
|
||
|
||
/* ============================================================
|
||
1. CSS CUSTOM PROPERTIES — DEFAULT (Bagian I · Biru)
|
||
============================================================ */
|
||
section {
|
||
--accent: #2563EB;
|
||
--accent-dark: #1e3a5f;
|
||
--accent-light: #eff6ff;
|
||
--accent-border: #bfdbfe;
|
||
--cover-grad: linear-gradient(135deg, #1e3a5f 0%, #2563EB 100%);
|
||
--cover-sub: #bfdbfe;
|
||
--cover-meta: #93c5fd;
|
||
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
font-size: 1.1em;
|
||
color: #1e293b;
|
||
padding: 40px 60px;
|
||
}
|
||
|
||
/* ============================================================
|
||
2. VARIAN WARNA PER BAGIAN
|
||
============================================================ */
|
||
|
||
/* Bagian II — Hijau */
|
||
section.bagian-ii {
|
||
--accent: #059669;
|
||
--accent-dark: #064e3b;
|
||
--accent-light: #ecfdf5;
|
||
--accent-border: #a7f3d0;
|
||
--cover-grad: linear-gradient(135deg, #064e3b 0%, #059669 100%);
|
||
--cover-sub: #a7f3d0;
|
||
--cover-meta: #6ee7b7;
|
||
}
|
||
|
||
/* Bagian III — Oranye */
|
||
section.bagian-iii {
|
||
--accent: #d97706;
|
||
--accent-dark: #78350f;
|
||
--accent-light: #fffbeb;
|
||
--accent-border: #fde68a;
|
||
--cover-grad: linear-gradient(135deg, #78350f 0%, #d97706 100%);
|
||
--cover-sub: #fde68a;
|
||
--cover-meta: #fcd34d;
|
||
}
|
||
|
||
/* Bagian IV — Ungu */
|
||
section.bagian-iv {
|
||
--accent: #7c3aed;
|
||
--accent-dark: #3b0764;
|
||
--accent-light: #f5f3ff;
|
||
--accent-border: #ddd6fe;
|
||
--cover-grad: linear-gradient(135deg, #3b0764 0%, #7c3aed 100%);
|
||
--cover-sub: #ddd6fe;
|
||
--cover-meta: #c4b5fd;
|
||
}
|
||
|
||
/* ============================================================
|
||
3. LAYOUT: COVER
|
||
============================================================ */
|
||
section.cover {
|
||
background: var(--cover-grad);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
/* Logo dimuat dari CSS — tidak perlu tag img di markdown */
|
||
section.cover::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.cover h1 {
|
||
color: white;
|
||
font-size: 2em;
|
||
margin-bottom: 8px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.cover h2 {
|
||
color: var(--cover-sub);
|
||
font-size: 1.1em;
|
||
font-weight: normal;
|
||
}
|
||
|
||
section.cover p { color: var(--cover-meta); font-size: 0.85em; }
|
||
section.cover strong { color: white; }
|
||
|
||
/* ============================================================
|
||
4. LAYOUT: SECTION HEADER (pembatas topik)
|
||
============================================================ */
|
||
section.section-header {
|
||
background: var(--accent);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.section-header h1 {
|
||
color: white;
|
||
font-size: 2.5em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.section-header h2 { color: rgba(255, 255, 255, 0.85); }
|
||
|
||
/* ============================================================
|
||
5. LAYOUT: INTEGRATIVE (Bab 8 — UTS Checkpoint)
|
||
============================================================ */
|
||
section.integrative {
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.integrative::before {
|
||
content: '';
|
||
display: block;
|
||
width: 90px;
|
||
height: 90px;
|
||
background: white url('theme/logo-upb.png') center / contain no-repeat;
|
||
border-radius: 8px;
|
||
padding: 6px;
|
||
margin: 0 auto 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
section.integrative h1 {
|
||
color: white;
|
||
font-size: 2.2em;
|
||
border-bottom: none;
|
||
}
|
||
|
||
section.integrative h2 { color: #ddd6fe; font-size: 1.1em; }
|
||
section.integrative p { color: #c4b5fd; font-size: 0.85em; }
|
||
section.integrative strong { color: white; }
|
||
|
||
/* ============================================================
|
||
6. LAYOUT: FULLCIRCLE (Bab 16 — Penutup)
|
||
============================================================ */
|
||
section.fullcircle {
|
||
background: linear-gradient(135deg, #1e293b 0%, #1e3a5f 50%, #1e293b 100%);
|
||
color: white;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
section.fullcircle h1 {
|
||
color: #ddd6fe;
|
||
font-size: 2.2em;
|
||
border-bottom: 3px solid #7c3aed;
|
||
}
|
||
|
||
section.fullcircle blockquote {
|
||
border-left: 5px solid #7c3aed;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #ddd6fe;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
7. ELEMEN KONTEN — menggunakan CSS vars dari bagian
|
||
============================================================ */
|
||
|
||
h1 {
|
||
color: var(--accent);
|
||
border-bottom: 3px solid var(--accent);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
h2 { color: var(--accent-dark); font-size: 1.3em; }
|
||
h3 { color: var(--accent); font-size: 1.05em; }
|
||
|
||
blockquote {
|
||
border-left: 5px solid var(--accent);
|
||
background: var(--accent-light);
|
||
padding: 12px 20px;
|
||
margin: 16px 0;
|
||
color: var(--accent-dark);
|
||
font-style: italic;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
table { font-size: 0.82em; width: 100%; border-collapse: collapse; }
|
||
th { background: var(--accent); color: white; padding: 8px 12px; }
|
||
td { padding: 6px 12px; border-bottom: 1px solid var(--accent-border); }
|
||
tr:nth-child(even) td { background: var(--accent-light); }
|
||
|
||
code {
|
||
background: var(--accent-light);
|
||
color: var(--accent-dark);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
pre {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--accent-border);
|
||
}
|
||
|
||
ul li, ol li { margin-bottom: 6px; line-height: 1.6; }
|
||
|
||
/* ============================================================
|
||
8. HELPER CLASSES
|
||
============================================================ */
|
||
|
||
/* Status / penekanan */
|
||
.warn { color: #d97706; font-weight: bold; }
|
||
.good { color: #059669; font-weight: bold; }
|
||
.bad { color: #dc2626; font-weight: bold; }
|
||
|
||
/* Kotak pernyataan akhir */
|
||
.final {
|
||
background: #fef3c7;
|
||
border-left: 5px solid #d97706;
|
||
padding: 14px 20px;
|
||
border-radius: 0 8px 8px 0;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
/* Kotak highlight */
|
||
.highlight-box {
|
||
background: var(--accent);
|
||
color: white;
|
||
padding: 16px 20px;
|
||
border-radius: 8px;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
/* Kotak checkpoint bab 8 */
|
||
.checkpoint {
|
||
background: #f5f3ff;
|
||
border: 2px solid #7c3aed;
|
||
border-radius: 8px;
|
||
padding: 16px 24px;
|
||
margin: 16px 0;
|
||
}
|
||
|
||
/* ============================================================
|
||
9. PAGINATION & HEADER/FOOTER
|
||
============================================================ */
|
||
section::after {
|
||
font-size: 0.7em;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
section[data-marpit-advanced-background] > div:last-child { padding: 40px 60px; }
|
||
</style>
|
||
|
||
<!-- _class: cover -->
|
||
|
||
|
||
# Bab 2 — Problem Formulation & System Context
|
||
|
||
## Merumuskan Masalah Riset dari Fenomena TI
|
||
|
||
*Pertemuan 2 (M2) | Sub-CPMK 1.2 | CPMK01 | CPL03 + CPL06*
|
||
|
||
Fase: **Thinking** (M1–M4) · Bagian I: Foundation
|
||
|
||
**Universitas Putra Bangsa** | Fak. Sains & Teknologi · Prodi Teknik Informatika
|
||
|
||
---
|
||
|
||
## Agenda Pertemuan 2
|
||
|
||
1. Dari mana penelitian dimulai?
|
||
2. Problem Formation Model — proses transformasi masalah
|
||
3. Problem Quality Model — 5 kriteria masalah yang layak diteliti
|
||
4. Topic vs Problem vs Research Problem
|
||
5. Symptom vs Root Cause — menggali ke akar
|
||
6. System Thinking dalam konteks riset TI
|
||
7. Operasionalisasi: Problem → Variable → Metric
|
||
8. Cognitive Traps & Studi Kasus
|
||
9. Output Praktis: Problem Statement
|
||
|
||
---
|
||
|
||
## Capaian Pembelajaran
|
||
|
||
Setelah pertemuan ini, mahasiswa mampu:
|
||
|
||
- Membedakan **topik**, **masalah**, dan **masalah riset** secara presisi
|
||
- Mengidentifikasi **gejala vs akar masalah** dalam fenomena TI
|
||
- Mendeskripsikan **konteks sistem** (Input-Process-Output-Outcome-Constraints-Stakeholders)
|
||
- Mentransformasi fenomena TI menjadi **researchable problem** yang terukur
|
||
- Memvalidasi problem statement dengan **5 kriteria kualitas**
|
||
|
||
> Sub-CPMK 1.2 → Merumuskan masalah riset dari fenomena TI (CPL03 + CPL06)
|
||
|
||
---
|
||
|
||
## Pertanyaan Pemantik
|
||
|
||
Bab 1 membagun fondasi berpikir: *Curious → Critical → Systematic*.
|
||
|
||
Sekarang pertanyaannya: **dari mana penelitian dimulai?**
|
||
|
||
> Bukan dari metode.
|
||
> Bukan dari dataset.
|
||
> Bukan dari tool atau teknologi yang ingin digunakan.
|
||
>
|
||
> **Penelitian dimulai dari MASALAH.**
|
||
|
||
Tapi "masalah riset" bukan sekadar keluhan:
|
||
- *"Website kampus lambat"* → keluhan
|
||
- *"Waktu respons meningkat 340% saat concurrent user > 500, belum ada studi tentang caching strategy X di arsitektur monolitik akademik"* → masalah riset
|
||
|
||
**Perbedaannya: presisi, konteks sistem, dan testability.**
|
||
|
||
---
|
||
|
||
## Problem Formation Model
|
||
|
||
*Dari Realitas ke Variabel Terukur*
|
||
|
||
<div class="highlight-box">
|
||
|
||
**Reality** → Observed Issue → Diagnosed Problem → Researchable Problem → **Measurable Variable**
|
||
|
||
<small>(Symptom) (Root Cause) (Scoped & Bounded) (Operationalized)</small>
|
||
|
||
</div>
|
||
|
||
| Tahap | Fungsi | Pertanyaan yang Dijawab |
|
||
|-------|--------|------------------------|
|
||
| **Reality** | Fenomena dunia nyata | Apa yang terjadi di lapangan? |
|
||
| **Observed Issue** | Pengamatan awal (gejala) | Apa yang terlihat "tidak beres"? |
|
||
| **Diagnosed Problem** | Akar masalah setelah investigasi | Mengapa itu terjadi? |
|
||
| **Researchable Problem** | Masalah + gap literatur + batasan | Apakah ini layak diteliti? |
|
||
| **Measurable Variable** | Variabel yang bisa diuji | Bagaimana mengukurnya? |
|
||
|
||
> Kesalahan paling umum: melompat langsung dari **Reality ke Measurable Variable** — melewati analisis akar masalah dan literatur gap.
|
||
|
||
---
|
||
|
||
## Problem Quality Model — 5 Kriteria
|
||
|
||
Setiap masalah riset harus lulus 5 kriteria ini:
|
||
|
||
| Kriteria | Pertanyaan Uji | Gagal jika... |
|
||
|----------|---------------|--------------|
|
||
| **Clarity** | Bisa dipahami tanpa ambiguitas? | Tidak jelas siapa/apa/di mana/kapan |
|
||
| **Measurability** | Ada metrik yang bisa diukur? | Hanya bisa dinilai secara subjektif |
|
||
| **Relevance** | Ada gap di literatur? | Sudah terjawab penuh sebelumnya |
|
||
| **Testability** | Bisa dieksperimenkan? | Terlalu luas, tidak feasible |
|
||
| **Impact** | Ada kontribusi nyata? | Tidak ada yang peduli dengan jawabannya |
|
||
|
||
> Jika masalah tidak lulus semua 5 kriteria → ulangi proses formasi. Lebih baik 1 minggu perbaiki masalah daripada 1 semester meneliti masalah yang salah.
|
||
|
||
---
|
||
|
||
## Topic vs Problem vs Research Problem
|
||
|
||
| Level | Analogi | Contoh TI |
|
||
|-------|---------|-----------|
|
||
| **Topik** | "Ada masalah di kota ini" | "Keamanan IoT" |
|
||
| **Masalah** | "Jalan berlubang di KM 5" | "MQTT tidak terenkripsi pada IoT rumahan" |
|
||
| **Masalah Riset** | "Lubang di KM 5 disebabkan drainase gagal; belum ada studi material X untuk kondisi ini" | "Belum ada studi yang membandingkan overhead TLS 1.3 vs DTLS pada MQTT di perangkat resource-constrained (RAM < 64KB)" |
|
||
|
||
**Research Problem memiliki 3 elemen yang tidak dimiliki masalah biasa:**
|
||
1. **Gap** — "belum ada studi yang..."
|
||
2. **Variabel terukur** — "overhead (ms, KB)"
|
||
3. **Batasan konteks** — "resource-constrained, RAM < 64KB"
|
||
|
||
---
|
||
|
||
## Symptom vs Root Cause
|
||
|
||
Dalam riset TI, apa yang terlihat di permukaan bukan selalu masalah yang sebenarnya.
|
||
|
||
| Yang Diamati (Gejala) | Akar Masalah (Dugaan) | Masalah Riset |
|
||
|----------------------|----------------------|---------------|
|
||
| "Pengguna mengeluh aplikasi lambat" | Query DB tidak terindeks → full table scan | Efektivitas composite index pada tabel 2M record PostgreSQL dalam skenario concurrent read |
|
||
| "Model ML performa menurun di produksi" | Training-serving skew (distribusi data berbeda) | Deteksi & mitigasi data drift pada pipeline ML streaming real-time |
|
||
| "Pengguna meninggalkan fitur baru" | Friction di onboarding flow | Korelasi antara kompleksitas UI dan user retention pada aplikasi mobile F&B |
|
||
|
||
> Teknik menggali akar masalah: **5 Whys**, **Fishbone Diagram**, **Root Cause Analysis** — sebelum masuk ke literatur.
|
||
|
||
---
|
||
|
||
## System Thinking dalam Riset TI
|
||
|
||
Masalah riset TI selalu terikat pada **sistem**. Tanpa memahami sistem, masalah jadi abstrak dan tidak bisa dieksperimenkan.
|
||
|
||
```
|
||
Input → [Process] → Output → Outcome
|
||
|
|
||
Constraints
|
||
|
|
||
Stakeholders
|
||
```
|
||
|
||
| Komponen | Contoh (Studi Rekomendasi Film) |
|
||
|----------|---------------------------------|
|
||
| **Input** | Riwayat tontonan pengguna, rating, metadata konten |
|
||
| **Process** | Algoritma collaborative filtering |
|
||
| **Output** | Daftar 10 film yang direkomendasikan |
|
||
| **Outcome** | Pengguna puas, waktu tonton meningkat (atau tidak) |
|
||
| **Constraints** | Latency < 200ms, privasi data, cold-start problem |
|
||
| **Stakeholders** | Pengguna, platform, content provider |
|
||
|
||
> Akurasi tinggi (Output) ≠ pengguna puas (Outcome). Inilah mengapa masalah riset tidak bisa hanya fokus pada satu komponen sistem.
|
||
|
||
---
|
||
|
||
## Transformasi: Problem → Variable → Metric
|
||
|
||
*Operasionalisasi masalah ke variabel yang dapat diukur*
|
||
|
||
```
|
||
Problem → Variable → Metric → Data Type → Analysis Method
|
||
```
|
||
|
||
**Contoh:**
|
||
|
||
| Problem | Variable | Metric | Tipe Data |
|
||
|---------|---------|--------|-----------|
|
||
| Rekomendasi tidak relevan | Relevansi rekomendasi | Precision@K, NDCG | Ratio |
|
||
| Fraud lolos deteksi | Kemampuan deteksi fraud | Recall, F2-score | Ratio |
|
||
| UI terlalu kompleks | Kemudahan penggunaan | Task completion time, SUS score | Ratio / Ordinal |
|
||
|
||
> Metrik harus dipilih **sebelum eksperimen berjalan** — bukan setelah melihat data dan memilih yang menghasilkan angka terbaik. *(Wohlin et al., 2012)*
|
||
|
||
---
|
||
|
||
<!-- _class: section-header -->
|
||
|
||
# Cognitive Traps
|
||
## Bab 2 — Problem Formulation
|
||
|
||
---
|
||
|
||
## Cognitive Traps — Bab 2
|
||
|
||
**"Saya ingin menggunakan metode X, maka saya cari masalah yang cocok"**
|
||
Ini *reverse engineering* penelitian. Metode dipilih berdasarkan masalah — bukan sebaliknya. Jika mulai dari metode, bukan masalah yang diteliti, tapi metode yang didemonstrasikan.
|
||
|
||
**"Semakin kompleks sistemnya, semakin bagus penelitiannya"**
|
||
Kompleksitas bukan kontribusi. Masalah spesifik yang sederhana namun belum terjawab lebih bermakna daripada sistem kompleks dengan masalah yang sudah umum diketahui.
|
||
|
||
**"Problem tidak perlu diukur, yang penting jelas"**
|
||
"Respon sistem lambat" bukan masalah riset — tidak ada yang bisa dieksperimenkan. Research problem harus memiliki variabel yang terukur secara kuantitatif.
|
||
|
||
**"Semua problem bisa diteliti"**
|
||
Tidak semua masalah memenuhi 5 kriteria kualitas. Sebagian masalah lebih tepat diselesaikan melalui engineering atau desain, bukan riset ilmiah.
|
||
|
||
---
|
||
|
||
## Studi Kasus 1 — Rekomendasi Film (Basic)
|
||
|
||
**Konteks:** Peneliti membangun sistem rekomendasi film dengan collaborative filtering. Akurasi: 91%.
|
||
|
||
**Masalah:** Peneliti menggunakan *accuracy* (hit rate) sebagai satu-satunya metrik. Pengguna memperoleh rekomendasi yang "akurat" secara teknis, tapi tidak puas karena semua rekomendasi mirip (*filter bubble*) dan selalu item populer (*popularity bias*).
|
||
|
||
**Masalah riset yang sebenarnya:**
|
||
*"Bagaimana trade-off antara Precision@10 dan Diversity dalam sistem rekomendasi collaborative filtering pada dataset cold-start?"*
|
||
|
||
**Solusi:** Definisikan masalah dari perspektif sistem lengkap (output + outcome + constraints). Gunakan multi-metric: Precision@K + Serendipity + Diversity + Coverage.
|
||
|
||
---
|
||
|
||
## Studi Kasus 2 — Fraud Detection (Advanced)
|
||
|
||
**Konteks:** Model fraud detection — akurasi 98%, tapi fraud tetap lolos ke produksi.
|
||
|
||
**Root Cause Analysis:**
|
||
- Dataset imbalance: 99.5% transaksi normal, 0.5% fraud
|
||
- Dengan akurasi 98% sederhana: model bisa memprediksi "semua normal" dan tetap mendapat akurasi 98%
|
||
- Metrik yang salah menghasilkan *false sense of security*
|
||
|
||
| Metrik | Nilai | Makna Sebenarnya |
|
||
|--------|-------|-----------------|
|
||
| Accuracy | 98.2% | Tidak bermakna untuk imbalanced data |
|
||
| Recall (fraud) | 12% | Model melewatkan 88% kasus fraud! |
|
||
| F2-score | 0.31 | Rendah — recall lebih dipentingkan dari precision |
|
||
|
||
**Masalah riset yang tepat:** *"Efektivitas teknik resampling [SMOTE vs ADASYN] terhadap Recall dan F2-score pada deteksi fraud transaksi perbankan dengan rasio imbalance 1:200."*
|
||
|
||
---
|
||
|
||
## Ringkasan Pertemuan 2
|
||
|
||
| Konsep | Inti |
|
||
|--------|------|
|
||
| Problem Formation | Reality → Observed Issue → Diagnosed → Researchable → Measurable |
|
||
| Problem Quality | Clarity + Measurability + Relevance + Testability + Impact |
|
||
| Hierarki | Topik (wilayah) < Masalah (celah) < Research Problem (celah + gap + batas) |
|
||
| Symptom vs Root Cause | Gali lebih dalam sebelum ke literatur |
|
||
| System Thinking | Input-Process-Output-Outcome + Constraints + Stakeholders |
|
||
| Operasionalisasi | Problem → Variable → Metric → Data Type → Analysis |
|
||
|
||
---
|
||
|
||
## Final Statement & Output Praktis
|
||
|
||
<div class="final">
|
||
"Penelitian tidak dimulai dari solusi, tetapi dari masalah yang dipahami secara mendalam dan dapat diuji secara ilmiah."
|
||
</div>
|
||
|
||
### Output Praktis M2
|
||
|
||
Buat **Problem Statement** yang mencakup:
|
||
|
||
1. **Konteks sistem** — deskripsikan Input, Process, Output, Outcome, Constraints
|
||
2. **Gejala yang diamati** — data/fakta yang membuktikan masalah nyata
|
||
3. **Akar masalah** — hasil 5-Whys/RCA
|
||
4. **Gap literatur** — apa yang belum dijawab di penelitian sebelumnya
|
||
5. **Variabel & metrik** yang akan diukur
|
||
|
||
*Validasi terhadap 5 kriteria Problem Quality Model sebelum dikumpulkan.*
|
||
|
||
---
|
||
|
||
## Referensi Utama — Bab 2
|
||
|
||
- Creswell, J. W., & Creswell, J. D. (2018). *Research design: Qualitative, quantitative, and mixed methods approaches* (5th ed.). SAGE Publications.
|
||
|
||
- Hevner, A. R., March, S. T., Park, J., & Ram, S. (2004). Design science in information systems research. *MIS Quarterly, 28*(1), 75–105.
|
||
|
||
- Wieringa, R. J. (2014). *Design science methodology for information systems and software engineering*. Springer.
|
||
|
||
- Wohlin, C., Runeson, P., Höst, M., Ohlsson, M. C., Regnell, B., & Wesslén, A. (2012). *Experimentation in software engineering*. Springer.
|