Proyeksi tata ruang berbasis web multimedia pada gedung fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta
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
(2)
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
(3)
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 :
103091029613 NURLAILA MAULINA
Menyetujui
Pembimbing I Pembimbing II
DR. Eko Syamsuddin. H.M.Eng
NIP . NIP .
Mohammad Yusuf S.Kom
Mengetahui,
Ketua Program Studi Teknik Informatika
NIP. 19710522 200604 1002 Yusuf Durachman, MIT, M.Sc
(4)
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
DR. Syopiansyah Jaya Putra, M.Sis NIP. 19680117 200112 1001
Penguji II
NIP.
Pembimbing I
Fitri Mintarsih M.Kom
Pembimbing II
DR. Eko Syamsuddin. H.M.Eng
NIP . NIP .
Mohammad Yusuf S.Kom
Mengetahui
Dekan
Fakultas Sains dan Teknologi
NIP. 19680117 200112 1001 DR. Syopiansyah Jaya Putra, M.Sis
Ketua Program Studi Teknik Informatika
NIP. 19710522 200604 1002 Yusuf Durrachman, MIT
(5)
PERNYATAAN
DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI INI BENAR-BENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANAPUN.
Jakarta, Agustus 2010
Nurlaila Maulina
103091029613
(6)
i
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
(7)
ii
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
(8)
iii 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 henti-hentinya 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, April2011
NIM. 103091029613 Nurlaila Maulina
(9)
iv
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.
(10)
v 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.
(11)
vi
DAFTAR ISI
ABSTRAKSI ... i
KATA PENGANTAR ... ii
LEMBAR PERSEMBAHAN... iv
DAFTAR ISI ... vi
DAFTAR GAMBAR ... x
DAFTAR TABEL ... xvii
DAFTAR LAMPIRAN ... xviii
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang ... 1
1.2 Perumusan Masalah ... 2
1.3 Batasan Masalah ... 3
1.4 Tujuan dan Manfaat Penelitian ... 3
1.4.1 Tujuan Penelitian ... 3
1.4.2 Manfaat Penelitian ... 4
1.5 Metodologi Penelitian ... 5
1.5.1 Metode Wawancara dan Kuisioner ... 5
1.5.2 Metode Observasi ... 5
1.5.3 Metode Studi Pustaka ... 5
1.5.4 Metode Pengembangan Aplikasi Multimedia ... 6
(12)
vii BAB II TINJAUAN PUSTAKA
2.1 Proyeksi ... 9
2.1.1 Proyeksi Piktoral ... 9
2.1.2 Proyeksi Ortogonal ... 14
2.1.3 Proyeksi Pandangan ... 17
2.2 Internet ... 19
2.2.1 Pengertian Internet ... 19
2.2.2 TCP/IP ... 20
2.2.3 World Wide Web (WWW)... 20
2.2.4 Web Browser ... 20
2.2.5 Hypertext Transfer Protocol ... 21
2.3 Multimedia... 21
2.3.1 Objek Multimedia ... 22
2.3.2 Penggunaan Multimedia... 27
2.4 Interaksi Manusia dan Komputer ... 35
2.5 Flowchart ... 37
2.6 State Transition Diagram (STD) ... 38
2.7 Storyboard ... 39
2.8 3Ds Studio Max ... 40
2.9 Adobe Photoshop ... 42
2.10 Adobe Dreamweaver ... 42
2.11 Adobe Flash ... 43
(13)
viii
3.1 Metode Pengumpulan Data ... 45
3.1.1 Metode Wawancara dan Kuesioner ... 45
3.1.2 Metode Observasi ... 46
3.1.3 Metode Studi Pustaka ... 46
3.2 Metode Pengembangan Multimedia ... 46
3.2.1 Konsep ... 48
3.2.2 Desain ... 48
3.2.3 Pengumpulan Bahan ... 49
3.2.4 Pembuatan ... 49
3.2.5 Pengujian ... 49
3.2.6 Distribusi ... 50
BAB IV ANALISIS DAN PEMBAHASAN ... 51
4.1 Fakultas Sains dan Teknologi UIN Jakarta ... 51
4.1.1 Visi ... 52
4.1.2 Misi ... 52
4.1.3 Motto ... 52
4.1.4 Tujuan Pendidikan ... 53
4.2 Hasil Pengumpulan Data ... 54
4.2.1 Hasil Wawancara dan Kuesioner ... 54
4.2.2 Hasil Observasi ... 56
4.2.3 Hasil Studi Pustaka ... 56
4.3 Konsep ... 57
(14)
ix
4.5 Flowchart... 59
4.6 Struktur Menu ... 60
4.7 State Transition Diagram (STD)... 61
4.8 Rancangan Layar Web... 61
4.9 Pengumpulan Bahan... 61
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 ... 77
BAB V KESIMPULAN DAN SARAN ... 78
5.1 Kesimpulan ... 78
5.2 Saran ... 78
Daftar Pustaka ... 79
(15)
x 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
(16)
xi
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
(17)
xii 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
Gambar 4.2. Storyboard ... 58
Gambar 4.3. 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
(18)
xiii 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 Storyboard 1 ... 86
Gambar L.2 Storyboard 2 ... 87
Gambar L.3 Storyboard 3 ... 88
Gambar L.4 Storyboard 4 ... 89
Gambar L.5 Rancangan STD Menu Utama ... 90
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
(19)
xiv
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
(20)
xv
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
(21)
xvi
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
(22)
xvii 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
(23)
xviii DAFTAR LAMPIRAN
Lampiran 1. Wawancara ... 80 Lampiran 2. Kuesioner Awal ... 81 Lampiran 3. Storyboard ... 86 Lampiran 4. State Transition Diagram (STD) ... 90 Lampiran 5. Perancangan Layar Tampilan ... 114 Lampiran 6. Tampilan Menu ... 138 Lampiran 7. Kuesioner Akhir ... 150 Lampiran 8. ActionScript Flash... 154 Lampiran 9. Script Web ... 163
(24)
1
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
(25)
2 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
(26)
3 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
(27)
4 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.
(28)
5 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 buku-buku 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.
(29)
6
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,
(30)
7 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:
(31)
8
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.
(32)
1
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:
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:
PROYEKSI Proyeksi Piktoral (Posisi Benda) Proyeksi Ortogonal (Posisi Pemproyeksian) Proyeksi Pandangan (Posisi Pandangan)
- Proyeksi Isometri - Proyeksi Dimetri - Proyeksi Miring - Proyeksi
Perspeksif
- Sebuah titik - Sebuah garis - Sebuah bidang - Sebuah benda
- Proyeksi Eropa - Proyeksi Amerika
(33)
2
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 :
(34)
3 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:
Gambar 2.3. Proyeksi isometri dengan posisi normal (Gambar Teknik : 2007)
2) Proyeksi isometri dengan posisi terbalik Contoh:
Gambar 2.4. Proyeksi isometri dengan posisi terbalik (Gambar Teknik : 2007)
titik referensi
y x
z
120
3
3
z
x y
titik referensi
z
x 120 y
30 30
z
(35)
4 3) Proyeksi isometri dengan posisi horizontal
Contoh:
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
y
x
z 12
30
30
z
x y
(36)
5 Contoh:
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:
Gambar 2.7. Proyeksi miring (Gambar Teknik : 2007)
z y
x 45
z
y
x
Keterangan:
Ukuran pada sumbu x 40 mm
Ukuran gambar pada sumbu y digambar ½nya, yaitu 20 mm
Ukuran pada sumbu z 40 mm
y
x 10 40
(37)
6
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:
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
(38)
7 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
(39)
8 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
Gambar 2.9. Proyeksi orthogonal dari sebuah titik (Gambar Teknik Untuk SMA:2007)
2. Proyeksi ortogonal dari sebuah garis
Gambar 2.10. Proyeksi orthogonal dari sebuah garis (Gambar Teknik Untuk SMA:2007)
B A
B’ A’
A A
Proyektor Bidang Proyeksi
(40)
9
3. Proyeksi ortogonal dari sebuah bidang
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).
C
D B A
D’
C’ B’
(41)
10
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).
P.Ba
P.D
P.Ka P.Ki P.Be
P.A
Keterangan:
P.A = Pandangan Atas P.Ki = Pandangan Kiri P.Ka = Pandangan Kanan P.Ba = Pandangan Bawah P.Be = Pandangan
Belakang P.Ka
P.Ki
P.Ba
P.Be P.A
(42)
11
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
P.Ka P.Ki P.Ba P.Be P.A P.D P.A P.D
P.Ki P.Ka P.Be
P.Ba
Keterangan:
P.A = Pandangan Atas P.Ki = Pandangan Kiri P.Ka = Pandangan Kanan P.Ba = Pandangan Bawah P.Be = Pandangan
(43)
12
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 WideWeb (WWW)
Jejaring Jagat Jembar ("JJJ") atau WorldWideWeb ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber 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 WebBrowser
Penjelajah web (bahasa Inggris: webbrowser), disebut juga sebagai perambah atau peramban, adalah perangkat lunak yang berfungsi menampilkan dan melakukan interaksi dengan dokumen-dokumen
2
http://id.wikipedia.org/wiki/TCP/IP : 2009 3
(44)
13 yang disediakan oleh server web. Penjelajah web yang populer adalah Microsoft InternetExplorer 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 WideWeb.4
2.2.5 Hypertext Transfer Protocol
HTTP (Hypertext Transfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam WorldWide 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 media6 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 5
http://id.wikipedia.org/wiki/HTTP : 2009 6
Febrian, Jack: "Kamus Komputer dan Teknologi Informasi", halaman 301. Informatika, 2007 7
(45)
14 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
8Sutopo, Ariesto Hadi: “
(46)
15
Gambar 2.15. Contoh Image
Secara umum image atau grafik berarti still image seperti foto dan gambar. Manusia sangat berorientasi pada visual (visual-oriented), 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.
(47)
16
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
Objek
Image
Visible image Non-visible image Abstrak
Foto Drawing Dokumen Painting Ukuran tekanan
Ukuran temperatur
(48)
17 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-orientedsoftware 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
transitioneffect.9 4. Audio
Gambar 2.18. Contoh perangkat audio
9Sutopo, Ariesto Hadi: “
(49)
18 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 dan transmisi yaitu sistem pengambilan/penangkapan suara, sambungan 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),
(50)
19
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
10Sutopo, Ariesto Hadi: “
(51)
20 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.
(52)
21 3. Informationdelivery
Gambar 2.21. Electronic Book
Banyak aplikasi multimedia dikembangkan dengan kemampuan
user untuk mengakses data. Koleksi data ditampilkan dalam bentuk buku, catalog, perpustakaan, tapeaudio, tapevideo, atau
stillphoto. 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.
(53)
22 4. Promosi dan penjualan
Gambar 2.22. Toko Online
Aplikasi penjualan yang merupakan gabungan dengan
information delivery dapat mempunyai bentuk seperti penawaran, negoisasi, pengambilan order dan 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.
(54)
23 5. Productivity
Terdapat banyak kemungkinan untuk menggunakan multimedia
dengan aplikasi produksi (productivity application). Salah satu contoh adalah presentasi untuk onlinehelp 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
(55)
24 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.
(56)
25 8. Virtualreality
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 lain-lain. Bagian-bagian objek bila diperhatikan dapat dilihat dengan jelas, misalnya lampu penerangan jalan dengan tampilan yang rinci.
(57)
26 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 lain-lain. Bila aplikasi ini menggunakan database, diperlukan script
yang dapat mengakses database di server seperti Active Server Pages (ASP) CGI/Perl, PHP, dan JavaServerPages (JSP).
(58)
27 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
(59)
28
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.
(60)
29 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.
(61)
30 sistem dengan menunjukan alat media input, output serta jenis media penyimpanan dalam proses pengolahan data. Programmeflowchart 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:
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 StateTransitionDiagram: 1. Keadaan sistem.
Setiap kotak mewakili suatu keadaan dimana sistem mungkin berada didalamnya. State disimbolkan dengan segi empat.
(62)
31
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.
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
Keadaan 1
Keadaan 2 Kondisi
(63)
32 mewakili satu tampilang di layar monitor. Dengan demikian, biasanya
storyboard cukup banyak berlembar-lembar. Contoh storyboard:
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
STORYBOARD Project :
Modul : Tanggal :
Color : Text Attributes : Still Images : Animation :
Audio :
Narration :
Video :
Navigation : Next : Back :
Menu :
(64)
33 and Kinetix. Perangkat lunak ini dikembangkan dari pendahulunya 3D Studio fo DOS, tetapi untuk platform Win32. Kinetix kemudian bergabung dengan akuisisi terakhir Autodesk, Discreet Logic11.
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 model-model 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
http://id.wikipedia.org/wiki/3D_Studio_Max : 2009 12
(65)
34
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
(66)
35 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
(67)
36 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
(68)
1
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.
(69)
2 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:
(70)
3
Gambar 3.1. Tahap Pengembangan Multimedia
Untuk lebih jelasnya dapat dilihat dari bagan gambar dibawah ini:
(71)
4
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 lain-lain.
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.
(72)
5 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
(73)
6 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.
(1)
145
ssword)}else{J.open(G,M.url,M.async)}try{if(M.data){J.setReques
tHeader("Content- Type",M.contentType)}if(M.ifModified){J.setRequestHeader("If-Modified-Since",o.lastModified[M.url]||"Thu, 01 Jan 1970 00:00:00
GMT")}J.setRequestHeader("X-Requested-With","XMLHttpRequest");J.setRequestHeader("Accept",M.dataType& &M.accepts[M.dataType]?M.accepts[M.dataType]+",
*/*":M.accepts._default)}catch(S){}if(M.beforeSend&&M.beforeSen
d(J,M)===false){if(M.global&&!--o.active){o.event.trigger("ajaxStop")}J.abort();return false}if(M.global){o.event.trigger("ajaxSend",[J,M])}var
N=function(X){if(J.readyState==0){if(P){clearInterval(P);P=null
;if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}}else{if(!K&&J&&(J.ready State==4||X=="timeout")){K=true;if(P){clearInterval(P);P=null}R =X=="timeout"?"timeout":!o.httpSuccess(J)?"error":M.ifModified& &o.httpNotModified(J,M.url)?"notmodified":"success";if(R=="succ ess"){try{V=o.httpData(J,M.dataType,M)}catch(Z){R="parsererror" }}if(R=="success"){var
Y;try{Y=J.getResponseHeader("Last-Modified")}catch(Z){}if(M.ifModified&&Y){o.lastModified[M.url]= Y}if(!W){I()}}else{o.handleError(M,J,R)}L();if(X){J.abort()}if( M.async){J=null}}}};if(M.async){var
P=setInterval(N,13);if(M.timeout>0){setTimeout(function(){if(J& &!K){N("timeout")}},M.timeout)}}try{J.send(M.data)}catch(S){o.h andleError(M,J,null,S)}if(!M.async){N()}function
I(){if(M.success){M.success(V,R)}if(M.global){o.event.trigger(" ajaxSuccess",[J,M])}}function
L(){if(M.complete){M.complete(J,R)}if(M.global){o.event.trigger
("ajaxComplete",[J,M])}if(M.global&&!--o.active){o.event.trigger("ajaxStop")}}return
J},handleError:function(F,H,E,G){if(F.error){F.error(H,E,G)}if( F.global){o.event.trigger("ajaxError",[H,F,G])}},active:0,httpS uccess:function(F){try{return
!F.status&&location.protocol=="file:"||(F.status>=200&&F.status <300)||F.status==304||F.status==1223}catch(E){}return
false},httpNotModified:function(G,E){try{var H=G.getResponseHeader("Last-Modified");return
G.status==304||H==o.lastModified[E]}catch(F){}return false},httpData:function(J,H,G){var
F=J.getResponseHeader("content-type"),E=H=="xml"||!H&&F&&F.indexOf("xml")>=0,I=E?J.responseXML :J.responseText;if(E&&I.documentElement.tagName=="parsererror") {throw"parsererror"}if(G&&G.dataFilter){I=G.dataFilter(I,H)}if( typeof
I==="string"){if(H=="script"){o.globalEval(I)}if(H=="json"){I=l ["eval"]("("+I+")")}}return I},param:function(E){var
G=[];function
H(I,J){G[G.length]=encodeURIComponent(I)+"="+encodeURIComponent (J)}if(o.isArray(E)||E.jquery){o.each(E,function(){H(this.name, this.value)})}else{for(var F in
E){if(o.isArray(E[F])){o.each(E[F],function(){H(F,this)})}else{ H(F,o.isFunction(E[F])?E[F]():E[F])}}}return
G.join("&").replace(/%20/g,"+")}});var
m={},n,d=[["height","marginTop","marginBottom","paddingTop","pa ddingBottom"],["width","marginLeft","marginRight","paddingLeft" ,"paddingRight"],["opacity"]];function t(F,E){var
(2)
146
G={};o.each(d.concat.apply([],d.slice(0,E)),function(){G[this]= F});return G}o.fn.extend({show:function(J,L){if(J){return this.animate(t("show",3),J,L)}else{for(var
H=0,F=this.length;H<F;H++){var
E=o.data(this[H],"olddisplay");this[H].style.display=E||"";if(o .css(this[H],"display")==="none"){var
G=this[H].tagName,K;if(m[G]){K=m[G]}else{var I=o("<"+G+"
/>").appendTo("body");K=I.css("display");if(K==="none"){K="bloc k"}I.remove();m[G]=K}this[H].style.display=o.data(this[H],"oldd isplay",K)}}return this}},hide:function(H,I){if(H){return this.animate(t("hide",3),H,I)}else{for(var
G=0,F=this.length;G<F;G++){var
E=o.data(this[G],"olddisplay");if(!E&&E!=="none"){o.data(this[G ],"olddisplay",o.css(this[G],"display"))}this[G].style.display= "none"}return
this}},_toggle:o.fn.toggle,toggle:function(G,F){var E=typeof G==="boolean";return
o.isFunction(G)&&o.isFunction(F)?this._toggle.apply(this,argume nts):G==null||E?this.each(function(){var
H=E?G:o(this).is(":hidden");o(this)[H?"show":"hide"]()}):this.a nimate(t("toggle",3),G,F)},fadeTo:function(E,G,F){return
this.animate({opacity:G},E,F)},animate:function(I,F,H,G){var E=o.speed(F,H,G);return
this[E.queue===false?"each":"queue"](function(){var
K=o.extend({},E),M,L=this.nodeType==1&&o(this).is(":hidden"),J= this;for(M in I){if(I[M]=="hide"&&L||I[M]=="show"&&!L){return K.complete.call(this)}if((M=="height"||M=="width")&&this.style) {K.display=o.css(this,"display");K.overflow=this.style.overflow }}if(K.overflow!=null){this.style.overflow="hidden"}K.curAnim=o .extend({},I);o.each(I,function(O,S){var R=new
o.fx(J,K,O);if(/toggle|show|hide/.test(S)){R[S=="toggle"?L?"sho w":"hide":S](I)}else{var Q=S.toString().match(/^([+-]=)?([\d+-.]+)(.*)$/),T=R.cur(true)||0;if(Q){var
N=parseFloat(Q[2]),P=Q[3]||"px";if(P!="px"){J.style[O]=(N||1)+P ;T=((N||1)/R.cur(true))*T;J.style[O]=T+P}if(Q[1]){N=((Q[1]=="-="?-1:1)*N)+T}R.custom(T,N,P)}else{R.custom(T,S,"")}}});return true})},stop:function(F,E){var
G=o.timers;if(F){this.queue([])}this.each(function(){for(var
H=G.length-1;H>=0;H--){if(G[H].elem==this){if(E){G[H](true)}G.splice(H,1)}}});if(!E) {this.dequeue()}return
this}});o.each({slideDown:t("show",1),slideUp:t("hide",1),slide Toggle:t("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:" hide"}},function(E,F){o.fn[E]=function(G,H){return
this.animate(F,G,H)}});o.extend({speed:function(G,H,F){var E=typeof
G==="object"?G:{complete:F||!F&&H||o.isFunction(G)&&G,duration: G,easing:F&&H||H&&!o.isFunction(H)&&H};E.duration=o.fx.off?0:ty peof
E.duration==="number"?E.duration:o.fx.speeds[E.duration]||o.fx. speeds._default;E.old=E.complete;E.complete=function(){if(E.que ue!==false){o(this).dequeue()}if(o.isFunction(E.old)){E.old.cal l(this)}};return E},easing:{linear:function(G,H,E,F){return
E+F*G},swing:function(G,H,E,F){return((-Math.cos(G*Math.PI)/2)+0.5)*F+E}},timers:[],fx:function(F,E,G){ this.options=E;this.elem=F;this.prop=G;if(!E.orig){E.orig={}}}}
(3)
147
);o.fx.prototype={update:function(){if(this.options.step){this. options.step.call(this.elem,this.now,this)}(o.fx.step[this.prop ]||o.fx.step._default)(this);if((this.prop=="height"||this.prop =="width")&&this.elem.style){this.elem.style.display="block"}}, cur:function(F){if(this.elem[this.prop]!=null&&(!this.elem.styl e||this.elem.style[this.prop]==null)){return
this.elem[this.prop]}var
E=parseFloat(o.css(this.elem,this.prop,F));return
E&&E>-10000?E:parseFloat(o.curCSS(this.elem,this.prop))||0},custom:fu nction(I,H,G){this.startTime=e();this.start=I;this.end=H;this.u nit=G||this.unit||"px";this.now=this.start;this.pos=this.state= 0;var E=this;function F(J){return
E.step(J)}F.elem=this.elem;if(F()&&o.timers.push(F)==1){n=setIn terval(function(){var K=o.timers;for(var
J=0;J<K.length;J++){if(!K[J]()){K.splice(J--,1)}}if(!K.length){clearInterval(n)}},13)}},show:function(){thi s.options.orig[this.prop]=o.attr(this.elem.style,this.prop);thi s.options.show=true;this.custom(this.prop=="width"||this.prop== "height"?1:0,this.cur());o(this.elem).show()},hide:function(){t his.options.orig[this.prop]=o.attr(this.elem.style,this.prop);t his.options.hide=true;this.custom(this.cur(),0)},step:function( H){var
G=e();if(H||G>=this.options.duration+this.startTime){this.now=t his.end;this.pos=this.state=1;this.update();this.options.curAni m[this.prop]=true;var E=true;for(var F in
this.options.curAnim){if(this.options.curAnim[F]!==true){E=fals e}}if(E){if(this.options.display!=null){this.elem.style.overflo w=this.options.overflow;this.elem.style.display=this.options.di splay;if(o.css(this.elem,"display")=="none"){this.elem.style.di splay="block"}}if(this.options.hide){o(this.elem).hide()}if(thi s.options.hide||this.options.show){for(var I in
this.options.curAnim){o.attr(this.elem.style,I,this.options.ori g[I])}}this.options.complete.call(this.elem)}return
false}else{var
J=G-this.startTime;this.state=J/this.options.duration;this.pos=o.ea sing[this.options.easing||(o.easing.swing?"swing":"linear")](th is.state,J,0,1,this.options.duration);this.now=this.start+((thi s.end-this.start)*this.pos);this.update()}return
true}};o.extend(o.fx,{speeds:{slow:600,fast:200,_default:400},s tep:{opacity:function(E){o.attr(E.elem.style,"opacity",E.now)}, _default:function(E){if(E.elem.style&&E.elem.style[E.prop]!=nul l){E.elem.style[E.prop]=E.now+E.unit}else{E.elem[E.prop]=E.now} }}});if(document.documentElement.getBoundingClientRect){o.fn.of fset=function(){if(!this[0]){return{top:0,left:0}}if(this[0]=== this[0].ownerDocument.body){return
o.offset.bodyOffset(this[0])}var
G=this[0].getBoundingClientRect(),J=this[0].ownerDocument,F=J.b ody,E=J.documentElement,L=E.clientTop||F.clientTop||0,K=E.clien tLeft||F.clientLeft||0,I=G.top+(self.pageYOffset||o.boxModel&&E
.scrollTop||F.scrollTop)-L,H=G.left+(self.pageXOffset||o.boxModel&&E.scrollLeft||F.scrol
lLeft)-K;return{top:I,left:H}}}else{o.fn.offset=function(){if(!this[0] ){return{top:0,left:0}}if(this[0]===this[0].ownerDocument.body) {return
(4)
148
tialize();var
J=this[0],G=J.offsetParent,F=J,O=J.ownerDocument,M,H=O.document Element,K=O.body,L=O.defaultView,E=L.getComputedStyle(J,null),N =J.offsetTop,I=J.offsetLeft;while((J=J.parentNode)&&J!==K&&J!==
H){M=L.getComputedStyle(J,null);N-=J.scrollTop,I-=J.scrollLeft;if(J===G){N+=J.offsetTop,I+=J.offsetLeft;if(o.off set.doesNotAddBorder&&!(o.offset.doesAddBorderForTableAndCells& &/^t(able|d|h)$/i.test(J.tagName))){N+=parseInt(M.borderTopWidt h,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}F=G,G=J.offsetPar ent}if(o.offset.subtractsBorderForOverflowNotVisible&&M.overflo w!=="visible"){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt( M.borderLeftWidth,10)||0}E=M}if(E.position==="relative"||E.posi tion==="static"){N+=K.offsetTop,I+=K.offsetLeft}if(E.position== ="fixed"){N+=Math.max(H.scrollTop,K.scrollTop),I+=Math.max(H.sc rollLeft,K.scrollLeft)}return{top:N,left:I}}}o.offset={initiali ze:function(){if(this.initialized){return}var
L=document.body,F=document.createElement("div"),H,G,N,I,M,E,J=L .style.marginTop,K='<div
style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;"><div></div></div><table style="position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;" cellpadding="0"
cellspacing="0"><tr><td></td></tr></table>';M={position:"absolu te",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",vis ibility:"hidden"};for(E in
M){F.style[E]=M[E]}F.innerHTML=K;L.insertBefore(F,L.firstChild) ;H=F.firstChild,G=H.firstChild,I=H.nextSibling.firstChild.first Child;this.doesNotAddBorder=(G.offsetTop!==5);this.doesAddBorde rForTableAndCells=(I.offsetTop===5);H.style.overflow="hidden",H .style.position="relative";this.subtractsBorderForOverflowNotVi
sible=(G.offsetTop===-5);L.style.marginTop="1px";this.doesNotIncludeMarginInBodyOffse t=(L.offsetTop===0);L.style.marginTop=J;L.removeChild(F);this.i nitialized=true},bodyOffset:function(E){o.offset.initialized||o .offset.initialize();var
G=E.offsetTop,F=E.offsetLeft;if(o.offset.doesNotIncludeMarginIn BodyOffset){G+=parseInt(o.curCSS(E,"marginTop",true),10)||0,F+= parseInt(o.curCSS(E,"marginLeft",true),10)||0}return{top:G,left :F}}};o.fn.extend({position:function(){var
I=0,H=0,F;if(this[0]){var
G=this.offsetParent(),J=this.offset(),E=/^body|html$/i.test(G[0
].tagName)?{top:0,left:0}:G.offset();J.top-
=j(this,"marginTop");J.left-=j(this,"marginLeft");E.top+=j(G,"borderTopWidth");E.left+=j(G,
"borderLeftWidth");F={top:J.top-E.top,left:J.left-E.left}}return F},offsetParent:function(){var
E=this[0].offsetParent||document.body;while(E&&(!/^body|html$/i .test(E.tagName)&&o.css(E,"position")=="static")){E=E.offsetPar ent}return o(E)}});o.each(["Left","Top"],function(F,E){var G="scroll"+E;o.fn[G]=function(H){if(!this[0]){return
null}return
H!==g?this.each(function(){this==l||this==document?l.scrollTo(! F?H:o(l).scrollLeft(),F?H:o(l).scrollTop()):this[G]=H}):this[0] ==l||this[0]==document?self[F?"pageYOffset":"pageXOffset"]||o.b oxModel&&document.documentElement[G]||document.body[G]:this[0][ G]}});o.each(["Height","Width"],function(H,F){var
(5)
149
E=H?"Left":"Top",G=H?"Right":"Bottom";o.fn["inner"+F]=function( ){return
this[F.toLowerCase()]()+j(this,"padding"+E)+j(this,"padding"+G) };o.fn["outer"+F]=function(J){return
this["inner"+F]()+j(this,"border"+E+"Width")+j(this,"border"+G+ "Width")+(J?j(this,"margin"+E)+j(this,"margin"+G):0)};var I=F.toLowerCase();o.fn[I]=function(J){return
this[0]==l?document.compatMode=="CSS1Compat"&&document.document Element["client"+F]||document.body["client"+F]:this[0]==documen t?Math.max(document.documentElement["client"+F],document.body[" scroll"+F],document.documentElement["scroll"+F],document.body[" offset"+F],document.documentElement["offset"+F]):J===g?(this.le ngth?o.css(this[0],I):null):this.css(I,typeof
J==="string"?J:J+"px")}})})();
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
(6)
150
//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