i~~~::~::~7repository.uinjkt.ac.id/dspace/bitstream/123456789/26958/1/fadlan... · (marcotte, 2011:...
TRANSCRIPT
r=='"""""'=-"'=~~ . .,, ~~-.,~·
{"'"""""- . ... ... i~~~::~::~"""7 PROTOTYPE WEBRESPONSivE.DE~JbN PADA
UIN SY ARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Skripsi
Sebagai salah satu syarat memperoleh gelar Sarjana Komputer
FADLANREZA
108091000065
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 MI 1435 H
PROTOTYPE WEB RESPONSIVE DESIGN P ADA
UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN
FRAMEWORK BOOTSTRAP
Tgl
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Oleh:
FADLANREZA
108091000065
PROGRAM STUD! TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UIN SYARIF HIDAYATULLAH JAKARTA
2014 M/1435 H
LEMBARPENGESAHAN
WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI
MENGGUNAKAN FRAMEWORK BOOTSTRAP
(Studi Kasus : UIN Syarif Hidayatullah Jakarta)
Skripsi
Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer
Fakultas Sains dan Teknologi
Pembimbing I,
Viva Arifin MMS
UIN SyarifHidayatullah Jakarta
Oleh:
FADLANREZA
NIM : 108091000065
Menyetujui,
Pembimbing II,
Arini, MT NIP. 19730810 200604 001 NIP. 197601312009012001
Mengetahui, Ketua Program tudi Teknik Informatika
Nurh ati P . D 1'TTP 1o;;orn1;; 1 00001 ,, oo-,
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI !NI BENAR-
BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN
SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI
ATAU LEMBAGA MANAPUN.
Jakaita, September 2014
Fadlan Reza 108091000065
Fadhm Reza, Prototype Web Responsive Design Pada VIN Syarif Hidayatullah Jakarta Menggunakan Framework Bootstrap, dibimbing oleh Viva Arifin, MMSI dan Arini, MT.
ABSTRAK
Angka akses website VIN Syarif Hidayatullah Jakarta dengan menggunakan perangkat mobile mencapai 30% dari total kunjungan dan dari 59 jenis resolusi layar, 42 adalah perangkat mobile selama I Januari - 17 Februari 2014 (Data Primer PVSTIPANDA, 2014). Secara global angka akses internet menggunakan perangkat mobile meningkat, menurut Morgan Stanley Research dalam laporan Global The Mobile Internet Report, 2009, pada 2014 diprediksi akses internet dengan perangkat mobile akan melampaui akses internet dengan perangkat mobile. Pada 2012 menurut HIS iSuppli Research angka penjualan perangkat desktop mengalami penurunan sebesar 1,2 % dibanding tahun 2011, dampak dari meningkatnya jumlah penjualan perangkat mobile. Hal ini menimbulkan pertanyaan pada apakah website VIN SyarifHidayatullah Jakarta pada 2014 sudah siap menghadapai akses dari perangkat mobile yang begitu beragam? Menurut Ethan Marcotte, semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8). Responsive web design adalah pendekatan desain webite yang dapat beradaptasi dengan masalah pada web browser dan perangkat keras yang menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna (Marcotte, 2011: 9). Responsive web design terdiri atas 3 komponen yaitu: tata letak fleksibel berbasis grid, gambar dan media fleksibel, media queries. Pada penulisan skripsi ini penulis menggunakan metodologi Web Site Design Method (WSDM) dalam pembuatan website VIN Syarif Hidayatullah Jakarta dengan tahapan proses pernyataan misi dengan pengumpulan data berupa observasi dan wawancara, pemodelan pengguna, desain konseptual, desain implementasi, dan implementasi. Hasil proses pembuatan adalah website VIN Syarif Hidayatullah Jakarta dengan tampilan baru yang mengadopsi teknologi responsive web design, sehingga bisa beradaptasi pada setiap ukuran resolusi layar yang berbeda-beda baik dengan perangkat mobile maupun desktop.
Kata kunci
Daftar Pustaka Jumlah Halaman
: Website, Responsive Web Design, Resolusi Layar, Mobile, Web Site Design Method (WSDM).
: 26 (1998 -2013) : 5 BAB + 116 Halaman + 33 Gambar + 13 Tabel + 6
Lampiran
Faizal, Fariz Yuliono, Hafizhan Irawan, Ilham Tri Saputra, Muchtar Aham,
Muhammad Ardiansyah, Priyangga, Rahmad Hamidi, Rizqon Syauqi, dan
Eko Suganda. Language Theory & Automata Band.
6. Teman-teman Muhammad Fajar, Vina Alfiani, Aji Prastio Wibowo, Indah
Permata Sari, Ninda Firstri Oktidila, dan Adina Siti Maryam Talogo atas
do'a, dukungan, dan semangatnya.
7. Rekan-rekan PUSTIPANDA UIN Syarif Hidayatullah Jakarta atas
kesempatan riset dan data penelitiannya.
8. Teman-teman Teknik Informatika C 2008 (Ticcer) dan Teman Teknik
Informatika Multimedia 2008.
9. Keluarga Besar Dapur Seni atas ilmu dan pengalaman bermusiknya. Teman
teman band dan lainnya.
I 0. Selumh pihak yang telah membantu meski tak penulis sebutkan khusus.
Terima kasih banyak atas do'a, bantuan, dan dukungannya semoga Allah SWT
membalas dengan segala kebaikan dan keberkahan. Mohon maaf atas segala
kekurangan yang masih terdapat dalam skripsi ini.
Demikian, penulis berharap skripsi ini dapat memberikan manfaat. Untuk
kritik dan saran dapat menghubungi penulis melalui email [email protected].
Jakarta, September 2014
Fadlan Reza
DAFTARISI
Halaman
HALAMAN SAMPUL ............................................................................ .
HALAMAN JUDUL ................................................................................ ii
HALAMAN PENGESAHAN .................................................................. iii
HALAMAN PENGESAHAN UJIAN ..................................................... iv
HALAMAN PERNYATAAN .................................................................. v
ABSTRAK ............................................................................................... vi
KA TA PEN GANT AR .............................................................................. vii
DAFT AR ISI ............................................................................................ ix
DAFT AR GAMBAR .................................................................................. xii
DAFTAR TABEL .................................................................................... xiv
BAB 1 PENDAHULUAN ...................................................................... 1
I. I Latar Belakang ..................................................................... I
1.2 Rumusan Masai ah . .. ...... .. .... ...... ..... ..... .. ...... ... . . . .... .. ............. 3
I .3 Batasan Masai ah .. .. . . . .... .. ...... .... .. .. .. ...... .. .... .. ............. .... . .... . . 4
I .4 Tujuan Penelitian .................................................................. 4
1.5 Manfaat Penelitian ................................................................ 5
1.6 Sistematika Penelitian ........................................................... 6
BAB Il LANDASAN TEORI ................................................................. 7
2. I Responsive Web Design ......................................................... 7
2. l. l Tata Letak Fleksibel Berbasis Grid .............................. 7
2. l.2 Gambar dan Media Fleksibel ....................................... 8
2.1.3 Media Queries ............................................................. 9
2.2 Framework Responsive Web Design ...................................... 10
2.2. l Bootstrap ..................................................................... 11
2.2.2 Foundation .................................................................. 11
2.2.3 Skeleton ...................................................................... 12
2.2.4 Perbandingan 3 Framework Responsive Web Design.... 13
2.2.5 Alasan Menggunakan Framework Bootstrap ................ 15
2.3 Desain Web ........................................................................... 15
2.3.1 HyperText Markup Language 5 (HTML5) ................... 15
2.3.2 Cascading Style Sheet 3 (CSS3) .................................. 16
2.4 Usabilitas .............................................................................. 17
2.5 Studi Pustaka ......................................................................... 19
2.6 Web Site Design Method (WSDM)........................................ 19
2. 7 Unified Modeling Language (UML) ...................................... 25
BAB m METODOLOGI PENELITIAN .............................................. 27
3 .1 Metode Pengumpulan Data ..... .. .... ....... .. ... .. . .... .. .. .. .. ... .. ...... 2 7
3.1.1 Data Primer............................................................... 27
3.1.1.1 Wawancara .................................................... 27
3.1.1.2 Observasi ...................................................... 27
3.1.2 Data Sekunder .......................................................... 28
3.1.2.1 Studi Pustaka ................................................. 28
3.2 Metode Web Site Design Method (WSDM) ........................ 29
3.2.1 Pernyataan Misi ......................................................... 29
3.2.2 Pemodelan Pengguna ................................................ 30
3.2.3 Desain Konseptual ..................................................... 30
3.2.3. l Pemodelan lnfonnasi ..................................... 31
3.2.3.2 Pemodelan Fungsi ......................................... 3 I
3.2.3.3 Desain Navigasi ............................................ 31
3.2.4 Desain Implementasi ................................................. 32
3.2.4. I Desain Halaman ............................................ 32
3.2.4.2 Desain Presentasi .......................................... 33
3.2.5 Implementasi ............................................................. 34
3.2.6 Pengujian .................................................................. 34
3.3 Alasan Menggunakan WSDM ............................................. 35
3.4 Kerangka Berfikir ............................................................... 36
BAB IV HASIL DAN PEMBAHASAN ••••••••••••••.••••••.•••.•...•..•••••••••••••••• 37
4. I Web Site Design Method (WSDM) ...................................... 37
4.1.1 Pemyataan Misi ......................................................... 37
4.1.2 Pemodelan Pengguna ................................................ 45
4.1.2.1 Klasifikasi Pengguna ................................... 45
4.1.2.2 Karakterisasi Pengguna ............................... 54
4.1.3 Desain Konseptual ..................................................... 55
4.1.3.1 Pemodelan Informasi .................................. 55
4.1.3.2 Pemodelan Fungsi ....................................... 56
4.1.3.3 Desain Navigasi .......................................... 61
4.1.4 Desain Implementasi ................................................. 63
4.1.4.1 Desain Halaman .......................................... 63
4.1.4.2 Desain Presentasi ........................................ 75
4.1.5 Implementasi ............................................................. 80
4.3 Pengujian ............................................................................ 83
4.4 Perbandingan Website UIN Syarif Hidayatullah Sebelum dan
Sesudah Menggunakan Teknologi Responsive Web Design......... 86
BAB V PENUfUP .................................................................................. 87
5.1 Kesimpulan ........................................................................... 87
5 .2 Saran .... . . . .... . .... .. .... . . .... . ..... .. ..... .... . . ....... ..... . . ..... . . ... . ..... . . ..... . 88
DAFT AR PUST AKA ............................................................................... 89
LAMPIRAN ............................................................................................. 92
DAFTAR TABEL
Halaman
Tabel 2.1 Perbandingan 3 Framework Responsive Web Design .................. 13
Tabel 4.1 Resolusi Layar Pengguna Website VIN SyarifHidayatullah
Jakarta ....................................................................................................... 38
Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta ..... 39
Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN SyarifHidayatullah
Jakarta ....................................................................................................... 41
Tabel 4.4 Durasi Pengguna Website VIN Syarif Hidayatullah Jakarta......... 43
Tabel 4.5 Pemyataan Misi Website VIN Syarif Hidayatullah Jakarta .......... 45
Tabel 4.6 Deskripsi Use Case Akses Website.............................................. 46
Tabel 4. 7 Deskripsi Use Case Login Administrator..................................... 47
Tabel 4.8 Deskripsi Use Case Manage Berita ............................................. 47
Tabel 4.9 Deskripsi Use Case Manage Artikel............................................ 48
Tabel 4.10 Deskripsi Use Case Manage Kolom Rektor............................... 49
Tabel 4.11 Deskripsi Use Case Manage Halaman Kategori ........................ 49
Tabel 4.12 Pengujian Website..................................................................... 84
1.1 Latar Belalumg
BABI
PENDAHULUAN
Vniversitas Islam Negeri Syarif Hidayatullah Jakarta sebagai lembaga
pendidikan tinggi dengan arah pengembangan menuju universitas kelas dunia
sebagaimana ditulis dalam Buku Pedoman Akademik tahun 2010-2011, VIN
Syarif Hidayatullah Jakarta menjadi jendela keunggulan akademis Islam
Indonesia (window of academic excellence of Islam in Indonesia) dan barometer
perkembangan, pembelajaran, penelitian, dam kerja-kerja sosial yang
diselenggarakan kaum Muslim Indonesia dalam berbagai bidang ilmu (Tim
Penyusun Pedoman Akademik, 2010: 14). Hal ini perlu ditunjang media informasi
yang menerapkan teknologi terbam sebagai jendela awal pencarian informasi
mengenai VIN Syarif Hidayatullah di dunia internet. Website sebagai media
informasi yang penting guna mendukung kelancaran informasi dan komunikasi
antara sivitas akademika dengan seluruh unit yang ada di lingkungan VIN Syarif
Hidayatullah Jakarta (Tim Penyusun Pedoman Akademik, 20 I 0: 23).
Hasil observasi yang dilakukan pada website VIN Syarif Hidayatullah
Jakarta, bahwa pada 1 Januari 2014 sampai 17 Februari 2014 website belum
menerapkan teknologi responsive web design. Data statistik kunjungan
menunjukkan dari 100% kunjungan, 30% sudah mengakses website VIN Syarif
Hidayatullah Jakarta dengan perangkat mobile, dari angka 30% terdiri dari 143
2
jenis perangkat mobile dari total 4 77 jenis perangkat yang digunakan untuk
mengakses (Data Primer PUSTIPANDA Statistik Website VIN Syarif
Hidayatullah Jakarta).
Fenomena bertambahnya jenis perangkat keras dengan beraneka variasi
ukuran resolusi layar serta perilaku pengguna yang cendemng akan lebih banyak
menggunakan internet secara mobile berdampak pada masalah mengenai faktor
usabilitas dari sebuah produk digital dalam penelitian ini pada masalah website.
Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka
sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8).
Dalam bukunya Responsive Web Design pada 2011, Ethan Macotte
memperkenalkan teknologi Responsive Web Design sebagai solusi untuk
bagaimana membuat sebuah website mampu untuk mengenali ukuran perangkat
pengguna dan membuat website dapat memberikan tampilan yang sesuai dengan
ukuran perangkat pengguna, tanpa mernsak tampilan website tersebut, sehingga
tingkat usabilitas pada jenis-jenis perangkat tetap maksimal. Penulisan skripsi ini
menggunakan framework Bootstrap untuk perancangan tampilan website UIN
Syarif Hidayatullah Jakarta, Bootstrap dikembangkan oleh Twitter. Bootstrap
menjadi framework responsive web design terpopuler dengan menjadi proyek
yang paling banyak dilihat di fornm GitHub sebanyak 33.000 anggota forum.
Dalam penerapannya Bootstrap membagi kategori ukuran resolusi perangkat ke
dalam 4 kategori, yaitu: large devices, medium devices, small devices, dan extra
small devices.
6
1.6 Sistematika Penelitian
Dalam penyusunan tugas akhir ini, penulis menyajikan badasan dalam
lima pokok bahasan, yang secara singkat akan diuraikan sebagai berikut :
BABI
BABil
BABilI
BAB IV
BABV
PENDAIDJLUAN
Bab ini akan diuraikan tentang latar belakang, perumusan
masalah, batasan masalah, tujuan penelitian, manfaat
penelitian, dan sistematika penulisan.
LANDASAN TEORJ:
Bab ini akan diuraikan mengenai landasan teori yang
digunakan dalam pembahasan penulisan skripsi ini dan
sumber landasan teori tersebut.
METODOLOGI PENELITIAN
Bab ini berisikan metode dan tahap-tahap yang akan
digunakan dalam penelitian tugas akhir atau skripsi.
HASIL DAN PEMBAHASAN
Bab ini akan diuraikan dan membahas proses perancangan
dan pengembangan antarmuka (user inteiface) website
dengan teknologi responsive web design yang meliputi
hasil dari metodologi penelitian yang telah dilakukan.
KESIMPULAN DAN SARAN
Bab ini akan disajikan kesimpulan dan saran-saran yang di
angkat dalam penelitian berdasarkan pembahasan pada bab
bab sebelumnya.
BABU
LANDASAN TEORI
2.1 Responsive Web Design
Responsive web design adalah pendekatan desain web yang dapat
beradaptasi dengan masalah pada web browser dan perangkat keras yang
menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna
(Marcotte, 2011: 9). Google perusahaan yang bergerak di bidang teknologi dan
mesin pencarian infonnasi di internet dalam portal Google Developer mengenai
"Building Mobile-Optimized Websites" merekomendasikan langsung responsive
web design bagi pengembang website untuk dapat melayani kebutuhan para
pengguna agar optimal pada setiap jenis perangkat dekstop maupun mobile.
Responsive web design memiliki satu aspek dimana hanya diperlukan satu website
untuk berbagai perangkat dan tetap memberikan user-experience yang baik. Ada 3
elemen utama dalam teknologi responsive web design, yaitu:
a. Tata Letak Fleksibel Berbasis Grid
b. Gambar dan Media Fleksibel
c. Media Queries
2.1.1 Tata Letak Fleksibel Berbasis Grid
Tata letak berbasis grid merupakan salah satu pilar penting dalam
desain responsif. Tata letak responsif adalah menggunakan CSS untuk posisi dan
untuk meletakkan margin dan spasi untuk menerapkan berbagai jenis tata letak
8
web dengan cara baru. Tata letak dan ukuran teks biasanya dinyatakan dalam pixel
tata letak berbasis presentase dan ukuran berbasis "em".
Dengan mendasarkan ukuran pada teks, lebar, dan margin presentase
atau di "em" dengan unit pengukuran berdasarkan ukuran titikfont, ukuran yang
dirubah adalah ukuran tetap menjadi ukuran relatif untuk mencapai grid yang
fleksibel dan sistem ukuran teks, dengan rumus perhitungan "em"
Target + Konteks = Hasil
(Marcotte,2011 :20)
Contoh:
Konteks normal ukuran/ont "body" adalah 16 piksel. Jika perancang menetapkan
bahwa "HI" harus 24 piksel dapat dihitung menjadi: 24+16=1.5 maka hasil yang
digunakan dalam kode CSS :
hl{
}
Font size: 1.5em;
2.1.2 Gambar Dan Media Fleksibel
Menurut Ethan Marcotte dalam bukunya Responsive Web Design
salah satu masalah terbesar yang dapat dijawab oleh responsive web design adalah
penggunaan gambar dalam website. Ada beberapa teknik yang dapat digunakan
dalam mengatur ukuran gambar secara proporsional. Salah satu yang paling
populer yang ditulis Ethan Macotte dalam artikelnya ten tang fluid images adalah
9
penggunaan "max-width" dalam CSS, teknik ini pertama kali diuji coba oleh
Richard Rutter.
Saat aturan tentang ukuran gambar ini belum ada, pada umumya
setiap gambar akan memuat dalam ukuran aslinya, kecuali area tampilan menjadi
lebih sempit dari lebar asli gambar itu. Lebar maksimum gambar diatur ke 100%
dari lebar layar atau browser, sehingga ketika itu 100% menjadi lebih sempit
maka ukuran gambar tidak akan berubah. Gagasan dibalik fluid-image adalah
bahwa Anda memberikan gambar pada ukuran maksimum yang akan digunakan.
Anda tidak mendeklarasikan tinggi dan lebar dalam kode Anda, tetapi biarkan
browser mengubah ukuran gambar yang diperlukan saat menggunakan CSS untuk
membimbing ukuran size secara relatif (Knight, 2012: 13).
2.1.3 Media Queries
Media query adalah mekanisme untuk mengidentifikasi jenis media,
karakteristik fisik perangkat, dan browser yang digunakan (Marcotte, 2011: 74).
Perangkat yang sudah mendukung CSS3 akan mendukung fitur media query, jadi
memanggil media query untuk mendeteksi target ukuran perangkat. Fitur barn
pada CSS3 juga mencakup orientasi (potret dan landscape), dengan mendeteksi
ukuran resolusi layar sehingga dapat membuat beberapa style sheet serta
perubahan tata letak dasar didefiniskan sesuai dengan rentang lebar bahkan untuk
orientasi landscape dan potret. Contoh penggunaan media query:
/* Smartphones (portrait and landscape) */ @media only screen and (min-device-width and {max-device-width /* Styles */ )
320px) 480px)
/* Smartphones (landscape) ----------- */ @media only screen and (min-width : 32lpx) { I* Styles */ )
/* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */
10
Secara umum media query telah didukung banyak browser (Firefox 3.6+, Safari
4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile IO+, Android 2.1+,
dan Internet Explorer 9+) (Frain, 2012: 35).
2.2 Framework Responsive Web Design
Framework adalah kumpulan perintah atau fungsi dasar yang membentuk
aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam
pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut
(Wardana, 2010: 3).
Dalam pemrograman tampilan webite dengan teknologi responsive web
design, telah dikembangkan yaitu Bootstrap yang dikembangkan oleh Twitter
Inc., Zurb Foundation yang dikembangkan oleh Zurb, Skeleton dan lainnya.
Sebuah framework selain menyediakan lingkungan pengembangan
sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa digunakan
dalam pembuatan sebuah tampilan website, berikut penjelasan framework
responsive web design (Bootstrap, Foundation, dan Skeleton):
11
2.2.1 Bootstrap
Bootstrap adalah open-source front-end toolkit yang dikembangkan
oleh Mark Otto dan Jacob Thornton dari perusahaan yang berkecimpung dalam
bidang sosial media yaitu Twitter, dirilis pada Agustus 2011. Bootstrap
dikembangkan dengan tujuan untuk membantu desainer dan pengembang dalam
membangun front-end sebuah website secara cepat dan efisien. Twitter Bootstrap
secara cepat menjadi proyek yang paling di dilihat pada GitHub dengan lebih
33.000 pengguna GitHub yang melihat, dua kali lipat lebih banyak dibanding
posisi kedua (Cochran, 2012: 2). Framework Bootstrap mengkategorisasikan
ukuran resolusi layar ke dalam 4 kategori, yaitu:
I. Large Devices (dengan ukuran resolusi layar ?J200px)
2. Medium Devices (dengan ukuran resolusi layar ?992px)
3. Small Devices (dengan ukuran resolusi layar 2:768px)
4. Extra Small Devices (dengan ukuran resolusi layar <768px)
2.2.2 Foundation
ZURB Foundation adalah framework pembuatan responsive web
design open source untuk pengembangan front-end yang dikembangkan oleh
ZURB. ZURB adalah perusahaan desain yang fokus ke bidang desain interaksi
berlokasi di Campbell, California, Amerika Serikat. ZURB Foundation berisi
template desain HTML dan CSS berbasis tipografi, bentuk:, logo, tombol,
navigasi, dan komponen antarmuka lainnya, serta opsional pelengkap tembahan
JavaScript. ZURB Foundation fiwnework meraih tempat ke-16 sebagai proyek
12
terpopuler di GitHub, sebuah forum sosial para pengembang aplikasi, website,
aplikasi, dan perangkat lunak.
ZURB Foundation pertama kali rilis pada September 2011, pada
Oktober 2011 Zurb merilis Foundation 2.0 sebagai open-source responsive web
design framework dibawah lisensi dari Massachusetts Institute of Technology.
2.2.3 Skeleton
Skeleton adalah kumpulan kecil files CSS untuk pengembangan web
desain yang dikembangkan oleh Dave Gamache. Skeleton memiliki 3 prinsip
dasar yaitu :
a. Responsive Grid to Mobile
Skeleton sangat familiar dan ringat digunakan dengan 960 grid
grid sebagai dasarnya, dan secara elegan dapat menyesuaikan
dengan ukuran browser yang diperbesar atau diperkecil.
b. Fast to Start
Skeleton framework yang cepat untuk digunakan untuk rapid
development, dengan grid-grid yang terstruktur dan pertimbangan
untuk pengembangan di telepon genggam yang mudah. Skeleton
dilengkapi dengan struktur file dan elemen antarmuka yang
beragam.
c. Style Agnosic
Perangkat pengembangan yang paling mendasar yang dapat
menyesuaikan berbagai gaya desain denganframework Skeleton.
2.2.4 Perbanllingan 3 Framework Responsive Web Design
Tabel 2.1 Komparasi Framework Responsive Web Design
(Sumber: http:! /responsive. vennilion.com/compare.php)
Bootstrap3 Foundation 4
Ringkasan • Basis pengguna • Basis pengguna
besar medium
• Grids: Fluid dan • Grids: Fluid. Terbaik
fixed dalam kelas grids di
• Perangkat antarmuka semuajenis : banyak widget; viewports.
eocok untuk rapid • Perangkat
prototyping. antarmuka: set
• Sejarah: perangkat powerful
Dikembangkan oleh dan modular. Style
Twitter sebagai agnostic lebih
acuan style untuk banyak dibanding
perangkat internal. Bootstrap.
• Sejarah: Mobile-first
ke boilerplate
dikembangkan oleh
ZURBuntuk
proyek-proyek klien.
Versi 3 4.0
Terakhir rilis 26 Juni 2014 28 Februari 2013
Website htt12J{t' vi IJ.~r. eith u b.com/ http:/ /foundation .z~.uti.,, co
J?g__QJslra12'.'. n1/
Github J1 tt p://git hu h.con1/t\vitJ~rf http:/ I gj thu b.co1n/ zurb/fo11
bootst111p/ ndp.JiOJJ
Pengembang Twitter ZURB
Lisensi MIT License MIT License
Dukungan Chrome (Mac, Windows, Desktop: Chrome,
Browser iOS, and Android) Firefox, Safari, IE9+
Safari (Mac and iOS Mobile: iOS (iPhone),
only) Firefox (Mac, iOS (iPad), Android 2, 4
Windows) Opera (Mac (Phone), Android 2, 4
and Windows) IE8+ (Tablet), Windows Phone
7+, Surface
css Reset Normalize.css Normalize.css
LESS Ya Tidak
13
Skeleton
• Basis pengguna
medium
• Grids: fixed
• Perangkat
antarmuka:
terbatas
• Sejarah: style
agnostic dan
lebih ringan.
1.2
20 Juni 2012
http:/ I get.~.keleton. com
! !illn:/ I eithu b. corn/ dh g
a1nache/Skeleton
Dave Gamache
MIT License
Desktop: Chrome,
Firefox, Safari, IE?+
Mobile: iPhone,
Droid, iPad
Inspired by Eric
Meyer's reset
Tidak
15
2.2.5 Alasan Menggnnakan Framework Bootstrap
Dari 3 framework yang penulis bahas dalam penulisan skripsi ini,
penulis memilih menggunakanframework Bootstrap dengan alas an yaitu:
1. Framework Bootstrap sebagai proyek paling banyak dilihat di
forum pengembang teknologi informasi GitHub, dilihat lebih
33.000 anggota forum, dua kali lebih banyak dari peringkat kedua
terbanyak (Cochran, 2012, 2).
2. Buku-buku dan sumber yang lebih banyak.
3. Lebih mudah dipahami oleh pemula.
4. Fitur-fitur untuk tampilan website yang cukup lengkap.
2.3 Desain Web
2.3.1 HyperText Markup Language 5 (HTML5)
HTML5 adalah versi terbaru dari spesifikasi HTML yang telah ada
sejak tahun 1997 dan sudah banyak browser yang mendukung fitur-fitur pada
HTML5. Perubahan HTML5 mencakup fokus pada semantic markup seperti
penambahan <header>, <footer>, <section>, dan <article>, selain itu penambahan
elemen <canvas> untuk grafik interaktif dan elemen <video> untuk menampilkan
video (Grannell, Sumner, dan Synodinos, 2012: 8). Dalam perkembangannya
HTML5 memungkinkan pembuat website untuk memasukkan banyak
fungsionalitas ke dalam website. Teknologi website berkembang dengan pesat,
sebagian besar karena meningkatnya kecepatan rata-rata koneksi internet, dan
para pengguna, desainer, dan programmer semakin menuntut fungsionalitas lebih
pada halaman website, seperti kontrol untuk font dan tata letak yang lebih
16
terkendali, rendering yang lebih baik pada perangkat yang bervariasi seperti dari
ponsel ke monitor besar, Iebih interaktif, video, audio, animasi, dan dukungan
yang lebih baik untuk format gambar danjile (Wempen, 2011: xxiv).
2.3.2 Cascading Style Sheet 3 (CSS3)
CSS3 adalah pengembangan dari CSS yang dimana berfungsi untuk
mengatur format I tampilan tata letak sebuah halaman web. CSS ini bersifat
embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML.
Kelebihan CSS3 menurut (Clark, Studholme, Murphy, Manian, 2012: 235):
a. Desain Lebih Ramping
Dengan CSS3 pembuatan website tidak perlu melewati proses
lama dengan mengolah rancangan dulu dalan1 aplikasi pengmbuat
grafts lalu diubah dalam bentuk kode, perubahan bisa langsung
dilakukan melalui kode CSS3. Hal ini tidak hanya meningkatkan
alur kerja dan mengurangi panjang dari proyek, tetapi membuat
pemeliharaan dan penanganan akan perubahan permintaan lebih
mudah (Clark, Studholme, Murphy, Manian, 2012: 236).
b. Mengurangi solusi dan hacks
CSS3 memberikan faslitas lebih lengkap dibanding versi
terdahulunya, sehingga tidak diperlukan trik khusus untuk
membuat website menjadi sesuai dengan keinginan pembuat.
Contohnya yaitu:
I. Spesifikasi web font yang lebih banyak
19
teknologi web responsive design selain itu juga mempennudah kerja dari web
administrator dalam memperbaharui berita dan karena pembuatan menggunakan
framework Codeigniter maka waktu pengerjaan pembuatan situs jadi lebih
singkat, kode program lebih mudah dibaca dan menjadi pilihan tepat untuk
mempercepat kerja teamwork (Herbowo, 2012: iv). Penelitian dengan tema sejenis
kedua dari Chen Zhang, pada tahun 2013, Rochester Institute of Technology,
dengan judul penelitian "Responsive Website Design for First Unitarian Church
and Louis Kahn." Menurut Chen Zhang, A website which has three user
experiences: a desktop site, tablet site and a mobile site (Zhang, 2013: 5).
2.6 Web Site Design Method (WSDM)
Pada penulisan skripsi ini penulis menggunakan metode pengembangan
Web Site Design Method (WSDM) yang dikembangkan oleh De Troyer dan Leune
pada 1998, WSDM adalah pendekatan yang terpusat pada pengguna untuk
pengembangan situs web, yaitu model-model aplikasi yang berdasarkan pada
kebutuhan infonnasi dari kelompok pengguna (Simarmata, 20 I 0: 217). Proses
pengembangan ini terbagi menjadi lima fase, digambarkan dalam gambar 2.1:
!nforrna!Joo MOOeling
Au-dim1ce Modclilng
Audience ClassiflcstiOn
Audience Class c11aractartzMion
Conceptual Oel!.ign
Funct\ooa! Modeling )
~---~
lmpfernltt'ltaUon dfl£>1gn
lmplement.atlan
Naviga!!onal IJeS!g._ti
LC<,JVC&l DatfiW5e De Sign
Gambar 2.1 Konsep Web Site Design Method (WSDM)
(De Troyer, Casteleyn. The Conference Review System with WSDM)
1. Pernyataan Misi
20
Fase ini mendefiniskan pernyataan misi dari website yang akan
dibuat. Pernyataan misi ini hams menjawab beberapa pertanyaan yaitu:
apakah tujuan dari website, apa subyek dari website, dan siapa target
pengguna dari website.
21
2. Pemodel1111 Pe11gg111111
Pada fase ini, pengguna diklasifikasikan dan dikelompokkan dalam
kelompok kebutuhan sistem sesuai dengan masing-masing kebutuhan
kelompok pengguna.
a. Klasifikasi Pengguna
Langkah ini mengidentfikasi dan mengklasifikasikan
pengguna website. Salah satu cara dengan melihat organisasi atau
proses dari website yang akan dibangun. Setiap organisasi,
lembaga, dan proses dapat dibagi dalam sejumlah kegiatan. Setiap
kegiatan melibatkan orang. Orang-orang ini adalah pengguna
potensial website.
b. Karakterisasi Pengguna
Pada fase ini memiliki dua fokus berbeda. Fokus pertama
adalah kebutuhan informasi sebagai persyaratan kelas pengguna
yang berbeda. Semua pengguna dari kelas pengguna berpotensi
memiliki kebutuhan informasi yang sama. Namun, pengguna dalam
kelas pengguna tertentu mungkin berbeda tentang bagaimana
informasi harus disajikan kepada mereka. Fokus kedua adalah
karakteristik dari kelas pengguna. Karakteristik ini akan
mengarahkan bagaimana informasi harus disajikan untuk kelas
pengguna tertentu, beberapa contoh karakteristik pengguna adalah:
tingkat pengalaman dengan situs web sebelumnya, frekuensi
penggunaan internet, dan lainnya.
22
3. Desain Konseptnal
Dalam fase ini, diagram kelas didesain untuk mewakili model statis
sistem dalam model navigasional untuk mewakili kemungkinan dari
navigasi. Fase ini terdiri dari dua sub-tahap, pemodelan objek dan
desain navigasi.
a. Pemodelan Informasi
Tujuan dari tahap ini adalah untuk secara resmi memodelkan
kebutuhan informasi yang dinyatakan dalam deskripsi kelas
pengguna. Hal ini dilakukan dengan membangun (konseptual)
model obyek untuk kelas pengguna yang berbeda. Model ini
disebut Object Model Pengguna.
Sebuah object model pengguna adalah model obyek bisnis
dalam organisasi dari sudut pandang pengguna di kelas pengguna.
Sejak kelas pengguna biasanya hanya memiliki pandangan yang
terbatas pada organisasi, objek model pengguna hanya akan
menutupi bagian dari total set obyek bisnis organisasi.
b. Pemodelan Fungsi
Fase pemodelan fungsi menjabarkan dalam persyaratan yang
lebih mendasar dari fungsional website. Fase ini melibatkan
komponen dari website yang memiliki fungsi untuk digambarkan
bagaimana fungsi tersebut bekerja.
26
2. Class Diagram
Class Diagram menggambarkan struktur objek sistem. Diagram ini
menunjukan kelas objek yang menyusun sistem dan juga hubungan
antara kelas objek tersebut (Whitten, 2007: 393). Contoh class
diagram menurut Jeffrey L. Whitten:
kelas_ 1 I kelas_2 I
kelas_3 kelas_ 4
Gambar 2.3 Contoh Class Diagram
3. Sequence Diagram
Sequence Diagram menggambarkan dengan sangat detail bagaimana
sebuah objek berinteraksi san1 sama lain sepanjang wakn1. Diagram
ini memodelkan logika sebuah use case dengan cara
menggambarkan interaksi pesan di antara objek-objek dalam
rangkaian waktu (Whitten, 2007: 393). Contoh sequence diagram
menurut Jeffrey L. Whitten:
processor
1: mengirim pesan
~: mengirim pesan batasan n ---------Lrl
I I I I I
Gambar 2.4 Contoh Sequence Diagram.
BAB III
METODOLOGI PENELITIAN
Pada penulisan skripsi ini, penulis menggunakan dua metode dalam
melaksanakan penelitian, yaitu metode pengumpulan data dan metode Web Site
Design Method (WSDM).
3.1 Metode Pengompolan Data
3.1.1
3.1.1.1
Data Primer
Wawancara
Pada tahap wawancara penulis mengumpulkan informasi
mengenai kondisi langsung website VIN Syarif Hidayatullah Jakarta saat ini dari
sudut pandang pihak pengelola yaitu Pusat Teknologi Informasi dan Pangkalan
Data VIN SyarifHidayatullah Jakarta (PVSTIPANDA). Selain itu untuk menggali
informasi mengenai kebutuhan untuk pengembangan website ke depan, serta
pendapat mereka mengenai teknologi responsive web design.
3.1.1.2 Observasi
Pada tahap observasi penulis mengumpulkan informasi mengenai
statistik yang ada pada website VIN Syarif Hidayatullah sejak I Januari 2014
hingga 17 Februari 2014. Bertujuan untuk mengetahui berbagai jenis perangkat,
ukuran resolusi layar, browser, dan durasi akses website. Selain itu, untuk
mendapatkan data pendukung lainnya seperti pengguna-pengguna yang berperan
dalam website VIN Syarif Hidayatullah.
3.1.2
3.1.2.1
Data Sekunder
Studi Pnstakll
28
Berdasarkan studi pustaka pada penelitian sejenis, penulis
melakukan analisis pribadi sehingga disimpulkan kelebihan dan kekurangan dari
penelitian sejenis untuk dikembangkan oleh penulis, yaitu:
a. Web Responsive Design Untuk Situs Berita Menggunakan
Framework Codeigniter (Agus Rahmat Herbowo, 2012).
Fokus Kelebihan Keknrangan
Pengembangan
Fitur dan konten a Menggunakan a Menggunakan
website lebih framework yang framework untuk
lengkap dan bukan untuk tamp ii an
informatif. tampilan website responsive web
responsive web design
design. b. Menggunakan
b. Tidak menggunakan metodologi untuk
metodologi untuk pembuatan
pembuatan desain tampilan website
website
b. Responsive Website Design for First Unitarian Church and Louis
Kahn. (Chen Zhang, 2013).
Fokus Kelebihan Kekurangan
Pengembangan
F okus mendalam Tidak membahas fitur a Fokus pada
pada proses desain dan fungsi website tampilan.
dari website (User secara keseluruhan, b. Membahas
Experience). hanya pada tampilannya tampilan dan fungsi
saja dari website.
29
3.2 Metode Web Site Design Method (WSDM)
Pada proses pembuatan website untuk penulisan skripsi ini, penulis
menggunakan metode Web Site Design Method (WSDM). Pendekatan dengan
metodologi Web Site Design Method lebih berorientasi pada pendekatan berbasis
pengguna, dimana yang diutamakan adalah kebutuhan pengguna akan
kebergunaan website sehingga tercapai kebergunaan website bagi pengguna secara
maksimal. Teknologi Responsive Web Design berfungsi untuk mampu mengenali
resolusi layar yang digunakan pengguna kemudian menanggapinya dengan
menghadirkan tampilan website yang memiliki bentuk, ukuran, dan komposisi
yang proporsional dengan resolusi layar pengguna.
Web Site Design Method yang digunakan penulis memiliki tahapan
tahapan berikut:
3.2.1 Pernyataan Misi
Pada fase ini penulis melakukan kegiatan dengan mengumpulkan
informasi berupa tujuan dan maksud dari UIN Syarif Hidayatullah Jakarta.
Informasi yang penulis dapatkan berasal dari Buku Pedoman Akademik
Universitas Tahun 2010-2011. Selain itu, penulis melakukan observasi di Pusat
Teknologi Infonnasi dan Pangkalan Data (PUSTIPANDA) UIN Syarif
Hidayatullah Jakarta selaku pihak pengelola website UIN Syarif Hldayatullah
Jakruia dengan basil berupa statistik data mengenai website (www.uinjkt.ac.icl)
selama I Januari 2014 - 17 Februari 2014 seputar resolusi layar, browser yang
digunakan, jenis perangkat mobile yang digunakan, dan durasi kunjungan,
30
Pemyataan misi tertulis pada Tabel 4.5 Pemyataan misi website UIN Syarif
Hidayatullah Jakarta (lihat subbab 4.1.1 ).
3.2.2 Pempdellm Penggnna
Pada fase ini penulis mengumpulkan informasi mengenai pengguna
potensial website berdasarkan kebutuhan masing-masing pengguna untuk dapat
dikelompokkan (lihat subbab 4.1.2).
3.2.2.1 Klasifikasi Penggnna
Pada fase ini penulis mengelompokkan pengguna kedalam
beberapa kelompok dan mengidentifikasi berdasarkan tujuan masing-masing
pengguna dalam penggunaan website UIN Syarif Hidayatullah Jakarta yang
tercantum dalam Use case diagram website UIN SyarifHidayatullah Jakarta (lihat
subbab 4.1.2.1 dan gambar 4.2).
3.2.2.2 Karakterisasi Penggnna
Pada fase ini penulis memberikan pra syarat pengguna yang dapat
menggunakan website dengan maksimal. Hal ini didasari oleh masing-masing
pengguna memiliki kebutuhan yang berbeda terhadap website, namun perlu
adanya penyetaraan terhadap syarat apa yang diperlukan untuk penggunaan
website UIN SyarifHidayatullah Jakarta (lihat subbab 4.1.2.2).
31
3.2.3 Desain Konseptual
Pada fase ini penulis mulai merancang website yang akan dibuat,
berdasarkan infonnasi pada fase-fase sebelumnya. Perancangan mencakup
perancangan data, perancangan fungsi, dan navigasi (lihat subbab 4.1.3).
3.2.3.1 Pemodelan Informasi
Pada fase ini, penulis menitik beratkan pada perangcangan desain
yang berkaitan dengan data dan infonnasi pada website. Dalam fase ini penulis
merancang dalam bentuk basis data dalam bentuk class diagram pada Gambar 4.3
Class Diagram Website UIN SyarifHidayatullah Jakarta (lihat subbab 4.1.3.1).
3.2.3.2 Pemodelan Fm1gsi
Pada fase ini, penulis merancang tentang fungsi-fungsi apa yang
disediakan oleh website dan bagaimana tahapan pada saat sistem bekerja Model
dari fungsi yang dirancang penulis tuangkan dalam bentuk sequence diagram.
Adapun tahapan tersebut dijelaskan pada :
a. Sequence Diagram Akses Website (Gambar 4.4)
b. Sequence Diagram Login Administrator (Gambar 4.5)
c. Sequence Diagram Manage Berita (Gambar 4.6)
d. Sequence Diagram Manage Artikel (Gambar 4.7)
e. Sequence Diagram Manage Kolom Rektor (Gambar 4.8)
f. Sequence Diagram Manage Halaman Kategori (Gambar 4.9)
3.2.3.3 Desain Navigasi
Pada fase desain navigasi, penulis menggambarkan alur navigasi
dan struktur website antar halaman UIN Syarif Hidayatullah pada saat penulisan
32
penelitian ini. Penulis menggunakan diagram dalam perancangan desain navigasi
yang tergambar pada struktur navigasi (lihat gambar 4.10).
3.2.4 Desain Implementasi
Fase desain implementasi penulis mulai melakukan implementasi atas
perancangan pada fase-fase sebelumnya ke dalam bentuk sebuah desain visual
yang hampir menyerupai bentuk, wama, dan ukuran dari wujud website yang akan
dibuat, penulis menggunakan perangkat lunak Adobe Illustrator dan Adobe
Photoshop (lihat sub bab 4.1.4).
3.2.4.1 Desain Halaman
Pada fase desain halaman, penulis mendesain wujud website yang
akan dibuat dalam bentuk desain sketsa dengan bantuan perangkat lunak pengolah
dan pembuat gambar (lihat sub bab 4.1.4.1 ). Hasil perancangan desain
implementasi ada pada gambar yaitu:
1. Rancangan Halaman Home Untuk Large Device (Resolusi
2:1200px) (Gambar 4.11)
2. Rancangan Halaman Home Untuk Medium Device (Resolusi
2:992px) (Gambar 4.12)
3. Rancangan Halaman Home Untuk Small Device (Resolusi
2:768px) (Gambar 4.13)
4. Rancangan Halaman Home Untuk Extra Small Device
(Resolusi :5768px). A Untuk Kondisi Accordion Tertutup, B
Untuk Kondisi Accordion Terbuka (Gambar 4.14)
3.2.4.2
33
5. Rancangan Halaman Detail Untuk Large Device (Resolusi
2:1200px) (Gambar 4.15)
6. Rancangan Halaman Detail Untuk Medium Device (Resolusi
2:992px) (Gambar 4.16)
7. Rancangan Halaman Detail Untuk Small Device (Resolusi
2:768px) (Gambar 4.17)
8. Rancangan Halaman Detail Untuk Extra Small Device
(Resolusi :S768px). A Untuk Kondisi Accordion Tertutup, B
Untuk Kondisi Accordion Terbuka (Gambar 4.18)
Desain Presentasi
Pada fase desain presentasi, penulis mulai menerapkan desain
sebuah halaman website yang akan dibuat lengkap beserta bentuk, wama, dan
ukuran yang akan dibuat, sehingga wujud dari website yang akan tampak dengan
bantuan perangkat lunak pengolah gambar. Adapun hasilnya terdapat pada
gambar rancangan yaitu:
1. Halaman Home Untuk Large Device (Resolusi 2:1200px )
(Gambar 4.19)
2. Halaman Home Untuk Medium Device (Resolusi 2:992px)
(Gambar 4.20)
3. Halaman Home Untuk Small Device (Resolusi 2:768px)
(Gambar 4.21)
34
4. Halaman Home Untuk Extra Small Device (Resolusi 968px)
(Gambar 4.22)
5. Halaman Home Untuk Extra Small Device Dengan Bagian
Atas Accordion Terbuka (Gambar 4.23)
3.2.5 Implementasi
Pada fase implementasi penulis mulai mewujudkan desain pada fase
fase sebelumnya ke dalam bahasa pemrograman yang dapat dikenali oleh
komputer, penulis menggunakan bahasa pemrograman yang sama dengan yang
digunakanframework Bootstrap yaitu HTML5, CSS3, dan JQuery (lihat lampiran
2) rekam gambar hasil terdapat pada:
I. Halaman Web Bagian Atas (Gambar 4.24)
2. Halaman Web Bagian Tengah (Gambar 4.25)
3. Halaman Web Bagian Bawah (Gambar 4.26)
4. Halaman Kategori Bagian Atas (Gambar 4.27)
5. Halaman Kategori Bagian Bawah (Gambar 4.28)
3.2.6 Pengujian
Pada penulisan skripsi ini penulis melakukan modifikasi pada metode
Web Site Design Method (WSDM) dengan menambahkan fase pengujian, ha! ini
penulis anggap perlu sebagai tahapan pembuktian apakah teknologi responsive
web design mampu menjawab permasalahan yang ada pada penjelasan di Bab I
(lihat subbab 4.2).
3.4 Kerangka Berfikir
WEB SITE DESIGN METHOD (WSDM)
MULAI
PERNYATAAN MISI
PEMODELAN PENGGUNA
DESAIN KONSEPTUAL .
DESAIN IMPLEMENTASI
IMPLEMENTASI
PENGUJIAN
I SELE SAi l Gambar 3 .2 Kerangkar Berfikir
36
BAB IV
HASIL DAN PEMBAHASAN
4.1 Web Site Design Method (WSDM)
Pada bab ini akan menjelaskan tahapan-tahapan pembuatan website.
Penulis menggunakan metodologi Web Site Design Method menurut De Troyer
dan Leune, dengan tahapan-tahapan yaitu pemodelan pengguna, desain
konseptual, desain navigasi, desain implementasi, dan implementasi.
4.1.1 Pemyataan Misi
Tahap pertama pada metodologi WSDM adalah mendefiniskan
pernyataan misi dari website yang akan dibuat. Pernyataan misi ini harus
menjawab beberapa pertanyaan yaitu: apakah tujuan dari website, apa subyek dari
website, dan siapa target pengguna dari website.
Berdasarkan basil observasi didapatkan informasi berupa data
kunjungan website Universitas Islam Negeri Syarif Hidayatullah Jakarta
berdasarkan kategori resolusi layar, browser yang digunakan, jenis perangkat
mobile yang digunakan, dan lama waktu kunjungan, pengambilan data
menggunakan pelacak statistik website, StatCounter.com, data yang digunakan
berdasarkan waktu terhitung dari 1 Januari 2014 sampai 17 Februari 2014.
38
Tabel 4.1 Resolusi Layar Pengguna Website UIN SyarifHidayatullah Jakarta
(Sumber: Data Primer PUSTIPANDA, 2014)
NO RESOLUTION PERCENTAGE HITS
I 1366x768 28.72% 137
2 1024x768 14.47% 69
3 1024x600 5.24% 25
4 1360x768 3.56% 17
5 800x600 3.35% 16
6 480x800 2.94% 14
7 320x240 2.52% 12
8 1600x900 2.31% 11 9 218xl89 2.31% II
10 720x1280 2.31% 11
11 800x1280 2.10% 10
12 320x534 2.10% 10
13 1920xl080 2.10% 10 14 1280xl024 1.89% 9
15 320x480 1.68% 8
16 1280x800 1.68% 8
17 1400xl050 1.47% 7 18 1280x768 1.26% 6
19 480x854 1.05% 5 20 600xl024 1.05% 5
21 1152x864 1.05% 5 22 300x371 1.05% 5
23 601x962 0.84% 4
24 984xl050 0.84% 4
25 l76x220 0.63% 3 26 540x960 0.63% ' J
27 1440x900 0.63% 3 28 240x382 0.63% 3
29 240x320 0.63% ' J
30 500xl71 0.63% 3 31 480x360 0.63% 3 32 320x568 0.63% 3 33 320x218 0.42% 2
34 300x372 0.42% 2
35 800x5000 0.42% 2
36 500x738 0.42% 2
39
37 240x274 0.42% 2
38 228x240 0.42% 2
39 343x571 0.42% 2
40 984xl233 0.21% l
41 1280x720 0.21% 1
42 984xl455 0.21% l
43 640x480 0.21% l
44 234x320 0.21% I
45 246x260 0.21% I
46 1024x576 0.21% l 47 290x305 0.21% I
48 314x220 0.21% l
49 282x371 0.21% I
50 314x200 0.21% l 51 330x549 0.21% 1 52 720xll84 0.21% I
53 984xl384 0.21% 1 54 480x762 0.21% I
55 240x229 0.21% 1
56 480x640 0.21% I
57 480x329 0.21% I
58 246x295 0.21% I
59 800x983 0.21% I
Tabel 4.1 menggambarkan pengguna website UIN Syarif Hidayatullah saat ini
menggunakan perangkat dengan resolusi layar yang sangat beragam, terdapat 59
jenis ukuran resolusi layar yang digunakan dengan total kunjungan 477 kali.
Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta (Sumber:
Data Primer PUS TIP ANDA, 2014)
NO BROWSER PERCENTAGE IDTS
l Cbrome32.0 17.20% 86
2 Firefox 26.0 13.80% 69
3 Firefox 27.0 10.60% 53
40
4 Android 0 9.20% 46
5 OperaO 8.60% 43
6 BlackBerry 0 6.00% 30
7 Chrome for Android 2.40% 12
8 Chrome 7.0 U!O% 9
9 iPhoneO 1.60% 8
10 Android 0 1.60% 8
11 UC Browser 8.6 1.60% 8
12 ms.o l.60% 8
13 Firefox 12.0 1.60% 8
14 Firefox 3.6 1.40% 7
15 Chrome for Androi 1.40% 7
Hi Firefox 24.0 1.20% 6
17 Google Wireless Transcoder 0 1.20% 6
18 Firefox 18.0 l.20% 6
19 Firefox 19.0 l.20% 6
20 Chrome 31.0 l.00% 5
21 NokiaO 1.00% 5
22 Chrome for Android 0.80% 4
23 Firefox 28.0 0.80% 4
24 Firefox 16.0 0.80% 4
25 Firefox4.0 0.60% 0 ~
26 Firefox 8.0 0.60% 0 ~
27 Firefox 13.0 0.60% 3
28 Chrome34.0 0.60% 3
29 Chrome5.0 0.60% 3
30 Chrome ll.O 0.60% 3
31 Firefox 25.0 0.60% 3
32 UC Browser 9.0 0.60% 3
33 Facebook Bot 0 0.40% 2
34 Firefox 9.0 0.40% 2
35 Cln·ome 25.0 0.40% 2
36 Firefox 17.0 0.40% 2
41
37 Chrome29.0 0.40% 2
38 IEMobile 10.0 0.40% 2
39 OperaO 0.40% 2
40 Firefox 10.0 0.40% 2
41 Baidu Explorer 1.0 0.20% 1
42 Firefox 11.0 0.20% I
43 Safari 5.1 0.20% l
44 Chrome 13.0 0.20% I
45 Firefox 21.0 0.20% I
46 Firefox 15 .0 0.20% l
47 Firefox 26.0 0.20% l
48 Firefox 14.0 0.20% I
49 Firefox 23.0 0.20% 1
50 Opera 12.00 0.20% I
51 Firefox 3.5 0.20% 1
52 Firefox 3.0 0.20% I
(Keterangan: Yang d1cetak tebal adalah browser yang sudah mendukung HTML5)
Tabel 4.2 Sebanyak dari 500 kali kunjungan terdapat 280 kmtjungan dengan
menggunakan browser yang mendukung HTML5 (Google Chrome dari versi 6
hingga terbaru, Firefox dari versi 16 hingga terbaru, Internet Explorer versi 8
hingga terbaru).
Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN Syarif Hidayatullah
Jakarta (Sumber: Data Primer PUSTIPANDA, 2014)
NO DEVICE PERCENTAGE HITS
I Samsung Galaxy Y 9.79% 14
2 Samsung Galaxy Tab 3 8.0 9.09% 13
3 Samsung Galaxy Note II 7.69% 11
4 RIM BlackBerry 9320 6.99% 10
42
5 Apple iPhone 6.29% 9
6 NokiaC3-00 5.59% 8
7 Samsung Galaxy Tab 4.90% 7
8 Samsung 4.20% 6
9 RIM BlackBerry 9300 4.20% 6
IO RIM BlackBerry 9700 4.20% 6
II Samsung Galaxy Grand 3.50% 5
12 Nokia 2.80% 4
13 Samsung Galaxy Young 2.80% 4
14 Samsung Galaxy Tab 7.7 2.10% 3
15 Sony Ericsson K610i 2.10% 3
16 RIM BlackBerry 2.10% 0 , 17 Samsung Galaxy Ace 2 2.10% 3
18 Nokia Asha 311 1.40% 2
19 Lenovo 1.40% 2
20 RIM BlackBerry 8520 1.40% 2
21 RIM BlackBerry 8900 0.70% I
22 Samsung Galaxy Core 0.70% I
23 Samsung Galaxy S Duos 0.70% I
24 LG Optimus Hub 0.70% I
25 RIM BlackBerry 9220 0.70% I
26 Sony Ericsson Xperia miro 0.70% I
27 Samsung Galaxy Mini 0.70% I
28 RIM BlackBerry 9900 0.70% I
29 RIM BlackBerry 9810 0.70% 1
30 Samsung Galaxy Ace II 0.70% 1
31 Nokia Asha 308 0.70% I
32 Sony Ericsson El6 0.70% I
33 Sony Ericsson Xperia V 0.70% I
34 Samsung Galaxy Pocket 0.70% I
35 NokiaE71 0.70% I
36 RIM BlackBerry 9550 0.70% I
37 Nokia 2700 classic 0.70% I
43
38 Samsung Galaxy Note 8 0.70% I
39 NokiaX2-0l 0.70% I
40 NokiaX2-02 0.70% I
41 Nokia6300 0.70% I
42 RIM BlackBerry 9360 0.70% I
Tabel 4.3 memberikan informasi bahwa ada 42 jenis perangkat keras yang
digunakan pengguna dengan total kunjungan 143 kunjungan dengan perangkat
mobile.
Tabel 4.4 Durasi Pengguna Website UIN SyarifHidayatullah Jakarta (Sumber:
Data Primer PUSTIPANDA, 2014)
NO HITS VISIT LENGTH
l 167 Less than 5 secs
2 11 From 5 secs to 30 secs
3 37 From 30 secs to 5 mins
4 24 From 5 mins to 20 mins
5 12 From 20 mins to an hour
6 4 Longer than an hour
Tabel 4.4 memberikan informasi bahwa sebagian besar pengguna website UIN
Syarif Hidayatullah Jakarta, hanya membuka website dengan durasi kurang dari 5
detik.
Kesimpulan:
a. Dari 59 jenis ukuran resolusi layar, 42 jenis diantaranya adalah
perangkat mobile. Sehingga sebagian besar website UIN Syarif
Hidayatullah diakses dengan ukuran resolusi layar yang unik.
Perbandingan Perangkat Yang Digunakan Untuk Akses Website UIN Syarif Hidayatullah Jakarta
"Perangkat Desktop (19)
Perangkat Mobile (42)
44
Gambar 4.1 Perbandingan perangkat yang digunakan untuk akses
website VIN Syarif Hidayatullah Jakarta.
b. Sebagian besar kunjungan dengan browser mendukung HTML 5
sehingga dapat menjalankan responsive web design (label 4.2).
c. Durasi kunjungan rendah.
Berdasarkan has ii wawancara pada 21 Juli 2014 bertempat di Pusat
Teknologi Informasi dan Pangkalan Data (PVSTIPANDA) VIN Syarif
Hidayatullah Jakarta, pihak PVSTIPANDA yang diwakili oleh Abdullah, S.Kom
yang menjabat sebagai !coordinator Divisi Support. Dari basil wawancara
didapatkan infonnasi bahwa website Vniversitas Islam Negeri Syarif Hidayatullah
Jakarta saat ini belum menggunakan teknologi responsive web design. Kedepan
VIN Syarif Hidayatullah berencana untuk mengembangkan website dengan
teknologi responsive web design.
Pemyataan misi dari website VIN Syarif Hidayatullah penulis
menggunakan referensi dari Pedoman Akademik Program Strata 1 VIN Syarif
Hidayatullah Jakarta 20I0/2011 "Dalam era globalisasi, website merupakan media
infmmasi yang penting. Guna mendukung kelancaran infonnasi dan komunikasi
45
diantara sivitas akademika dengan seluruh unit yang ada di lingkungan UIN Syarif
Hidayatullah Jakarta." (Tim Penyusun Pedoman Akademik UIN Syarif
Hidayatullah Jakarta, 2010: 23) Sehingga didapat:
4.1.2
4.1.2.1
Tabel 4.5 Pemyataan misi website VIN Syarif Hidayatullah Jakarta
Tujuan Mendukung kelancaran informasi dan komunikasi
Subyek Media informasi
Target Pengguna Sivitas akademika, unit-unit UIN SyarifHidayatullah
Jakarta
Pemodelan Penggnna
Klasifikasi Pengguna
Pada website UIN Syarif Hidayatullah Jakarta, dari hasil
observasi didapatkan keterangan bahwa pengaturan aktivitas website dilakukan
oleh satu pengguna, yaitu administrator, tugas dari administrator secara umum
dapat dikategorikan ke dalam tiga jenis, yaitu:
I. Input berita terbaru
2. Input informasi slideshow
3. Melakukan update atau perubahan pada informasi statis yang
ada pada website.
Berdasarkan hasil observasi, untuk pengguna (pengunjung)
website hanya memiliki aktivitas fungsi menerima informasi atau pencarian
informasi mengenai UIN Syarif Hidayatullah Jakarta. Fungsi untuk administrator
dapat melakukan login pada halaman administrator, manage berita, manage
artikel, manage kolom rektor, dan manage halaman kategori. Sistem yang
46
diterapkan saat ini belum memungkinkan pengguna melakukan aktivitas yang
dapat berpengaruh terhadap website.
Pengguna-
Website UIN Syarlf Hidayatu!!ah Jakarta
Login
Manage Halan1an Kategori
Gambar 4.2 Use case diagram website UIN SyarifHidayatullah Jakarta
Tabel 4.6 Deskripsi use case akses website
Nama Use Case Mengakses website
Aktor Pengguna (User)
Deskripsi: Use case ini menggambarkan proses untuk menampilkan website
sesuai dengan ukuran dan resolusi layar pengguna.
Aktivitas yang Langkab I : Pengguna mengakses halaman website
dijalankan : Langkah 2 : Sistem menampilkan halaman website dengan
tampilan disesuaikan dengan ukuran layar dan resolusi layar
perangkat yang digunakan
Postcondition : Tampilan website ditampilkan dalam penyesuaian dengan ukuran
dan resolusi layar pengguna
47
Tabel 4.7 Deskripsi use case login administrator
Nama Use Case Login Administrator
Aktor Administrator
Deskripsi: Use case ini menggambarkan proses masuk administrator ke dalam
sistem website
Aktivitas yang Langkah I : Aktor mengakses halaman login
dijalankan: Langkah 2 : Aktor memasukkan usemame dan password
Langkah 3 : Sistem melakukan pengecekan kesamaan username
dan password
Langkah 4 : Apabila username dan password sama maka sistem
merespon dengan menampilkan halaman utama administrator,
apabila usemame dan password berbeda maka sistem akan
meresopon dengan mengaral1kan ke halaman login dengan
peringatan.
Postcondition : Aktor dapat masuk ke dalam halaman utama sistem administrator
Tabel 4.8 Deskripsi use case manage berita
Nama Use Case Manage berita yang ditampilkan di website
A kt or Administrator
Deskripsi: Use case ini menggambarkan proses aktor memperbaharui
(menambah, edit, dan hapus) berita yang ditampilkan pada website
Aktivitas yang Langkah I : Aktor mengalcses halaman utama administrator
dijalankan : Langkah 2 : Aktor memilih pilihan "berita"
Langkah 3 : Aktor menambahkan berita baru pada kolom tambah
49
Tabel 4.10 Deskripsi use case manage kolom rektor
Nama Use Case Manage kolom rektor yaog ditampilkao di website
A kt or Administrator
Deskripsi : Use case ini menggambarkao proses aktor memperbaharui
(menambah, edit, dao hapus) kolom rektor yang ditampilkan pada
website
Aktivitas yaog Laogkah I : Aktor mengakses halamao utama administrator
dijalaokao : Laogkah 2 : Aktor memilih pilihan "kolom rektor"
Laogkah 3 : Aktor menambahkan berita baru pada kolom tambah
kolom rektor
Langkah 4 : Aktor dapat menghapus kolom rektor
Laogkah 5 : Aktor dapat menggubah kolom rektor
Langkah 6 : Sistem merespon dengao menampilkao, menghapus,
dao memberikao akses edit kolom rektor.
Postcondition : Kolom rektor baru yaog ditampilkao pada website.
Tabel 4.11 Deskripsi use case manage halaman kategori
Nama Use Case Manage halaomn kategori
Aktor Administrator
Deskripsi: Use case ini menggambarkan proses memperbaharui konten yaog
ada pada setiap halamao kategori yaog ada pada website
Aktivitas yaog Laogkah I : Aktor mengakses halamao utama administrator
dijalaokao : Langkah 2 : Aktor memilih pilihao kategori halaman yaog akao
diperbaharui
50
Langkah 3 : Aktor memperbaharui halaman kategori dengan
menambah halaman
Langkal1 4 : Aktor memperbaharui halaman kategori dengan
menggubah halaman
Langkah 5 : Aktor dapat menghapus halan1an kategori
Langlah 6 : Sistem merespon dengan menampilkan halaman
kategori dengan konten terbaru
Postcondition : Halaman kategori website ditampilkan dengan konten terbaru
Para aktor yaitu secara umum pengguna dan administrator yang
terlibat dalam website perlu dijabarkan kembali, penjabaran tersebut untuk
mengetahui kebutuhan masing-masing. Aktor pengguna dalam website VIN
Syarif Hidayatullah Jakarta perlu dijabarkan karena pengguna website UIN Syarif
Hidayatullah Jakarta memiliki beragam kepentingan dan kebutuhan. Kita dapat
merumuskan sebagai berikut:
a. Admin
Kebutuhan fungsi:
Mahasiswa terdaftar
Calon mahasiswa
Mantan mahasiswa (alumni)
Do sen
Karyawan
Peneliti
I. Memasukkan berita terbaru
2. Memasukkan artikel terbaru
3. Memasukkan kolom rektor terbaru
4. Mengubah konten pada halaman website
Kebutuhan infonnasi:
1. Informasi berita
2. Infonnasi artikel
3. Infonnasi kolom rektor
4. Informasi konten website
5. Username danpassword
b. Pengguna (Mahasiswa Terdaftar)
Kebutuhan fi.mgsi:
1. Pencarian infonnasi spesifik tentang perkuliahan
2. Pencarian informasi untuk beasiswa/bantuan pendidikan
3. Pencarian informasi tentang kegiatan, budaya, dan info seputar
kampus
4. Pencarian infonnasi tentang penelitian
51
5. Pencarian informasi tentang infonnasi akademi, gelar, dan program
lainnya
Kebutuhan informasi:
1. Infonnasi sistem perkuliahan
2. Infonnasi beasiswa dan bantuan pendidikan
3. Infonnasi budaya dan kegiatan kampus
4. Infonnasi penelitian
c. Pengguna (Caton Mahasiswa)
I. Kebutuhan fungsi:
2. Memeriksa informasi tentang program studi yang ditawarkan
3. Memeriksa informasi persyaratan program studi
4. Mencari informasi umum seputar universitas
5. Mencari informasi lokasi kampus dan sekitamya
6. Mencari informasi mengenai bantuan pendidikan dan beasiswa
7. Mencari informasi tentang budaya, fasilitas, dan kegiatan
universitas
Kebutuhan infmmasi:
I. lnformasi program studi
2. Informasi umum seputar universitas
3. lnformasi akses dan lokasi kampus
4. lnformasi beasiswa
d. Pengguna (Mantan Mahasiswa (Alumni))
Kebutuhan fungsi:
I. Mencari informasi program magister dan doctor
2. Mencari informasi organisasi alumni
3. Mencari informasi agenda kegiatan universitas
Kebutuhan informasi:
I. Informasi program studi magister dan doctor
2. Informasi organisasi alumni
52
54
g. Pengguna (Peneliti)
Kebutuhan fungsi:
I. Mencari informasi tentang penelitian
2. Mencari informasi bantuan dana pendidikan dan penelitian
3. Mencari informasi perpustakaan universitas
Kebutuhan informasi:
I. lnformasi penelitian
2. Informasi bantuan dana pendidikan dan penelitian
3. Informasi tentang perpustakaan
4.1.2.2 Karakterisasi Pengguna
Semua kelas pengguna memiliki potensi kebutuhan fungsional
dan informasi yang sama. Tetapi memiliki perbedaan pada bagaimana informasi
tersebut disajikan karena kebutuhan usability yang berbeda. Beberapa
karakteristik pengguna yang dapat diambil adalah tingkat pengalaman dengan
website pada umumnya, frekuensi penggunaan website, penggunaan bahasa
pengantar, kemampuan intelektual, usia, pendapatan dan gaya hidup. Sehingga
karakteristik ini akan diterjemahkan kedalam kebutuhan usability dan diterapkan
pada fase implementasi pada panduan desain secara "tampilan dan rasa" seperti
pemilihan wama, font yang digunakan, desain gratis yang digunakan, dan lain
sebagainya (De Troyer, Casteleyn, 200 I: 9).
56
Gambar 4.3 Class Diagram Website UIN SyarifHidayatullah Jakarta
4.1.3.2 Pemodelan Fungsi
Pemodelan fungsi memiliki langkah yang mirip dengan tahap
pemodelan informasi, hanya pada tahap ini lebih berfokus pada pemodelan
persyaratan fungsional. Dalam penelitian kali ini penulis menggunakan sequence
diagram untuk menggambarkan proses pemodelan fungsi pada website, yang
berfungsi untuk menggambarkan urutan kegiatan yang terjadi dalam fungsi
website tersebut.
1. Sequence alcses website
~lenga~s..:s V\'e~~_: -~ 'l I I 2 Mcndolcks1 rcso!usi lny?rl I LJ<······························U
r- 3 Mcnentukan style ]
4 Menampilkan tamp11an msponsJVe I ~--- ---- ---- ---- - -- -----------------~
Gambar 4.4 Sequence Diagram Akses Website
57
Gambar 4.4 menggambarkan sequence diagram akses website oleh
pengguna. Pengguna mengakses website kemudian sistem akan
menampilkan tampilan responsif yang akan menyesuaikan dengan
ukuran dan resolusi layar pada perangkat keras yang digunalcan
pengguna untuk mengakses website.
2. Sequence login administrator
~l I Database
5 True/false io9inO
Gambar 4.5 Sequence Diagram Login Administrator
58
Gambar 4.5 menjelaskan sequence diagram login satu aktor yaitu
administrator. Aktor yang ingin mengakses halaman utama sistem
terlebih dahulu mengakses halaman login. Aktor melakukan input
username dan password. Sistem akan memproses username dan
password yang dimasukkan. Sistem melakukan pengecekan pada
database. Jika sistem menemukan username dan password yang ada
pada database sama dengan username dan password yang dimasukkan
oleh aktor maka sistem akan mengarahkan aktor ke halaman utama
sistem, namun jika sistem tidak menemukan username dan password
yang sama dengan username dan password yang dimasukkan maka
sistem akan mengarahkan aktor ke halaman login kembali.
3. Sequence manage Berita
Gambar 4.6 Sequence Diagram Manage Berita
59
Gambar 4.6 menjelaskan sequence diagram pada manage berita. Setelah
aktor mengakses halaman ntama, aktor memilih menu berita. Pada
halaman berita aktor dapat melakukan beberapa fungsi yaitu, tambah,
ubah, dan hapus data berita. Segala fungsi tersebut akan tersimpan di
database tabel berita.
4. Sequence manage Artikel
- --> 11....- 15 Menamp1lkan data artikel LJ"-------·----------------···-- .. .--
13 S1mpan perubahan u >---------------> 14 Data berhas1! d1ubah ... ._ .. __________ "' _______________ _
Gambar 4.7 Sequence Diagram Manage Artikel
Gambar 4.7 menjelaskan sequence diagram pada manage artikel.
Setelah aktor mengakses halaman utama, aktor memilih menu artikel.
Pada halaman artikel aktor dapat melakukan beberapa fungsi yaitu,
tambah, ubah, dan hapus data artikel. Segala fungsi tersebut akan
tersimpan di database tabel artikel.
5. Sequence manage Kolom Rektor
1\dmin1stmtot Kotom Rektor ---~-~
' '
; t Mcm•h" mc"u ho lorn rnhlo1 >[] 2 "':gl>cbocgkonkedotobo~aj
~ ~ _ ~ ~ __ ~ ~ !:'l;:~a!!'E1!~?-~~3:~~ -~c:~o~!~k_l_o!. -· _, ...... __ ·--~ -0
D' -~-Tamba!i ko_iom rnktor ~' -~-Simpa~~~--~oloi_:i~Ktor ~ r 6 Data bamas11 d1s1moan
~---·--·········--················ D 7 Menamp1!kan da!a ko:om mktor --------------------------~--------
' ' ' ' '
12. Hapus kclom rektor
·> ~113 Menampi1kari dala kolom rektor
Lr--:-------------.--------------------
9 S1mpan perubahan ~ 10 Data borhas'I d:ubah -----------------------------------
13 $1rnpnn parubahnn u >---------::> 14 Data berhas:I d1ubah
--------------------------------'
' '
Gambar 4.8 Sequence Diagram Manage Kolom Rektor
60
Gambar 4.8 menjelaskan sequence diagram pada manage kolom rektor.
Setelah aktor mengakses halaman utama, aktor memilih menu kolom
rektor. Pada halaman kolom rektor aktor dapat melakukan beberapa
fungsi yaitu, tambah, ubah, dan hapus data kolom rektor. Segala fungsi
tersebut akan tersimpan di database tabel kolom rektor.
62
penulisan dilakukan dan untuk menggambarkan hubungan antar halaman. Desain
navigasi website UIN Syarif Hidayatullah Jakarta:
FAKULTAS
KAU:NOER AKADEMIK
PE DOMAN AKADEM!K
~ SKS
~ DOUBLE DEGREE
·I PORTALAIS
BEASISWA
ILMUTMBIYAH DAN KEGURUAN
SYARIAHDAN HUKUM
ADAS DAN HUMAN10RA
DAKWAHDAN KOMUNJKASI
USHULLUDlN
SAJNSDAN TEKNOLOGI
EKONOM! DAN BISNJS
ILMU SOSIAL DAN ILMU POUTlK
PSIKOLOGI
ILMU KEDOKTERAN DAN KESEHATAN
Gambar 4.10 Struktur Navigasi Website UIN SyarifHidayatullah Jakarta
MAP
ALAMAT
63
4.1.4 Desain Implementasi
Pada tahap desain implementasi, struktur dan bentuk web sudah
didefinisikan agar wujud dari web tersebut sudah dapat dilihat. Tujuan agar
menciptakan tampilan yang konsisten, mudah, dan efisien. Proses desain
implementasi mempertimbangkan persyaratan kegunaan dan karakteristik
pengguna yang sudah didefinisikan.
4.1.4.1 Desain Halaman
Desain halaman adalah tahap perancangan tampilan mock up
sederhana dari tampilan website yang akan dibuat. Dalam proses ini berdasarkan
dokumentasi dari framework Bootstrap perancangan terbagi atas empat jenis
kategori resolusi layar yang akan digunakan yaitu extra small devices (<768px),
small devices (2:768px), medium devices (2:992px), dan large devices (2:1200px).
Disiui penulis membagi berdasarkan tipe halaman web yang dibuat dan
rancangannya dalam beberapa versi resolusi layar.
a. Halaman home atau index
Halaman ini adalah halaman dari website yang pertama kali akan
muncul saat website diakses, rancangan halaman ini akan terbagi
menjadi 4 jenis sesuai dengan resolusi layar.
12-_il UNIVERSITAS ISIAM UEGERI SYARlf HIDAYATUUN1 JAY.;cRTA
OERfTA
ARTIKEL
JUout./<llTIKfl.
!R"W._W<'il=><U
i"'""''°'""i KOLOM RSKTOR
~~
rnc~w"''"'-"'"""""'
~
ltili.M%U!flm
t!ili.Wfil'l.ME!M
.l'.JCll.'l.MmKB. Jtm'JL>.flTlX~L
lfl>Xil<™'! ~..Bi')
,~~ "~ o=~•D<.«.W<O."Tffi f'fC(£1'<"''"°'""'""-"'<U
FOOTER
BERITA lA!NflYA
•JUOIJL6(;1UTAWN
-JU:ll!LBflllTAWN
•JU:lUl.lllllTAWN
•JU:ll!LBSlllJ\LNN
AA.Tiffi LA!NfM
-JUOU!.AAl'!Kal..•.>U
•.!UrlULAATrl<P..1Al'I
·.lt!rlULAATIK..9.Llll'I
-J\lt:IULN!TIKB.LlllN
KOLOMl.AlllNYA
-JUout.1-N'I
•JU!H.J'.WN
·J'.Ill'J'~l.Alll
-JtroUUAlll
64
Gambar 4.11 Rancangan halaman Home untuk large device (resolusi
2:1200px)
Rancangan halaman home pada ukuran resolusi ini ditargetkan untuk
pengguna dengan perangkat seperti laptop, desktop PC, dan jenis
perangkat lain dengan resolusi 2:1200px. Pada rancangan ini selumh
komponen desain web berada pada posisi dan komposisi ukuran yang
normal.
65
lS2l I/ '-I
UNIVERS!TAS JSlAM NEGERI SYARlF HIDAYA1ULLAH JAKARTA
illlilllI.llil>~>ffliffi!1!M!!>~>~>~>
~-- .~ SLIDE SERITA U'rAMA
~ ~ BER IT A
1)(1[)(11)( BERITALAINNYA
• JUOUL SERITA LAIN
• JUOUL 6ERITA LAIN
• JUOULBERITA LAIN
- JUDUL BERITA LAIN
JU DUL SERITA JUOULBERITA JUDULBERITA
~Vi£',"{ISl!l8llt.o. PRCV!EVI ISi BEMI\ F!l!;\ll!'WISl!i€MA
[Rii.;:DMoru:) [PEAOJ.'-Ot!!: I l PEAO MOruO I
ARTIKEL
)([><][)( ARTfKEL LAINNYA
-JUOULARTIKELLAIN
- JUDULARTlKEl LAIN
• JUOULARltKa LAIN
- JUOULARTIKELLAIN
JUDULARTIKEL JUDULARTIKEL JUDULARTIKEL
PREVlEW ISIAAruEl. PflEVC'-/ISIAATlKS. Pil.EW:WISlh'UlKEI.
I =MORE] jRI'J'DMOlll<I j REAOOOi\E: I
KOLOM REKTOR
JUDUL JU DUL JUD UL KOLOM LAINNYA PilE:VlEWISIKOlO!.lfl5:rorl PRBl!EW ISi KOlOM llB{fOll ~YISIKOl.01.!REKfOll -JUOULLAIN
•JUOULLAIN
IREAfl~] ["mwit.11)fl£' ! I REAnl.\ORE I -JUOUL.L.AIN
-JUDULLAIN
.•
FOLLOW US AGENDA
11tJis SQSIAJ_ m;or~ •Nf{)RMA!ll Ms.JGE!UJ AGB!DA l~fORM!..51 ME!1GOIAI AGOIO,\ ITlfORlt..'ISI ME!JOOW AGSlW.
lN!<SO.'\)~Q!t.,
l.R1!'> §QStAl. tAE/2!(')
I oaoJl ! I 08.M. ! !Dt!M..I
FOOTER
Gambar 4.12 Rancangan halaman home untuk medium device (resolusi
2::992px)
66
Rancangan untuk medium device dengan resolusi layar 2;:992px
ditargetkan untuk pengguna yang menggunakan laptop dengan ukuran
resolusi layar rendah, netbook, dan sebagian PC tablet dengan kondisi
penggunaan landscape. Dalam rancangan ini tidak banyak yang
berubah pada tampilan web, hanya ruang kosong yang berada di sisi
kanan dan kiri diperkecil, namun tidak mempengaruhi posisi dan
komposisi ukuran dari komponen desain web.
1[~'1·· ······-·-·-·----,
tP"':..1 ""·""""""""""'"""""""""'"""'"""'""""""""! ,:;::=·"·"'"""·=·""'"""·=.,.,,.,· I !=------------ ____...---.;I
-----~ -------- ' I .,, _ _.,, I
--" -----...__ i
:'.'.'.'~-~< ___ 7"] I .- ~'
~
.~
I"""' i ""°"'-=+ 1 • ..,.,.,,,,.
I
I::: ----
1:= I :'::""'
-----"·------1 I
@El_]
[---- --·-;:;;~-·-·-·----·
···---- -----------·
67
Gambar 4.13 Rancangan halaman home untuk small device (resolusi
2:768px)
68
Rancangan halaman untuk layar dengan resolusi ~768px ditargetkan
untuk pengguna dengan perangkat tablet baik digunakan dalam posisi
portrait atau landscape, sebagian smartphone dengan posisi pengunaan
landscape. Pada rancangan ini, bagian header tidak berubah, namun
pada bagian berita, artikel, kolom rektor, agenda, dan footer mengalami
perubahan, yaitu menjadi satu barn grid vertikal, sehingga
mengakibatkan ukuran panjang vertikal dari web bertambah. Komposisi
ukuran pun mengalami perubahan, yaitu pada gambar thumbnail di
bagian berita dan artikel bertambah besar, menyesuaikan dengan
resolusi layar pada perangkat yang digunakan.
~
---.__ ·~7
~.,,,.-
"""'-"""'"
I~ /°I 1::::::: ~ i;;;:;:,7" ' I '
~.~ '1 ····-· r~,,:i
1=-~-.,,.
1=:: j KOt,OM ROOPR ,_ l"""'"Q"""'"'-"' 1~J
1~-·-f'""''""fl
1:=~---1 ·-I '1··~ ·~~ ;;;·-·di ~
l ~
···~· .. - -~ ...... .
A
--1:=-:c-;-1c:::::::::...,.,._~----
I------ ------I ~u~• l::;.;-1 I 11•.'UTAlAOi!IYA
'-~""'-'""'""""
l"ilib"">l:l
h~=/ ------ ~ ....... _ I 10~
I~ ~I l/·~1 r~~MnF-0. --1
1;:;;;-
1 ::~~ . .....,,...l..<J<llfil.,....
1:~~=: I~
i'-"'-1-"""'"~
1~-~ ["'"'""~]
~~-
' Gambar 4.14 Rancangan halaman home untuk extra small device
69
(resolusi S768px). A untuk kondisi accordion tertutup, B untuk kondisi
accordion terbuka
70
Rancangan untuk resolusi layar :5768px ditagetkan untuk pengguna
smartphone baik untuk posisi pengunaan portrait atau landscape. Pada
rancangan ini terjadi perubahan pada bagian logo dan nama universitas
berubah ke posisi tengah, komposisi ukuran tulisan diperkecil, bagian
header dimana menu pada header dihilangkan, namun diakomodir
dengan memasukkannya kedalam bentuk tampilan accordion yang akan
muncul jika tombol representasi dari accordion tersebut disentuh. Pada
bagian berita, artikel, kolom rektor, agenda, danfooter tidak mengalami
perubahan signifikan, hanya ukuran dari setiap gambar diperkecil. Efek
yang dihasilkan adalah ukuran panjang vertikal dari halaman akan
bertambah.
b. Halaman Detail
Halaman detail berisi infonnasi detail dari setiap informasi spesifik
yang akan ditampilan pada website. Secara umum, desain halam detail
dibuat secara umum sehingga dapat menyesuaikan dengan setiap materi
informasi yang akan dicantumkan.
71
[s;2l UNIVERS!TAS !SI.AM NEGER! SYAR1F HIDAYATIJLLAH JAKARTA I/"' ™1!E > ~ >rnE!J.hlM!! > ~ >Efil!filill&! > KOtHMIW,•I >
JUDUL HALAMAN --------------IMAGE----------
----------- -------------HEADLINE Lorom lpsum dclor ITT! emet, o:onsGctel~r adlptsclog elil 11.W. diam nonwnmynl!ID eulnmod !lncldWltut J11e«>et dolcm m11gn11 llfiq@m mt volutpat UI w1$1 enlm ad minim venlam. qlll9 nostrud exerd tlltlen unamcO!Jlet su~clpl! lobortls 1'11$1 ul allqlllp m:. ea comm.::do coos11qu11t Du!s autem val eum !rluro dolor In hendrertt to \l\llput11te varn esl111 molosllo torniequal, vol Ilium doloro eu feuglilt null11 fec!!lcl!l 111 wro eros et 11:cwni1m et luslo odlo dli1fll$!llm qui bl!111dll PfllllS!lrrt lllpt11tum :urn delenlt 11ugue duls deloro tu feugalt nuUa fadllsl. Nam Ub-0.r 1emper cum eol\.!t.1 nobls elotl'Oml optlcn congua nthll lmpardlat doming Id qoorJ mliZ.lm p!aearat foCllr pos~lm uswn. Typl nen llab<lnt clarttalam tosl!am; Cllt !llllm lagentls In lb qui !aelt eorum clsrttatam. !rwosllgsllones dumonstmvenmt lactoras tegera me lkm quccl U lagllllt Sllllplua. Clllritas es\ etiam pnx;eS3us dyriamlcus, qui sequitur mullltkmam consuotudlum lllelorum. Mlrum est noUlro quern B!lera gotf\lca. ci1mm nunc pulamus. pan.im clamm. anlsf!0$1lerll ltt!marum ronnas. lwmanHalb per saacula qu!lrta doelmo et qulntl:I declma. Eodem modo typl. qui num: nobls vldentur parurn ciarl, nsnl sellemnu In Murum.
FOLLOW AGENDA
I NiK SOS!Al l.'E!)!A lllFOOMASl MEliGWN HIFORMASI MENGSIAI INfOIWAS! MS<Ge1m
!!'IKSQS'Al M"D'A
UtJK so~JAL M!i!2!6 f~I = =
FOOTER
Gambar 4.15 Rancangan halaman detail untuk large device (resolusi
;:>:J200px)
Rancangan halaman detail penataan posisi hampir sama dengan
halaman home akan tetapi halaman detail lebih fokus pada
penyampaian teks untuk detail infonnasi di setiap halaman. Rancangan
halaman detail pada ukuran resolusi ini ditargetkan untuk pengguna
dengan perangkat seperti laptop, desktop PC, dan jenis perangkat lain
dengan resolusi ;:>:1200px. Pada rancangan ini seluruh komponen desain
web berada pada posisi dan komposisi ukuran yang nonnal.
73
~ " UNlVERSITAS ISLAM NE GERI SY ARIF HIDAYAnJLlAH
~·~·~·~·eJ;W;ll!!lli•~·
JU DUL -----------IMAGE-----------
----------- -------------HEADLINE LOl'ilm lpsum dok>f ~ amat conooetotoor ndipls<:ln;i ell!. sed dlem nmrummy nlbh Gulomod llncid!mt ut laoi'IXit dcbro mal)IUI a!lquam erat V':llulflal. Ul wbl enlm ea minim venklm. qullJ l'IOS!nd cxen:l taUoo llllem<:tl!pa• $U«!plt lo!lortl$ nlal Ill ellqulp !IX on commrnlD ccnsoqmiL outs ootem vcl eum lrluro dcioc In handrerlt In vulpulale v!lllt esJW mo!Gslkl consoqllllt. vel mum r.lokllil w fD.IJUltit nullil tru:m~1' nt VGm oms ct nccums!Ul cl ilmlo odl() dlgnbs"n qui ~n pmonent lupl:i\um .ulil dllklflit wguo duls dolcro ta fougalt nullll fai:!ll!l Nam libl!r!Gmpor cum sokl'.e nobls eletfend option ~enriua l\lhll lmperdlel doming Id qucd mazlm. plac<!m! to.oar pc!Slrn M$um. 'fypl non l»!benl clart!a11!m lri!illllnl; as\ wiua l<)goollfl in 11!1 qul rectt eorum c""1WGm. !llVlls!lgatlooes damorui!raverunt toc1cras Jcgoro mo llus quod H !ogool ~oplus. crarttM est euimi proeessus dy;'wllle!IS, qui $4<'!Uflutm\11~li¢1'lem eor.suetudium lectorum. !..'Jrum est notnro quam !lttera gothka. quam mine pufumus parum c!Mam. antopoS1rortl tr.ararum roonu 11\lmanltaUs l"i' ~uln quarb declma el qulnlll dccima. Ee<tam m~ typl, qui !lllf\Q no1'b vldSf!\ur pnrom d11rl. flnnt so«amnGs In Murum.
FOLLOW
UHt;:~.!:J!ill!8
lITTKSQS1Al!,J~
1-!:lb;§OS~-M~
AGENDA
l!ffORMN>l
= mfOF<M!IS
= mrof<W.SO
= I FOOTER
--··
Gambar 4.17 Rancangan halaman detail untuk small device (resolusi
?:768px)
Rancangan halaman untuk layar dengan resolusi ?:768px ditargetkan
untuk pengguna dengan perangkat tablet baik digunakan dalam posisi
portrait atau landscape, sebagian smartphone dengan posisi pengunaan
landscape. Pada rancangan ini, bagian header tidak berubah, namun
pada bagian berita, artikel, kolom rektor, agenda, dan footer mengalami
perubahan, yaitu menjadi satu barn grid vertikal, sehingga
mengakibatkan ukuran panjang vertikal dari web bertambah. Komposisi
ukuran pun mengalami perubahan, yaitu pada gambar thumbnail di
74
bagian berita dan artikel bertambah besar, menyesuaikan dengan
resolusi Jayar pada perangkat yang digunakan.
[El I,,,, -;;;i
' UNIVERSITAS ISL.AM NEGEA!
SYARIF HIDAY A TULI.AH JAKARTA
JU DUL ~ ~
IMAGE
~ ~ HEADLINE Lorom lpum1 dolorelt run at consecll:ituer adlp!aclllg om, seddlflm nonummy nlbh eulsmod llncldunt ut !Mrailt dotora magn1111llquam era! volu!pal ut WW 11nlm lid minim V<inlam, quln norrtrud exerd talion ullamcotpllr $USeipll lotlortls nlsl ut e!lqlllp ex 110 commcdo tonsequat. Duis 11utom vnl oum lriuro dolor In Mndrorlt In vulputll!ll v&l!I UHi moleslkl consequat vat Ulum dolom eu filll!lh;d null11 faclri!5l!l at vero eros et 11ceums11n at lusto odlo dlgnl5slm qui blendlt praesent luptatum Ulil d&lllfllt augua di.Ila dolo«i le feug11lt null.1 flltlll!i.L N11m lib« tamper cum soluta nobls ekllfend cptlon conguo l\lllll lmptm:llat doming Id quod maum pl11cor11t facQr p!l$lllm assum. ;ypl non habllnt clarllatem lns!lam; est 115US IGgontb In Us qui faelt ncrum clartlatom. lnvestlgntlonos <lamoostraverunl tectorM legsm ma llus quod U !Ggunt suplus. Cl!lrltM HI etlam proeassus dynsmlws. qui Hqultur mutallcrwm ccn~uctudlum l~torum. Mlrum est notaro quom mtnm gc1111ca. qtiam nune putamus parum ebram. anteposuerll ltltGrarum ftlmms humanllil!ls par saaeula quW dec!ma et qulntl!I declma. Eodem modo typl, qui rume nollls \'ldanlur parum clarl, fillnt aoUcmnos lnfllturum.
FOLLOW US
UflliSOSIAIM~
I INK SOSIAI. MEDtA
! INK SOf~AI MEQl/!,
AGEN
mfOflM/\SI
= ENFOr<MASI
= mf<XW/\SI
= FOOTER
A
"'"'
oolm DU minim vanlll!ll, quls nos!rud axm'tl IMloo llllan1COljler susclpl! lobo~ nls! UI aRqulp &X ea commodo consequat Dulli autam veleum kluro dolor In hendrnrt! In vulputato vallt essa malaatla COMeqUat, vol mum (folom ou tauglat nlllla facllIBls at varo aros &t 11ctumsan el Justo odlo dfgn!sslm qui hlandll pmesent luptatum zzrtl delenlt augua duls dolorc te raugalt nlllla faclll&I, N!llll libar temper cum saluta no!lls elelfand op<Jon rongue nlhll lmperdl&t doming Id q!IOd mazlm pl11cerntfru:eqmsslm aasum. Typl non Mbantc!4rUatam ln~llam; esl usus klgantls In b qui feelt aorum cierl!atem. lllV8!1lgllllOl'IM damoMtmvarunl lectorns tegern me Illa quod H logunl saoplus. cttllttas osl ellt!.m proceasus dynamleus. qui nqultur mutauonem consueludlum lactorum. Mlrum eat no\Bro quam ettem gC!hlea. quam n\11\C pWlmus parum clm'am. 1mtep0!iue11t !lt!l!rnrum ftlrrnas humenlta!l~ par aaB(\11:.s quana declma ot qulnta dllclme. Eod&m rncdo typl, qui nune nobls vldantur poom1 citlll, finnl oouemn&S In Murnn1.
fOLLOWUS
mm SO&ALMED!A
! INK SOS!At ME!M
!JNK SO'M! Mf!WI
AGEN
lllfORMASI
ENFO!ll.IJ\S!
INfORMASI
FOOTER
B
Gambar 4.18 Rancangan halaman detail untuk extra small device
(resolusi :S768px). A untuk kondisi accordion tertutup, B untuk kondisi
accordion terbuka
4.1.4.2
75
Rancangan untuk resolusi layar ::0:768px ditagetkan untuk pengguna
smartphone baik untuk posisi pengunaan portrait atau landscape. Pada
rancangan ini terjadi perubahan pada bagian logo dan nama universitas
berubah ke posisi tengah, komposisi ukuran tulisan diperkecil, bagian
header dimana menu pada header dihilangkan, namun diakomodir
dengan memasukkannya kedalam bentuk tampilan accordion yang akan
muncul jika tombol representasi dari accordion tersebut disentuh. Pada
bagian berita, artikel, kolom rektor, agenda, danfooter tidak mengalami
perubahan signifikan, hanya ukuran dari setiap gambar diperkecil. Efek
yang dihasilkan adalah ukuran panjang vertikal dari halaman akan
bertambah.
Desain Presentasi
Tahap desain presentasi sudah menggambarkan desain tampilan
web dengan menampilkan definisi dari desain web tersebut berupa wama,
posisi, dan tata letak elemen. Desain ini digunakan untuk merancang
berbagai jenis halaman yang akan dibuat.
78
Gambar 4.21 Halaman home untuk small device (resolusi 2':768px)
76
Article
O:her ·"-rticles
Ko!om R0ktor
Kclorn LalrnyJ
Gambar 4.19 Halaman Home untuk large device (resolusi 2:1200px)
78
Gambar 4.21 Halaman home untuk small device (resolusi 2:768px)
Gambar 4.22 Halaman home untuk extra small device (resolusi
::;768px)
79
80
Gambar 4.23 Halaman home untuk extra small device dengan bagian
atas accordion terbuka
4.1.5 Implementasi
Tahap implementasi adalah tahap pembuatan website ke dalam
bahasa yang dimengerti oleh komputer yaitu HTML, CSS, dan JQuery (lihat
lampiran 2) . Berikut arsitektur proses teknologi responsive web design yang
diwujudkan dalam bentuk pseudocode dan screen capture dari hasil tampilan
website ( ukuran resolusi 1280x800 piksel):
a. Pseudocode Arsitektur Responsive Web Design
start declare media queries
extra small devices (min <768px) small devices {min ~768px) medium devices (min Z992px) large devices (min ~1200px)
declare css font: 18px /* 100% */ container:00% css extra small devices
container (width: 767px) font size: 0.75em /* 18px/24px */ max image: 100%
column: 1 css small devices
container (width: 768px) font size: 0. 82em /* 18px/22px */ max image: 100% column: 1
css medium devices container (width: 992px) font size: 0.9em /* 18px/20px */ max image: 100% column: 2
css large devices container (width: >~1200px)
font size: 1 em /* 18px/18px */ max image: 100% column: 4
workflow if {extra small devices)
then load {css extra small devices) else
then load (css small devices) else
then load (css medium devices)
else then load (css large devices)
finish
81
82
b. Screen Capture Tampilan lmplementasi Pada Resolusi 1280x800 piksel
Gambar 4.24 Halaman Website Bagian Atas
Gambar 4.25 Halaman Website Bagian Tengah
Gambar 4.26 Halaman Website Bagian Bawah
83
Gambar 4.27 Halaman Berita Bagian Atas
Gambar 4.28 Halaman Berita Bagian Bawah
4.2 Pengujiau
Tahapan terakhir dalam penelitian kali ini adalah dengan melakukan
pengujian untuk membuktikan apakah seluruh fungsi berjalan sesuai dengan
rancangan. Pengujian dilakukan dengan blackbox testing. Pengujuan dilakukan
dengan menjalankan website dalam beberapa resolusi, browser, dan perangkat,
berfokus pada persyaratan fungsional (responsive web design pada web) dengan
menggunakan perangkat yaitu:
84
A. Perangkat lunak
I. Sistem operasi Windows 7 Ultimate 32bit, Android Ice Cream
Sandwich, Apple iOS 6.1.2
2. Browser desktop: Google Chrome (versi 34.0.1847.116 m),
Mozilla Firefox 27.0.1, Internet Explorer 11, Opera 22.0.
Browser mobile: Default Browser Lenovo IdeaTab AIOOOT,
Safari iOS 6.1.2, Chrome Mobile.
B. Perangkat Keras
I. Laptop Compaq Presario CQ4 l (1280x800 piksel)
2. Monitor CRT LG Flatron ez T730SH (1024x768 piksel)
3. Komputer Tablet Lenovo ldeaTab AIOOOT (600 x 1024 piksel)
4. Smartphone Apple iPhone 3GS (320x480 piksel)
Tabel 4.12 Pengujian Website
No. Item uji Perangkat
Browser Resolusi Hasil Keterangan Keras
1. Halaman
Laptop Google Chrome 1280x800 Sukses Lampiran I
Home 1.a
2. Halaman
Laptop Mozilla Firefox 1280x800 Su ks es Lampiran 1
Home l.b
' Halaman
Laptop Internet Explorer 1280x800 Sukses Lampiran 1
J. Home l.c
4. Halaman
Laptop Opera 1280x800 Sukses Lampiran 1
Home l.d
5. Halaman Monitor
Google Chrome 1024x768 Sukses Lampiran 1
Home CRT 2.a
6. Halaman Monitor
Mozilla Firefox 1024x768 Sukses Lampiran 1
Home CRT 2.b
7. Hal am an Monitor
Internet Explorer 1024x768 Sukses Lampiran l
Home CRT 2.c 8. Hal am an Monitor Opera 1024x768 Sukses Lampiran l
85
Home CRT 2.d
Hal am an 9. Laptop Google Chrome
Lampiran I
Kategori 1280x800 Sukses
I.a
Halaman IO. Laptop Mozilla Firefox
Lampiran I
Kategori 1280x800 Sukses
Lb
Hal am an 11. Laptop Intemet Explorer
Lampiran J Kategori
1280x800 Su ks es l.c
Hal am an 12. Laptop Opera
Lampiran I
Kategori 1280x800 Sukses
l.d
Hal am an 13.
Monitor
Kategori CRT Google Chrome 1024x768 Sukses
Lampiran I 2.a
Halaman 14.
Monitor
Kategori CRT Mozilla Firefox 1024x768 Sukses
Lampiran I 2.b
15. Hal am an Monitor Kategori CRT
Internet Explorer !024x768 Sukses Lampiran I
2.c
16. Hal am an Monitor Kategori CRT
Opera 1024x768 Sukses Lampiran I
2.d
17. Hal am an Idea Tab
Home AIOOOT Default Browser 600x1024 Sukses
Lampiran I 3.a
18. Halaman Idea Tab
Home AIOOOT Default Browser 1024x600 Sukses
Lampiran 1 3.a
19. Hal am an Idea Tab Kategori AIOOOT
Default Browser 600x1024 Sukses Lampiran I
3.a
20. Hal am an Idea Tab
Kategori AIOOOT Default Browser 1024x600 Sukses
Lampiran I 3.a
21. Halaman Idea Tab
Home AIOOOT Chrome Mobile 600x1024 Sukses
Lampiran 1 3.b
22. Halaman Idea Tab
Home AIOOOT Chrome Mobile 1024x600 Su ks es
Lampiran I 3.b
23. Hal am an Idea Tab Kategori 'AIOOOT
Chrome Mobile 600xl024 Sukses Lampiran I
3.b
24. Hal am an Idea Tab
Kategori AIOOOT Chrome Mobile 1024x600 Sukses
Lampirau I 3.b
25. Hal am an iPhone
Home 3GS Safari 320x480 Su ks es
Lampirau I 4.a
26. Hal am an iPhone
Home 3GS Safari 480x320 Sukses
Lampiran I 4.a
27. Hal am an iPhone
Kategori 3GS Safari 320x480 Sukses
Lampiran I 4.a
28. Halaman iPhone Kategori 3GS
Safari 480x320 Sukses Lampiran I
4.a
29. Hal am an iPhone Home 3GS
Chrome Mobile 320x480 Sukses Lampiran I
4.b
86
Halaman iPhone Chrome Mobile 480x320 Sukses
Lampiran I 30.
Home 3GS 4.b
Hal am an iPhone Chrome Mobile 320x480 Snkses
Lampiran I 31.
Kategori 3GS 4.b
32. Hal am an iPhone
Chrome Mobile 480x320 Sukses Lampiran I
Kategori 3GS 4.b
4.3 Perbandingan Website mN Syarif Hidayatnllab Sebelnm dan
Sesndab Menggnnakan Teknologi Responsive Web Design
Setelah dilakukan proses pembuatan dan pengujian website UIN Syarif
Hidayatullah Jakarta dengan responsive web design, selanjutnya penulis
membandingkan website UIN Syarif Hidayatullah Jakarta saat penulisan skripsi
dibuat dengan website yang penulis buat menggunakan teknologi responsive web
design.
Sebelum Sesudah
Dengan resolusi 320x568 piksel Dengan resolusi 320x568 piksel
Bel um mampu beradaptasi dan Mampu beradaptasi dan menyesuaikan
mennyesuaikan tampilan dengan ukuran tampilan dengan ukuran resolusi layar yang
resolusi layar yang berbeda-beda berbeda-beda
5.1 Kesimpulan
BABV
PENUTUP
Berdasarkan hasil penelitian, maka diambil kesimpulan sebagai berikut:
1. Dengan teknologi responsive web design tampilan website dapat
menyesuaikan dengan ukuran dan resolusi perangkat keras yang
berbeda-beda, yaitu dengan melakukan kategorisasi ukuran resolusi
layar dalam 4 kategori yaitu: Large Devices (layar dengan resolusi
2:1200px), Medium Devices (layar dengan resolusi 2:992px), Small
Devices (layar dengan resolusi 2:768px), dan Extra Small Devices
(layar dengan resolusi <768px) dan mengimplementasikan 3
komponen utama responsive web design, yaitu: tata letak fleksibel
berbasis grid, gambar dan media fleksibel, dan media queries.
2. Performa responsive web design dalam beradaptasi pada setiap
jenis perangkat keras dengan ukuran resolusi layar yang berbeda
beda terbukti baik, yaitu terbukti dengan hasil pengujian yang
penulis lakukan (lihat subbab 4.2). Sehingga dapat disimpulkan
teknologi responsive web design mampu menjadi solusi atas
masalah tampilan website yang kurang proporsional pada saat
diakses dari berbagai macam perangkat keras dengan ukuran
resolusi Iayar yang berbeda-beda.
R7
88
5.2 Saran
Dengan berbagai keterbatasan yang ada, maka penulis memberikan saran
agar nantinya penelitian dengan tema sejenis dapat lebih baik, yaitu :
I. Solusi untuk kurangnya dukungan teknologi responsive web design
terhadap browser yang belum mendukung HTML 5.
2. Perlu adanya pengembangan dan pengujian terhadap berbagai jenis
layar baru dengan tingkat resolusi layar yang dapat disesuaikan
dengan kebutuhan dan inovasi teknologi di masa depan.
3. Pengembangan agar responsive web design tak hanya dapat diakses
dengan smartphone tetapi jugafeature phone.
90
Herbowo, Agus Rahmat. 2012. Web Responsive Design Untuk Situs Berita
Menggunakan Framework Codeigniter. Jakarta: Universitas
Gunadarma.
Knight, Kayla. 2012. Responsive Design. Freiburg: Smashing Media GmbH.
ISBN: 978-3-943075-33-5.
Krug, Steven. 2013. Don't Make Me Think, A Common Sense Approach To Web
Usability. San Francisco: Pearson Education New Riders Publishing.
ISBN: 978-979-024-614-0.
Marcotte, Ethan. 2011. Responsive Web Design. New York: A Book Apart. ISBN
978-0-9844425-7-7.
Pusat Teknologi Informasi dan Pangkalan Data UIN Syarif Hidayatullah Jakarta.
2014. Data Statistik Kunjungan Website UIN Syarif Hidayatullah
Jakarta(! Januari 2014-17 Februari 2014). Diakses 17 Februari 2014.
Simannata, Janner. 2010. Rekayasa Web. Yogyakarta: Penerbit ANDI. ISBN:
978-979-29-1310-1.
Stanley, Morgan Research. 2009. The Mobile Internet Report. New York: Morgan
Stanley Research.
Tim Penyusun. 20 I 0. Pedoman Akademik Program Strata I 2010/2011. Jakarta:
UIN SyarifHidayatullah Jakarta.
Wardana, S.Hut., M.Si. 20 I 0. Menjadi Master PHP dengan Framework
Codeigniter. Jakarta: Elex Media Komputindo. ISBN: 978-9-792781-
89-2
91
Wempen, Faithe. 2011. Step by Step HTML5. California: O'Reilly Media, Inc.
ISBN: 978-0-735-64526-4
Whitten, Jeffrey L, Bentley, Lonnie D. 2007. System Analysis and Design
Methods. New York: McGraw-Hill. ISBN: 978-0-07-305233-5
Wroblewski, Luke. 2011. Mobile First. New York: A Book Apart. ISBN 978-1-
937557-02-7.
Zhang, Chen. 2013. Responsive Website Design for First Unitarian Church and
Louis Kahn. New York: Rochester Institute ofTechnology.
!:illJ;i)J1:£spon2ive.ver111ilion.com/co111parc.php diakses pada 11Januari2014
httDs;L/technologvj)ls.com/413235/pc-shiQIIl9l1[s-seHo-declinc-in-2012-for-first
time-in- I I -ycar0 diakses pada 10 November 2013
hliP.ii!1listapart.co111/articlc/rcsoo_112i_ve-web-design diakses pada IO Oktober 2013
!:ill!) :ii ch rorn c. b lo;.cspot. co m/2009 IQ 8/ ncw-bcta-w h v-s Io w-dow n-w hen-vo u-
can.hrml diakses pada 2 September 2014
http://ncws.slashdot.org/stoi:y/l 2/ I 0/09/ I 741219/fircfox-16-releascd-morc-l1tml5-
support diakses pada 2 Sepetember 2014
htrp:/ /n1o;dn.m icroso ft.com/ en-11si.1ibrarv/ie/hh673546Lv=vs. 85 ).asffi diakses pada
2 September 2014
h(tps://devclopcrs.;zQ.Q.gle.corn/wcbma$lers/spiartphonc-sites/dcJgils diakses pada
I 0 November 2013
LAMPIRAN-LAMPIRAN
1. LAMPIRAN 1 : ABSTRAK PENELITIAN TEMA SEJENIS
2. LAMPIRAN 2 : SCREEN CAPTURE HASIL PENGUJIAN
3. LAMPIRAN 3 : SOURCE CODE
4. LAMPIRAN 4 : LEMBAR HASIL W AW ANCARA
5. LAMPIRAN 5 : SURAT KETERANGAN DOSEN PEMBIMBING
6. LAMPIRAN 6 : SURAT KETERANGAN ID.SET
92
93
LAMPIRANl
ABSTRAK PENELITIAN TEMA SEJENIS
Nama Peneliti Agus Rahmat Herbowo
Tallon Penelitian 2012
Sum ber Penelitian Skripsi Universitas Gunadarma
Web Responsive Design Untuk Situs Berita .Jndul Penelitiau
Menggunakan Framework Codeigniter
ABSTRAK
Teknologi dan informasi semakin berkembang seiring waktu berjalan
dimulai dari menyampaikan berita melewati media 11011-eletronik hingga
sekarang menggunakan teknologi informasi khususnya melalui situs. Saat
ini mengakses situs berita menggunakan perangkat atau plaiform mobile
seperti smartphone dan tablet meningkat pesat. Semakin banyaknya
perangkat dan plaiform dengan berbagai ukuran, maka sebuah situs perlu
untuk mengenali setiap ukuran perangkat pengguna. Tujuan penulisan ini
membuat web responsive design yang dapat menampilkan halaman situs
sesuai dengan layar perangkat atau platform., sehingga pembaca nyaman
dan mudah membaca konten berita tan pa harus mengeser layar
kesamping. Penulisan ini menggunakan metode kepustakaan untuk
mencari bahan-bahan yang dapat dijadikan referensi kemudian analisis
kebutuhan aplikasi, desain, konstruksi, menggunakan framework
Codeigniter, HTML 5, dan CSS 3 setelah itu tahap pengujian dan
implementasi secara publikasi dengan hosting untuk bisa diakses secara
online kemudian pengujian dilakukan menggunakan perangkat atau
plaiform dengan ukuran layar yang berbeda-beda. Setelah terbuatnya web
responsive design untuk situs berita menggunakan framework
Code igniter maka permasalahan perkembangan perangkat dan variasi
layar terpecahkan oleh teknologi web responsive design selain itu juga
94
mempermudah kerja dari web administrator dalam memperbaharui berita
dan karena pembuatan menggunakanframework Codeigniter maka waktu
pengerjaan pembuatan situs jadi lebih singkat, kode program lebih mudah
dibaca dan menjadi pilihan tepat untuk mempercepat ke1ja teamwork.
Nama Peneliti Chen Zhang
Tahun Penelitian 2013
Sumber Penelitian Thesis Rochester Institute of Technology
Responsive Website Design for First Unitarian Judul Penelitian
Church and Louis Kahn
ABSTRAK
Responsive Website Design for First Unitarian Church and Louis Kahn is
a thesis project for Master Degree of Fine Arts in Computer Graphics
Design program at the Rochester Institute of Technology. This thesis
project is to design a responsive website for the First Unitarian Church, a
website which has three user experiences: a desktop site, tablet site and a
mobile site. The website audience is architecture or design students,
professors, and enthusiasts. There are three objectives in this thesis
project: first, to design a responsive website for cross-platform
experience for users; second, to provide users a real digital visiting
experience which is immersive and vibrant to First Unitarian Church;
third, to keep the design direction for this whole project the same as
Louis Kahn's architectural design style - disciplined and clean.
LAMPIRAN2
SCREEN CAPTURE PENGUJIAN TAMPILAN WEBSITE
1. Laptop Compaq Presario CQ4 l (1280x800 piksel) a. Google Chrome
b. Mozilla Firefox
95
2. Monitor CRT LG Flatron ez T730SH (I 024x768 piksel) a. Google Chrome
b. Mozilla Firefox
96
d.
4. Smartphone Apple iPhone 3GS (320x480 piksel) a. Safari
j!_\j
Hw,,.;,,,, w ,u', ;;,·, :C:.;r;
tr,,)HLi'.r,v:, S('t•;,F;, •!',;" LJSI f;l'FI .>i:'~Jl;;r
,h,- tLr-;q,;;; ih;u Ff' ,;0«1•;ur·
'1'-FI ·;YlJ;
i;< rr-~1_.,,-,,~ Ji':,)•'• Y;•;. ·,a dv1
f•'-'.l'.U! pucpbc!;a~, nJs;-;;1.;il Jt \'iY'g
98
b. Google Chrome Mobile
~ 192.1G81D41
.,,., rv ·,-,. - n·r.-.;;.;,• -- ;:<,<''
·•-n_,-i;l•.»n ''-'• • •)li,.<h px.L• · • -,,,, lh' 1',-1 J<,• ~I '-c- ;, · r-t ,qh«
V ,_ -1r;; ""'I'-·'-":;--"'
<- 192 108 104 1
99
<- !9216810-11 = f[!J
"*"' 192.108104 1
LAMPIRAN3
SOURCE CODE
1. Index.php <?php
error _reporting(E_ALL " E_NOTICE}; require_once("admin/class/tampil/beri
ta-index.php"); $news "' new Derita();
?> <IOOCTYPE html> <I --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. __ , <html lang=Nen">
<head> <meta charset="utf-8"> <meta http-equiv»"X-UA-Compatible"
content="IE=edge" > <meta name="viewport"
content=' width=device-width, initialscale=l .0' >
<meta name="keywords" content="state islamic university, Islamic Studies, Islamic collage, UIN Jakarta, Universitas Islam Negeri, Syarif Hidayatullah," />
<meta name,."description" content,."UIN syarif Hidayatullah Jakarta, "Leading Toward Research University"" />
<link rel="shortcut icon" href="img/favicon.ico">
<title>Welcorne to UIN Syarif Hidayatullah Jakarta</title>
<I-- Bootstrap core CSS --> <link href="dist/css/bootstrap.css"
rel:"stylesheet"> <link href="dist/css/main.css"
rel="stylesheet"> <I-- Bootstrap core JavaScript
====:== --> <script
src="https://code.jquery.com/jquery-1.10. 2.min. js"></script>
<ul class.,"nav navbar·nav"> <Ii
class="dropdown"> <a href=-"#"
class="dropdown-toggle" datatoggle="dropdown">About Us <b class=" caret" ></b></a>
<ul class="dropdown-menu"> <li><a href,,.." ?p.,,about-us">Tentang UIN Jakarta</a></li> <li><a href.,"#">Hymne UIN Jakarta</a></li> <li><a href="~t">Struktur Organisasi</a></li> <li><a href="#">Susunan Organisasi</a></li>
<script src="dist/js/bootstrap.js"></script>
<script src"'" di st/ j s / dropdown. js'' ><I script>
</head> <body>
<div class,."container header-logo"> <a href="index.php"
style,,"color:black; "> <img
src="img/logo.png" /> <h3>Universitas Islam Negeri
Syarif Hidayatullah Jakarta</h3></a> </div> <l-- Static navbar --> <div class="navbar navbar-default
navbar-static-top" role="navigation"> <div class,,."container">
<div class="navbar-header"> <button type,."button"
class="navbar-toggle" datatoggle="collapse" data-target=".navbarcollapse">
<span class,,,"sronly">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<Span class="icon-bar"></span>
</button> <div class="responsive-
logo"> <img
src="img/logo.png" /> <h3>Universitas Islam Negeri Syarif Hidayatullah Jakarta</h3>
</div> <I-- <a
class="navbar-brand" href="#" >Project name</a>-->
</div> <div class="navbar-collapse
collapse">
<li><a href="#">Arsip Derita UIN Jakarta</a></li>
class="dropdown">
</ul> </li> <li
<a href="#" class="dropdown·toggle" datatoggle="dropdown">Academics <b class,,."caret"></b></ a>
class="dropdown·menu"> <li><a href="#">Sl Undergraduate</a></li> <li><a href="ll">52 Postgraduate</a></li> <li><a href="#">Pembiayaan 51</a></li> <li><a href,,,"#">Pembiayaan 52</a></li>
<li class="dropdown-submenu"> <a href="#" class="trigger rightcaret" >Fakul tas</a> <ul class="dropdown-menu sub-menu">
<?php foreach($news->menuFakultas() as
$row): $kcl = strtolower($row('nama']);
$pe = explode(" ",$kcl); $gb = implode("-",$pe);
?> <li><a href="?p=fakultas&f=<?php echo $gb; ?>R><?php echo $row['nama']; ?></a></li> <?php endforeach; ?> </ul> </li> <li><a href="ft">Kalender Akademik</a></li> <li><a href="1t">Pedoman Akademik</a></li> <li><a href="1f">SKS</a></li> <li><a href="#">Double Degree</a></li> <li><a href .. "ff">Portal AIS</a></li> <li><a href="#">Beasiswa</a></li>
class="dropdown">
</ul> </li> <li
<a href .. "#" class="dropdown-toggle" datatoggle="dropdown">Penerimaan <b class="caret"></b></a>
<Ul class,,,"dropdown-menu" > <li><a href=" ?p=jalur-penerimaan" >Jalur Penerimaan</a></li> <li><a href="it''>Biaya Perkuliahan</a></li> <li><a href="tt">Portal SPMB</a></li>
</ul>
class.,"dropdown">
</11> <li
<a href="#" class="dropdown-toggle" datatoggle="dropdown">Campus <b class,." caret" ></b></ a>
<Ul class="dropdown-menu"> <li><a href="#">Fasilitas</a></li> <li><a href="#">Peta & Lokasi</a></li> <li><a href="tt">Perpus Utama</a></li> <li><a href,."#">Pusat Lab Terpadu</a></li>
<li><a href="'ft">Puskom UIN Jakarta</a></li>
</ul> </li> <li
class="dropdown"> <a href="tt"
class,,"dropdown-togglen datatoggle="dropdown">Penelitian <b class="caret"></b></ a>
<ul class="dropdown-menu"> <li><a href=" ?p=pusat-penelitian">Pusat Penelitian</a></li> <li><a href="#">Journal Library</a></li> <li><a href="fl-">Naskah Nusantara</a></li> <li><a href="it" >Pusbangsitek</a></li> <li><a href="#">Repository UIN Jakarta</a></li>
</ul> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" datatoggle="dropdown">Contact Us <b class="caret"></b></a>
class="dropdown-menu"> <li><a href="#">Map</a></li> <a 'nref="#">Alamat</a></li>
href="W'>Email</ a></li>
<ul
<li><a
</Ul> </li>
101
</ul> </div><l--/.nav-collapse
</div> </div>
<?php switch($_GET[ 'p'] }{
case "about-us": case "organisasi": case "jalur-
penerimaan": case "kampus": case "pusat-
penelitian": case "fakultas": case "berita": case "artikel": case "kolom-
rektor":
include("admin/komponen/depan/statis. php");
p");
break; default:
include ( "admin/ komponen/ depan/home. ph
break;
?> <div class,,,"pre-footer">
<div class="container"> <div class="row">
<div class="col-md-6
<113 class="title-home">Follow Us :</113>
<h4 class="prefoater-linkn><a href="n>Facebook</a></h4>
<h4 class="prefooter-link" ><a href="" > TWitter</a></h4>
<h4 class="prefooter-link"><a href="">News Center</a></h4>
</div> <div class="col-md-6
<h3 class="title-home">Agenda</h3>
<h3 class="titlehome" >29 Januari 2014</h3>
<P class="agendatime">09. 00 - 14.00 WIB</P>
<h4 class="agenda~ title">Seminar Lorem Ipsum</h4>
<hS class="agendaplace">Auditorium Prof. Harun Nasution</hS>
<P class,.,"moredetail-agenda" ><a
href="#" >  ; Detail » </a></p>
</div> <div class="col-md-6
col-lg-3"> <h3 class="title-
home" > </h3 > <h3 class="title
home">l-28 Februari 2014</h3> <p class="agenda
time ">09. 00 - 14.00 WIB</p> <h4 class="agenda
title">Pendaftaran SPMB</h4> <hS class="agenda
place">Gedung Akademik UIN Jakarta</hS> <p
class="moredetail-agenda" ><a href=" #" > Detail »  ;  ; < /a></p>
</div> <div class="col-md-6
col-lg-3"> <h3 class="title-
home" > </h3> <h3 class,,,"title-
home">4 Maret 2014</h3> <p class,,,"agenda-time">09.00 - 14.00 WIB</p> <h4 class="agenda-title">Wisuda 93</h4>
<hS class="agendaplace">Auditorium Prof. Harun Nasution</h5>
<p class="moredetail-agenda" ><a href= "#" > Detail u </ a></p>
</div> </div>
</div> </div> <div classu"real-footer">
<div class="container"> <div class="row">
<div class="col-md-6 col-lg-3">
<img width:"80" alt="logo UIN" src,,,"img/logo.png" /> <h4 class="title-home">UIN Syarif Hidayatullah Jakarta</h4>
<p class=~agendaplace">Jl. Ir. H. Juanda No.95 Ciputat 15412</p>
<P class="agenda-place">Jakarta Indonesia</p>
<p class="agendaplace">Telp. (021)7401925</p>
<P class="agendaplace" >[email protected]</p>
</div> <div class"'"col-md-6
col-lg-3"> <h3 class="title
home">Internal Links</h3> <p class="link
text"><a href,."#">Perpustakaan Utama</a></p>
<p class .. "linktext"><a href="#">Pasca Sarjana</a></p>
<p class="linktext" ><a href="#">PPIM</a></p>
102
<P class="linktext"><a href="lt">Pusat 8ahasa</a></p>
<p class="linktext"><a href="#">CSRC</a></p>
<P class="linktext"><a href,,"#''>Madrasah Pembangunan</a></p>
<p class="linktext"><a href="#">PUSKOM UIN Ja'Karta</a></p>
<p class="linktext"><a href="if">Naskah Nusantara</a></p>
<p class="linktext"><a href="#''>lembaga Peningkatan dan Jaminan Mutu (LPJM)</a></p>
<p class"'"linktext"><a href="#">Pusat laboratorium Terpadu</a></p>
<P class="linktext"><a href="#">Journal Library UIN Jakarta</a></P>
</div> <div class="col-md-6
col-lg-3"> <h3 class="title-
home"> </h3> <p class="link
text"><a href="#">Repository UIN Jakarta</ a></p>
<p class="linktext"><a href="W'>Pusbangsi tek</a></p>
<p class="linktext"><a href="#">International Office</a></p>
<p class="linktext"><a href="#">Pusat Penelitian</a></p>
<p class="linktext"><a href="#">Pusat Pengabdian Kepada Masyarakat</a></p>
<p class="linktext"><a href="tt">E-SKP</a></p>
<p class="linktext"><a href="W'>Satuan Pemeriksa Internal</a></p>
<p class="linktext"><a href="W'>Academic Information System</a></p>
<p class="linktext"><a href="#">Portal SPMB Mandiri</a></p>
</div> <div class="col-md-6
<h3 class="title-home">Sites</h3>
<p class="linktext"><a href="#">About Sites</a></p>
<p class="linktext"><a href="#">Site Map</a></p>
<p class="linktext"><a href .. "#">Karir</a></p>
<p class="linktext"><a href="#">Arsip Derita Utama</a></p>
</div> </div>
</div> </div>
</body> </html>
WA WAN CARA RISET SKRIPSI
WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI MENGGUNAKAN
FRAMEWORK BOOTSTRAP (STUDI KASUS UIN SYARIF HIDAYATULLAH JAKARTA)
Tanggal
Narasurnber Jabatan
Pertanyaan I
: .'?:l.::J0?:.J..::-.... 2014
: .A l!.P.1/.1!.:-.+.tr ..... . : . K..<?Qf.. .. f.".>.P.~~ ~!'
Pewawancara : Apa platfonn teknologi yang digunakan di website UIN Syarif
Hidayatullah saat ini?
Narasumbcr : . .JOc.Ml-.!\:; .. P,Hf,.f\'\~{S.&.\..: ............................................................... .
Pe1tanyaan 2
Pewawancara
Narasurnber
Pertanyaan 3 Pewawancara
Narasurnber
P crtan ya an 4
Pewawancara
N arasurn ber
Pertanyaan 5
: Apakah selarna ini a<la kendala pada masalah antannuka/tampilan website UIN SyarifHidayatullah Jaka1ta?
: 1.~fl "~. k1.4!1'?. {-ef.\'\"\... .~M-~-~,. \aj;_\!:0-.. #.~~~~.~'A~~ .. f.0!!~.~~ _o.t \\fto\oi\( M<11S11- k.«f\lS (;OOW J.<1,.._ be).vV.. \/is.:; Viflro.a.o.yifwJ>i.
: Apakah saat ini website UIN Syarif Hidayatnllah Jakarta sudah bisa
diakses dari berbagai rnacam perangkat mobile? Apakah ada website dengan versi mobile?
: .t;wlci~ .. k-15.0 .. -~-f .. \e.\u\i\'l .. ~?w.1.C1'.~ .. ~~-~~ !»f.•\':'.~ .. -~~.?~'-~- ..
: Menurut Anda apakah website dengan dua versi tampilan (desktop dan
mobile) efektif untuk memenuhi kebutuhan pengguna dan kernudahan saat
diakses?
: -~--~~t!·Y\1t:;t;;!:t··t:Z~~-l. .. ~l~ .. ~~!~.~: .. ~r..~"}
Pewawancara : Bailalmana n1enun1t An<la narl:i cles;;iin t:lrnnllnn we:h~ite: vt1no- m:::Jmnn
Narasumber
Pertanyaan 6 Pewawancara Narasumber
Pertanyaan 7 Pewawancara
Narasumber
Pertanyaan 8 Pewawancara
Narasumber
Pewawancara
Fadlan Reza
: Apakah Anda mengetahui mengenai teknologi responsive web design? : .W.·l~'j.©h!M ... ..................................................................... .
: Apakah dari pihak pengelola website (PUSTIP ANDA) herencana menerapkan teknologi responsive web design pada website UIN Symif
Hidayatullah Jakarta? . ~ fl,\j~ : .SK~<h .. ~0:~~.c:-.r..Y.t~.~ .. ~0 ... erv.~~.ee .. ~ .... ~.".": ... Y'."°-...... -
: Menurnt Anda seberapa pentingkah penerapan teknologi responsive web design pada website UIN Syarif Hidayatullah Jakarta saat ini? Mengingat angkat pertumbuban penggunaan perangkat mobile untuk akses internet yang semakin tinggi.
: ·~~~;-t1j·1~~t\J~:rtiAi~~~;;-17&';?·it4'~r1.
Narasumber
Ill 111111-
U I I I
KEMENTERIAN AGAMA UNlVERSITAS ISLAM NEGERI (UIN) SYARIF HIDAYATULLAI-I JAKARTA
Juanda No. 95 Ciputat 15412 Indonesia Telp. (62-21) 7401925 Fax (62-21) 7402982
Webs ite:www.uinjkt.ac. id: E-mail: info@u in jkt.ac. id
SURAT KETERANGAN
Un.Ol/P.Kom/OT.01.3/ <;a '/2014
Yang bertanda tangan dibawah ini menerangkan bawa yang tercantum dibawah ini
Na ma NIM Jurusan/Semester
: Fadlan Reza : 108091000065 : Teknik lnforrnatika /XI (sebelas)
Adalah benar telah melakukan penelitian I wawancara pada Pusat Teknologi lnformasi
dan Pangkalan Data (PUSTIPANDA) UIN Syarif Hidayatullah Jakarta untuk keperluan tugas
akhir/skripsi.
Demikian, surat keterangan ini dibuat agar dapat dipergunakan sebagaimana
mestinya.
Jakarta, 21 Juli 2014