Page 1 of 2
BUKTI FISIK KEGIATAN
PRANATA KOMPUTER AHLI II.A.4.F-1
Nama PPK Nofriani, S.ST. Tanggal Pelaksanaan
8 – 12 Desember 2016
NIP 19911119 201410 2 002
Pangkat/Golongan Penata Muda/III-a Lokasi Pekerjaan BPS Prov. Bengkulu Jabatan
Fungsional
Pranata Komputer
Pertama Angka Kredit 1 x 1.160
JENIS KEGIATAN
MEMBUAT PROGRAM PAKET TEKNOLOGI INTERNET SEDERHANA
→ Website Infografis Interaktif – Cintai Indonesia dengan Data DESKRIPSI KEGIATAN
Membuat program paket teknologi internet sederhana, yaitu website infografis interaktif – Cintai Indonesia dengan Data
KUTIPAN SOURCE CODE PROGRAM PAKET Terlampir di II.A.4.E-1 Lampiran 1
PELAKSANAAN
Dilakukan selama empat hari, yaitu 8-12 Desember 2016. Penulisan program dilakukan dengan menggunakan Netbeans 8.1 HTML5 Plugin, Browser Chrome, dan Sistem Operasi Windows 10 Pro.
Mengetahui Kepala Bidang IPDS
Bengkulu, Mei 2017 Pejabat Pranata Komputer
Endang Trisilowati, S.Si, M.Si NIP. 19620301 198203 2 004
Nofriani, S.ST.
NIP. 19911119 201410 2 002
Page 2 of 2
LAYOUT APLIKASI HASIL
Tampilan di Website:
KETERANGAN LAIN
Kegiatan pembuatan program dilakukan untuk mengikuti lomba infografis cabang
infografis interaktif yang diadakan oleh BPS RI pada Desember 2016.
Page 1 of 10
KUTIPAN SOURCE CODE PROGRAM PAKET WEBSITE INFOGRAFIS INTERAKTIF
(LOMBA INFOGRAFIS BPS RI)
A. Kerangka Induk Folder Program
Program aplikasi dibangun dengan menggunakan Netbeans IDE 8.1, Browser Chrome, Bahasa pemrograman javascript, CSS3, dan HTML5.
B. Assets Folder
Folder ini menyimpan files CSS dan Javascript untuk membuat tampilan website menarik dan lebih user-friendly, sekaligus data yang digunakan pada infografis.
Folder ini terdiri dari beberapa subfolders:
1. Css subfolder
Menyimpan file CSS3 yang digunakan untuk styling tampilan website dan gaya zoom-in, popup windows, gambar ketika di-hover. Berikut cuplikasn salah satu file:
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates and open the template in the editor.
*/
/*
Created on : Dec 8, 2016, 7:57:01 PM Author : Nofriani
*/
.modalDialog {
position: fixed;
Page 2 of 10 top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
overflow-y: auto;
}
.modalDialog:target { opacity:1;
pointer-events: auto;
}
.modalDialog > div { width: 65em;
max-width: 98%;
position: relative;
margin: 5% auto;
padding: 20px;
border-radius: 10px;
background: #E8FFD1;
}
.close {
background: #606061;
color: #FFFFFF;
margin: 20px;
line-height: 2.5em;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 2.5em;
height: 2.5em;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: white; color: black!important;}
2. Datachart subfolder
Menyimpan file javascript berupa data infografis untuk ditampilkan. Berikut cuplikan salah satu file untuk menampilkan data indicator kemiskinan:
$(function () {
// Prepare demo data var data = [
Page 3 of 10 {
"hc-key": "id-3700", "value": 0
}, {
"hc-key": "id-ac", //aceh "value": 17.11
}, {
"hc-key": "id-ki", //kaltim "value": 6.10
}, {
"hc-key": "id-jt", //jateng "value": 13.32
}, {
"hc-key": "id-be", //bengkulu "value": 17.16
}, {
"hc-key": "id-bt", //banten "value": 5.75
}, {
"hc-key": "id-kb", //kalbar "value": 8.44
}, {
"hc-key": "id-bb", //babel "value": 4.83
}, {
"hc-key": "id-ba", //bali "value": 5.25
}, {
"hc-key": "id-ji", //jatim "value": 12.28
}, {
"hc-key": "id-ks", //kalsel "value": 4.72
}, {
"hc-key": "id-nt", //ntt "value": 22.58
}, {
"hc-key": "id-se", //sulsel "value": 10.12
}, {
"hc-key": "id-kr", //kepri "value": 5.78
}, {
"hc-key": "id-ib", //papua barat "value": 25.73
}, {
Page 4 of 10 "hc-key": "id-su", //sumut "value": 10.79
}, {
"hc-key": "id-ri", //riau "value": 8.82
}, {
"hc-key": "id-sw", //sulut "value": 8.98
}, {
"hc-key": "id-la", //malut "value": 6.22
}, {
"hc-key": "id-sb", //sumbar "value": 6.71
}, {
"hc-key": "id-ma", //maluku "value": 19.38
}, {
"hc-key": "id-nb", //ntb "value": 22.58
}, {
"hc-key": "id-sg", //sultra "value": 13.74
}, {
"hc-key": "id-st", //sulteng "value": 14.07
}, {
"hc-key": "id-pa", //papua "value": 28.40
}, {
"hc-key": "id-jr", //jabar "value": 9.57
}, {
"hc-key": "id-1024", //lampung "value": 13.53
}, {
"hc-key": "id-jk", //jakarta "value": 3.61
}, {
"hc-key": "id-go", //gorontalo "value": 18.16
}, {
"hc-key": "id-yo", //jogja "value": 13.16
}, {
"hc-key": "id-kt", //kalteng
Page 5 of 10 "value": 5.91
}, {
"hc-key": "id-sl", //sumsel "value": 13.77
}, {
"hc-key": "id-sr", //sulbar "value": 11.90
}, {
"hc-key": "id-ja", //jambi "value": 9.12
} ];
// Initiate the chart
$('#kemiskinan2').highcharts('Map', { title: {
text: 'Persentase Penduduk Miskin Indonesia (2015)' },
chart:{
backgroundColor:'#E8FFD1' },
subtitle: {
text: 'Sumber: Website BPS' },
tooltip: {
useHTML: true,
formatter: function () {
var s = '<img src="assets/img/begging.png"
title="" alt="" border="0" height="50" width="50"><br/>'
+ '<b>' + this.series.name + '</b><br>' + 'Provinsi: ' + this.point.name + '<br>' + 'Penduduk Miskin: ' + this.point.value + ' %';
return s;
}, },
mapNavigation: { enabled: true, buttonOptions: {
verticalAlign: 'bottom' }
},
colors: ['rgba(208, 252, 136,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(173, 11, 11,1)'],
colorAxis: { min: 3, max: 25,
tickInterval: 3,
// type: 'logarithmic', minColor: '#1E5701', maxColor: '#000022', stops: [
[0, '#1E5701'], [0.3, '#F5FB2A'], [0.7, '#EF9E07'], [1, '#CB2400']
Page 6 of 10 ]
},
series: [{
data: data,
mapData: Highcharts.maps['countries/id/id-all'], joinBy: 'hc-key',
name: 'Persentase Penduduk Miskin',
nullColor: ['#D0FC88', '#CAD373', '#C4AB5E', '#BE8349', '#B85B34', '#B2331F', '#AD0B0B'],
states: { hover: {
color: 'black' }
},
dataLabels: { enabled: true,
format: '{point.name}' }
}], credits: {
enabled: false },
});
});
3. Fonts subfolder
Menyimpan file fonts (jenis huruf) yang digunakan di website.
4. Img subfolder
Menyimpan gambar yang ditampilkan pada infografis.
Page 7 of 10
5. Js folder
Menyimpan file javascript untuk membuat tampilan website lebih menarik dan user-friendly, seperti menu accordion, responsive tabs dll. File ini merupakan open source plugin yang dapat diunduh secara gratis.
$(document).ready(function () { var animTime = 300,
clickPolice = false;
$(document).on('touchstart click', '.acc-btn', function () {
if (!clickPolice) { clickPolice = true;
var currIndex = $(this).index('.acc-btn'), targetHeight = $('.acc-content- inner').eq(currIndex).outerHeight();
$('.acc-btn h1').removeClass('selected');
$(this).find('h1').addClass('selected');
$('.acc-content').stop().animate({height: 0}, animTime);
$('.acc-
content').eq(currIndex).stop().animate({height: targetHeight}, animTime);
setTimeout(function () { clickPolice = false;
}, animTime);
} });
});
C. Images Folder
Merupakan folder yang menyimpan gambar-gambar yang digunakan dan ditampilkan pada website bagian depan.
D. Index.htnl
File ini menyimpan kode program untuk menampilkan fungsi javascript dan
tampilan CSS pada website. File ini merupakan file yang pertama kali diakses ketika
pengguna melakukan akses pada website. Berikut cuplikan isi file tersebut:
Page 8 of 10
<!DOCTYPE HTML>
<!--
Created by Nofriani, S.ST.
BPS Provinsi Bengkulu -->
<html>
<head>
<title>Infografis Fi</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial- scale=1" />
<link rel="shortcut icon" href="assets/img/ico.ico"
type="image/x-icon" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/fi.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/fitab.css" />
<link rel="stylesheet" href="assets/css/fihover.css" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper" >
<!-- Header -->
<header id="header" style="">
<div class="inner" style ="border-right: 3px dashed
#4F6638;border-left: 3px dashed #4F6638;padding-top: 0.5em;">
<!-- Logo -->
<a href="index.html" class="logo">
<span class="symbol"><img
src="images/logobps.png" alt="" /></span><span class="title">BADAN PUSAT STATISTIK</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li><a href="#menu">Menu</a></li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a
href="index.html#populasi">Populasi</a></li>
<li><a
href="index.html#kemiskinan">Kemiskinan</a></li>
<li><a
href="index.html#ketenagakerjaan">Pengangguran</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<div class="inner" style ="border: 3px dashed
#4F6638;border-top: 0;padding: 0 2.5em 2.5em 2.5em;">
Page 9 of 10 <header>
<h1>Cintai Indonesia dengan Data</h1>
<p> Rakyat yang berani adalah yang mau berjuang memperbaiki bangsanya.
Bangsa yang hebat dibangun dengan
perencanaan yang hati-hati. Perencanaan yang baik dapat diraih dengan data yang mumpuni.
Karenanya, <i>data mencerdaskan bangsa</i>.
</p>
</header>
<section class="tiles" >
<!--POPULASI-->
<article class="style1" style="margin: 2.5em 0 0 1.2em;">
<span class="image">
<img src="images/pic01.jpg" alt="" />
</span>
<a href="#populasi">
<h2>Populasi</h2>
<div class="content">
<p>Indonesia adalah negara dengan populasi terbesar ke-4 di dunia.</p>
</div>
</a>
</article>
<div id="populasi" class="modalDialog">
<a href="#close" title="Close"
class="close">X</a>
<div class="content"
style="height:125%;">
<h1 style="text-align:
center">POPULASI INDONESIA</h1>
<div class="bullshit3"
style="height:82%">
<input type="radio" id="profile"
value="1" name="tractor" checked='checked' class="bullshit"/>
<input type="radio" id="settings"
value="2" name="tractor" class="bullshit"/>
<input type="radio" id="posts"
value="3" name="tractor" class="bullshit"/>
<input type="radio" id="books"
value="4" name="tractor" class="bullshit"/>
<nav class="bullshit2" style=" ">
<label for="profile"
class='fa fa-globe'></label>
<label for="settings"
class='fa fa-line-chart'></label>
<label for="posts" class='fa fa-bar-chart'></label>
<label for="books" class='fa fa-windows'></label>
</nav>
<article class='uno bullshit' style="width: 100%;height: 100%">
<h2>Bagaimana Sebaran Penduduk Indonesia?</h2>
<div id="populasi2"
style="width: 100%!important;">
</div>
Page 10 of 10
</article>
<article class='dos fontawesome- wrench bullshit' style="width: 100%;">
<h2>Berapa Banyak Penduduk Perkotaan Indonesia?</h2>
<div id="populasi3"
style="width: 100%!important">
</div>
</article>
<article class='tres fontawesome- file-alt bullshit' style="width: 100%;">
<h2>Bagaimana Pertumbuhan Penduduk Indonesia?</h2>
<div id="populasi1"
style="width: 100%!important">
</div>
</article>
<article class='cuatro fontawesome-copy bullshit' style="width: 100%;">
<h2>Fun Facts</h2>
<div class="menu2">
<div class="fader">
<div class="text">
<center><img class ="blog" src="assets/img/peopleblue.png" alt=""></center>
<center><p>Populasi: 255.5 juta orang</p></center>
</div>
<a href="http://bps.go.id" target="_blank">
<img class
="blog" src="assets/img/biru.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<center><img class ="blog" src="assets/img/worldgreen.png" alt=""></center>
<center><p>Terbesar ke-4 di dunia</p></center>
</div>
<a href="http://bps.go.id" target="_blank">
<img class
="blog" src="assets/img/hijau.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<center><img class ="blog" src="assets/img/java.png" alt=""></center>
<center><p>Jawa adalah pulau terpadat</p></center>
</div>
... ...
