helmi-upb/riset-teknologi-informasi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
riset-teknologi-informasi/slide/slide-12-result-presentation.md
hb_alim e3e1e8db41 feat: add slide deck and book prompt template 
- 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
2026-04-13 15:04:45 +07:00

1427 lines
40 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
marp: true
paginate: true
class: bagian-iv
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 bagian-iv -->
# Bab 12 — Result Presentation & Visualization
## Dari Data Mentah ke Insight yang Dapat Dikomunikasikan
*Pertemuan 12 (M12) &nbsp;|&nbsp; Sub-CPMK 4.1 &nbsp;|&nbsp; CPMK04 &nbsp;|&nbsp; CPL07*
Fase: **Analyzing & Communicating** (M12–M16) &nbsp;·&nbsp; Bagian IV
**Universitas Putra Bangsa** &nbsp;|&nbsp; Fak. Sains & Teknologi &nbsp;·&nbsp; Prodi Teknik Informatika
---
## Agenda Pertemuan 12
1. Memasuki Bagian IV — dari eksekusi ke komunikasi hasil
2. Data → Insight Pipeline
3. Tabel vs Grafik — kapan menggunakan yang mana
4. Mapping tujuan → jenis visualisasi
5. Multi-metric presentation — cara melaporkan banyak metrik sekaligus
6. Visualization bias — cara visualisasi bisa menipu
7. Cognitive Traps & Studi Kasus
8. Output Praktis: Tabel + Grafik + Observasi Awal
---
## Capaian Pembelajaran
Setelah pertemuan ini, mahasiswa mampu:
- Menjelaskan perbedaan peran **tabel** (presisi) dan **grafik** (insight)
- Memilih jenis visualisasi berdasarkan **tujuan komunikasi hasil**
- Menyajikan hasil **multi-metrik** secara terstruktur dan tidak menyesatkan
- Mengidentifikasi dan menghindari **visualization bias**
- Menghasilkan **observasi awal** dari presentasi hasil sebelum interpretasi formal
> Sub-CPMK 4.1 → Menyajikan dan memvisualisasikan hasil eksperimen (CPL07)
---
## Sambutan ke Bagian IV
*Apa yang sudah kita miliki, apa yang harus kita lakukan*
```
Bagian I → Thinking: Masalah ditemukan, RQ dirumuskan
Bagian II → Designing: Metrik ditentukan, sistem dirancang, eksperimen didesain
Bagian III → Executing: Sistem diimplementasikan, dijalankan, data dikumpulkan + divalidasi
NOW: Bagian IV → Analyzing & Communicating
Bab 12: Sajikan hasil agar bisa dibaca
Bab 13: Preprocessing untuk analisis
Bab 14: Analisis, interpretasi, failure analysis
Bab 15: Tulis laporan ilmiah
Bab 16: Presentasikan dan defend
```
> Data yang valid (Bab 11) adalah fondasi. Presentasi yang jelas (Bab 12) adalah jembatan.
---
## Data → Insight Pipeline
*Proses mengubah angka mentah menjadi insight yang dapat dikomunikasikan*
<div class="highlight-box">
**Validated Data** (Bab 11) &darr; Structured Presentation (tabel, format baku) &darr; Visualization (grafik yang tepat sasaran) &darr; Pattern Recognition (tren, perbedaan, konsistensi) &darr; **Insight** (observasi bermakna, siap Bab 14)
</div>
> Bab 12 menghasilkan **observasi** — "kita melihat X lebih baik dari Y dalam kondisi Z"
> Bab 14 menghasilkan **interpretasi** — "ini terjadi karena..."
---
## Tabel vs Grafik — Pilih yang Benar
| Situasi | Gunakan Tabel | Gunakan Grafik |
|---------|--------------|---------------|
| Tujuan | Presisi — angka exakt penting | Insight — pola, tren, perbandingan |
| Pembaca perlu | Mencari angka spesifik | Memahami pola dengan cepat |
| Data | Multi-metrik, banyak dimensi | Satu atau dua dimensi utama |
| Konteks | Laporan teknis, lampiran | Presentasi, paper figure |
**Aturan praktis:**
- Tabel **selalu ada** di laporan → pembaca bisa verifikasi angka
- Grafik menampilkan **pesan utama** yang ingin disampaikan
- Tidak ada grafik tanpa tabel pendamping di laporan ilmiah
---
## Mapping Tujuan → Jenis Visualisasi
| Tujuan Komunikasi | Jenis Grafik | Contoh |
|------------------|-------------|--------|
| Bandingkan nilai antar model | Bar chart | Perbandingan F1 Model A vs B vs C |
| Bandingkan multiple metrik | Grouped/stacked bar | Precision, Recall, F1 per model |
| Lihat tren seiring waktu | Line chart | Training loss over epochs |
| Lihat distribusi performa | Box plot | F1 dari 10 run per skenario |
| Lihat trade-off dua metrik | Scatter plot | Precision-Recall curve |
| Lihat keseluruhan radar | Radar chart | 5 metrik sekaligus per model |
| Lihat sebaran error | Heatmap | Confusion matrix |
> **Box plot sangat penting** untuk researcher: menampilkan median, IQR, dan outlier sekaligus.
---
## Multi-Metric Presentation
*Penelitian TI jarang punya satu metrik tunggal — cara melaporkan banyak metrik*
**Format tabel standar:**
| Skenario | F1-micro | F1-macro | Precision | Recall | Time (s) |
|----------|---------|---------|-----------|--------|---------|
| Baseline | 0.821 ± 0.015 | 0.768 ± 0.018 | 0.844 ± 0.012 | 0.799 ± 0.021 | 2511 ± 43 |
| +Attention | **0.869 ± 0.011** | **0.815 ± 0.014** | **0.882 ± 0.010** | **0.857 ± 0.016** | 2706 ± 52 |
| +Ensemble | 0.851 ± 0.013 | 0.798 ± 0.016 | 0.867 ± 0.011 | 0.836 ± 0.019 | 3124 ± 67 |
**Prinsip:** Selalu tampilkan mean ± std. Bold = best per kolom. N = jumlah run (cantumkan di caption).
---
## Visualization Bias — Cara Visualisasi Menipu
*Tiga teknik visual yang menyesatkan (dan sering tidak disengaja)*
### 1. Manipulasi Y-axis
```
Y-axis mulai dari 0.85: vs. Y-axis mulai dari 0:
| |
0.89| █ 1.0|
0.87| █ █ 0.8| █ █ █
0.85|█ █ |
A B C A B C
Tampak sangat berbeda Tampak hampir sama
```
Kedua grafik menggunakan data yang persis sama!
### 2. Selective Data — hanya menampilkan skenario terbaik
### 3. Misleading Chart Type — bar chart untuk data kontinu yang seharusnya box plot
---
<!-- _class: section-header bagian-iv -->
# Cognitive Traps
## Bab 12 — Result Presentation
---
## Cognitive Traps — Bab 12
**"Lebih besar selalu lebih baik"**
Tidak semua metrik makin besar makin baik. Execution time, memory usage, dan false positive rate → lebih kecil lebih baik. Selalu beri label dan arah di tabel dan grafik.
**"Grafik sudah cukup, tidak perlu tabel"**
Grafik tidak bisa di-verifikasi angkanya. Dalam laporan ilmiah, tabel pencantuman nilai exakt adalah standar — bukan opsional. Grafik tanpa tabel = tidak cukup untuk reproduksi.
**"Saya hanya menampilkan skenario terbaik untuk memperkuat argumen"**
Selective reporting adalah pelanggaran integritas ilmiah. Semua skenario yang dijalankan harus dilaporkan. Argumen yang kuat muncul dari analisis yang jujur — bukan dari data yang dipilah.
**"Observasi awal sudah cukup, tidak perlu analisis lebih lanjut"**
Bab 12 menghasilkan observasi. Interpretasi dan penjelasan mengapa — itu adalah tugas Bab 14. Jangan melompat dari angka ke kesimpulan tanpa analisis formal.
---
## Studi Kasus 1 — Y-Axis Manipulation (Basic)
**Presentasi original:**
Grafik menunjukkan model peneliti jauh lebih baik dari baseline. Dosen menanyakan skala Y-axis.
Ternyata Y-axis dimulai dari 0.82, mengakhiri di 0.90.
Perbedaan aktual: 87.0% vs 82.1% = **4.9 percentage point**.
**Revisi:**
1. Y-axis dimulai dari 0
2. Tambahkan error bar (± std dari 10 run)
3. Tambahkan tabel dengan nilai exakt
**Pelajaran:** Perbedaan 4.9pp tetap signifikan secara statistik. Tidak perlu "membesarkan" secara visual — biarkan angka bicara sendiri.
---
## Studi Kasus 2 — Visualisasi yang Tepat (Advanced)
**Original:** Bar chart untuk menampilkan performa dari 10 run.
Bar chart hanya menampilkan mean — variance tersembunyi.
**Solusi: Box plot dari 10 run**
```
Attention: |───[===|===]───•| Median: 0.869, IQR: 0.011–0.015
Ensemble: |──[===|===]──| Median: 0.851, IQR: 0.013–0.016
Baseline: |─[===|===]──| Median: 0.821, IQR: 0.015–0.018
```
**Informasi tambahan yang terlihat dari box plot:**
- Attention memiliki variance lebih kecil (lebih stabil)
- Ensemble lebih stabil dari Baseline
- Tidak ada overlap distribusi → perbedaan kemungkinan signifikan
---
## Format Observasi Awal
*Sebelum interpretasi, dokumentasikan dulu apa yang terlihat*
```
OBSERVASI AWAL HASIL EKSPERIMEN
[OBS-01] Skenario "+Attention" menghasilkan F1-micro tertinggi (0.869 ± 0.011),
diikuti "+Ensemble" (0.851 ± 0.013), dan Baseline (0.821 ± 0.015).
[OBS-02] Variance skenario "+Attention" lebih kecil dari Baseline,
menunjukkan stabilitas yang lebih baik.
[OBS-03] "+Ensemble" memerlukan waktu eksekusi lebih lama (3124 ± 67s)
dibanding "+Attention" (2706 ± 52s).
[OBS-04] Pada F1-macro, semua skenario menunjukkan nilai lebih rendah daripada
F1-micro, mengindikasikan performa yang tidak seimbang antar kelas.
CATATAN: Observasi ini baru mendeskripsikan "apa yang terjadi". Interpretasi
mengapa — akan dilakukan di Bab 14.
```
---
## Ringkasan Pertemuan 12
| Konsep | Inti |
|--------|------|
| Data→Insight Pipeline | Validated Data → Structured → Visualization → Pattern → Insight |
| Tabel vs Grafik | Tabel = presisi (selalu ada), Grafik = insight (pilih tepat) |
| Mapping Visualisasi | Tujuan berbeda → jenis grafik berbeda (bar/box/scatter/radar) |
| Multi-metric | Mean ± std, bold best, N runs disebut di caption |
| Visualization Bias | Y-axis manipulation, selective data, misleading chart type |
| Observasi vs Interpretasi | Bab 12 = "apa yang terjadi", Bab 14 = "mengapa terjadi" |
---
## Final Statement & Output Praktis
<div class="final">
"Visualisasi yang jujur bukan hanya soal estetika — ini adalah pernyataan integritas ilmiah. Data yang baik tidak perlu dimanipulasi agar terlihat menarik."
</div>
### Output Praktis M12
Buat dan kumpulkan:
1. **Tabel hasil** (semua skenario, semua metrik, format mean ± std)
2. **Minimal 2 grafik** (pilih jenis sesuai tujuan komunikasi)
3. **Dokumen observasi awal** (format [OBS-XX] seperti template di atas)
---
## Referensi Utama — Bab 12
- Tufte, E. R. (2001). *The visual display of quantitative information* (2nd ed.). Graphics Press.
- Few, S. (2012). *Show me the numbers: Designing tables and graphs to enlighten* (2nd ed.). Analytics Press.
- Munzner, T. (2014). *Visualization analysis and design*. CRC Press.
- Jain, R. (1991). *The art of computer systems performance analysis: Techniques for experimental design, measurement, simulation, and modeling*. Wiley.
Reference in a new issue View git blame Copy permalink