1 PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA PADA GEDUNG FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA Nurlaila Maulina PROGRAM STUDI ...
PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA PADA GEDUNG FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA
Nurlaila Maulina 103091029613
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011
PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA PADA GEDUNG FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA
Nurlaila Maulina 103091029613
Skripsi Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana Komputer
Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta
PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH JAKARTA 2011
PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA PADA GEDUNG FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta Oleh :
NURLAILA MAULINA 103091029613 Menyetujui
Pembimbing I
Pembimbing II
DR. Eko Syamsuddin. H.M.Eng
Mohammad Yusuf S.Kom
NIP .
NIP .
Mengetahui, Ketua Program Studi Teknik Informatika
Yusuf Durachman, MIT, M.Sc NIP. 19710522 200604 1002
PENGESAHAN UJIAN
Skripsi
berjudul
“PROYEKSI
TATA
RUANG
BERBASIS
WEB
MULTIMEDIA PADA GEDUNG FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA” telah diuji dan dinyatakan lulus dalam sidang Munaqosyah Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta pada tanggal 31 Agustus
2010. Skripsi ini telah
diterima sebagai salah satu syarat untuk memperoleh gelar sarjana strata satu (S1) pada Program Studi Teknik Informatika.
Menyetujui Penguji I
Penguji II
DR. Syopiansyah Jaya Putra, M.Sis
Fitri Mintarsih M.Kom
NIP. 19680117 200112 1001
NIP.
Pembimbing I
Pembimbing II
DR. Eko Syamsuddin. H.M.Eng
Mohammad Yusuf S.Kom
NIP .
NIP .
Mengetahui
Dekan
Ketua Program Studi
Fakultas Sains dan Teknologi
Teknik Informatika
DR. Syopiansyah Jaya Putra, M.Sis
Yusuf Durrachman, MIT
NIP. 19680117 200112 1001
NIP. 19710522 200604 1002
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENARBENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANAPUN.
Jakarta, Agustus 2010
Nurlaila Maulina 103091029613
ABSTRAKSI
Nurlaila Maulina, Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta. (Dibawah bimbingan DR. Eko Syamsuddin H. M.Eng dan Mohammad Yusuf S.Kom ). Perkembangan teknologi informasi dan kebutuhan akan informasi saat ini berkembang sangat pesat. Banyak orang menggunakan internet untuk mencari informasi. Salah satu yang dapat diterapkan adalah aplikasi denah ruang gedung yang dapat diakses melalui internet. Aplikasi berbasis web adalah aplikasi yang dapat diakses melalui jaringan LAN atau internet. Keuntungan aplikasi berbasis web ini adalah dapat digunakan tanpa harus diinstal di komputer user, dan satu aplikasi dapat digunakan secara bersamaan oleh banyak user. Metodologi yang
digunakan
dalam penelitian
ini adalah
metode
pengumpulan data dan metode pengembangan multimedia. Metode pengumpulan data terdiri dari metode wawancara, studi pustaka, dan kuesioner. Sedangkan metode pengembangan multimedia yang digunakan adalah metode menurut Luther, yang terdiri dari enam tahap yaitu konsep, desain, pengumpulan material, pembuatan, pengujian, dan distribusi. Aplikasi ini menggunakan web sebagai media pengujian di internet. Proses pembuatannya menggunakan Autodesk 3Ds Max untuk desain gedung dalam bentuk 3 dimensi kemudian menggunakan Adobe Flash CS4 untuk perancangan animasi dan Adobe Dreamweaver CS4 untuk perancangan web. Hasil akhirnya adalah animasi flash dengan dimensi 630 x 335 pixels yang dapat diakses melalui web. Kata kunci: Proyeksi, Web, Multimedia
i
KATA PENGANTAR
Puja dan puji sukur hanya milik Allah Tuhan Semesta Alam yang selalu memberikan keberkahan dan karunia bagi siapa saja yang berjuang di jalanNya. Sholawat dan salam tak lupa pula tertuju kepada junjungan kita Nabi Muhammad saw beserta keluarga, sahabat dan para pengikutnya hingga akhir zaman. Penulis bersyukur telah dapat menyelesaikan skripsi yang berjudul "PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA PADA GEDUNG
FAKULTAS
SAINS
DAN
TEKNOLOGI
UIN
SYARIF
HIDAYATULLAH JAKARTA" Penulis berharap semoga aplikasi dapat memberikan kontribusi yang baik bagi Fakultas Sains Dan Teknologi UIN Syarif Hidayatullah Jakarta Penyusunan skripsi ini dimaksudkan untuk melengkapi tugas guna memenuhi syarat untuk memperoleh gelar Sarjana Komputer Jurusan Teknik Informatika Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif Hidayatullah Jakarta. Dalam penyusunan skripsi ini penulis menyadari bahwa skripsi ini tidak dapat terlaksana dengan baik tanpa bantuan dan bimbingan dari semua pihak. Pada kesempatan ini, perkenankan penulis mengucapkan terima kasih kepada : 1. Bapak Prof. Dr. Komarudin Hidayat selaku Rektor Universitas Islam Negeri Syarif Hidayatullah Jakarta. Bapak Dr. Syopiansyah Jaya Putra,M.Sis, selaku Dekan Fakultas Sains dan Teknologi, Universitas Islam Negeri Syarif
ii
Hidayatullah Jakarta. Bapak Yusuf Durrachman, MIT, M.Sc selaku kepala program studi Teknik Informatika. 2. Bapak DR. Eko Syamsuddin H. M.Eng, selaku dosen pembimbing I dan Bapak M. Yusuf, S.Kom, selaku dosen pembimbing II yang telah memberikan kesempatan, waktu, kesabaran dan perhatiannya untuk membimbing penulis dalam menyelesaikan skripsi ini. 3. Kedua orang tuaku dan seluruh anggota keluarga tercinta, yang selalu memberikan dukungan, semangat, kasih sayang dan do’a yang tiada hentihentinya serta teman-temanku semua angkatan 2003 seperjuangan. Akhir kata, dengan segala kerendahan hati penulis mengucapkan terima kasih yang tak terhingga kepada semua pihak yang telah membantu penyelesaian skripsi ini. Penulis mempersembahkan skripsi ini dengan segala kelebihan dan kekurangannya, semoga dapat bermanfaat bagi kita semua, amin.
Jakarta, April 2011
Nurlaila Maulina NIM. 103091029613
iii
LEMBAR PERSEMBAHAN
Skripsi ini khusus penulis persembahkan kepada pihak-pihak yang telah memberikan dukungan baik secara moril dan meteril dalam menyelesaikan penelitian skripsi ini, diantaranya adalah: 1. Orang tua tercinta, Ahmad Komarudin dan Riyati Komariah yang telah membesarkan penulis dengan penuh kasih sayang. Kalianlah motivasi terbesar penulis dalam penyelesaian skripsi ini. Semoga setelah ini akan ada banyak kebahagiaan yang dapat penulis berikan kepada kalian. 2. Adikku tersayang Fera Wijayanti. Terima kasih atas kesabaran karena sering disusahin oleh kakakmu ini ya. 3. Sahabat-sahabatku Putro, Adam, Wildan, Shidiq, Tanto, Giri, Teddy, Fahmi. Terima kasih tawa, canda dan ilmu yang telah dishare. Dan terima kasih untuk kebersamaan yang semoga tak lekang oleh waktu. 4. Honhon, Bee, Nyanya, Nyinyi, Way, Endah, Zee, Alvin, Eni. Karena kalian, semua jadi terasa lebih enteng. Kalian adalan wanita-wanita hebat yang bisa tahan menemaniku selama ini. 5. TID 2003 dan TIC 2004. Terima kasih atas kebersamaannya selama ini. Semoga sukses untuk kalian semua. 6. Lia Mpuss. Terima kasih atas kemudahan yang sudah diberikan untuk mempercepat proses penyelesaian skripsi ini.
iv
7. Quroi. Terima kasih karna telah bekerja sama untuk mengerjakan skripsi ini. Walau tidak sampai final, tapi kontribusimu yang paling utama dalam proses ini. 8. Semua orang yang maaf tak dapat disebutkan satu persatu. Terima kasih atas segala support baik itu moril maupun materil dalam terselesaikannya skripsi ini. Terima kasih untuk kalian.
v
DAFTAR ISI
ABSTRAKSI .................................................................................................. i KATA PENGANTAR ...................................................................................
DAFTAR ISI .................................................................................................
vi
DAFTAR GAMBAR ..................................................................................... x DAFTAR TABEL .........................................................................................
xvii
DAFTAR LAMPIRAN .................................................................................
4.10 Pembuatan............................................................................... 62 4.10.1 Spesifikasi perangkat keras yang digunakan dalam pengembangan............................................................. 63 4.10.2 Spesifikasi perangkat lunak yang digunakan dalam pengembangan ............................................................ 64 4.10.3 Proses pembuatan aplikasi........................................... 65 4.11 Pengujian ................................................................................ 74 4.12 Cara Pengoperasian Aplikasi .................................................. 75 4.13 Penjelasan Tampilan Aplikasi ................................................ 75 4.14 Implementasi .......................................................................... 76 4.14 Evaluasi .......................................................................... BAB V KESIMPULAN DAN SARAN ......................................................
Daftar Pustaka ................................................................................................ 79 Lampiran-Lampiran ........................................................................................ 80
ix
DAFTAR GAMBAR
Gambar 2.1.
Proyeksi (Gambar Teknik : 2007) .......................................... 9
Gambar 2.2.
Proyeksi isometric (Gambar Teknik : 2007) .......................... 10
Gambar 2.3.
Proyeksi isometri dengan posisi normal (Gambar Teknik : 2007) ......................................................... 11
Gambar 2.4.
Proyeksi isometri dengan posisi terbalik (Gambar Teknik : 2007) .......................................................... 11
Gambar 2.5.
Proyeksi isometri dengan posisi horizontal (Gambar Teknik : 2007) .......................................................... 12
Gambar 2.6.
Proyeksi dimitri (Gambar Teknik : 2007) ............................... 13
Gambar 2.7.
Proyeksi miring (Gambar Teknik : 2007) ................................ 13
Gambar 2.8.
Perspektif dengan satu titik hilang (Gambar Teknik : 2007) ... 14
Gambar 2.9.
Proyeksi orthogonal dari sebuah titik (Gambar Teknik Untuk SMA:2007) .............................................................................. 16
Gambar 2.10. Proyeksi orthogonal dari sebuah garis (Gambar Teknik Untuk SMA:2007) .............................................................................. 16 Gambar 2.11. Proyeksi orthogonal dari sebuah bidang (Gambar Teknik Untuk SMA:2007) .............................................................................. 17 Gambar 2.12. Proyeksi Eropa (Gambar Teknik : 2007) ................................. 18 Gambar 2.13. Proyeksi Amerika (Gambar Teknik : 2007) ............................ 19 Gambar 2.14. Contoh teks .............................................................................. 22 Gambar 2.15. Contoh Image .......................................................................... 23
x
Gambar 2.16. Hirarki objek image dalam multimedia ................................... 24 Gambar 2.17. Contoh gerakan animasi kuda berlari ...................................... 24 Gambar 2.18. Contoh perangkat audio .......................................................... 25 Gambar 2.19. Kegiatan presentasi bisnis menggunakan multimedia ............ 27 Gambar 2.20. Aplikasi multimedia belajar ..................................................... 28 Gambar 2.21. Electronic Book ....................................................................... 29 Gambar 2.22. Toko Online ............................................................................. 30 Gambar 2.23. Teleconference ......................................................................... 31 Gambar 2.24. Animasi Naruto ........................................................................ 32 Gambar 2.25. Virtual Reality .......................................................................... 33 Gambar 2.26. Aplikasi Web Blog .................................................................. 34 Gambar 2.27. Game Online ............................................................................ 35 Gambar 2.28. Proses Flowchart (Al Bahra bin Ladjamudin:2005) ................ 38 Gambar 2.29. Simbol State keadaan sistem (Pressman : 2002) ..................... 39 Gambar 2.30. Simbol State perubahan sistem (Pressman : 2002) .................. 39 Gambar 2.31. Simbol State kondisi dan aksi (Pressman : 2002) .................... 39 Gambar 2.32. Storyboard ............................................................................... 40 Gambar 2.33. Tampilan lembar kerja 3Ds Max 2009 (Screenshot 3Ds Max 2009) .................................................... 41 Gambar 2.34. Tampilan lembar kerja Adobe Photoshop CS3 (Screenshot Adobe Photoshop CS3) ....................................................................... 42 Gambar 2.35. Tampilan lembar kerja Adobe Dreamweaver CS3 (Screenshot Adobe Dreamweaver CS3) ..................................................... 43
xi
Gambar 2.36. Tampilan lembar kerja Adobe Flash CS3 (Screenshot Adobe Flash CS3) ......................................................................................... 44 Gambar 3.1.
Tahap Pengembangan Multimedia ......................................... 47
Gambar 3.2.
Bagan Tahap Pengembangan Multimedia ............................. 47
Gambar 4.1.
Foto observasi gedung Fakultas Sains dan Teknologi ............ 56
Flowchart Proyeksi Web Tata Ruang Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta....................................................................................... 59
Gambar 4.4.
Desain Struktur Menu ............................................................. 60
Gambar 4.5.
Rancangan Tampilan Halaman Utama Aplikasi Proyeksi Tata Ruang Berbasis Web Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta ............................................ 61
Gambar 4.6.
Denah awal yang diterima dari pihak fakultas ....................... 62
Gambar 4.7.
Denah awal yang diterima dari pihak fakultassebelum proses digitasi..................................................................................... 65
Gambar 4.8.
Denah setelah proses digitasi ................................................. 66
Gambar 4.9.
Preview menggunakan proyeksi perspektif (kiri) dan preview menggunakan proyeksi ortogonal (kanan) ............................. 66
Gambar 4.10. Objek plan yang digunakan sebagai lantai.............................. 67 Gambar 4.11. Objek box yang akan digunakan sebagai dinding................... 67 Gambar 4.12. Objek box yang akan digunakan sebagai tiang/pilar............... 68
xii
Gambar 4.13. Objek box yang telah diberi motif bata untuk dijadikan detil balkon.....................................................................................
68
Gambar 4.14. Objek box dan silinder yang akan dijadikan detil balkon....... 69 Gambar 4.15. Objek pintu.............................................................................. 69 Gambar 4.16. Objek jendela..........................................................................
70
Gambar 4.17. Tiang-tiang dipasang pada lantai............................................
70
Gambar 4.18. Dinding dipasang dan dilubangi.............................................. 71 Gambar 4.19. Pintu dan jendela serta balkon dipasang pada dinding...........
71
Gambar 4.20. Hasil gedung telah jadi............................................................ 71 Gambar 4.21. Proses editing flash menggunakan Adobe Flash CS3............. 72 Gambar 4.22. Proses editing gambar menggunakan Adobe Photoshop CS4. 73 Gambar 4.23. Proses editing web menggunakan Adobe Dreamweaver CS4. 73 Gambar 4.12. Tampilan halaman index.html ................................................ 76 Gambar L.1
Rancangan STD Menu Utama ...............................................
Gambar L.6
Rancangan STD Menu Profil ................................................. 91
Gambar L.7
Rancangan STD Menu Proyeksi ............................................ 92
Gambar L.8
Rancangan STD Menu Galeri ...............................................
93
Gambar L.9
Rancangan STD Menu Credit ...............................................
94
Gambar L.10 Rancangan STD Menu Visi ... ...............................................
95
90
xiii
Gambar L.11 Rancangan STD Menu Misi ..................................................
96
Gambar L.12 Rancangan STD Menu Motto ...............................................
97
Gambar L.13 Rancangan STD Menu Program Studi ..................................
98
Gambar L.14 Rancangan STD Menu Teknik Informatika ..........................
99
Gambar L.15 Rancangan STD Menu Sistem Informasi ..............................
100
Gambar L.16 Rancangan STD Menu Agribisnis .........................................
101
Gambar L.17 Rancangan STD Menu Matematika ......................................
102
Gambar L.18 Rancangan STD Menu Biologi ............................................... 103 Gambar L.19 Rancangan STD Menu Kimia ................................................ 104 Gambar L.20 Rancangan STD Menu Fisika ................................................. 105 Gambar L.21 Rancangan STD Menu Internasional ...................................... 106 Gambar L.22 Rancangan STD Menu ”Lantai 1” .........................................
107
Gambar L.23 Rancangan STD Menu ”Lantai 2” .........................................
108
Gambar L.24 Rancangan STD Menu ”Lantai 3” .........................................
109
Gambar L.25 Rancangan STD Menu ”Lantai 4” .........................................
110
Gambar L.26 Rancangan STD Menu ”Lantai 5” .........................................
111
Gambar L.27 Rancangan STD Menu ”Lantai 6” .........................................
112
Gambar L.28 Rancangan STD Menu ”Lantai 7” .........................................
113
Gambar L.29 Rancangan Menu Utama ........................................................ 114 Gambar L.30 Rancangan Menu Profil .........................................................
115
Gambar L.31 Rancangan Menu Proyeksi ....................................................
116
Gambar L.32 Rancangan Menu Galeri ........................................................
117
Gambar L.33 Rancangan Menu Credit ........................................................
118
xiv
Gambar L.34 Rancangan Menu Visi ...........................................................
119
Gambar L.35 Rancangan Menu Misi ..........................................................
120
Gambar L.36 Rancangan Menu Motto ........................................................
121
Gambar L.37 Rancangan Menu Program Studi ............................................ 122 Gambar L.38 Rancangan Menu Teknik Informatika .................................... 123 Gambar L.39 Rancangan Menu Sistem Informasi ........................................ 124 Gambar L.40 Rancangan Menu Agribisnis .................................................. 125 Gambar L.41 Rancangan Menu Matematika ...............................................
126
Gambar L.42 Rancangan Menu Biologi ....................................................... 127 Gambar L.43 Rancangan Menu Kimia ........................................................ 128 Gambar L.44 Rancangan Menu Fisika ........................................................ 129 Gambar L.45 Rancangan Menu Internasional .............................................. 130 Gambar L.46 Rancangan Menu ”Lantai 1” .................................................. 131 Gambar L.47 Rancangan Menu ”Lantai 2” .................................................. 132 Gambar L.48 Rancangan Menu ”Lantai 3” .................................................. 133 Gambar L.49 Rancangan Menu ”Lantai 4” .................................................. 134 Gambar L.50 Rancangan Menu ”Lantai 5” .................................................. 135 Gambar L.51 Rancangan Menu ”Lantai 6” .................................................. 136 Gambar L.52 Rancangan Menu ”Lantai 7” .................................................. 137 Gambar L.53 Tampilan index.html ............................................................... 138 Gambar L.54 Tampilan profil.html ............................................................... 138 Gambar L.55 Tampilan proyeksi.html .......................................................... 139 Gambar L.56 Tampilan galeri.html ............................................................... 139
xv
Gambar L.57 Tampilan credit.html ............................................................... 140 Gambar L.58 Tampilan profil_visi.html ......................................................
140
Gambar L.59 Tampilan profil_misi.html ...................................................... 141 Gambar L.60 Tampilan profil_motto.html .................................................... 141 Gambar L.61 Tampilan program_studi.html ................................................. 142 Gambar L.62 Tampilan profil_reg_ti.html .................................................... 142 Gambar L.63 Tampilan profil_reg_si.html .................................................... 143 Gambar L.64 Tampilan profil_reg_agri.html ................................................ 143 Gambar L.65 Tampilan profil_reg_mtk.html ................................................ 144 Gambar L.66 Tampilan profil_reg_bio.html ................................................. 144 Gambar L.67 Tampilan profil_reg_kim.html ................................................ 145 Gambar L.68 Tampilan profil_reg_fis.html .................................................. 145 Gambar L.69 Tampilan profil_inter.html ...................................................... 146 Gambar L.70 Tampilan lantai1.html ............................................................. 146 Gambar L.71 Tampilan lantai2.html ............................................................. 147 Gambar L.72 Tampilan lantai3.html ............................................................. 147 Gambar L.73 Tampilan lantai4.html ............................................................. 148 Gambar L.74 Tampilan lantai5.html ............................................................. 148 Gambar L.75 Tampilan lantai6.html ............................................................. 149 Gambar L.76 Tampilan lantai7.html .............................................................. 149
xvi
DAFTAR TABEL
Tabel L.1.
Hasil olahan kuesioner awal pertanyaan No.1 ........................ 82
Tabel L.2.
Hasil olahan kuesioner awal pertanyaan No.2 ........................ 83
Tabel L.3.
Hasil olahan kuesioner awal pertanyaan No.3 ........................ 84
Tabel L.4.
Hasil olahan kuesioner awal pertanyaan No.4 ........................ 84
Tabel L.5.
Hasil olahan kuesioner awal pertanyaan No.5 ........................ 85
Tabel L.6.
Hasil olahan kuesioner akhir pertanyaan No.1 ....................... 151
Tabel L.7.
Hasil olahan kuesioner akhir pertanyaan No.2 ....................... 151
Tabel L.8.
Hasil olahan kuesioner akhir pertanyaan No.3 ........................ 152
Tabel L.9.
Hasil olahan kuesioner akhir pertanyaan No.4 ........................ 151
Tabel L.10.
Hasil olahan kuesioner akhir pertanyaan No.5 ........................ 153
Script Web ............................................................................... 163
xviii
BAB I PENDAHULUAN
1.1
Latar Belakang Dewasa ini hampir semua pencarian informasi dilakukan dengan bantuan teknologi internet. Termasuk informasi dalam pencarian alamat atau lokasi. Namun belum banyak yang menyediakan layanan pencarian ruangan dalam suatu gedung. Bagi orang yang belum pernah datang atau tidak familiar dengan suatu lokasi gedung, maka dia akan kesulitan untuk mencari ruangan yang ingin dituju. Sementara itu Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta belum memiliki sarana pengaksesan online terhadap gedung FST. Berdasarkan permasalahan tersebut maka penulis tertarik untuk merancang aplikasi proyeksi yang menggunakan teknologi multimedia berbasis web lengkap dengan elemen-elemennya seperti suara, gambar, teks, video, dan animasi sehingga dapat lebih menarik dan menjadi lebih mudah digunakan. Teknologi multimedia merupakan salah satu metode yang digunakan sebagai media penyampaian informasi karena memudahkan pemahaman dan memberikan kemudahan-kemudahan bagi pengguna, dan aplikasi multimedia cenderung mudah dijalankan. Pencitraan yang digunakan disini adalah pencitraan visual dengan menggunakan proyeksi berbasiskan gambar-gambar vektor dan bitmap
1
yang mudah untuk dimengerti karena tampilan visual yang menampilkan kesan dinamis yang menitik beratkan pada pencitraan visual yang menggunakan teknologi multimedia. Aplikasi berbasis web adalah aplikasi yang dapat diakses melalui jaringan LAN atau internet. Keuntungan aplikasi berbasis web ini adalah dapat digunakan tanpa harus diinstal di komputer user, dan satu aplikasi dapat digunakan secara bersamaan oleh banyak user. Pada penulisan skripsi ini penulis mencoba membuat sebuah aplikasi proyeksi tata ruang dengan menggunakan teknologi multimedia berbasis web dengan judul: "PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA PADA GEDUNG FAKULTAS SAINS DAN TEKNOLOGI
UIN
SYARIF
HIDAYATULLAH
JAKARTA".
Aplikasi akan dikemas dalam bentuk animasi agar dapat menarik bagi pengguna. Selain itu juga akan ditampilkan dalam bentuk web sehingga dapat diakses dengan mudah oleh pengguna. Dengan adanya aplikasi ini, diharapkan dapat mempermudah pengguna dalam memahami informasi yang akan disampaikan. 1.2
Perumusan Masalah Berdasarkan latar belakang tersebut diatas, maka penulis merumuskan pokok permasalahan yang akan dikaji lebih lanjut adalah sebagai berikut: 1.
Bagaimana membangun suatu aplikasi proyeksi tata ruang dari ruangan-ruangan yang ada dalam suatu gedung dengan memanfaatkan
2
keunggulan multimedia sehingga penyampaian informasi menjadi lebih mudah untuk dipahami. 2.
Bagaimana membuat tampilan proyeksi dari tata ruang gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta berikut deskripsi-deskripsinya sebagai tujuan dari aplikasi sistem informasi tata letak ruang dengan pemanfaatan teknologi multimedia yang dapat diakses kapan saja dan dimana saja menggunakan teknologi internet.
1.3
Batasan Masalah Karena kompleksnya permasalahan di lapangan, maka penulis perlu membatasi masalah dalam penelitian ini. Adapun batasan permasalah dalam penelitian ini meliputi: Permasalahan materi hanya akan membahas mengenai tata ruang pada gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.
1.4
Tujuan dan Manfaat Penelitian 1.4.1 Tujuan Penelitian 1.
Merancang suatu aplikasi proyeksi berbasis web multimedia sebagai media yang presentatif, interaktif, menarik, dan mudah digunakan, sehingga dapat membantu pengguna.
2.
Memberikan sebuah panduan berupa tata ruang dari gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta yang mudah dimengerti dan digunakan.
1.4.2 Manfaat Penelitian 1.
Manfaat penelitian bagi penulis:
3
a.
Memenuhi salah satu syarat dalam memenuhi gelar S1 (Strata satu) pada Fakultas Sains dan Teknologi, Program Studi Teknik Informatika Universitas Islam Negeri Syarif Hidayatullah Jakarta.
b.
Menambah wawasan penulis mengenai proyeksi dan dapat menerapkannya
langsung
dengan
mengembangkan
aplikasi proyeksi tersebut. 2.
Manfaat penelitian bagi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta: a.
Hasil penelitian diharapkan dapat membantu pihak Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta dalam memberikan pelayanan informasi mengenai ruang gedung kepada mahasiswa maupun masyarakat umum.
b.
Hasil penelitian dapat menjadi sarana promosi bagi pihak Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta dalam menarik minat calon mahasiswa baru.
3.
Manfaat penelitian bagi masyarakat umum: a.
Memudahkan masyarakat mengakses informasi dan mendapat gambaran bagaimana bentuk dan isi gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.
4
b.
Sebagai referensi untuk pengembangan aplikasi dengan menggunakan proyeksi tata ruang.
1.5
Metodologi Penelitian 1.5.1 Metode Interview dan Kuisioner Pengumpulan data dan informasi dengan cara bertanya langsung (interview) kepada pihak-pihak yang bersangkutan, yaitu dari instansi terkait dan juga dari para mahasiswa. Untuk mengumpulkan informasi dan pendapat dari mahasiswa dilakukan dengan cara memberikan kuisioner kepada mahasiswa yang bertujuan untuk mendapatkan informasi dan apa saja yang dibutuhkan oleh mahasiswa. 1.5.2 Metode Studi Lapangan Dilakukan dengan cara melakukan penelitian langsung ke lapangan yaitu area kerja dimana informasi dan materi akan diperoleh seperti ruang denah ruang, informasi tentang ruang, video, foto, dsb. yang akan digunakan dalam implementasi sistem. 1.5.3 Metode Studi Pustaka Dilakukan dengan cara membaca dan mempelajari bukubuku yang berhubungan dengan multimedia serta buku-buku yang mendukung dengan topik yang akan dibahas dalam penyusunan skripsi ini, selain itu penulis juga mengumpulkan data (dengan browser) dari situs-situs internet yang berhubungan dengan skripsi penulis.
5
1.5.4 Metode Pengembangan Aplikasi Multimedia Menurut Luther (dalam Ariesto Hadi Soetopo, 3003:32) pengembangan sistem multimedia dilakukan berdasar enam tahap. Enam tahapan tersebut adalah sebagai berikut : 1.
Konsep Tahap konsep (concept) yaitu menentukan tujuan, termasuk identifikasi audien (pihak yang bersangkutan), macam aplikasi (presentasi, interaktif, dan lain-lain), tujuan aplikasi (informasi, hiburan, pelatihan, pendidikan, dan lain-lain) dan spesifikasi umum. Dasar aturan untuk perancangan juga ditentukan pada tahap ini, seperti ukuran aplikasi, target, dan lain-lain.
2.
Perancangan Maksud dari tahap perancangan (design) adalah membuat spesifikasi secara rinci mengenai arsitektur proyek, serta gaya dan kebutuhan material untuk proyek, seperti perancangan storyboard, perancangan flowchart, perancangan struktur navigasi, perancangan diagram transisi, perancangan tampilan, dan lain-lain.
3.
Pengumpulan Bahan Pada tahap pengumpulan bahan (material collecting) dilakukan pengumpulan bahan seperti denah, gambar, informasi tentang gedung, dan data ruang, berikut pembuatan gambar, dan grafik,
6
pengambilan foto, dan lain-lain yang diperlukan untuk tahap berikutnya. 4.
Pembuatan Tahap pembuatan (assembly) merupakan tahap dimana seluruh obyek multimedia dibuat. Pembuatan aplikasi berdasarkan storyboard, flowchart view, struktur navigasi, atau diagram transisi yang berasal dari tahap desain.
5.
Pengujian Tahap pengujian (testing) dilakukan setelah selesai tahap pembuatan dan seluruh data telah dimasukkan. Fungsi dari pengujian adalah memastikan bahwa hasil pembuatan aplikasi sesuai dengan yang direncanakan.
6.
Distribusi Pada tahap ini akan dilakukan implementasi serta evaluasi terhadap aplikasi dan setelah semuanya selesai, aplikasi akan ditampilkan dalam bentuk web dan dapat diakses oleh pengguna dari manapun selama ada koneksi internet dan browser internet yang mendukung.
1.6
Sistematika Penulisan Untuk memudahkan pembahasan, keseluruhan perancangan system ini dibagi menjadi lima bab dengan pokok pikiran dari tiap-tiap bab sebagai berikut:
7
BAB I
PENDAHULUAN Pada bab ini akan dijelaskan tentang latar belakang masalah, perumusan masalah, batasan masalah, tujuan dan manfaat penelitian serta metodologi penelitian dan sistematika penulisan.
BAB II
LANDASAN TEORI Pada bab ini akan menguraikan tentang teori-teori yang digunakan sebagai landasan atau dasar dari penulisan skripsi.
BAB III
METODOLOGI PENELITIAN Pada bab ini akan dibahas mengenai metodologi penelitian yang digunakan
dalam
mengembangkan
aplikasi
multimedia
berdasarkan metodologi pengembangan aplikasi multimedia. BAB IV
ANALISIS DAN PEMBAHASAN Pada
bab ini
membahas
mengenai hasil
dari
analisa,
perancangan, implementasi sesuai dengan metodologi yang dilakukan pada sistem yang dibuat. BAB V
PENUTUP Pada bab ini berisi kesimpulan dari hasil penelitian yang dilakukan, dan
juga
berisi
saran-saran
perbaikan
yang
berhubungan dengan masalah yang dibahas.
8
BAB II TINJAUAN PUSTAKA
2.1
Proyeksi Menurut
Gambar Teknik untuk SMK (2007:1),
Proyeksi
merupakan cara penggambaran suatu benda, titik, garis, bidang, benda ataupun pandangan suatu benda terhadap suatu bidang gambar. Secara umum proyeksi dapat dilihat pada gambar dibawah ini: PROYEKSI
Sebuah titik Sebuah garis Sebuah bidang Sebuah benda
Proyeksi Pandangan (Posisi Pandangan)
- Proyeksi Eropa - Proyeksi Amerika
Gambar 2.1. Proyeksi (Gambar Teknik : 2007)
2.1.1 Proyeksi Piktoral Untuk menampilkan gambar-gambar tiga dimensi pada sebuah bidang dua dimensi, dapat dilakukan dengan beberapa macam cara proyeksi sesuai dengan aturan menggambar. Beberapa macam cara proyeksi antara lain:
1
1. Proyeksi Isometri Untuk mengetahui apakah suatu gambar diproyeksikan dengan cara isometri atau untuk memproyeksikan gambar tiga dimensi pada bidang dengan proyeksi isometri, maka perlu diketahui ciri-ciri dan syarat-syarat untuk menampilkan suatu gambar dengan proyeksi isometri. a. Ciri dan Syarat Proyeksi Isometri: 1) Ciri pada sumbu Sumbu x dan sumbu y mempunyai sudut 30° terhadap garis mendatar. Sudut antara sumbu satu dengan sumbu lainnya 120°. 2) Ciri pada ukurannya Panjang gambar pada masing-masing sumbu sama dengan panjang benda yang digambarnya. Contoh :
Gambar 2.2. Proyeksi isometric (Gambar Teknik : 2007)
2
b. Penyajian Proyeksi Isometri Penyajian gambar dengan proyeksi isometri dapat dilakukan dengan beberapa posisi (kedudukan), yaitu posisi normal, terbalik, dan horisontal. 1) Proyeksi isometri dengan posisi normal Contoh: 120
y
°
z
°
30
°
30
x
x
y
titik referensi z Gambar 2.3. Proyeksi isometri dengan posisi normal (Gambar Teknik : 2007)
2) Proyeksi isometri dengan posisi terbalik Contoh:
y
120
°
0
3
°
0
3
z
x
°z
titik referensi
y
x
Gambar 2.4. Proyeksi isometri dengan posisi terbalik (Gambar Teknik : 2007)
3
3) Proyeksi isometri dengan posisi horizontal
°
y
30
Contoh:
12
z
0° °
30
y
x
Titik referensi z
x Gambar 2.5. Proyeksi isometri dengan posisi horizontal (Gambar Teknik : 2007)
2. Proyeksi Dimetri Pada proyeksi dimetri terdapat beberapa ciri dan ketentuan yang perlu diketahui, ciri dan ketentuan tersebut antara lain: a. Ciri pada sumbu Pada sumbu x mempunyai sudut 10°, sedangkan pada sumbu y mempunyai sudut 40°. b. Ketentuan ukuran Perbandingan skala ukuran pada sumbu x = 1:1, dan skala pada sumbu y = 1:2, sedangkan pada sumbu z = 1:1
4
Contoh:
°
y °
40
x
10
z
Keterangan: Ukuran pada sumbu x 40 mm Ukuran gambar pada sumbu y digambar ½nya, yaitu 20 mm Ukuran pada sumbu z 40 mm
Gambar 2.6. Proyeksi dimitri (Gambar Teknik : 2007)
3. Proyeksi Miring Pada proyeksi miring, sumbu x berhimpit dengan garis horisontal/mendatar dan sumbu y mempunyai sudut 45° dengan garis mendatar. Skala pada proyeksi miring sama dengan skala pada proyeksi dimetri, yaitu skala pada sumbu x = 1:1, dan pada sumbu y = 1:2, sedangkan pada sumbu z = 1:1. Contoh: z
°
45
y x z
y
x Gambar 2.7. Proyeksi miring (Gambar Teknik : 2007)
5
4. Gambar Perspektif Dalam gambar teknik, gambar perspektif jarang dipakai. Gambar perspektif dibagi menjadi tiga macam, yaitu: a. Perspektif dengan satu titik hilang b. Perspektif dengan dua titik hilang c. Perspektif dengan tiga titik hilang Contoh: TH (Titik Hilang)
Gambar 2.8. Perspektif dengan satu titik hilang (Gambar Teknik : 2007)
2.1.2 Proyeksi Ortogonal Proyeksi ortogonal adalah gambar proyeksi yang bidang proyeksinya mempunyai sudut tegak lurus terhadap proyektornya. Garis-garis yang memproyeksikan benda terhadap bidang proyeksi disebut proyektor. Selain proyektor tegak lurus terhadap bidang proyeksinya juga proyektor-proyektor tersebut sejajar satu sama lain. Gambar
proyeksi
orthogonal
dipergunakan
untuk
memberikan informasi yang lengkap dan tepat dari suatu benda tiga dimensi. Untuk mendapatkan hasil demikian benda tersebut 6
diletakkan dengan bidang-bidang yang sejajar dengan bidang proyeksi, terutama sekali bidang yang penting diletakkan sejajar dengan bidang proyeksi vertikal. Proyeksi orthogonal pada umumnya tidak memberikan gambaran lengkap dari benda hanya dari satu proyeksi saja. Oleh karena itu diambil beberapa bidang proyeksi. Biasanya diambil tiga bidang tegak lurus, dan dapat ditambah dengan bidang bantu dimana diperlukan. Bendanya diproyeksikan secara orthogonal pada tiap-tiap bidang proyeksi untuk memperlihatkan benda tersebut pada bidang-bidang dua dimensi. Dengan menggabungkan gambar-gambar proyeksi tersebut dapatlah diperoleh gambaran jelas dari benda yang dimaksud. Cara penggambaran demikian disebut proyeksi orthogonal. Jika diperhatikan sistem proyeksi Eropa ini menempatkan posisi benda/obyek yang digambar berada di antara titik pengamat (proyektor) dan proyeksi benda. Jika diurutkan maka posisi tersebut adalah pengamat, objek, dan gambar proyeksi. Posisi pengamat terhadap bidang gambar adalah tegak lurus. Di samping itu, masing-masing garis pemroyeksi yang merupakan hubungan dari titik pengamat dan benda sehingga menghasilkan proyeksi tersebut adalah sejajar sesamanya. Ruang/sudut yang berbentuk tiga dimensi ini diubah sedemikian rupa menjadi dua dimensi. Dengan kata lain diubah
7
menjadi bidang datar sehingga dapat dituangkan ke dalam bidang atau kertas gambar. Contoh-contoh proyeksi ortogonal dapat dilihat pada gambar berikut ini: 1. Proyeksi ortogonal dari sebuah titik A
Proyektor Bidang Proyeksi Proyeksi
Gambar 2.9. Proyeksi orthogonal dari sebuah titik (Gambar Teknik Untuk SMA:2007)
2. Proyeksi ortogonal dari sebuah garis A B A’ B’
Gambar 2.10. Proyeksi orthogonal dari sebuah garis (Gambar Teknik Untuk SMA:2007)
8
3. Proyeksi ortogonal dari sebuah bidang A B C D
A’ B’ D’ C’
Gambar 2.11. Proyeksi orthogonal dari sebuah bidang (Gambar Teknik Untuk SMA:2007)
2.1.3 Proyeksi Pandangan Proyeksi Eropa dan Amerika merupakan proyeksi yang digunakan untuk memproyeksikan pandangan dari sebuah gambar tiga dimensi terhadap bidang dua dimensi. 1. Proyeksi Eropa Proyeksi Eropa disebut juga proyeksi sudut pertama, juga ada yang menyebutkan proyeksi kuadran I, perbedaan sebutan ini tergantung dari masing pengarang buku yang menjadi refrensi. Dapat dikatakan bahwa Proyeksi Eropa ini merupakan proyeksi yang letak bidangnya terbalik dengan arah pandangannya (lihat gambar).
9
P.A P.Be
P.Ka P.Ki Keterangan: P.A = Pandangan Atas P.Ki = Pandangan Kiri P.Ka = Pandangan Kanan P.Ba = Pandangan Bawah P.Be = Pandangan Belakang
P.D P.Ba
P.Ba
P.Ka
P.D
P.Ki
P.Be
P.A Gambar 2.12. Proyeksi Eropa (Gambar Teknik : 2007)
2. Proyeksi Amerika Proyeksi Amerika dikatakan juga proyeksi sudut ketiga dan juga ada yang menyebutkan proyeksi kuadran III. Proyekasi Amerika merupakan proyeksi yang letak bidangnya sama dengan arah pandangannya (lihat gambar).
10
P.A P.Be
P.Ka Keterangan: P.A = Pandangan Atas P.Ki = Pandangan Kiri P.Ka = Pandangan Kanan P.Ba = Pandangan Bawah P.Be = Pandangan Belakang
P.Ki
P.D P.Ba P.A
P.Ki
P.D
P.Ka
P.Be
P.Ba Gambar 2.13. Proyeksi Amerika (Gambar Teknik : 2007)
2.2
Internet 2.2.1 Pengertian Internet Secara
harfiah,
internet
(kependekan
daripada
perkataan
'interconnected-networking') ialah rangkaian komputer yang terhubung di dalam beberapa rangkaian. Manakala Internet (huruf 'I' besar) ialah sistem komputer umum, yang berhubung secara global dan menggunakan TCP/IP sebagai protokol pertukaran paket (packet switching communication protocol). Rangkaian internet yang terbesar dinamakan Internet. Cara menghubungkan rangkaian dengan kaedah ini dinamakan internetworking.1
1
http://id.wikipedia.org/wiki/Internet : 2009
11
2.2.2 TCP/IP TCP/IP (singkatan dari Transmission Control Protocol/Internet Protocol) adalah standar komunikasi data yang digunakan oleh komunitas internet dalam proses tukar-menukar data dari satu komputer ke komputer lain di dalam jaringan Internet. Protokol ini tidaklah dapat berdiri sendiri, karena memang protokol ini berupa kumpulan protokol (protocol suite). Protokol ini juga merupakan protokol yang paling banyak digunakan saat ini. Data tersebut diimplementasikan dalam bentuk perangkat lunak (software) di sistem operasi. Istilah yang diberikan kepada perangkat lunak ini adalah TCP/IP stack.2 2.2.3 World Wide Web (WWW) Jejaring Jagat Jembar ("JJJ") atau World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumbersumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). JJJ sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. 3 2.2.4 Web Browser Penjelajah web (bahasa Inggris: web browser), disebut juga sebagai perambah atau peramban, adalah perangkat lunak yang berfungsi menampilkan dan melakukan interaksi dengan dokumen-dokumen 2 3
yang disediakan oleh server web. Penjelajah web yang populer adalah Microsoft Internet Explorer dan Mozilla Firefox. Penjelajah web adalah jenis agen pengguna yang paling sering digunakan. Web sendiri adalah Kumpulan jaringan berisi dokumen dan tersambung satu dengan yang lain, yang dikenal sebagai World Wide Web.4 2.2.5 Hypertext Transfer Protocol HTTP (Hypertext Transfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan generik yang dapat dipergunakan berbagai macam tipe dokumen.5 2.3
Multimedia Multimedia yang berarti terdiri dari berbagai media
6
adalah
penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat bernavigasi, berinteraksi, berkarya dan berkomunikasi. Multimedia sering digunakan dalam dunia hiburan. Selain dari dunia hiburan, multimedia juga diadopsi oleh dunia Game.7
4
http://id.wikipedia.org/wiki/Web_browser : 2009 http://id.wikipedia.org/wiki/HTTP : 2009 6 Febrian, Jack: "Kamus Komputer dan Teknologi Informasi", halaman 301. Informatika, 2007 7 http://id.wikipedia.org/wiki/Multimedia : 2009 5
13
Interaktif yaitu melibatkan pengguna untuk mengontrol atau memberi perintah. Multimedia interaktif adalah multimedia yang dapat menangani pengguna interaktif.8 2.3.1 Objek Multimedia Menurut Ariesto Hadi Sutopo (2003:8), multimedia terdiri dari beberapa objek, yaitu teks, image, animasi, audio, video, dan link interaktif. 1. Teks
Gambar 2.14. Contoh teks
Teks merupakan dasar dari pengolahan kata dan informasi berbasis multimedia. Beberapa yang harus diperhatikan adalah penggunaan hypertext, auto-hypertext, text style, import text dan export text. 2. Image
Secara umum image atau grafik berarti still image seperti foto dan gambar. Manusia sangat berorientasi pada visual (visualoriented), dan gambar merupakan sarana yang sangat baik untuk menyajikan informasi. Semua objek yang disajikan dalam bentuk grafik adalah bentuk setelah dilakukan encoding dan tidak mempunyai hubungan langsung dengan waktu. Gambar berikut memperlihatkan hirarki dari kelas objek yang termasuk dalam kategori image. Kelompok ini termasuk tipe data sepeti dokumen image, faksimili, fractal, bitmap, dan still photo.
15
Objek
Image
Visible image
Non-visible image
Foto Drawing Dokumen Painting
Ukuran tekanan
Ukuran temperatur
Abstrak
Diskrit Kontinu
Gambar 2.16. Hirarki objek image dalam multimedia
3. Animasi
Gambar 2.17. Contoh gerakan animasi kuda berlari
Animasi berarti gerakan image atau video, seperti gerakan orang yang sedang melakukan suatu kegiatan, dan lain-lain. Konsep dari animasi adalah menggambarkan sulitnya menyajikan informasi dengan satu gambar saja, atau sekumpulan gambar. Demikian
juga
tidak
dapat
menggunakan
teks
untuk
16
menerangkan informasi. Animasi seperti halnya film, dapat berupa frame-based atau cast-based. Frame-based animation (animasi berbasis frame) dibuat dengan merancang tiap frame tersendiri sehingga mendapatkan tampilan akhir. Cast-based animation (animasi berbasis cast) mencakup pembuatan control dari masing-masing objek (kadang-kadang disebut cast member atau actor) yang bergerak melintasi background. Hal ini merupakan bentuk umum animasi yang digunakan dalam game dan object-oriented software untuk lingkungan Window. Dalam authoring
software, biasanya
animasi mencakup
kemampuan “recording” dan “playback”. Fasilitas yang dimiliki oleh software animasi mencakup integrated animation tool, animation clip, import animasi, recording, playback, dan transition effect.9 4. Audio
Dalam sistem komunikasi bercirikan video, sinyal elektrik digunakan untuk membawa unsur bunyi. Istilah ini juga biasa digunakan untuk menerangkan sistem-sistem yang berkaitan dengan
proses
perekaman
pengambilan/penangkapan
dan
transmisi
suara,
yaitu
sambungan
sistem
transmisi
pembawa bunyi, amplifier dan lainnya. 5. Full-motion dan live video Full-motion video berhubungan dengan penyimpanan sebagai video clip, sedangkan live video merupakan hasil pemrosesan yang diperoleh dari kamera. Beberapa authoring tool dapat menggunakan
full-motion
video,
seperti
hasil
rekaman
menggunakan VCR, yang dapat menyajikan gambar bergerak dengan kulitas tinggi. File animasi memerlukan penyimpanan yang jauh lebih besar dibandingkan dengan file gambar. 6. Interactive link Sebagian besar dari multimedia adalah interaktif, dimana pengguna dapat menekan mouse atau objek pada screen seperti button atau teks dan menyebabkan program melakukan perintah tertentu. Interactive link dengan informasi yang berkaitan sering kali dihubungkan secara keseluruhan sebagai hypermedia. Secara spesifik,
dalam
hal
ini
termasuk
hypertext
(hotword),
18
hypergraphic dan hypersound menjelaskan jenis informasi yang dihubungkan. Interactive link diperlukan bila pengguna menunjuk pada suatu objek atau button supaya dapat mengakses program tertentu. Interactive link diperlukan untuk menggabungkan beberapa elemen multimedia sehingga menjadi informasi yang terpadu. Cara pengaksesan informasi pada multimedia terdapat 2 macam, yaitu linear dan non-linear.10 2.3.2 Penggunaan Multimedia Multimedia dapat digunakan untuk bermacam-macam bidang
pekerjaan,
tergantung
dari
kreatifitas
untuk
mengembangkannya. Aplikasi multimedia dibagi menjadi beberapa kategori, diantaranya yaitu: 1. Presentasi bisnis
Gambar 2.19. Kegiatan presentasi bisnis menggunakan multimedia
Presentasi bisnis biasanya linear, tanpa interaktif selain kontrol “next slide”. Interaktif dapat mempunyai nilai lebih, misalnya bila diperlukan jawaban suatu pertanyaan dari user. Penggunaan komputer untuk hal ini sangat baik, bahan yang disimpan dalam komputer dapat disajikan dengan menekan suatu button. 2. Aplikasi pelatihan dan pendidikan
Gambar 2.20. Aplikasi multimedia belajar
Komputer multimedia mulai mendapatkan perhatian saat digunakan untuk pelatihan atau pendidikan dari satu keadaan ke keadaan lain dengan siswa. Presentasi multimedia dapat menggunakan beberapa macam teks, chart, audio, video, animasi, simulasi atau foto. Bila macam-macam komponen tersebut digabungkan secara interaktif, maka menghasilkan suatu pembelajaran yang efektif.
20
3. Information delivery
Gambar 2.21. Electronic Book
Banyak aplikasi multimedia dikembangkan dengan kemampuan user untuk mengakses data. Koleksi data ditampilkan dalam bentuk buku, catalog, perpustakaan, tape audio, tape video, atau still photo. Salah satu dari macam tersebut dapat direkam dalam bentuk digital, dan ditampilkan dengan komputer multimedia, dan disebut information delivery. Karena komputer dapat melakukan manipulasi data untuk pencarian, akses, dan presentasi dapat lebih efektif dibandingkan dengan bentuk aslinya.
21
4. Promosi dan penjualan
Gambar 2.22. Toko Online
Aplikasi
penjualan
yang
information
delivery
penawaran,
negoisasi,
dapat
merupakan
gabungan
mempunyai
pengambilan
order
bentuk dan
dengan seperti lain-lain.
Information delivery merupakan program front end yang baik untuk penjualan produk. User dapat mencari bermacam-macam produk dari database, kemudian berpindah ke modul transaksi pemesanan dan pembayaran.
22
5. Productivity Terdapat banyak kemungkinan untuk menggunakan multimedia dengan aplikasi produksi (productivity application). Salah satu contoh adalah presentasi untuk online help dan tutorial. Kategori aplikasi ini merupakan kombinasi dari information delivery dengan training, dan biasanya menggunakan pemrograman dalam
authoring
language
atau
bahkan
dalam
bahasa
pemrograman seperti C, Visual Basic, dan lain-lain. Aplikasi yang dikembangkan oleh developer memerlukam pemrograman yang tidak masalah dalam pelaksanaannya. 6. Teleconferencing
Gambar 2.23. Teleconference
Suatu konferensi atau pertemuan memerlukan biaya yang besar terutama bagi orang yang banyak melakukan perjalanan. Bahan tidak disiapkan dan dicetak, dan setiap orang mengorbankan
23
pekerjaan rutin supaya dapat dating ke pertemuan. Teknologi jaringan digital dan multimedia dapat mengatasi kesulitan tersebut. Dengan teleconferencing, setiap orang dapat ikut serta dalam pertemuan tanpa harus meninggalkan tempatnya. 7. Film
Gambar 2.24. Animasi Naruto
Film animasi 2D atau 3D dapat digunakan sebagai saran informasi, pendidikan, dokumentasi, maupun hiburan. Film animasi merupakan multimedia linear yang dapat digunakan untuk penayangan melalui televisi, internet maupun hiburan di rumah. Seiring dengan perkembangan televisi, film animsi kartun mulai banyak dibuat untuk film khusus anak-anak. Film animasi
dapat
digunakan
untuk
presentasi,
pemodelan,
dokumenter dan lain-lain.
24
8. Virtual reality
Gambar 2.25. Virtual Reality
Virtual
reality telah banyak digunakan sebagai
sarana
pemasaran, presentasi, pengotrolan, hiburan, dan lain-lain. Dengan virtual reality, pemasaran dapat ditunjang dalam memasarkan produknya, seperti properti, interior, dan lain-lain. Presentasi suatu proyek tata kota yang akan dilaksanakan misalnya, dapat dilakukan dengan pembuatan model sehingga seolah-olah orang menelusuri jalan, bangunan, taman, dan lainlain. Bagian-bagian objek bila diperhatikan dapat dilihat dengan jelas, misalnya lampu penerangan jalan dengan tampilan yang rinci.
25
9. Aplikasi web
Gambar 2.26. Aplikasi Web Blog
Perkembangan teknologi
internet menambah penggunaan
multimedia pada internet yang mampu memenuhi kebutuhan komunikasi. Berbagai persoalan multimedia pada internet diantaranya adalah infrastruktur, regulasi, dan lain-lainnya. Contoh berbagai macam aplikasi multimedia dalam internet yang biasa disebut MoIP (Multimedia over Internet Protocol) seperti chatting, e-learning, video conference, game, dan lainlain. Bila aplikasi ini menggunakan database, diperlukan script yang dapat mengakses database di server seperti Active Server Pages (ASP) CGI/Perl, PHP, dan Java Server Pages (JSP).
26
10. Game
Gambar 2.27. Game Online
Beberapa game dilengkapi dengan kartun, yang pada umumnya mengandung humor di dalamnya. Karena kartun digunakan untuk beberapa tahun, beberapa pedoman dan peralatan diperlukan untuk mengembangkannya. Dalam game yang berupa kuis, teks pada screen hanya berisi pertanyaan, tetapi dapat dikombinasikan dengan gerakan grafik untuk menampilkan humor. Penggunaan warna memberikan nuansa dan karakter yang diperlukan. Dalam game puzzle, posisi koordinat dari keeping puzzle serta lokasi tertentu memerlukan ketelitian. 2.4
Interaksi Manusia dan Komputer Interaksi manusia dan komputer memiliki aturan mengenai perancangan sebuah user interface yang ramah dalam Eight Golden Rules
27
of User Interface, yang akan penulis terapkan dalam pengembangan kios informasi berbasis multmedia ini. Pengertian interaksi manusia dan komputer adalah disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi system komputer interaktif untuk digunakan oleh manusia (Schneiderman, 1998, 4) Suatu sistem yang interaktif sebaiknya menghasilkan rancangan yang baik (user friendly) agar dapat memberikan kemudahan bagi pemakai untuk mengakses atau berinteraksi dengan sistem yang ada. Terdapat delapan aturan (Eight Golden Rules of User Interface) untuk melakukan perancangan yang baik menurut Schneiderman (1998: 74), yaitu: 1.
Berusaha untuk selalu konsisten Penggunaan warna, bentuk tombol, jenis huruf harus tetap sama diseluruh program.
2.
Memungkinkan pemakai untuk menggunakan shortcut. Program menyediakan tombol shortcut yang berfungsi untuk ke bagian lain secara langsung dan tidak perlu melalui bagian–bagian yang biasa dilewati.
3.
Memberikan tanggapan yang informatif Program yang baik sebaiknya memberikan umpan balik yang informatif, sehingga tidak menyulitkan pemakai.
4.
Merancang yang memberikan penutupan
28
Program sebaiknya memberikan suatu dialog pada akhir proses, sehingga pemakai tahu kapan awal dan akhir dari suatu aksi. 5.
Memberikan pencegahan kesalahan. Sistem harus dapat memberikan solusi yang termudah untuk mengatasi permasalahan yang ada.
6.
Mengijinkan pemakai untuk membatalkan aksi Kesalahan sistem yang terjadi dapat dikembalikan pada aksi sebelum kesalahan terjadi.
7.
Mendukung pengendalian internal Memberikan kesan bahwa pengguna mempunyai kuasa penuh atas sistem tersebut dan mengharapkan sistem memberikan tanggapan aksi yang dilakukannya.
8.
Mengurangi penggunaan ingatan Terbatasnya kemampuan manusia untuk mengingat, tampilan pada suatu sistem sebaiknya mudah untuk diingat dan sederhana.
2.5
Flowchart Flowchart adalah bagan-bagan yang mempunyai arus yang menggambarkan langkah-langkah penyelesaian suatu masalah. Flowchart merupakan cara
penyajian dari
suatu algoritma. (Al-Bahra
bin
Ladjamudin, 2005: 263) Terdapat dua macam flowchart yang menggambarkan proses dengan komputer, yaitu system flowchart dan programme flowchart. System flowchart adalah bagan yang memperlihatkan urutan proses dalam
29
sistem dengan menunjukan alat media input, output serta jenis media penyimpanan dalam proses pengolahan data. Programme flowchart adalah bagan yang memperlihatkan urutan instruksi yang digambarkan dengan simbol tertentu untuk memecahkan masalah dalam suatu program. Pembuatan flowchart tidak ada kaidah baku yang bersifat mutlak, karena flowchart merupakan gambaran hasil pemikiran dalam menganalisa suatu masalah dengan komputer, sehingga flowchart yang dihasilkan dapat bervariasi antara satu programmer dengan programmer lainnya. Namun secara garis besar terdiri dari tiga bagian utama, yaitu input, proses dan output. Untuk lebih jelasnya lihat gambar berikut: Input
Proses
Output
Gambar 2.28. Proses Flowchart (Al Bahra bin Ladjamudin:2005)
2.6
State Transition Diagram (STD) State Transition Diagram (STD) adalah sebuah model tingkah laku yang bertumpu pada definisi dari serangkaian keadaan sistem. (Pressman, 2002 : 373) Notasi State Transition Diagram: 1.
Keadaan sistem. Setiap kotak mewakili suatu keadaan dimana sistem mungkin berada didalamnya. State disimbolkan dengan segi empat.
30
Gambar 2.29. Simbol State keadaan sistem (Pressman : 2002)
2.
Perubahan sistem. Untuk menghubungkan suatu keadaan dengan keadaan lain, menggunakan ini jika sistem memiliki transisi dalam perilakunya, maka hanya suatu keadaan dapat berubah menjadi keadaan tertentu.
Gambar 2.30. Simbol State perubahan sistem (Pressman : 2002)
3.
Kondisi dan aksi. Untuk melengkapi STD, dibutuhkan dua hal tambahan: Kondisi sebelum keadaan berubah dan aksi dari pemakai untuk mengubah keadaan. Di bawah ini adalah ilustrasi dari kondisi dan aksi yang ditampilkan di sebelah anak panah yang menghubungkan dua keadaan. Keadaan 1 Kondisi Aksi Keadaan 2
Gambar 2.31. Simbol State kondisi dan aksi(Pressman : 2002)
2.7
Storyboard Storyboard adalah uraian yang berisi visual dan audio penjelasan dari masing-masing alur dalam flowchart. Satu kolom dalam storyboard
31
mewakili satu tampilang di layar monitor. Dengan demikian, biasanya storyboard cukup banyak berlembar-lembar. Contoh storyboard: STORYBOARD Project Modul Tanggal
: : :
Color Text Attributes Still Images Animation Audio Narration Video Navigation
: : : : : : : : Next Back Menu Help
: : : :
Gambar 2.32. Storyboard
2.8
3D Studio Max 3D Studio Max (kadangkala disebut 3ds Max atau hanya MAX) adalah sebuah perangkat lunak grafik vektor 3-dimensi dan animasi, ditulis oleh Autodesk Media & Entertainment (dulunya dikenal sebagai Discreet
32
and Kinetix. Perangkat lunak ini dikembangkan dari pendahulunya 3D Studio fo DOS, tetapi untuk platform Win32. Kinetix kemudian bergabung dengan akuisisi terakhir Autodesk, Discreet Logic 11. Sejak pertama kali dirilis, 3D Studio Max menjadi pemimpin aplikasi pembangunan animasi tiga dimensi. Sejak versi ke empat, Discreet, produsen 3D Studio Max, berusaha untuk meluaskan area fungsinya sehingga dapat digunakan untuk membuat animasi bagi Web atau film. 3D Studio Max ini sering digunakan untuk membuat modelmodel rumah atau furniture. Selain itu, banyak pula digunakan di dalam seni digital dan pembuatan game.12
Gambar 2.33. Tampilan lembar kerja 3Ds Max 2009 (Screenshot 3Ds Max 2009)
11 12
http://id.wikipedia.org/wiki/3D_Studio_Max : 2009 Febrian, Jack: "Kamus Komputer dan Teknologi Informasi", halaman 481. Informatika, 2007
33
2.9
Adobe Photoshop Photoshop menyediakan grafik yang kaya toolset untuk fotografi digital, produksi percetakan, desain web, dan produksi video. Untuk bekerja dengan foto digital, kita bias melakukan langkah-langkah pengoreksian gambar. Misalnya, memproses file mentah kamera digital di dalam Photoshop untuk mendapatkan banyak kendali dan mutu gambar terbaik dari file ini; mengubah sedikit foto, memindahkan noda debu, dan mengoreksi kekurangan gambar sambil memelihara tonality dan texture.13
Gambar 2.34. Tampilan lembar kerja Adobe Photoshop CS3 (Screenshot Adobe Photoshop CS3)
2.10
Adobe Dreamweaver Adobe Dreamweaver CS3 adalah editor HTML professional untuk merancang, mengodekan, dan mengembangkan website, halaman web, dan aplikasi web. Dreamweaver menyediakan lingkungan pengkodean penuh,
13
Sunyanto, Asep Herman: "Step by Step: Web Design Theory and Practices", halaman 76. Penerbit Andi, 2007
34
meliputi code-editing tool (seperti kode mewarnai dan menyelesaikan tag) dan material referensi pada HTML, CSS, JavaScript, CFML, ASP, dan JSP. Dreamweaver juga memungkinkan kita untuk membangun aplikasi web dinamis yang didukung database yang menggunakan teknologi server seperti CFML, ASP.NET, ASP, JSP dan PHP. 14
Gambar 2.35. Tampilan lembar kerja Adobe Dreamweaver CS3 (Screenshot Adobe Dreamweaver CS3)
2.11
Adobe Flash Adobe Flash (dahulu bernama Macromedia Flash) adalah salah satu perangkat lunak komputer yang merupakan produk unggulan Adobe Systems. Adobe Flash digunakan untuk membuat gambar vektor maupun animasi gambar tersebut. Berkas yang dihasilkan dari perangkat lunak ini mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe Flash Player. Flash menggunakan bahasa
14
Sunyanto, Asep Herman: "Step by Step: Web Design Theory and Practices", halaman 80. Penerbit Andi, 2007
35
pemrograman bernama ActionScript yang muncul pertama kalinya pada Flash 5. Pada tanggal 3 Desember 2005 Adobe Systems mengakuisisi Macromedia dan seluruh produknya, sehingga nama Macromedia Flash berubah menjadi Adobe Flash.15
Gambar 2.36. Tampilan lembar kerja Adobe Flash CS3 (Screenshot Adobe Flash CS3)
15
http://id.wikipedia.org/wiki/Adobe_Flash : 2009
36
BAB III METODOLOGI PENELITIAN
3.1
Metode Pengumpulan Data Untuk mendapatkan data serta informasi yang diperlukan, penulis akan menggunakan tiga metode pengumpulan data untuk mendukung penulis baik dalam pengumpulan data maupun informasi yang diperlukan maupun untuk mendapatkan kebenaran materi uraian pembahasan. 3.1.1 Metode Wawancara dan Kuesioner Menurut Nasution (2006 : 100) yang dikutip oleh Tono Gunawan (2008 : 38) pengertian wawancara adalah suatu metode pengumpulan data dengan melakukan tanya-jawab terhadap responden agar mendapat informasi yang dibutuhkan oleh penelitian. Metode ini akan dilakukan dengan mewawancarai langsung pihak Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta sebagai pihak terkait mengenai masalah yang diangkat oleh penulis. Metode wawancara digunakan karena memiliki kekuatan mudah dalam pengaplikasian dan penerapannya, murah, dan dapat mengetahui informasi secara langsung.
1
Kuesioner diberikan kepada calon mahasiswa baru dan masyarakat umum yang belum mengetahui tata letak ruang pada gedung Fakultas Sains dan Teknologi. 3.1.2 Metode Observasi Observasi adalah sebuah metode pengumpulan data dengan cara pengamatan atau peninjauan langsung terhadap objek penelitian, yaitu melihat dan mengamati bentuk gedung Fakultas Sains dan Teknologi beserta interiornya. 3.1.3 Metode Studi Pustaka Mengumpulkan data dari buku-buku dan situs-situs yang berhubungan dengan aplikasi yang dibuat, terutama data yang berhubungan dengan web multimedia dan hal yang berhubungan dengan proyeksi. 3.2
Metode Pengembangan Multimedia Menurut Luther (1994) untuk mengembangkan suatu program aplikasi berbasis multimedia diperlukan enam tahap pengembangan multimedia, yaitu concept (konsep), design (desain), material collecting (pengumpulan bahan), assembly (pembuatan), testing (pengujian) dan distribution (implementasi dan evaluasi). (Ariesto Sutopo Hadi, 2003:3). Siklus pengembangan aplikasi multimedia dapat dilihat pada gambar dibawah ini:
2
Gambar 3.1. Tahap Pengembangan Multimedia
Untuk lebih jelasnya dapat dilihat dari bagan gambar dibawah ini:
Gambar 3.2. Bagan Tahap Pengembangan Multimedia
3
3.2.1 Konsep Tahap konsep yaitu menentukan tujuan, identifikasi audiens, macam aplikasi, tujuan aplikasi, spesifikasi umum, dasar aturan untuk perancangan seperti ukuran aplikasi, target dan lainlain. Yang perlu diperhatikan pada tahap ini adalah menentukan tujuan dari multimedia serta audien yang menggunakannya. Tujuan dari audiens berpengaruh pada nuansa multimedia, sebagai pencerminan identitas dari organisasi yang menginginkan informasi sampai ke audiens. Multimedia dikatakan komunikatif jika dapat memahami karakteristik user. 3.2.2 Desain Pada tahap ini membuat spesifikasi secara rinci mengenai arsitektur proyek, gaya dan kebutuhan material untuk proyek. Spesifikasi dibuat cukup rinci sehingga pada tahap berikutnya tidak diperlukan keputusan baru. Tiga macam bentuk perancangan : 1.
Desain Berbasis Multimedia. Metode desain ini dikembangkan dari metode perancangan pembuatan
film
menggunakan
storyboard.
Dalam
perkembangan multimedianya memerlukan aspek interaktif, sehingga dilengkapi dengan flowchart view. (Luther, 1994) 2.
Desain Struktur Navigasi.
4
Struktur navigasi memberikan gambaran link dari satu halaman ke halaman lainnya. Struktur navigasi digunakan pada multimedia nonlinear dan diadaptasi dari desain web. (lowery, 2001) 3.
Desain Berorientasi Objek. Metode desain berorientasi pada objek adalah metode perancangan dimana komponen multimedia dinyatakan sebagai objek. Desain berorientasi objek digunakan pada banyak sistem yang terdiri dari objek, seperti sistem informasi geografis dan lain-lain.
3.2.3 Pengumpulan Bahan Pengumpulan bahan dapat dikerjakan paralel dengan tahap assembly. Pada tahap ini dilakukan pengumpulan bahan seperti gambar, animasi, audio, foto dan lain-lain yang diperlukan pada tahap selanjutnya. 3.2.4 Pembuatan Pembuatan merupakan tahap dimana seluruh objek multimedia dibuat. Pembuatan aplikasi berdasarkan storyboard dan flowchart yang berasal dari tahap desain. 3.2.5 Pengujian Pengujian dilakukan setelah selesai tahap pembuatan dan seluruh data telah dimasukkan. Pertama-tama dilakukan pengujian secara modular untuk memastikan apakah hasilnya seperti yang
5
diinginkan. Dan dilakukan juga pengujian aplikasi apakah dapat berjalan dengan baik di lingkungan user. 3.2.6 Distribusi Tahap distribusi merupakan tahap dimana dilakukan penggandaan aplikasi. Penggandaan dapat menggunakan flash disk, CD ROM dan juga akan didistribusikan pada web yang kemudian akan ditampilkan di internet. Tahap ini juga akan dilakukan evaluasi terhadap suatu produk multimedia. Evaluasi dilakukan agar dapat mengembangkan sistem yang lebih baik.
6
BAB IV ANALISIS DAN PEMBAHASAN
4.1
Fakultas Sains dan Teknologi UIN Jakarta Sejarah Fakultas Sains dan Teknologi (FST) tidak bisa dilepaskan dari sejarah Universitas Islam Negeri (UIN) Syarif Hidayatullah Jakarta secara keseluruhan. Perjalanan sejarah UIN Jakarta merupakan cermin dari perjuangan umat Islam Indonesia yang tak kenal lelah untuk memiliki sebuah lembaga pendidikan tinggi yang mampu menghasilkan intelektual yang profesional dan bermoral, dimulai dengan berdirinya Akademi Dinas Ilmu Agama (ADIA) pada tanggal 1 Juni 1957 sampai periode 1960, sebagai fakultas dari IAIN Al-Jami’ah yang berpusat di Yogyakarta (19601963) dan sebagai IAIN Syarif Hidayatullah Jakarta dari tahun 1963 sampai resmi menjadi UIN Syarif Hidayatullah Jakarta sesuai dengan Keputusan Presiden RI Nomor 31 Tahun 2002, 20 Mei 2002. Sebelum dibentuk FST, IAIN Syarif Hidayatullah Jakarta sejak tahun ajaran 2000/2001 membentuk Program Konversi UIN yang menyelenggarakan Program Studi Agribisnis, Teknik Informatika dan Ekonomi. Pada tahun 2002, berdasarkan keputusan Presiden RI No. 31 Tahun 2002 tentang Perubahan IAIN Syarif Hidayatullah Jakarta menjadi UIN Syarif Hidayatullah Jakarta dan program studi sebagaimana tersebut diatas berubah menjadi Fakultas Sains dan Teknologi (FST) dan Fakultas Ekonomi dan Ilmu Sosial (FEIS). FST terdiri dari program studi Sosial
1
Ekonomi Pertanian / Agribisnis, Teknik Informatika dan Sistem Informasi, Matematika, Fisika, Kimia, Biologi. 4.1.1
Visi Menjadikan Fakultas Sains dan Teknologi sebagai lembaga terkemuka–baik di tingkat nasional maupun internasional dalam pengembangan sains dan teknologi yang terintegrasi dengan nilai keislaman dan keindonesiaan.
4.1.2
Misi a. Menghasilkan lulusan yang profesional di bidang sains dan teknologi,
dan
memiliki
keunggulan
kompetitif
dalam
persaingan global. b. Memberikan landasan moral dan pencerahan dalam pembinaan iman dan taqwa (imtaq). c. Mengadakan penelitian dan pengembangan di bidang sains dan teknologi. d. Memberikan kontribusi dalam penerapan sains dan teknologi bagi peningkatan kualitas hidup masyarakat. 4.1.3
Motto a. Knowledge Pusat keilmuan dan pengembangan dibidang Sains dan Teknologi melalui pendidikan, penelitian, pengembangan dan publikasi secara nasional dan global.
2
b. Piety Memperkokoh landasan Iman, moral dan etika seperti Taqwa, kejujuran, amanah, sikap positif. c. Integrity Memiliki potensi dan kekuatan inovasi serta keyakinan untuk membangun kualitas hidup masyarakat yang lebih baik. d. Innovation Selalu melakukan inovasi untuk peningkatan kualitas
yang
berkesinambungan. 4.1.4
Tujuan Pendidikan Sesuai visi dan misinya, maka FST-UIN bertujuan untuk menghasilkan lulusan yang memiliki kompetensi dalam bidang keilmuan masing-masing; memiliki kemampuan ilmu-ilmu Islam; serta memiliki kepribadian Islam. Secara spesifik, tujuan FST-UIN ialah: a. Menghilangkan
sekat-sekat
dikotomi
keilmuan,
dengan
menjadikan akidah Islam sebagai sudut pandang dalam pengembangan sains dan teknologi. b. Menghasilkan lulusan yang mampu menjadikan Islam sebagai landasan berfikir, bersikap, dan bertindak. c. Menghasilkan lulusan yang actortive di bidang masing-masing, sehingga memiliki kemampuan bersaing, baik di tingkat nasional maupun internasional.
3
d. Menghasilkan lulusan yang memiliki kepekaan dan tanggung jawab
moral
untuk
melakukan
pengabdian
terhadap
masyarakat. e. Menghasilkan teknologi tepat guna yang bertolak dari Resource base masyarakat acto yang memiliki implikasi bagi pengembangan masyarakat. 4.2
Hasil Pengumpulan Data Dari identifikasi masalah yang telah diuraikan pada bab sebelumnya dan dibawah ini akan dibahas mengenai hasil dari tiga metode pengumpulan data yang penulis lakukan. 4.2.1
Hasil Wawancara dan Kuesioner Pada metode wawancara ini penulis melakukan wawancara kepada Bapak Muhammad Ali Meha selaku pihak Tata Usaha Fakultas Sains Dan Teknologi untuk mendapatkan informasi untuk menentukan isi aplikasi yang akan dibuat. Hasil wawancara dapat dilihat pada Lampiran 1. Pada penelitian skripsi ini, selain menggunakan metode wawancara, penulis juga menggunakan metode penyebaran kuesioner untuk mengetahui apakah aplikasi ini benar-benar diperlukan dan dapat membantu masyarakat dalam memperoleh informasi seputar tata ruang berbasis web multimedia pada gedung Fakultas Sains dan Teknologi UIN Jakarta. Selain daripada itu
4
kuesioner
ini
juga
bertujuan
untuk
mencari
faktor-faktor
kelengkapan informasi yang akan digunakan pada aplikasi. Kuesioner awal disebarkan kepada 30 responden dengan target responden calon mahasiswa baru dan orang tua calon mahasiswa Fakultas Sains dan Teknologi UIN Jakarta. Hasil Kuesioner menjelaskan bahwa 60% responden menyatakan menggunakan internet lebih dari 3 kali seminggu. Hal ini menunjukkan bahwa intensitas waktu penggunaan internet cukup tinggi.
42,47%
responden
menyatakan
bahwa
mereka
menggunakan internet dengan tujuan untuk mengakses situs jejaring social seperti Facebook, Friendster, Koprol, My Space dan lain lain. 60% responden menjawab pernah menggunakan internet untuk mencari lokasi tempat yang akan/ingin mereka kunjungi. 48,57% reponden mencari lokasi ruangan pada gedung yang akan mereka kunjungi dengan cara mendatangi langsung dan mencari sendiri,
sedangkan
hanya
20%
responden
yang
berusaha
mencarinya di internet. 90% responden menjawab perlu untuk dibuat suatu aplikasi yang dapat memudahkan mereka dalam pencarian lokasi ruangan pada gedung tertentu yang dapat diakses melalui internet. Daftar
pertanyaan
dan
jawaban
kuesioner
awal
selengkapnya dapat dilihat di Lampiran 2.
5
4.2.2
Hasil Observasi Penulis melakukan observasi langsung pada gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatulah Jakarta dengan mengambil data-data berupa foto ruang-ruang gedung yang akan dijadikan bahan acuan dalam pembuatan aplikasi.
Gambar 4.1. Foto observasi gedung Fakultas Sains dan Teknologi
4.2.3
Hasil Studi Pustaka Penulis menggunakan 7 buku yang dijadikan landasan teori dalam perancangan Proyeksi Tata Ruang Berbasis Web Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta. Selain itu, penulis juga mencari keterangan-keterangan tambahan yang berkaitan dengan penelitian melalui internet yang penulis gunakan untuk menunjang pembuatan aplikasi.
6
4.3
Konsep Perancangan aplikasi dari visualisasi tata letak ini menggunakan teknologi multimedia sebagai media atau wadah dari sistem informasi tata letak
ruang
gedung
yang
dibuat.
Dalam
aplikasinya,
penulis
mengintegrasikannya dalam aplikasi web multimedia yang dapat diakses oleh masyarakat umum pengguna internet. Deskripsi konsep aplikasi ini adalah sebagai berikut: Judul
: Proyeksi Tata Ruang Berbasis Web Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta
Tujuan
:
Membangun suatu aplikasi dimana user dapat mengakses dan memudahkan pencarian denah gedung FST UIN melalui web
Audiensi
: Lebih ditujukan bagi calon mahasiswa baru, orangtua mahasiswa, dan masyarakat yang belum familiar dengan gedung FST.
Aplikasi
:
Aplikasi yang digunakan adalah berupa aplikasi web internet dan animasi flash.
Gambar
: Menggunakan file berformat *.gif, *.jpg , *.png yang dibuat sendiri oleh penulis.
Audio
: Menggunakan file berformat *.mp3
Animasi
: Menggunakan animasi pada teks dan gambar yang dibuat sendiri oleh penulis.
Interaktif
: Menggunakan tombol navigasi, gambar, animasi dan pemanfaatan media audio pada aplikasi.
Size
:
Total ukuran aplikasi yang digunakan adalah 21,9 mb
7
4.4
Storyboard Dalam perancangan multimedia, digunakan storyboard sebagai gambaran tampilan animasi dan dilengkapi dengan flowchart untuk menggambarkan proses berjalannya animasi, dalam hal ini berkaitan dengan navigasi. Berikut adalah contoh storyboard yang menjadi acuan dalam membangun aplikasi. Storyboard selengkapnya dapat dilihat pada Lampiran 4. STORYBOARD Scene 1
Halaman menampilkan proyeksi gedung dalam 1 sudut pandang dan di sebelah pojok kanan atas ada proyeksi gedung yang berotasi. Terdapat tombol “next” yang apabila diklik makan akan menuju ke proyeksi gedung dengan sudut pandang berbeda. Tiap ruangan dalam gambar tersebut dapat di klik untuk melihat keterangan tentang ruangan tersebut.
Gambar 4.2. Storyboard
8
4.5
Flowchart
Gambar 4.3. Flowchart Proyeksi Web Tata Ruang Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta
9
Flowchart pada gambar 4.3 menjelaskan bahwa aplikasi ini dimulai dengan tampilan Menu Utama yang berisi proses menuju menumenu selanjutnya. Jika user memilih ya maka akan terhubung pada menu yang diinginkannya dan jika tidak, maka user dapat memilih menu yang lainnya atau keluar dari aplikasi. 4.6
Struktur Menu Utama
Internasional
Profil
Proyeksi
Visi
Lantai 1
Misi
Lantai 2
Motto
Lantai 3
Program Studi
Lantai 4
Credit
Lantai 5
Non Reguler
Reguler
Galeri
Teknik informatika
Lantai 6 Lantai 7
Sistem Informasi
Agribisnis Matematika Biologi
Kimia
Fisika
Gambar 4.4. Desain Struktur Menu
10
4.7
State Transition Diagram Pada aplikasi Web Tata Ruang Gedung Fakultas Sains Dan Teknologi UIN Syarif Hidayatullah Jakarta ini terdiri dari 12 STD yang dapat dilihat pada Lampiran 4.
4.8
Rancangan Layar Web Pada aplikasi Web Tata Ruang Gedung Fakultas Sains Dan Teknologi UIN Syarif Hidayatullah Jakarta ini terdiri dari 12 rancangan layar web, tampilannya rancangan halaman utama dapat dilihat pada gambar berikut ini. Untuk rancangan layar web selanjutnya dapat dilihat pada Lampiran 5. Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
footer
Gambar 4.5. Rancangan Tampilan Halaman Utama Aplikasi Proyeksi Tata Ruang Berbasis Web Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta
4.9
Pengumpulan Bahan Pengumpulan bahan-bahan untuk memenuhi kebutuhan materi aplikasi dilakukan dengan beberapa proses: 1. Melakukan wawancara kepada pihak Tata Usaha Fakultas Sains dan Teknologi untuk mendapatkan informasi.
11
2. Melakukan pengisian kuesioner untuk mendapatkan informasi perlu atau tidaknya dibuat sebuah aplikasi visualisasi denah gedung. 3. Pengambilan foto-foto bagian-bagian gedung Fakultas Sains dan Teknologi untuk dijadikan salah satu elemen multimedia. 4. Mendapatkan denah gedung dari pihak akademik Fakultas Sains dan teknologi.
Gambar 4.6. Denah awal yang diterima dari pihak fakultas
4.10
Pembuatan (Assembly) Pada proses ini akan dijelaskan bagaimana pemanfaatan proyeksi ortogonal pada gedung sebagai media informasi tata letak ruangan pada gedung laboratorium terpadu beserta spesifikasi dari perangkat lunak dan perangkat keras yang digunakan oleh penulis dalam pengembangan
12
aplikasi Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, adalah: 4.10.1 Spesifikasi
perangkat
keras
yang
digunakan
dalam
pengembangan Untuk mengembangkan aplikasi ini, penulis menggunakan spesifikasi perangkat keras sebagai berikut: 1. AMD Turion 64 X2, 1.9 GHz yang berfungsi sebagai proses kinerja sistem komputer di dalam pengembangan program maupun perangkat lunak. 2. Memori 4 GB berfungsi untuk mempercepat proses pengolahan gambar, render, publish dan export hasil. Dan secara umum, penyediaan memori yang berukuran besar sebgai tempat penyimpanan
sementara
dan
mempercepat
penggunaan
perangkat lunak yang digunakan untuk mengembangkan aplikasi. 3. Kartu
Video
Graphic
Adapter
1028,
berfungsi
untuk
menampilkan gambar/video yang diproses atau dihasilkan komputer. 4. Hard disk 120 GB berfungsi untuk menyediakan ruang bagi aplikasi beserta perangkat lunak, dan menyediakan tempat penyimpanan untuk keperluan program. 5. Sound Card, digunakan untuk memproses audio dari perangkat lunak dan mengeluarkannya melalui perangkat keras speaker.
13
6. Mouse, pointing device yang digunakan untuk mengatur posisi kursor di layar. Dengan cara menggeser mouse di bidang datar. Setelah cursor menempati posisi tertentu di layar yang diinginkan, maka tombol yang ada pada mouse ditekan untuk berbagai keperluan, tergantung dari program yang digunakan, misalnya untuk memilih suatu pilihan dilayar. 7. Keyboard, berfungsi sebagai alat input langsung. Input dimasukkan dengan cara mengetikkan lewat penekanan tombol yang ada pada keyboard. 8. Speaker Aktif, berfungsi untuk keluaran audio pada aplikasi. 9. Monitor 14”, berfungsi sebagai media penampil interface (antar muka) atau penghubung penulis dan pengguna dengan kompuer sehingga tampilan aplikasi bisa terlihat. 4.10.2 Spesifikasi
perangkat
lunak
yang
digunakan
dalam
pengembangan Untuk mengembangkan aplikasi ini, penulis menggunakan spesifikasi perangkat lunak sebagai berikut: 1. Autodesk 3Ds Max 2009 untuk membuat gambar bangunan dalam bentuk 3 dimensi. 2. Adobe Flash CS4, untuk membuat aplikasi dalam bentuk flash. 3. Adobe Photoshop CS4, untuk proses edit gambar. 4. Adobe Dreamweaver CS4, untuk proses membuat aplikasi website.
14
Setelah
spesifikasi
selanjutnya
adalah
pembuatannya
pengembangan
dapat
pengembangan
program
menggunakan
perangkat
dipenuhi, ini
lunak
tahap
ke
tahap
yang
telah
disiapkan. Beberapa tahapan penting selama pengembangan aplikasi akan dibahas dibawah ini. 4.10.3 Proses pembuatan aplikasi Pertama-tama penulis melakukan digitasi dari peta yang telah didapat dari pihak fakultas.
Gambar 4.7.
Denah awal yang diterima dari pihak fakultas sebelum proses digitasi
15
Gambar 4.8. Denah setelah proses digitasi
Membuat model 3 dimensi menggunakan software Autodesk 3ds Max 2009. Dalam aplikasi ini penulis menggunakan proyeksi ortogonal untuk menampilkan preview dari gambar.
Gambar 4.9. Preview menggunakan proyeksi perspektif (kiri) dan preview menggunakan proyeksi ortogonal (kanan)
Diawali dengan membuat lantai untuk alas bangunan. Caranya dengan membuat object plane pada bidang dan dibuat sesuai ukuran.
16
Gambar 4.10. Objek plan yang digunakan sebagai lantai
Kemudian membuat dinding dan pilar bangunan dengan membuat objek box. Objek ini kemudian diberi warna kuning gading.
Gambar 4.11.
Objek box yang akan digunakan sebagai dinding
17
Gambar 4.12. Objek box yang akan digunakan sebagai tiang/pilar
Dilanjutkan dengan membuat detil material untuk balkon bangunan
Gambar 4.13.
Objek box yang telah diberi motif bata untuk dijadikan detil balkon.
18
Gambar 4.14.
Objek box dan silinder yang akan dijadikan detil balkon
Selanjutnya membuat material pintu dan jendela yang akan dipasang pada bangunan. Kemudian diberi warna hitam dan coklat.
Gambar 4.15. Objek pintu
19
Gambar 4.16.
Objek jendela
Lalu seluruh material digabungkan menjadi kesatuan, dimulai dengan memasang pilar, kemudian dinding dan membolongi dinding untuk menempatkan pintu dan jendela, selanjutnya diberi detil untuk balkon.
Gambar 4.17. Tiang-tiang dipasang pada lantai
20
Gambar 4.18.
Gambar 4.19.
Dinding dipasang dan dilubangi
Pintu dan jendela serta balkon dipasang pada dinding
Gambar 4.20. Hasil gedung telah jadi
21
Kemudian file 3 dimensi tersebut dirender dalam bentuk file berekstensi
*.jpeg.
kemudian
hasil
render
yang
diambil
menggunakan viewport ortogonal tersebut diimport ke Adobe Flash CS3. Selanjutnya dengan menggunakan Adobe Flash CS3 dibuat
suatu
animasi
dengan
gambar
dan
button
untuk
menerangkan gambar denah tersebut.
Gambar 4.21. Proses editing flash menggunakan Adobe Flash CS3
Adobe Photoshop CS3 digunakan sebagai pengolah gambar yang yang nantinya akan dimasukkan kedalam halaman web. Dengan software ini penulis mengedit gambar yang akan dijadikan banner website. Penulis juga meresize foto-foto yang akan dimasukkan ke halaman galeri menggunakan Adobe Photoshop CS3 ini.
22
Gambar 4.22. Proses editing gambar menggunakan Adobe Photoshop CS4
Setelah bahan isi website telah siap, kemudian menggunakan Adobe Dreamweaver CS3, penulis mengolah gambar, flash dan informasi teks dalam bentuk sebuah website.
Gambar 4.23.
Proses editing web menggunakan Adobe Dreamweaver CS4
23
4.11
Pengujian (testing) Pada tahap ini penulis melakukan pengujian (testing) terhadap aplikasi yang telah dibuat. Sebagai standar pengetesan aplikasi, dilakukan pengetesan secara modular untuk memastikan apakah hasilnya seperti yang diinginkan dan aplikasi dapat berjalan dengan baik ketika dijalankan dengan spesifikasi minimum dari komputer pengguna. Berikut ini adalah spesifikasi minimum yang digunakan untuk pengetesan aplikasi, yaitu: 1. Spesifikasi Perangkat Keras User a. Processor AMD Athlon XP 2.6 GHz b. Hard disk 80 GB c. DDR RAM 512 MB d. Graphic Card NVIDIA nForce2 64 MB e. Monitor 14 inchi f. Soundcard g. Mouse h. Keyboard 2. Spesifikasi Perangkat Lunak User a. Sistem operasi Windows XP Professional Service Pack 2 b. Web browser Mozilla Firefox 3.0.3 c.
Adobe Flash Player 10 Plugin
Penulis melakukan pengujian menggunakan sambungan intenet rumahan di rumah penulis. Hasil pengujian menunjukkan aplikasi dapat berjalan
24
dan ditampilkan dengan baik. Tampilan Hasil Pengujian dapat dilihat pada lampiran. 4.12
Cara Pengoperasian Aplikasi Dalam mengoperasikan aplikasi ini tidak memerlukan proses instalasi, cukup mengakses alamat website aplikasi berada maka aplikasi dapat tampil dan berjalan dengan sendirinya apabila browser pengguna internet telah terpasang plugin flash player. Secara otomatis tampilan utama akan berada pada menu “Utama” dan kemudian setelah itu pengguna dapat klik menu yang mana saja sesuai dengan kebutuhan.
4.13
Penjelasan Tampilan Aplikasi 1. Layar Menu Utama (default) Layar diatas adalah layar tampilan pada menu utama. Menu utama adalah menu yang akan membawa user kepada menu-menu lain untuk memenuhi kebutuhan user dalam memperoleh informasi.
25
2. Layar Profil Menu Profil berisikan sejarah singkat Fakultas Sains dan Teknologi UIN Jakarta beserta Visi, Misi dan Motto FST. 3. Layar Proyeksi Menu Proyeksi berisi teori singkat proyeksi ortogonal dan disertakan menu link menuju proyeksi untuk tiap lantai pada gedung FST. 4. Layar Galeri Menu Galeri berisi foto-foto yang diambil dari FST 5. Layar Credit Menu Credit berisi profil singkat penulis. 4.14
Implementasi Setelah melakukan analisa dan perancangan, tahap selanjutnya adalah implementasi program aplikasi. Aplikasi ini akan dikemas dalam bentuk web multimedia yang dapat diakses menggunakan internet dimana saja. Berikut adalah tampilan aplikasi yang dapat diakses melalui internet di alamat http://fst.lyle.web.id dan untuk tampilan halaman selengkapnya dapat dilihat pada Lampiran 6.
Gambar 4.24. Tampilan halaman index.html
26
4.15
Evaluasi Kuesioner disebarkan kepada 30 responden dengan target responden calon mahasiswa baru dan orang tua calon mahasiswa Fakultas Sains dan Teknologi UIN Jakarta. Hasil Kuesioner menjelaskan bahwa: 1. Mayoritas responden mengatakan aplikasi ini cukup mudah dijalankan. 2. Mayoritas responden menjawab tampilan aplikasi secara keseluruhan cukup menarik. 3. Mayoritas responden menjawab informasi yang diberikan dalam aplikasi ini cukup jelas. 4. Mayoritas responden menjawab informasi yang diberikan dalam aplikasi ini mudah dimengerti. 5. Mayoritas responden menjawab aplikasi ini cukup bermanfaat. Hasil evaluasi selengkapnya dapat dilihat pada lampiran 7.
27
BAB V KESIMPULAN DAN SARAN
5.1
Kesimpulan Dari penelitian yang telah dilakukan oleh penulis, maka dapat diambil kesimpulan sebagai berikut; 1. Aplikasi Proyeksi Tata Ruang Berbasis Web Multimedia pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta ini cukup mudah digunakan dan mudah dipahami oleh pengguna. 2. Pengguna dapat mengakses Aplikasi ini dan melihat proyeksi dari tata ruang gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta berikut deskripsi-deskripsinya sebagai tujuan dari aplikasi sistem informasi tata letak ruang dengan pemanfaatan teknologi multimedia secara online dimana saja, kapan saja menggunakan internet.
5.2
Saran Untuk pengembangan aplikasi selanjutnya, penulis memberikan saran sebagai berikut; Pengembangan pembahasan dapat diperluas ke gedung fakultas lainnya di UIN Syarif Hidayatullah
1
DAFTAR PUSTAKA
Anonim. Pedoman Akademik Universitas Islam Negeri Syarif Hidayatullah Jakarta 2007-2008, Jakarta. 2007. Febrian, Jack. Kamus Komputer dan Teknologi Informasi. Penerbit Informatika, Bandung. 2007 Sonawan, Heri. Cara Praktis Menguasai Teori Menggambar Teknik. Penerbit Alfabeta, Bandung. 2007 Sugianto, Mikael dan SmitDev Community. Envy 3D Series: Outlet Room. Interior Design with 3D Studio Max 9. Penerbit PT Elex Media Komputindo, Jakarta. 2009 Sunyanto, Asep Herman. Step by Step: Web Design Theory and Practices. Penerbit Andi. 2007 Sutopo, Ariesto Hadi. Multimedia Interaktif Dengan Flash. Graha Ilmu. 2003 Wahana Komputer. Desain Bangunan Rumah dengan AutoCAD 2009. Penerbit Andi, Yogyakarta. 2008 http://en.wikipedia.org/wiki/Orthogonal 5 Juni 2009, 15:17 WIB http://id.wikipedia.org/wiki/HTTP 5 Juni 2009, 15:19 WIB http://id.wikipedia.org/wiki/Internet 5 Juni 2009, 15:05 WIB http://id.wikipedia.org/wiki/Multimedia 5 Juni 2009, 15:19 WIB http://id.wikipedia.org/wiki/TCP/IP 5 Juni 2009, 15:16 WIB http://id.wikipedia.org/wiki/World_Wide_Web 5 Juni 2009, 15:16 WIB http://id.wikipedia.org/wiki/Web_browser 5 Juni 2009, 15:16 WIB
1
Lampiran 1 : Wawancara Narasumber : Muhammad Ali Meha, S.Sos NIP
: 19580115 198203 1 003
Tanya : Pentingkah dibuat suatu aplikasi proyeksi denah ruang gedung berbasis web untuk memudahkan dalam pencarian ruang? Jawab : Untuk kalangan dalam sebenarnya tidak perlu, karena sudah ada penanda ruangan. Tetapi untuk dipasang di luar, itu baru perlu. Boleh-boleh saja, tidak urgent. Tanya : Informasi apa saja yang penting untuk disertakan dalam suatu aplikasi proyeksi denah ruang gedung berbasis web? Jawab : Penggunaan label tiap ruangan dan petunjuk penggunaan ruang tersebut. Tanya : Menurut anda, apakah aplikasi proyeksi ruang gedung akan membantu dalam promosi Fakultas? Jawab : Sangat membantu. Karena menjelaskan mengenai sarana dan prasarana yang dimiliki oleh fakultas.
1
Lampiran 2 : Kuesioner Awal Kuesioner Penelitian I Silahkan isi pertanyaan dibawah ini dengan memberi checklist (√ ) pada checkbox ( ) yang telah disediakan. Anda dapat memberikan lebih dari 1 checklist pada pertanyaan yang memiliki option lebih dari 2. Terimakasih. Nama :………………………………………........................... Umur :………………………………………........................... 1. Seberapa sering anda menggunakan internet? > 3 kali seminggu 2 kali seminggu 1 kali semingu 2 minggu sekali 1 bulan sekali < 1 bulan sekali 2. Untuk keperluan apakah anda mengakses internet? Bermain game online Mengakses situs jejaring social (Facebook, Friendster, Koprol, My Space, dll) Chatting Membaca berita Mencari data Lainnya (……………………………………………………………………………) 3. Pernahkah anda menggunakan internet untuk mencari lokasi tempat yang akan/ingin anda kunjungi? Pernah Tidak pernah 4. Bagaimana cara anda mencari lokasi ruangan pada gedung akan anda datangi? Mendatangi langsung dan mencari sendiri Bertanya pada orang lain Mencari di internet Lainnya (……………………………………………………………………………) 5. Perlukah dibuat suatu aplikasi yang dapat memudahkan anda dalam mencari lokasi ruangan pada gedung tertentu yang dapat diakses melalui internet? Perlu Tidak perlu 6. Saran untuk aplikasi yang akan dibuat: ………………………………………………………………………………… ………………………………………………………………………………… 2
Analisa Kuesioner Awal 1. Seberapa sering anda menggunakan internet? 60% responden menjawab mengunakan internet lebih dari 3 kali seminggu. 26,67% responden menjawab menggunakan internet 2 kali seminggu. 10 % responden menjawab menggunakan internet 1 kali seminggu. 3,33% responden menjawab menggunakan internet 2 minggu sekali. Tabel L.1.
Hasil olahan kuesioner awal pertanyaan No.1
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
> 3 kali seminggu
18
60%
2
2 kali seminggu
8
26,67%
3
1 kali seminggu
3
10%
4
2 minggu sekali
1
3,33%
5
1 bulan sekali
-
6
< 1 bulan sekali
-
Jumlah
30
100%
2. Untuk keperluan apakah anda mengakses internet? 13,56% responden menjawab mengakses internet untuk bermain game online. 42,37% responden menjawab mengakses internet untuk mengakses situs jejaring sosial (Facebook, Friendster, Koprol, My Space, dll). 15,25% responden menjawab mengakses internet untuk chatting. 10,17% responden menjawab mengakses internet untuk membaca berita. 16,95% responden
3
menjawab mengakses internet untuk mencari data. 1,7% responden menjawab mengakses internet untuk lainnya. Tabel L.2.
Hasil olahan kuesioner awal pertanyaan No. 2
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Bermain game online
8
13,56%
2
Mengakses situs jejaring social (Facebook, Friendster, Koprol, My Space, dll)
25
42,37%
3
Chatting
9
15,25%
4
Membaca berita
6
10,17%
5
Mencari data
10
16,95%
6
Lainnya
1
1,7%
59
100%
Jumlah
3. Pernahkah anda menggunakan internet untuk mencari lokasi tempat yang akan/ingin anda kunjungi? 60% responden menjawab pernah menggunakan internet untuk mencari lokasi tempat yang akan/ingin dikunjungi. 40% responden menjawab tidak pernah menggunakan internet untuk mencari lokasi tempat yang akan/ingin dikunjungi.
4
Tabel L.3.
Hasil olahan kuesioner awal pertanyaan No. 3
No
Jawaban Responden
Jumlah Jawaban
Presentase %
1
Pernah
18
60%
2
Tidak Pernah
12
40%
30
100%
Jumlah
4. Bagaimana cara anda mencari lokasi ruangan pada gedung akan anda datangi? 48,57% responden menjawab mencari lokasi ruangan pada gedung yang akan didatangi dengan cara mendatangi langsung dan mencari sendiri. 31,43% responden menjawab mencari lokasi ruangan pada gedung yang akan didatangi dengan cara bertanya pada orang lain. 20% responden menjawab mencari lokasi ruangan pada gedung yang akan didatangi dengan cara mencari di internet. Tabel L.4.
Hasil olahan kuesioner awal pertanyaan No. 4
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Mendatangi langsung dan mencari sendiri
17
48,57%
2
Bertanya pada orang lain
11
31,43%
3
Mencari di internet
7
20%
4
Lainnya
-
-
35
100%
Jumlah
5
5. Perlukah dibuat suatu aplikasi yang dapat memudahkan anda dalam mencari lokasi ruangan pada gedung tertentu yang dapat diakses melalui internet? 90% responden menjawab perlu dibuat suatu aplikasi yang dapat memudahkan dalam pencarian lokasi ruangan pada gedung tertentu yang dapat diakses melalui internet. 10% responden menjawab tidak perlu dibuat suatu aplikasi yang dapat memudahkan dalam pencarian lokasi ruangan pada gedung tertentu yang dapat diakses melalui internet. Tabel L.5.
Hasil olahan kuesioner awal pertanyaan No. 5
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Perlu
27
90%
2
Tidak Perlu
3
10%
30
100%
Jumlah
6
Lampiran 3 : Storyboard STORYBOARD Scene 1
Halaman menampilkan proyeksi gedung dalam 1 sudut pandang dan di sebelah pojok kanan atas ada proyeksi gedung yang berotasi. Terdapat tombol “next” yang apabila diklik makan akan menuju ke proyeksi gedung dengan sudut pandang berbeda. Tiap ruangan dalam gambar tersebut dapat di klik untuk melihat keterangan tentang ruangan tersebut.
Gambar L.1. Storyboard 1
7
STORYBOARD Scene 2
Halaman menampilkan proyeksi gedung dalam 1 sudut pandang dan di sebelah pojok kanan atas ada proyeksi gedung yang berotasi. Terdapat tombol “next” yang apabila diklik makan akan menuju ke proyeksi gedung dengan sudut pandang berbeda. Tiap ruangan dalam gambar tersebut dapat di klik untuk melihat keterangan tentang ruangan tersebut.
Gambar L.2. Storyboard 2
8
STORYBOARD Scene 3
Halaman menampilkan proyeksi gedung dalam 1 sudut pandang dan di sebelah pojok kanan atas ada proyeksi gedung yang berotasi. Terdapat tombol “next” yang apabila diklik makan akan menuju ke proyeksi gedung dengan sudut pandang berbeda. Tiap ruangan dalam gambar tersebut dapat di klik untuk melihat keterangan tentang ruangan tersebut.
Gambar L.3. Storyboard 3
9
STORYBOARD Scene 4
Halaman menampilkan proyeksi gedung dalam 1 sudut pandang dan di sebelah pojok kanan atas ada proyeksi gedung yang berotasi. Terdapat tombol “next” yang apabila diklik makan akan menuju ke proyeksi gedung dengan sudut pandang berbeda. Tiap ruangan dalam gambar tersebut dapat di klik untuk melihat keterangan tentang ruangan tersebut.
Gambar L.4. Storyboard 4
10
Lampiran 4 : State Transition Diagram (STD) Galeri
Klik “Utama”
Klik “Galeri”
Tampilkan “Utama”
Tampilkan “Galeri”
Klik “Profil”
Klik “Utama”
Tampilkan “Profil”
Tampilkan “Utama”
Menu Utama
Profil Klik “Utama”
Credit Klik “Credit” Tampilkan “Credit”
Tampilkan “Utama”
Klik “Proyeksi”
Klik “Utama”
Tampilkan “Proyeksi”
Tampilkan “Utama”
Proyeksi Gambar L.5. Rancangan STD Menu Utama
11
Utama
Program Studi
Klik “Profil”
Visi
Tampilkan “Profil”
Klik “Program Studi” Tampilkan “Program Studi”
Klik “Profil”
Klik “Profil”
Klik “Utama”
Klik “Visi”
Tampilkan “Profil”
Tampilkan “Profil”
Tampilkan “Utama”
Tampilkan “Visi”
Klik “Profil”
Klik “Proyeksi”
Tampilkan “Profil”
Tampilkan “Proyeksi”
Menu Profil
Proyeksi Klik “Profil”
Galeri Klik “Galeri” Tampilkan “Galeri”
Tampilkan “Profil”
Klik “Profil” Tampilkan “Profil”
Klik “Motto” Tampilkan “Motto”
Klik “Credit”
Klik “Profil”
Tampilkan “Credit”
Tampilkan “Profil”
Klik “Misi” Klik “Profil”
Motto
Tampilkan “Misi”
Misi
Tampilkan “Profil”
Credit Gambar L.6. Rancangan STD Menu Profil
12
Lantai 1
Lantai 5
Klik “Proyeksi”
Klik “Lantai 1”
Tampilkan “Proyeksi”
Tampilkan “Lantai 1”
Profil
Klik “Proyeksi”
Klik “Lantai 5”
Tampilkan “Proyeksi”
Tampilkan “Lantai 5”
Klik “Proyeksi”
Klik “Profil”
Tampilkan “Proyeksi”
Tampilkan “Profil”
Lantai 6
Lantai 2 Klik “Proyeksi”
Klik “Lantai 6”
Tampilkan “Proyeksi”
Tampilkan “Lantai 6”
Klik “Lantai 2”
Klik “Proyeksi”
Tampilkan “Lantai 2”
Tampilkan “Proyeksi”
Klik “Utama”
Klik “Proyeksi”
Tampilkan “Utama”
Tampilkan “Proyeksi”
Menu Proyeksi
Utama Klik “Proyeksi”
Galeri Klik “Galeri” Tampilkan “Galeri”
Tampilkan “Proyeksi”
Klik “Lantai 3”
Klik “Proyeksi”
Klik “Lantai 7”
Tampilkan “Proyeksi”
Tampilkan “Lantai 7”
Klik “Proyeksi” Tampilkan “Proyeksi”
Tampilkan “Lantai 3”
Lantai 7
Lantai 3 Klik “Credit”
Klik “Proyeksi”
Tampilkan “Credit”
Tampilkan “Proyeksi”
Klik “Lantai 4”
Klik “Proyeksi”
Tampilkan “Lantai 4”
Tampilkan “Proyeksi”
Credit
Lantai 4 Gambar L.7. Rancangan STD Menu Proyeksi
13
Utama
Klik “Galeri”
Klik “Utama”
Tampilkan “Galeri”
Tampilkan “Utama”
Klik “Profil”
Klik “Utama”
Tampilkan “Profil”
Tampilkan “Utama”
Menu Galeri
Profil Klik “Utama”
Credit Klik “Credit” Tampilkan “Credit”
Tampilkan “Utama”
Klik “Proyeksi”
Klik “Utama”
Tampilkan “Proyeksi”
Tampilkan “Utama”
Proyeksi Gambar L.8. Rancangan STD Menu Galeri
14
Galeri
Klik “Utama”
Klik “Galeri”
Tampilkan “Utama”
Tampilkan “Galeri”
Klik “Profil”
Klik “Credit”
Tampilkan “Profil”
Tampilkan “Credit”
Menu Credit
Profil Klik “Utama”
Utama Klik “Utama” Tampilkan “Utama”
Tampilkan “Utama”
Klik “Proyeksi”
Klik “Utama”
Tampilkan “Proyeksi”
Tampilkan “Utama”
Proyeksi Gambar L.9. Rancangan STD Menu Credit
15
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Visi
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.10. Rancangan STD Menu Visi
16
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Misi
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.11. Rancangan STD Menu Misi
17
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Motto
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.12. Rancangan STD Menu Motto
18
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil”
Menu Program Studi
Tampilkan “Profil”
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.13. Rancangan STD Menu Program Studi
19
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Profil
Menu Teknik Informatika
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.14. Rancangan STD Menu Teknik Informatika
20
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil”
Menu Sistem Informasi
Tampilkan “Profil”
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.15. Rancangan STD Menu Sistem Informasi
21
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Profil
Menu Agribisnis
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.16. Rancangan STD Menu Agribisnis
22
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Profil
Menu Matematika
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.17. Rancangan STD Menu Matematika
23
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Biologi
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.18. Rancangan STD Menu Biologi
24
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Kimia
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.19. Rancangan STD Menu Kimia
25
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Fisika
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.20. Rancangan STD Menu Fisika
26
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Profil
Menu Internasional
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.21. Rancangan STD Menu Internasional
27
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 1
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.22. Rancangan STD Menu “Lantai 1”
28
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 2
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.23. Rancangan STD Menu “Lantai 2”
29
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 3
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.24. Rancangan STD Menu “Lantai 3”
30
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 4
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.25. Rancangan STD Menu “Lantai 4”
31
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 5
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.26. Rancangan STD Menu “Lantai 5”
32
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 6
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.27. Rancangan STD Menu “Lantai 6”
33
Galeri Utama
Klik “Galeri” Tampilkan “Galeri”
Klik “Utama” Tampilkan “Utama”
Klik “Profil” Tampilkan “Profil”
Menu Lantai 7
Profil
Credit Klik “Credit” Tampilkan “Credit”
Klik “Proyeksi” Tampilkan “Proyeksi”
Proyeksi Gambar L.28. Rancangan STD Menu “Lantai 7”
34
Lampiran 5 : Perancangan Layar Tampilan 1. Rancangan Menu Utama Rancangan ini merupakan tampilan utama dari Aplikasi Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu utama ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
footer
Gambar L.29. Rancangan Menu Utama
35
2. Rancangan Menu Profil Rancangan ini berisi profil dari Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu profil ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “visi”
•
Tombol “profil”
•
Tombol “misi”
•
Tombol “proyeksi”
•
Tombol “motto”
•
Tombol “galeri”
•
Tombol “program studi”
•
Tombol “credit” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Profil FST • Visi • Misi • Motto • Program Studi footer
Gambar L.30. Rancangan Menu Profil
36
3. Rancangan Menu Proyeksi Rancangan ini berisi Aplikasi Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu proyeksi ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
4. Rancangan Menu Galeri Rancangan ini berisi gallery foto-foto dari gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu galeri ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Galeri
footer
Gambar L.32. Rancangan Menu Galeri
38
5. Rancangan Menu Credit Rancangan ini berisi profile peneliti yang membuat Aplikasi Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu credit ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Credit
footer
Gambar L.33. Rancangan Menu Credit
39
6. Rancangan Menu Visi Rancangan ini berisi visi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Visi
footer
Gambar L.34. Rancangan Menu Visi
40
7. Rancangan Menu Misi Rancangan ini berisi misi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Misi
footer
Gambar L.35. Rancangan Menu Misi
41
8. Rancangan Menu Motto Rancangan ini berisi motto Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Motto
footer
Gambar L.36. Rancangan Menu Motto
42
9. Rancangan Menu Program Studi Rancangan ini berisi Program Studi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Program Studi
footer
Gambar L.37. Rancangan Menu Program Studi
43
10. Rancangan Menu Teknik Informatika Rancangan ini berisi Profil Program Studi Teknik Informatika Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Teknik Informatika
footer
Gambar L.38. Rancangan Menu Teknik Informatika
44
11. Rancangan Menu Sistem Informasi Rancangan ini berisi Profil Program Studi Sistem Informasi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Sistem Informasi
footer
Gambar L.39. Rancangan Menu Sistem Informasi
45
12. Rancangan Menu Agribisnis Rancangan ini berisi Profil Program Studi Agribisnis Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Agribisnis
footer
Gambar L.40. Rancangan Menu Agribisnis
46
13. Rancangan Menu Matematika Rancangan ini berisi Profil Program Studi Matematika Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Matematika
footer
Gambar L.41. Rancangan Menu Matematika
47
14. Rancangan Menu Biologi Rancangan ini Profil Program Studi Biologi Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Biologi
footer
Gambar L.42. Rancangan Menu Biologi
48
15. Rancangan Menu Kimia Rancangan ini berisi Profil Program Studi Kimia Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Kimia
footer
Gambar L.43. Rancangan Menu Kimia
49
16. Rancangan Menu Fisika Rancangan ini berisi Profil Program Studi
Fisika Fakultas Sains dan
Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Fisika
footer
Gambar L.44. Rancangan Menu Fisika
50
17. Rancangan Menu Internasional Rancangan ini berisi Profil Program Studi Internasional Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Internasional
footer
Gambar L.45. Rancangan Menu Internasional
51
18. Rancangan Menu Lantai 1 Rancangan ini berisi Aplikasi Proyeksi Lantai 1 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 1
footer
Gambar L.46. Rancangan Menu Lantai 1
52
19. Rancangan Menu Lantai 2 Rancangan ini berisi Aplikasi Proyeksi Lantai 2 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 1
footer
Gambar L.47. Rancangan Menu Lantai 2
53
20. Rancangan Menu Lantai 3 Rancangan ini berisi Aplikasi Proyeksi Lantai 3 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 3
footer
Gambar L.48. Rancangan Menu Lantai 3
54
21. Rancangan Menu Lantai 4 Rancangan ini berisi Aplikasi Proyeksi Lantai 4 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 4
footer
Gambar L.49. Rancangan Menu Lantai 4
55
22. Rancangan Menu Lantai 5 Rancangan ini berisi Aplikasi Proyeksi Lantai 5 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 5
footer
Gambar L.50. Rancangan Menu Lantai 5
56
23. Rancangan Menu Lantai 6 Rancangan ini berisi Aplikasi Proyeksi Lantai 6 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 6
footer
Gambar L.51. Rancangan Menu Lantai 6
57
24. Rancangan Menu Lantai 7 Rancangan ini berisi Aplikasi Proyeksi Lantai 7 Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai atribut diantaranya gambar, logo UIN, judul aplikasi, footer, dan 12 tombol, yaitu: •
Tombol “utama”
•
Tombol “galeri”
•
Tombol “profil”
•
Tombol “credit”
•
Tombol “proyeksi” Logo UIN
judul aplikasi gambar
utama
profil
proyeksi
galeri
credit
Konten Animasi Proyeksi Lantai 7
footer
Gambar L.52. Rancangan Menu Lantai 7
58
Lampiran 6 : Tampilan Menu 1. index.html
Gambar L.53. tampilan index.hml
2. profil.html
Gambar L.54. tampilan profil.html
59
3. proyeksi.html
Gambar L.55. tampilan proyeksi.html
4. galeri.html
Gambar L.56. tampilan galeri.html
60
5. credit.html
Gambar L.57. tampilan credit.html
6. profil_visi.html
Gambar L.58. tampilan profil_visi.html
61
7. profil_misi.html
Gambar L.59. tampilan profil_misi.html
8. profil_motto.html
Gambar L.60. tampilan profil_motto.html
62
9. program_studi.html
Gambar L.61. tampilan program_studi.html
10. profil_reg_ti.html
Gambar L.62. tampilan profil_reg_ti.html
63
11. profil_reg_si.html
Gambar L.63. tampilan profil_reg_si.html
12. profil_reg_agri.html
Gambar L.64. tampilan profil_reg_agri.html
64
13. profil_reg_mtk.html
Gambar L.65. tampilan profil_reg_mtk.html
14. profil_reg_bio.html
Gambar L.66. tampilan profil_reg_bio.html
65
15. profil_reg_kim.html
Gambar L.67. tampilan profil_reg_kim.html
16. profil_reg_fis.html
Gambar L.68. tampilan profil_reg_fis.html
66
17. profil_inter.html
Gambar L.69. tampilan profil_inter.html
18. lantai1.html
Gambar L.70. tampilan lantai1.html
67
19. lantai2.html
Gambar L.71. tampilan lantai2.html
20. lantai3.html
Gambar L.72. tampilan lantai3.html
68
21. lantai4.html
Gambar L.73. tampilan lantai4.html
22. lantai5.html
Gambar L.74. tampilan lantai5.html
69
23. lantai6.html
Gambar L.75. tampilan lantai6.html
24. lantai7.html
Gambar L.76. tampilan lantai7.html
70
Lampiran 7 : Kuesioner Akhir Silahkan isi pertanyaan dibawah ini dengan memberi checklist (√ ) pada checkbox ( ) yang telah disediakan. Anda dapat memberikan lebih dari 1 checklist pada pertanyaan yang memiliki option lebih dari 2. Terimakasih. Nama :………………………………………........................... Umur :………………………………………........................... 1. Apakah aplikasi ini mudah dijalankan (user friendly)? Mudah Cukup Mudah Sulit 2. Menurut anda, bagaimana tampilan aplikasi secara keseluruhan? Menarik Cukup menarik Kurang menarik 3. Apakah informasi yang diberikan dalam aplikasi ini jelas? Jelas Cukup jelas Kurang jelas 4. Apakah informasi yang diberikan dalam aplikasi ini mudah dimengerti? Mudah dimengerti Biasa saja Sulit dimengerti 5.
Apakah aplikasi ini cukup bermanfaat bagi anda? Bermanfaat Cukup bermanfaat Kurang bermanfaat
6. Kritik dan saran untuk aplikasi yang telah dibuat: ………………………………………………………………………………… …………………………………………………………………………………
71
Analisa Kuesioner Akhir 1. Apakah aplikasi ini mudah dijalankan (user friendly)? 26,67% responden menjawab mudah digunakan. 70% responden menjawab cukup mudah. 3,33% responden menjawab sulit digunakan. Tabel L.6.
Hasil olahan kuesioner akhir pertanyaan No.1
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Mudah
8
26,67%
2
Cukup mudah
21
70%
3
Sulit
1
3,33%
30
100%
Jumlah
2. Menurut anda, bagaimana tampilan aplikasi secara keseluruhan? 20% responden menjawab tampilan aplikasi secara keseluruhan menarik. 73,33% responden menjawab tampilan aplikasi secara keseluruhan cukup menarik. 6,67% responden menjawab tampilan aplikasi secara keseluruhan kurang menarik. Tabel L.7.
Hasil olahan kuesioner akhir pertanyaan No. 2
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Menarik
6
20%
2
Cukup menarik
22
73,33%
3
Kurang menarik
2
6,67%
Jumlah
30
100%
72
3. Apakah informasi yang diberikan dalam aplikasi ini jelas? 20% responden menjawab informasi yang diberikan dalam aplikasi ini jelas. 73,33% responden menjawab informasi yang diberikan dalam aplikasi ini cukup jelas. 6,67% responden menjawab informasi yang diberikan dalam aplikasi ini kurang jelas Tabel L.8.
Hasil olahan kuesioner akhir pertanyaan No. 3
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Jelas
6
20%
2
Cukup jelas
22
73,33%
3
Kurang jelas
2
6,67%
30
100%
Jumlah
4. Apakah informasi yang diberikan dalam aplikasi ini mudah dimengerti? 70% responden menjawab informasi yang diberikan dalam aplikasi ini mudah dimengerti. 26,67% responden menjawab informasi yang diberikan dalam aplikasi ini biasa saja. 3,33% responden menjawab informasi yang diberikan dalam aplikasi ini sulit dimengerti. Tabel L.9.
Hasil olahan kuesioner akhir pertanyaan No. 4
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Mudah dimengerti
21
70%
2
Biasa saja
8
26,67%
3
Sulit dimengerti
1
3,33%
Jumlah
30
100%
73
5. Apakah aplikasi ini cukup bermanfaat bagi anda? 20% responden menjawab aplikasi ini
bermanfaat. 73,33% responden
menjawab aplikasi ini cukup bermanfaat. 6,67% responden menjawab aplikasi ini kurang bermanfaat. Tabel L.10. Hasil olahan kuesioner akhir pertanyaan No. 5
No
Jawaban Responden
Jumlah Jawaban
Presentase (%)
1
Bermanfaat
6
20%
2
Cukup bermanfaat
22
73,33%
3
Kurang bermanfaat
2
6,67%
30
100%
Jumlah
74
Lampiran 8 : ActionScript Flash 1. Flash Lantai 1 Button 1: on (release) { gotoAndStop( 5); } Button 2: on (release) { gotoAndStop( 10); } Button 3: on (release) { gotoAndStop( 15); } Button 4: on (release) { gotoAndStop( 20); } Button 5: on (release) { gotoAndStop( 25); } Button 6: on (release) { gotoAndStop( 30); } Button 7: on (release) { gotoAndStop( 35); } Button 8: on (release) { gotoAndStop( 40); }
Button 9: on (release) { gotoAndStop( 45); } Button 10: on (release) { gotoAndStop( 50); } Button 11: on (release) { gotoAndStop( 55); } Button Next: on (release) { gotoAndStop( 100); } Button 12: on (release) { gotoAndStop( 105); } Button 13: on (release) { gotoAndStop( 110); } Button 14: on (release) { gotoAndStop( 115); } Button 15: on (release) { gotoAndStop( 120); }
Button 15: on (release) { gotoAndStop( 125); } Button 17: on (release) { gotoAndStop( 130); } Button 18: on (release) { gotoAndStop( 135); } Button 19: on (release) { gotoAndStop( 140); } Button 20: on (release) { gotoAndStop( 145); } Button 21: on (release) { gotoAndStop( 150); } Button 22: on (release) { gotoAndStop( 155); } Button Back: on (release) { gotoAndStop( 1); }
gotoAndStop( 10); } Button 3: on (release) { gotoAndStop( 15);
Button 9: on (release) { gotoAndStop( 45); } Button 10: on (release) { gotoAndStop( 50); } Button 10: on (release) { gotoAndStop( 55); } Button 12: on (release) { gotoAndStop( 60); } Button 13: on (release) { gotoAndStop( 65); } Button Next: on (release) { gotoAndStop( 100); } Button 14: on (release) { gotoAndStop( 105); } Button 15: on (release) { gotoAndStop( 110); }
Button 16: on (release) { gotoAndStop( 115); } Button 17: on (release) { gotoAndStop( 120); } Button 18: on (release) { gotoAndStop( 125); } Button 19: on (release) { gotoAndStop( 130); } Button 20: on (release) { gotoAndStop( 135); } Button 21: on (release) { gotoAndStop( 140); } Button 22: on (release) { gotoAndStop( 145); } Button 23: on (release) { gotoAndStop( 150); }
7. Flash Lantai 7 Button 1: on (release) { gotoAndStop( 5); } Button 2: on (release) { gotoAndStop( 10); } Button 3: on (release) { gotoAndStop( 15); } Button 4: on (release) { gotoAndStop( 20); } Button 5: on (release) { gotoAndStop( 25); } Button 6: on (release) { gotoAndStop( 30); } Button 7: on (release) { gotoAndStop( 35); } Button 8: on (release) { gotoAndStop( 40); }
82
Button 24: on (release) { gotoAndStop( 155); } Button 25: on (release) {
gotoAndStop( 160); } Button 26: on (release) { gotoAndStop( 165);
} Button Back: on (release) { gotoAndStop( 1); }
83
Lampiran 9 : Script Web 1. index.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
2. profil.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Fakultas Sains dan Teknologi merupakan salah satu dari 10 fakultas yang ada di lingkungan Universitas Islam Negeri Syarif Hidayatullah Jakarta. Lulusan Fakultas ini diharapkan memiliki keahlian teoritis dan aplikatif dalam bidang sains dan teknologi dan memiliki wawasan luas dalam pengetahuan agama (basis keislaman), menjadi cendekiawan muslim yang memiliki motivasi kuat membangun Indonesia, mampu menjawab tantangan abad ke-21 dan bersaing dalam era globalisasi melalui teknologi informasi serta teknologi rekayasa dan terapan.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Proyeksi ortogonal adalah gambar proyeksi yang bidang proyeksinya mempunyai sudut tegak lurus terhadap proyektornya. Garis-garis yang memproyeksikan benda terhadap bidang proyeksi disebut proyektor. Selain proyektor tegak lurus terhadap bidang proyeksinya juga proyektor-proyektor tersebut sejajar satu sama lain.
Proyeksi orthogonal pada umumnya tidak memberikan gambaran lengkap dari benda hanya dari satu proyeksi saja. Oleh karena itu diambil beberapa bidang proyeksi. Biasanya diambil tiga bidang tegak lurus, dan dapat ditambah dengan bidang bantu dimana diperlukan. Bendanya diproyeksikan secara orthogonal pada tiap-tiap bidang proyeksi untuk memperlihatkan benda tersebut pada bidang-bidang dua dimensi. Dengan menggabungkan gambar-gambar proyeksi tersebut dapatlah diperoleh gambaran jelas dari benda yang dimaksud.
4. galeri.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
5. credit.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Menjadi lembaga pendidikan tinggi terkemuka secara nasional dan internasional dalam pengembangan sains dan teknologi yang terintegrasi pada nilai ke-Islaman dan ke-Indonesiaan.
<script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('');
7. profil_misi.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
8. profil_motto.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js">
Knowledge Pusat keilmuan dan pengembangan di bidang sains dan teknologi melalui pendidikan, penelitian, pengembangan dan publikasi secara nasional dan global.
Piety Memperkokoh landasan moral dan etika seperti kejujuran, amanah, sikap positif.
Integrity Memiliki potensi dan kekuatan serta keyakinan untuk membangun kualitas hidup masyarakat yang lebih baik.
Innovation Selalu melakukan inovasi untuk peningkatan kualitas yang berkesinambungan
<script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('');
9. program_studi.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
10. profil_reg_ti.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta
Program Studi Teknik Informatika bertujuan menghasilkan Sarjana Komputer (S.Kom) yang memiliki integritas dan pemahaman teoritis dan praktis yang tinggi di bidang informatika sehingga mampu menganalisis dan memecahkan permasalahan-permasalahan di bidang pengembangan perangkat lunak dan teknologi informasi serta mempunyai wawasan keislaman.
Konsentrasi Bidang: Software Engineer, Multimedia dan Networking.
11. profil_reg_si.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Program Studi ini bertujuan menghasilkan lulusan Sistem Informasi dengan penguasaan konsep pengembangan perangkat lunak dan aplikasi teknologi informasi.
Lulusan juga diharapkan untuk memiliki keahlian dalam merancang, mengelola dan mengembangkan sistem informasi.
Konsentrasi Bidang: Sistem Informasi Akuntansi, Sistem Informasi Bisnis Syariah, Sistem Informasi Geografis, dsb.
Prospek Profesi diantaranya: Sistem Analis, IT Consultant, GIS Specialist, IT Project Manajer, Dosen, Peneliti Bidang Sistem Informasi, dll.
Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Program Studi Sosial Ekonomi Pertanian/Agribisnis, bertujuan menyelenggarakan pendidikan manajemen agribisnis yang menghasilkan sarjana sains berbasis pertanian yang memiliki integritas dan pemahaman teori dan metode yang tinggi dalam bidang agribisnis sehingga mampu menganalisis dan memecahkan permasalahan-permasalahan di bidang agribisnis.
Konsentrasi Bidang Sosial Ekonomi Pertanian/Agribisnis yaitu: Manajemen Agribisnis, Ekonomi Pertanian dan Sumberdaya, Komunikasi Pembangunan Pertanian.
13. profil_reg_mtk.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Program Studi ini diarahkan pada pengembangan matematika sebagai suatu disiplin ilmu, dan juga merupakan pusat pengembangan ilmu matematika dengan nilai-nilai Islam. Program Studi ini bertujuan untuk menghasilkan lulusan dengan kemampuan matematika di tempat kerja, serta bahan dan metodologi mengajar.
Konsentrasi Peminatan: Statistika, Riset Operasi, dan Matematika Informatika.
Prospek Profesi diantaranya: Perusahaan Jasa: Perbankan, Asuransi, Penelitian dan Pengembangan. Perusahaan Industri: Teknik, Elektronika, Telekomunikasi, Transportasi, Komputer. Lembaga Pendidikan: Universitas, Sekolah Tinggi, Akademi. Lembaga-lembaga pemerintah dan BUMN.
14. profil_reg_bio.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Program Studi ini diarahkan kepada pengembangan lulusan dengan kemampuan profesional di bidang biologi dicirikan oleh nilai-nilai Islam. Lulusan diharapkan dapat mengembangkan dan memberikan layanan di bidang biologi. Program Studi yang memfokuskan pada biologi murni, bio informatika, makanan dan lingkungan yang diharapkan dapat memenuhi kebutuhan ini.
Konsentrasi Bidang: Biologi Pangan, Biologi Lingkungan dan Biologi Murni.
106
Prospek Profesi: Peneliti, Tenaga Pengajar, Konsultan, Peneliti di perusahaan kosmetik, obat-obatan, pemerintahan, kewirausahaan, dll.
15. profil_reg_kim.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Program Studi ini bertujuan untuk mengembangkan ilmu kimia sebagai suatu disiplin ilmu sendiri, dan terintegrasi dengan nilai-nilai Islam. Lulusan sarjana kimia diharapkan dapat mengembangkan dan membuat pelayanan kepada masyarakat tentang kimia. Industri makanan, farmasi dan kosmetik telah berkembang pesat atas industri ini adalah bukti bagi krisis ekonomi karena produk mereka sebagai kebutuhan dasar manusia. Kebutuhan industri ini ahli di bidang kimia dan biochemical, karena mereka tumbuh pesat, banyak industri makanan, farmasi, dan kosmetik harus ahli untuk mengontrol dan mengawasi produk mereka khususnya dalam melakukan tes halal. Dalam hal ini, tentu saja, industri yang perlu untuk membuka lebih vacancies dan pekerjaan untuk ahli di bidang makanan dan biochemical kimia.
Konsentrasi Bidang: Kimia Murni dan Kimia Terapan, Kimia Pangan, Lingkungan, Polimer, Industri
Prospek Profesi: Peneliti, Tenaga Pengajar, Konsultan, Peneliti di perusahaan kosmetik, obat-obatan, pemerintah, kewirausahaan, dll.
16. profil_reg_fis.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Program Studi ini bertujuan untuk mengembangkan Ilmu Fisika yang berorientasi keislaman sejalan dengan era globalisasi dan teknologi. Lulusan diharapkan mampu memberi kan pelayanan di bidang Fisika dengan nilai Islam dan moralitas tinggi.
Penekanan bidang: Fisika Bumi (Geofisika), Fisika Instrumentasi, dan Fisika Material.
Prospek Profesi diantaranya: Engineer, Data Analyst, Network Engineer, Quality Control, Access Engineer, Radiotherapist, Geophysics Peneliti, Data Interpreter, Scientific, Data Acquisition, Dosen.
17. profil_inter.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah
110
Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js">
Kerjasama antara Fakultas Sains dan Teknologi dengna Kulliyyah of Technologi Informasi dan Komunikasi Universitas Islam Internasional Malaysia (IIUM). Kerjasama antar dua universitas yang sama pada dasar visi pengembangan intelektual Muslim dengna program double degree, dimana kuliah dilakukan di dua Perguruan Tinggi, tiga tahun di UIN Syarif Hidayatullah Jakarta dan satu tahun pada KICT International Islamic University of Malaysia. Pada program perkuliahan ini dilakukan dengan bahasa Inggris.
18. lantai_1.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
19. lantai_2.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
20. lantai_3.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
21. lantai_4.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
22. lantai5.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
23. lantai6.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
Content on this page requires a newer version of Adobe Flash Player.
123
<script type="text/javascript">
24. lantai7.html <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta <script type="text/javascript" src="Scripts/jquery1.3.1.min.js"> <script type="text/javascript" src="Scripts/image_rotate.js"> <script src="Scripts/swfobject_modified.js" type="text/javascript">
28. image_rotate.js $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7}); //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')}); //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',6000); } function gallery() { //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); //Get next image caption var caption = next.find('img').attr('rel');
149
//Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 ); //Display the content $('#gallery .content').html(caption);}