PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA …repository.uinjkt.ac.id/dspace/bitstream/123456789/4318/1/NURLAILA... · Nurlaila Maulina, Proyeksi Tata Ruang Berbasis Web Multimedia

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


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


Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh Gelar

Sarjana Komputer


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

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


NIP. 19680117 200112 1001

DR. Syopiansyah Jaya Putra, M.Sis

Ketua Program Studi

Teknik Informatika

NIP. 19710522 200604 1002

Yusuf Durrachman, MIT

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

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

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

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, April 2011

NIM. 103091029613

Nurlaila Maulina

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.

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.

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

1.6 Sistematika Penulisan ............................................................... 7

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

BAB III METODOLOGI PENELITIAN ...................................................... 45

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

4.4 Storyboard .............................................................................. 58

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

Lampiran-Lampiran ........................................................................................ 80

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

Gambar 2.15. Contoh Image .......................................................................... 23

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

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

Gambar 4.12. Objek box yang akan digunakan sebagai tiang/pilar............... 68

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.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

Gambar L.10 Rancangan STD Menu Visi ... ............................................... 95

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.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

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.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

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.76 Tampilan lantai7.html .............................................................. 149

xvii

DAFTAR TABEL

Tabel L.1. Hasil olahan kuesioner awal pertanyaan No.1 ........................ 82





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



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

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

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

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

1. Manfaat penelitian bagi penulis:

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


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


Jakarta.

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.

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,

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:

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.

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

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 :

Gambar 2.2. Proyeksi isometric (Gambar Teknik : 2007)

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 0 ° 3 0 °

z

x y

titik referensi

z

x y 120

°

30 ° 30 °

z

x y

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

0°

30 °

30 °

z

x

y

Titik referensi

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 °

z

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

TH (Titik Hilang)

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

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

Proyeksi

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’

A’

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

P.D

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

Belakang

http://id.wikipedia.org/wiki/Internet

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 Wide Web (WWW)

Jejaring Jagat Jembar ("JJJ") atau World Wide Web ("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 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 http://id.wikipedia.org/wiki/TCP/IP : 2009

3 http://id.wikipedia.org/wiki/World_Wide_Web : 2009

http://id.wikipedia.org/wiki/TCP/IP

http://id.wikipedia.org/wiki/World_Wide_Web

13

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 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 http://id.wikipedia.org/wiki/Multimedia : 2009

http://id.wikipedia.org/wiki/Web_browser

http://id.wikipedia.org/wiki/HTTP

http://id.wikipedia.org/wiki/Multimedia

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

8 Sutopo, Ariesto Hadi: “Multimedia Interaktif Dengan Flash”, halaman 7. Graha Ilmu, 2003

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.

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 Diskrit Kontinu

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-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

Gambar 2.18. Contoh perangkat audio

9 Sutopo, Ariesto Hadi: “Multimedia Interaktif Dengan Flash”, halaman 12. Graha Ilmu, 2003

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),

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

10

Sutopo, Ariesto Hadi: “Multimedia Interaktif Dengan Flash”, halaman 14. Graha Ilmu, 2003

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.

21

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.

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.

23

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

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.

25

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 lain-

lain. Bagian-bagian objek bila diperhatikan dapat dilihat dengan

jelas, misalnya lampu penerangan jalan dengan tampilan yang

rinci.

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 Java Server Pages (JSP).

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

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.

4. Merancang yang memberikan penutupan

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.

System flowchart adalah bagan yang memperlihatkan urutan proses dalam

30

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:

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.

Input Proses Output

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

Aksi

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 :

Help :

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

Febrian, Jack: "Kamus Komputer dan Teknologi Informasi", halaman 481. Informatika, 2007

http://id.wikipedia.org/wiki/3D_Studio_Max

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

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

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

http://id.wikipedia.org/wiki/Adobe_Flash : 2009

http://id.wikipedia.org/wiki/Adobe_Flash

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.

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:

3

Gambar 3.1. Tahap Pengembangan Multimedia

Untuk lebih jelasnya dapat dilihat dari bagan gambar dibawah ini:

Gambar 3.2. Bagan Tahap Pengembangan Multimedia

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.

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

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

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 (1960-

1963) 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

2

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.

3

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.

4

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

5

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.

6

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.

7

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


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

8

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.

Gambar 4.2. 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.

9

4.5 Flowchart

Gambar 4.3. Flowchart Proyeksi Web Tata Ruang Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta

10

Flowchart pada gambar 4.3 menjelaskan bahwa aplikasi ini

dimulai dengan tampilan Menu Utama yang berisi proses menuju menu-

menu 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

Gambar 4.4. Desain Struktur Menu

Utama Profil Proyeksi Galeri Credit

Visi

Misi

Motto

Program Studi

Reguler

Internasional

Non Reguler

Teknik informatika

Agribisnis

Matematika

Biologi

Kimia

Sistem Informasi

Fisika

Lantai 1

Lantai 2

Lantai 3

Lantai 4

Lantai 5

Lantai 6

Lantai 7

11

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.

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.

utama profil proyeksi galeri credit

judul aplikasi Logo UIN

gambar

footer

12

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

13

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.

14

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.

15

Setelah spesifikasi pengembangan dapat dipenuhi, tahap

selanjutnya adalah pengembangan program ini ke tahap

pembuatannya menggunakan perangkat lunak 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

16

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.

17

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

18

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.

19

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

20

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

21

Gambar 4.18. Dinding dipasang dan dilubangi

Gambar 4.19. Pintu dan jendela serta balkon dipasang pada dinding

Gambar 4.20. Hasil gedung telah jadi

22

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.

23

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

24

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

25

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.

26

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

http://fst.lyle.web.id/�

27

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.

1

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.

2

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: ……………………………………………………………………………………………………………………………………………………………………

3

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

4

menjawab mengakses internet untuk mencari data. 1,7% responden menjawab

mengakses internet untuk lainnya.

Tabel L.2. Hasil olahan kuesioner awal pertanyaan No. 2


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%

Jumlah 59 100%

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.

5


No Jawaban Responden Jumlah Jawaban Presentase %

1 Pernah 18 60%

2 Tidak Pernah 12 40%

Jumlah 30 100%

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.



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 - -

Jumlah 35 100%

6

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.


No Jawaban Responden

Jumlah Jawaban Presentase (%)

1 Perlu 27 90%

2 Tidak Perlu 3 10%

Jumlah 30 100%

7

Lampiran 3 : Storyboard

Gambar L.1. Storyboard 1

STORYBOARD

Scene 1







8


STORYBOARD

Scene 2







9


STORYBOARD

Scene 3







10


STORYBOARD

Scene 4







11

Lampiran 4 : State Transition Diagram (STD)

Gambar L.5. Rancangan STD Menu Utama

Tampilkan “Credit”

Klik “Credit”

Tampilkan “Utama”

Klik “Utama”


Klik “Utama”


Klik “Utama”

Tampilkan “Profil”

Klik “Profil”

Tampilkan “Proyeksi”

Klik “Proyeksi”


Klik “Utama”

Tampilkan “Galeri”

Klik “Galeri”

Menu Utama Profil

Galeri

Proyeksi

Credit

12

Gambar L.6. Rancangan STD Menu Profil

Program Studi

Motto

Visi

Misi


Klik “Galeri”


Klik “Profil”


Klik “Profil”


Klik “Profil”


Klik “Proyeksi”


Klik “Credit”


Klik “Profil”


Klik “Utama”

Menu Profil Proyeksi

Utama

Credit

Galeri


Klik “Profil”


Klik “Profil”


Klik “Profil”


Klik “Profil”

Tampilkan “Motto”

Klik “Motto”

Tampilkan “Program Studi”

Klik “Program Studi”

Tampilkan “Visi”

Klik “Visi”

Tampilkan “Misi”

Klik “Misi”

13

Gambar L.7. Rancangan STD Menu Proyeksi

Lantai 1

Lantai 2

Lantai 3

Lantai 4

Lantai 5

Lantai 6

Lantai 7


Klik “Galeri”


Klik “Proyeksi”


Klik “Proyeksi”


Klik “Proyeksi”


Klik “Utama”


Klik “Credit”


Klik “Proyeksi”


Klik “Profil”

Menu Proyeksi Utama

Profil

Credit

Galeri


Klik “Proyeksi”


Klik “Proyeksi”


Klik “Proyeksi”


Klik “Proyeksi”


Klik “Proyeksi” Tampilkan “Proyeksi”

Klik “Proyeksi”


Klik “Proyeksi”

Tampilkan “Lantai 3”

Klik “Lantai 3”


Klik “Lantai 4”


Klik “Lantai 2”


Klik “Lantai 5”


Klik “Lantai 6”


Klik “Lantai 7”


Klik “Lantai 1”

14

Gambar L.8. Rancangan STD Menu Galeri


Klik “Credit”


Klik “Utama”


Klik “Utama”


Klik “Galeri”


Klik “Profil”


Klik “Proyeksi”


Klik “Utama”


Klik “Utama”

Menu Galeri Profil

Utama

Proyeksi

Credit

15

Gambar L.9. Rancangan STD Menu Credit


Klik “Utama”


Klik “Credit”


Klik “Utama”


Klik “Utama”


Klik “Profil”


Klik “Proyeksi”


Klik “Utama”


Klik “Galeri”

Menu Credit Profil

Galeri

Proyeksi

Utama

16

Gambar L.10. Rancangan STD Menu Visi


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Visi Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

17

Gambar L.11. Rancangan STD Menu Misi


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Misi Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

18

Gambar L.12. Rancangan STD Menu Motto


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Motto Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

19

Gambar L.13. Rancangan STD Menu Program Studi


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Program

Studi Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

20

Gambar L.14. Rancangan STD Menu Teknik Informatika


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Teknik

Informatika Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

21

Gambar L.15. Rancangan STD Menu Sistem Informasi


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Sistem

Informasi Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

22

Gambar L.16. Rancangan STD Menu Agribisnis


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Agribisnis Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

23

Gambar L.17. Rancangan STD Menu Matematika


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Matematika Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

24

Gambar L.18. Rancangan STD Menu Biologi


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Biologi Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

25

Gambar L.19. Rancangan STD Menu Kimia


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Kimia Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

26

Gambar L.20. Rancangan STD Menu Fisika


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Fisika Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

27

Gambar L.21. Rancangan STD Menu Internasional


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Internasional Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

28

Gambar L.22. Rancangan STD Menu “Lantai 1”


Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”

Menu Lantai 1 Profil

Galeri

Proyeksi

Credit

Utama


Klik “Utama”

29



Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”


Galeri

Proyeksi

Credit

Utama


Klik “Utama”

30



Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”


Galeri

Proyeksi

Credit

Utama


Klik “Utama”

31



Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”


Galeri

Proyeksi

Credit

Utama


Klik “Utama”

32



Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”


Galeri

Proyeksi

Credit

Utama


Klik “Utama”

33



Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”


Galeri

Proyeksi

Credit

Utama


Klik “Utama”

34



Klik “Credit”


Klik “Profil”


Klik “Proyeksi”


Klik “Galeri”


Galeri

Proyeksi

Credit

Utama


Klik “Utama”

35

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 “profil”

• Tombol “proyeksi”

• Tombol “galeri”

• Tombol “credit”

Gambar L.29. Rancangan Menu Utama


judul aplikasi Logo UIN

gambar

footer

36

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 “visi”

• Tombol “misi”

• Tombol “motto”

• Tombol “program studi”

Gambar L.30. Rancangan Menu Profil


judul aplikasi

Konten Profil FST

• Visi • Misi • Motto • Program Studi

Logo UIN

gambar

footer

37

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:






• Tombol “lantai 1”







Gambar L.31. Rancangan Menu Proyeksi


judul aplikasi

Konten Proyeksi

• Lantai 1 • Lantai 2 • Lantai 3 • Lantai 4 • Lantai 5 • Lantai 6 • Lantai 7

Logo UIN

gambar

footer

38

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:






Gambar L.32. Rancangan Menu Galeri


judul aplikasi

Konten Galeri

Logo UIN

gambar

footer

39

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:






Gambar L.33. Rancangan Menu Credit


judul aplikasi

Konten Credit

Logo UIN

gambar

footer

40

6. Rancangan Menu Visi

Rancangan ini berisi visi Fakultas Sains dan Teknologi UIN Syarif

Hidayatullah Jakarta, dimana dalam tampilan menu ini terdapat berbagai


yaitu:






Gambar L.34. Rancangan Menu Visi


judul aplikasi

Konten Visi

Logo UIN

gambar

footer

41

7. Rancangan Menu Misi

Rancangan ini berisi misi Fakultas Sains dan Teknologi UIN Syarif



yaitu:






Gambar L.35. Rancangan Menu Misi


judul aplikasi

Konten Misi

Logo UIN

gambar

footer

42

8. Rancangan Menu Motto

Rancangan ini berisi motto Fakultas Sains dan Teknologi UIN Syarif



yaitu:






Gambar L.36. Rancangan Menu Motto


judul aplikasi

Konten Motto

Logo UIN

gambar

footer

43

9. Rancangan Menu Program Studi

Rancangan ini berisi Program Studi Fakultas Sains dan Teknologi UIN Syarif



yaitu:






Gambar L.37. Rancangan Menu Program Studi


judul aplikasi

Konten Program Studi

Logo UIN

gambar

footer

44

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:






Gambar L.38. Rancangan Menu Teknik Informatika


judul aplikasi

Konten Teknik Informatika

Logo UIN

gambar

footer

45

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:






Gambar L.39. Rancangan Menu Sistem Informasi


judul aplikasi

Konten Sistem Informasi

Logo UIN

gambar

footer

46

12. Rancangan Menu Agribisnis

Rancangan ini berisi Profil Program Studi Agribisnis Fakultas Sains dan

Teknologi UIN Syarif Hidayatullah Jakarta, dimana dalam tampilan menu ini








Gambar L.40. Rancangan Menu Agribisnis


judul aplikasi

Konten Agribisnis

Logo UIN

gambar

footer

47

13. Rancangan Menu Matematika

Rancangan ini berisi Profil Program Studi Matematika Fakultas Sains dan









Gambar L.41. Rancangan Menu Matematika


judul aplikasi

Konten Matematika

Logo UIN

gambar

footer

48

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:






Gambar L.42. Rancangan Menu Biologi


judul aplikasi

Konten Biologi

Logo UIN

gambar

footer

49

15. Rancangan Menu Kimia

Rancangan ini berisi Profil Program Studi Kimia Fakultas Sains dan









Gambar L.43. Rancangan Menu Kimia


judul aplikasi

Konten Kimia

Logo UIN

gambar

footer

50

16. Rancangan Menu Fisika

Rancangan ini berisi Profil Program Studi Fisika Fakultas Sains dan









Gambar L.44. Rancangan Menu Fisika


judul aplikasi

Konten Fisika

Logo UIN

gambar

footer

51

17. Rancangan Menu Internasional

Rancangan ini berisi Profil Program Studi Internasional Fakultas Sains dan









Gambar L.45. Rancangan Menu Internasional


judul aplikasi

Konten Internasional

Logo UIN

gambar

footer

52

18. Rancangan Menu Lantai 1

Rancangan ini berisi Aplikasi Proyeksi Lantai 1 Gedung Fakultas Sains dan









Gambar L.46. Rancangan Menu Lantai 1


judul aplikasi

Konten Animasi Proyeksi Lantai 1

Logo UIN

gambar

footer

53













judul aplikasi


Logo UIN

gambar

footer

54













judul aplikasi


Logo UIN

gambar

footer

55













judul aplikasi


Logo UIN

gambar

footer

56













judul aplikasi


Logo UIN

gambar

footer

57













judul aplikasi


Logo UIN

gambar

footer

58













judul aplikasi


Logo UIN

gambar

footer

59

Lampiran 6 : Tampilan Menu

1. index.html

Gambar L.53. tampilan index.hml

2. profil.html

Gambar L.54. tampilan profil.html

60

3. proyeksi.html

Gambar L.55. tampilan proyeksi.html

4. galeri.html

Gambar L.56. tampilan galeri.html

61

5. credit.html

Gambar L.57. tampilan credit.html

6. profil_visi.html

Gambar L.58. tampilan profil_visi.html

62

7. profil_misi.html

Gambar L.59. tampilan profil_misi.html

8. profil_motto.html

Gambar L.60. tampilan profil_motto.html

63

9. program_studi.html

Gambar L.61. tampilan program_studi.html

10. profil_reg_ti.html

Gambar L.62. tampilan profil_reg_ti.html

64

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

65

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

66

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

67

17. profil_inter.html

Gambar L.69. tampilan profil_inter.html

18. lantai1.html

Gambar L.70. tampilan lantai1.html

68

19. lantai2.html


20. lantai3.html


69

21. lantai4.html


22. lantai5.html


70

23. lantai6.html


24. lantai7.html


71

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:

…………………………………………………………………………………

…………………………………………………………………………………

72

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


1 Mudah 8 26,67%

2 Cukup mudah 21 70%

3 Sulit 1 3,33%

Jumlah 30 100%

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


1 Menarik 6 20%

2 Cukup menarik 22 73,33%

3 Kurang menarik 2 6,67%

Jumlah 30 100%

73

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



1 Jelas 6 20%

2 Cukup jelas 22 73,33%

3 Kurang jelas 2 6,67%

Jumlah 30 100%

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.



1 Mudah dimengerti 21 70%

2 Biasa saja 8 26,67%

3 Sulit dimengerti 1 3,33%

Jumlah 30 100%

74

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.



1 Bermanfaat 6 20%

2 Cukup bermanfaat 22 73,33%

3 Kurang bermanfaat 2 6,67%

Jumlah 30 100%

75

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); }

2. Flash Lantai 2

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:

76

on (release) { gotoAndStop(25); } Button 6: on (release) { gotoAndStop(30); } Button 7: on (release) { gotoAndStop(33); } Button 8: on (release) { gotoAndStop(35); } Button 9: on (release) { gotoAndStop(40); } Button 10: on (release) { gotoAndStop(45); } Button 11: on (release) { gotoAndStop(50); } Button 12: on (release) { gotoAndStop(55); } Button 13: on (release) { gotoAndStop(60); } Button 14: on (release) { gotoAndStop(65); } Button 15: on (release) { gotoAndStop(70); } Button 16: on (release) {

gotoAndStop(75); } Button 17: on (release) { gotoAndStop(80); } Button 18: on (release) { gotoAndStop(85); } Button 19: on (release) { gotoAndStop(90); } Button 20: on (release) { gotoAndStop(95); } Button Next: on (release) { gotoAndStop(100); } Button 21: on (release) { gotoAndStop(105); } Button 22: on (release) { gotoAndStop(110); } Button 23: on (release) { gotoAndStop(115); } Button 24: on (release) { gotoAndStop(120); } Button 25: on (release) { gotoAndStop(125); } Button 26: on (release) {

gotoAndStop(130); } Button 27: on (release) { gotoAndStop(133); } Button 28: on (release) { gotoAndStop(135); } Button 29: on (release) { gotoAndStop(140); } Button 30: on (release) { gotoAndStop(145); } Button 31: on (release) { gotoAndStop(150); } Button 32: on (release) { gotoAndStop(155); } Button 33: on (release) { gotoAndStop(160); } Button 34: on (release) { gotoAndStop(165); } Button 35: on (release) { gotoAndStop(170); } Button 36: on (release) { gotoAndStop(175); } Button 37: on (release) {

77

gotoAndStop(180); } Button 38: on (release) { gotoAndStop(185); }


gotoAndStop(195); } Button Back: on (release) { gotoAndStop(1); }

3. Flash Lantai 3

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 10: on (release) { gotoAndStop(55); } Button 12: on (release) { gotoAndStop(60); } Button 13: on (release) { gotoAndStop(65); } Button 14: on (release) { gotoAndStop(70); } Button 15: on (release) { gotoAndStop(75); } Button 16: on (release) { gotoAndStop(80); } Button 17: on (release) { gotoAndStop(85); }

Button 18: on (release) { gotoAndStop(90); } Button 19: on (release) { gotoAndStop(95); } Button Next: on (release) { gotoAndStop(100); } Button 20: on (release) { gotoAndStop(105); } Button 21: on (release) { gotoAndStop(110); } Button 22: on (release) { gotoAndStop(115); } Button 23: on (release) { gotoAndStop(120); } Button 24: on (release) { gotoAndStop(125); } Button 25: on (release) {

78

gotoAndStop(130); } Button 26: on (release) { gotoAndStop(135); } Button 27: on (release) { gotoAndStop(140); } Button 28: on (release) { gotoAndStop(145); } Button 29: on (release) { gotoAndStop(150); } Button 30: on (release) {

gotoAndStop(155); } Button 31: on (release) { gotoAndStop(160); } Button 32: on (release) { gotoAndStop(165); } Button 33: on (release) { gotoAndStop(170); } Button 34: on (release) { gotoAndStop(175); } Button 35: on (release) {

gotoAndStop(180); } Button 36: on (release) { gotoAndStop(185); } Button 37: on (release) { gotoAndStop(190); } Button 38: on (release) { gotoAndStop(195); } Button Back: on (release) { gotoAndStop(1); }

4. Flash Lantai 4

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); }



79

Button 16: on (release) { gotoAndStop(75); } Button 17: on (release) { gotoAndStop(80); } Button 18: on (release) { gotoAndStop(85); } Button 19: on (release) { gotoAndStop(90); } Button 20: on (release) { gotoAndStop(95); } Button Next: on (release) { gotoAndStop(100); } Button 21: on (release) { gotoAndStop(105); } Button 22: on (release) { gotoAndStop(110); } Button 23: on (release) { gotoAndStop(115); }

Button 24: on (release) { gotoAndStop(120); } Button 25: on (release) { gotoAndStop(125); } Button 26: on (release) { gotoAndStop(130); } Button 27: on (release) { gotoAndStop(133); } Button 28: on (release) { gotoAndStop(135); } Button 29: on (release) { gotoAndStop(140); } Button 30: on (release) { gotoAndStop(145); } Button 31: on (release) { gotoAndStop(150); } Button 32: on (release) { gotoAndStop(155); }

Button 33: on (release) { gotoAndStop(160); } Button 34: on (release) { gotoAndStop(165); } Button 35: on (release) { gotoAndStop(170); } Button 36: on (release) { gotoAndStop(175); } Button 37: on (release) { gotoAndStop(180); } Button 38: on (release) { gotoAndStop(185); } Button 39: on (release) { gotoAndStop(190); } Button 40: on (release) { gotoAndStop(195); } Button Back: on (release) { gotoAndStop(1);

}

5. Flash Lantai 5

Button 1: on (release) { gotoAndStop(5); }



80

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 10: on (release) { gotoAndStop(55); } Button 12: on (release) { gotoAndStop(60); } Button 13: on (release) { gotoAndStop(65); } Button 14: on (release) { gotoAndStop(70); }

Button 15: on (release) { gotoAndStop(75); } Button 16: on (release) { gotoAndStop(80); } Button 17: on (release) { gotoAndStop(85); } Button Next: on (release) { gotoAndStop(100); } Button 18: on (release) { gotoAndStop(105); } Button 19: on (release) { gotoAndStop(110); } Button 20: on (release) { gotoAndStop(115); } Button 21: on (release) { gotoAndStop(120); } Button 22: on (release) { gotoAndStop(125); } Button 23: on (release) { gotoAndStop(130); } Button 24: on (release) { gotoAndStop(135); }

Button 25: on (release) { gotoAndStop(140); } Button 26: on (release) { gotoAndStop(145); } Button 27: on (release) { gotoAndStop(150); } Button 28: on (release) { gotoAndStop(155); } Button 29: on (release) { gotoAndStop(160); } Button 30: on (release) { gotoAndStop(165); } Button 31: on (release) { gotoAndStop(170); } Button 32: on (release) { gotoAndStop(175); } Button 33: on (release) { gotoAndStop(180); } Button 34: on (release) { gotoAndStop(185); } Button Back: on (release) { gotoAndStop(1); }

81

6. Flash Lantai 6

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 10:

on (release) { gotoAndStop(55); } Button 12: on (release) { gotoAndStop(60); } Button 13: on (release) { gotoAndStop(65); } Button 14: on (release) { gotoAndStop(70); } Button 15: on (release) { gotoAndStop(75); } Button 16: on (release) { gotoAndStop(80); } Button 17: on (release) { gotoAndStop(85); } Button Next: on (release) { gotoAndStop(100); } Button 18: on (release) { gotoAndStop(105); } Button 19: on (release) { gotoAndStop(110); } Button 20: on (release) {

gotoAndStop(115); } Button 21: on (release) { gotoAndStop(120); } Button 22: on (release) { gotoAndStop(125); } Button 23: on (release) { gotoAndStop(130); } Button 24: on (release) { gotoAndStop(135); } Button 25: on (release) { gotoAndStop(140); } Button 26: on (release) { gotoAndStop(145); } Button 27: on (release) { gotoAndStop(150); } Button 28: on (release) { gotoAndStop(155); } Button 29: on (release) { gotoAndStop(160); } Button 30: on (release) {

82

gotoAndStop(165); } Button 31: on (release) { gotoAndStop(170); } Button 32: on (release) {

gotoAndStop(175); } Button 33: on (release) { gotoAndStop(180); } Button 34: on (release) {

gotoAndStop(185); } Button Back: on (release) { gotoAndStop(1); }

7. Flash Lantai 7


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); }


83


gotoAndStop(160); } Button 26: on (release) { gotoAndStop(165);

} Button Back: on (release) { gotoAndStop(1);

}

84

Lampiran 9 : Script Web

1. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li class="current"><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div>

85

</div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

2. profil.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li>

86

<li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Sekilas FST</H1> <p>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.</p> <ul> <li><a href="profil_visi.html">Visi</a></li> <li><a href="profil_misi.html">Misi</a></li> <li><a href="profil_motto.html">Motto</a></li> <li><a href="program_studi.html">Program Studi</a></li></ul> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

3. proyeksi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

87

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title> <link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <p>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.</p> <p>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.</p> <ul>

88

<li><a href="lantai1.html">Lantai 1</a></li> <li><a href="lantai2.html">Lantai 2</a></li> <li><a href="lantai3.html">Lantai 3</a></li> <li><a href="lantai4.html">Lantai 4</a></li> <li><a href="lantai5.html">Lantai 5</a></li> <li><a href="lantai6.html">Lantai 6</a></li> <li><a href="lantai7.html">Lantai 7</a></li> </ul> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

4. galeri.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script>

89

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> google.load("jquery", "1.3"); </script> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script src="Scripts/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> * { margin: 0; padding: 0; } h4 { margin: 15px 0 5px 0; } h4, p { font-size: 1.2em; } ul li { display: inline; } .wide { border-bottom: 1px #000 solid; width: 4000px; } </style> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li class="current"><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_gallery"> <div class="maincontent"> <ul class="gallery clearfix"> <li><a href="images/fst/CIMG4916.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4916.JPG" alt="1st Floor" width="100" height="75" /></a></li>

90

<li><a href="images/fst/CIMG4919.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4919.JPG" alt="2nd Floor" /></a></li> <li><a href="images/fst/CIMG4920.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4920.JPG" alt="3rd Floor" /></a></li> <li><a href="images/fst/CIMG4923.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4923.JPG" alt="4th Floor" /></a></li> <li><a href="images/fst/CIMG4926.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4926.JPG" alt="5th Floor" width="100" height="75" /></a></li> <li><a href="images/fst/CIMG4927.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4927.JPG" alt="6th Floor" /></a></li> <li><a href="images/fst/CIMG4929.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4929.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG4964.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4964.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG4965.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4965.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG4966.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4966.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG4971.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG4971.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG5837.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5837.JPG" alt="7th Floor" /></a></li>

91

<li><a href="images/fst/CIMG5873.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5873.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG5861.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5861.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG5864.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5864.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG5870.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5870.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG5864.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5864.JPG" alt="7th Floor" /></a></li> <li><a href="images/fst/CIMG5864.JPG?width=792&height=294" rel="prettyPhoto[flash]" title=""><img src="images/thumbnails/CIMG5864.JPG" alt="7th Floor" /></a></li> </ul> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'}); }); </script> </div> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else {

92

document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

5. credit.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li class="current"><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <table width="100%" border="0" cellpadding="5px">

93

<tr> <td width="15%" rowspan="5"><img src="images/Picture 129.jpg" width="102" height="150" /></td> <td width="85%">Nurlaila Maulina</td> </tr> <tr> <td>103091029613</td> </tr> <tr> <td>Program Studi Teknik Informatika</td> </tr> <tr> <td>Fakultas Sains Dan Teknologi</td> </tr> <tr> <td>UIN Syarif Hidayatullah Jakarta</td> </tr> </table> <p> </p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

6. profil_visi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

94

<title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title> <link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>VISI</H1> <p>Menjadi lembaga pendidikan tinggi terkemuka secara nasional dan internasional dalam pengembangan sains dan teknologi yang terintegrasi pada nilai ke-Islaman dan ke-Indonesiaan.</p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">');

95

} else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

7. profil_misi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div>

96

<div id="content"> <H1>MISI</H1> <ol> <li>Menghasilkan sarjana di bidang sains dan teknologi yang memiliki keunggulan kompetitif dalam persaingan global.</li> <li>Memberikan landasan moral dan etika serta memberikan pencerahan keimanan dan ketaqwaan.</li> <li>Menyelenggarakan penelitian dan pengembangan di bidan sains dan teknologi.</li> <li>Memberikan kontribusi dalam meningkatkan kualitas hidup masyarakat melalui penerapan sains dan teknologi.</li> </ol> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

8. profil_motto.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script>

97

<script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>MOTTO/VALUES</H1> <ol> <li>Knowledge <br />Pusat keilmuan dan pengembangan di bidang sains dan teknologi melalui pendidikan, penelitian, pengembangan dan publikasi secara nasional dan global.</li> <li>Piety <br />Memperkokoh landasan moral dan etika seperti kejujuran, amanah, sikap positif.</li> <li>Integrity <br />Memiliki potensi dan kekuatan serta keyakinan untuk membangun kualitas hidup masyarakat yang lebih baik.</li> <li>Innovation <br />Selalu melakukan inovasi untuk peningkatan kualitas yang berkesinambungan </li> </ol> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">');

98

} else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

9. program_studi.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content">

99

<H1>Program Studi</H1> <h2>Reguler</h2> <ul> <li><a href="profil_reg_ti.html">Teknik Informatika</a></li> <li><a href="profil_reg_si.html">Sistem Informasi</a></li> <li><a href="profil_reg_agri.html">Agribisnis</a></li> <li><a href="profil_reg_mtk.html">Matematika</a></li> <li><a href="profil_reg_bio.html">Biologi</a></li> <li><a href="profil_reg_kim.html">Kimia</a></li> <li><a href="profil_reg_fis.html">Fisika</a></li></ul> <h2>Non Reguler</h2> <ul><li><a href="profil_inter.html">Internasional</a></li></ul> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

10. profil_reg_ti.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title> <link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" />

100

<script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Teknik Informatika</H1> <p>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. </p> <p>Konsentrasi Bidang: <br /> Software Engineer, Multimedia dan Networking.</p> <p>Prospek Profesi diantaranya:<br /> Analis Programmer, Database Administrator, Programmer, Administrator Multimedia, Programmer Multimedia (Game, Animasi dan Simulasi), Analis Jaringan, Konsultan Jaringan, Konsultan Jaringan, Administrator Jaringan, Teknisi Jaringan, Manajer Software, dsb. </p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div>

101

<div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

11. profil_reg_si.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li>

102

<li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Sistem Informasi</H1> <p>Program Studi ini bertujuan menghasilkan lulusan Sistem Informasi dengan penguasaan konsep pengembangan perangkat lunak dan aplikasi teknologi informasi.</p> <p>Lulusan juga diharapkan untuk memiliki keahlian dalam merancang, mengelola dan mengembangkan sistem informasi. </p> <p>Konsentrasi Bidang: <br /> Sistem Informasi Akuntansi, Sistem Informasi Bisnis Syariah, Sistem Informasi Geografis, dsb.</p> <p>Prospek Profesi diantaranya:<br /> Sistem Analis, IT Consultant, GIS Specialist, IT Project Manajer, Dosen, Peneliti Bidang Sistem Informasi, dll.</p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

12. profil_reg_agri.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

103

<title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Agribisnis</H1> <p>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. </p> <p>Konsentrasi Bidang Sosial Ekonomi Pertanian/Agribisnis yaitu: <br /> Manajemen Agribisnis, Ekonomi Pertanian dan Sumberdaya, Komunikasi Pembangunan Pertanian.</p> <p>Prospek Profesi diantaranya:<br /> Agripreneur, Akademisi, Peneliti, Analis, Perencana, PNS, dsb.</p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p>

104

<div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

13. profil_reg_mtk.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/>

105

</a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Matematika</H1> <p>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.</p> <p>Konsentrasi Peminatan: <br /> Statistika, Riset Operasi, dan Matematika Informatika.</p> <p>Prospek Profesi diantaranya:<br /> Perusahaan Jasa: Perbankan, Asuransi, Penelitian dan Pengembangan.<br /> Perusahaan Industri: Teknik, Elektronika, Telekomunikasi, Transportasi, Komputer.<br /> Lembaga Pendidikan: Universitas, Sekolah Tinggi, Akademi. Lembaga-lembaga pemerintah dan BUMN.</p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body>

106

</html>

14. profil_reg_bio.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Biologi</H1> <p>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.</p> <p>Konsentrasi Bidang: Biologi Pangan, Biologi Lingkungan dan Biologi Murni.</p>

107

<p>Prospek Profesi: Peneliti, Tenaga Pengajar, Konsultan, Peneliti di perusahaan kosmetik, obat-obatan, pemerintahan, kewirausahaan, dll.</p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

15. profil_reg_kim.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show">

108

<img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Kimia</H1> <p>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.</p> <p>Konsentrasi Bidang:<br /> Kimia Murni dan Kimia Terapan, Kimia Pangan, Lingkungan, Polimer, Industri</p> <p>Prospek Profesi:<br /> Peneliti, Tenaga Pengajar, Konsultan, Peneliti di perusahaan kosmetik, obat-obatan, pemerintah, kewirausahaan, dll. </p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div>

109

</div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

16. profil_reg_fis.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li>

110

<li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Studi Fisika</H1> <p>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. </p> <p>Penekanan bidang: <br /> Fisika Bumi (Geofisika), Fisika Instrumentasi, dan Fisika Material.</p> <p>Prospek Profesi diantaranya:<br /> Engineer, Data Analyst, Network Engineer, Quality Control, Access Engineer, Radiotherapist, Geophysics Peneliti, Data Interpreter, Scientific, Data Acquisition, Dosen. </p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

17. profil_inter.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah

111

Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150" title="" alt="" rel="Better Crop Production For A Growing Population..."/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li class="current"><a href="profil.html">Profil</a></li> <li><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content"> <H1>Program Internasional</H1> <H2>Teknik Informatika dan Sistem Informasi</H2> <p>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. </p> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div>

112

<div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

18. lantai_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li>

113

<li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="550" id="FlashID" title="Lantai 1"> <param name="movie" value="flash/1st floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/1st floor.swf" width="630" height="550">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object>  </object> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div>

114

<script type="text/javascript">  </script> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

19. lantai_2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title> <link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/> </a> </div>

115

<div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="550" id="FlashID" title="Lantai 2"> <param name="movie" value="flash/2nd floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/2nd floor.swf" width="630" height="550">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object>  </object> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div>

116

<div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script type="text/javascript">  </script> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

20. lantai_3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/>

117

</a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="550" id="FlashID" title="Lantai 3"> <param name="movie" value="flash/3rd floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/3rd floor.swf" width="630" height="550">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object>  </object> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a

118

href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script type="text/javascript">  </script> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

21. lantai_4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/> </a> <a href="#">

119

<img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="550" id="FlashID" title="Lantai 4"> <param name="movie" value="flash/4th floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/4th floor.swf" width="630" height="550">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object>  </object> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p>

120

<div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script type="text/javascript">  </script> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

22. lantai5.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/>

121

</a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="550" id="FlashID" title="Lantai 5"> <param name="movie" value="flash/5th floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/5th floor.swf" width="630" height="550">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object>  </object> </div>

122

<div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script type="text/javascript">  </script> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

23. lantai6.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery">

123

<a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/> </a> </div> <div id="navigation"> <ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="550" id="FlashID" title="Lantai 6"> <param name="movie" value="flash/6th floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/6th floor.swf" width="630" height="550">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object> 

124

</object> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div> <div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script type="text/javascript">  </script> </body> </html>

24. lantai7.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</title><link href="Scripts/style.css" rel="stylesheet" type="text/css" /> <link href="Scripts/image_rotate.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="Scripts/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="Scripts/image_rotate.js"></script> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_title"></div> <div id="gallery"> <a href="#" class="show"> <img src="images/001.jpg" alt="Flowing Rock" width="800" height="150"/> </a> <a href="#"> <img src="images/002.jpg" alt="Grass Blades" width="800" height="150"/> </a> </div> <div id="navigation">

125

<ul id="nav"> <li><a href="index.html">Utama</a></li> <li><a href="profil.html">Profil</a></li> <li class="current"><a href="proyeksi.html">Proyeksi</a></li> <li><a href="galeri.html">Galeri</a></li> <li><a href="credit.html">Credit</a></li> </ul> </div> <div id="content_flash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="500" id="FlashID" title="Lantai 7"> <param name="movie" value="flash/7th floor.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="flash/7th floor.swf" width="780" height="500">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div>  </object>  </object> </div> <div id="footer"><p align="center">Proyeksi Tata Ruang Berbasis Web Multimedia Pada Gedung Fakultas Sains dan Teknologi UIN Syarif Hidayatullah Jakarta</p> <div class="link"><a href="index.html">UTAMA</a> | <a href="profil.html">PROFIL</a> | <a href="proyeksi.html">PROYEKSI</a> | <a href="galeri.html">GALERI</a> | <a href="credit.html">CREDIT</a></div>

126

<div class="copyright">Copyright © 2010 Nurlaila Maulina</div> </div> <script type="text/javascript">  </script> <script language="JavaScript" type="text/javascript"> if (navigator.appName == "Microsoft Internet Explorer") { document.write('<bgsound src="audio/24.mp3" loop="false">'); } else { document.write('<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="audio/24.mp3" autostart="true" showstatusbar="0" showcontrols="0" showdisplay="0" volume="1" height="1" width="1" loop="false"><br>'); } // End --> </script> </body> </html>

25. style.css

@charset "utf-8"; body { font-family: verdana; font-size: 12px; color: #333; } img { border: 0; } #header_title { width: 800px; margin-right: auto; margin-left: auto; padding-top: 5px; padding-bottom: 5px; background-image: url(../images/title2.png); background-repeat: no-repeat; background-position: center center; height: 150px; } #header { background-color: #090; height: 200px; width: 800px; margin-right: auto; margin-left: auto;

} #navigation { line-height: 100%; width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } #nav { margin: auto; line-height: 100%; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); padding-top: 7px; padding-right: 6px; padding-bottom: 0; padding-left: 6px; z-index:700; background-color: #039; background-image: url(../images/gradients.png); background-repeat: repeat-x; background-position: 0 -110px; }

127

#nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } /* main level link */ #nav a { font-weight: bold; color: #f8bd0b; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #fff; } /* main level link hover */ #nav .current a, #nav li:hover > a { color: #FFF; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 1px rgba(0,0,0, .3); background-color: #f8bd0b; background-image: url(../images/gradient.png); background-repeat: repeat-x; background-position: 0 -100px; } /* sub levels link hover */ #nav ul li:hover a, #nav li:hover li a { background: none;

border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover { color: #000000 !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1); background-color: #f8bd0b; background-image: url(../images/gradient.png); background-repeat: repeat-x; background-position: 0 -100px; } /* dropdown */ #nav li:hover > ul { display: block; } /* level 2 list */ #nav ul { display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0px; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); background-color: #f8bd0b;

128

background-image: url(../images/gradient.png); background-repeat: repeat-x; background-position: 0 0; } #nav ul li { float: none; margin: 0; padding: 0; } #nav ul a { font-weight: normal; text-shadow: 0 1px 0 #fff; } /* level 3+ list */ #nav ul ul { left: 181px; top: -3px; } /* rounded corners of first and last link */ #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } /* clearfix */ #nav:after { content: "."; display: block;

clear: both; visibility: hidden; line-height: 0; height: 0; } #nav { display: inline-block; } html[xmlns] #nav { display: block; } * html #nav { height: 1%; } #content { width: 790px; margin-right: auto; margin-left: auto; text-align: justify; background-color: #ffffcc; padding-right: 5px; padding-left: 5px; background-image: url(../images/backgrounds/bg_content.jpg); background-repeat: repeat-x; margin-top: 10px; padding-bottom: 20px; padding-top: 10px; } #content a{ font-weight: bold; color: #060; text-decoration: none; } #content a:hover{ font-weight: bold; color: #F60; text-decoration: none; } #content_flash { width: 790px; margin-right: auto; margin-left: auto; text-align: center; background-color: #ffffcc; padding-right: 5px; padding-left: 5px; background-image: url(../images/backgrounds/bg_content.jpg);

129

background-repeat: repeat-x; margin-top: 10px; padding-bottom: 20px; padding-top: 10px; } #content_gallery { width: 790px; margin-right: auto; margin-left: auto; text-align: left; background-color: #ffffcc; padding-right: 5px; padding-left: 5px; background-image: url(../images/backgrounds/bg_content.jpg); background-repeat: repeat-x; margin-top: 10px; padding-bottom: 20px; padding-top: 10px; } #footer { width: 800px; margin: auto; padding: 0px; color: #30709e; border-bottom-width: 1px; border-bottom-style: solid;

border-bottom-color: #30709e; } #footer .link { padding: 5px; float: left; color: #30709e; } #footer .copyright { padding: 5px; float: right; color: #30709e; font-family: arial; font-size: 12px; } #footer a{ font-family: arial; font-size: 12px; color: #30709e; text-decoration: none; } #footer a:hover{ width: 900px; color: #000; text-decoration: none; } #footer a:visited{ } a:link { text-decoration: none; }

26. image_rotate.css

.clear {clear:both} #gallery { height:300px; width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF;} #gallery a { position:absolute;} #gallery a img { border:none;} #gallery a.show { z-index:500 } #gallery .caption { z-index:600; background-color:#000; color:#ffffff;

height:100px; width:800px; position:absolute; margin:0;} #gallery .caption .content {margin:5px; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px;} #gallery .caption .content h3 {margin:0; padding:0; color:#1DCCEF;}

130

27. jquery-1.3.1.min.js

/* * jQuery JavaScript Library v1.3.1 * http://jquery.com/ * * Copyright (c) 2009 John Resig * Dual licensed under the MIT and GPL licenses. * http://docs.jquery.com/License * * Date: 2009-01-21 20:42:16 -0500 (Wed, 21 Jan 2009) * Revision: 6158 */ (function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype={init:function(E,H){E=E||document;if(E.nodeType){this[0]=E;this.length=1;this.context=E;return this}if(typeof E==="string"){var G=D.exec(E);if(G&&(G[1]||!H)){if(G[1]){E=o.clean([G[1]],H)}else{var I=document.getElementById(G[3]);if(I&&I.id!=G[3]){return o().find(E)}var F=o(I||[]);F.context=document;F.selector=E;return F}}else{return o(H).find(E)}}else{if(o.isFunction(E)){return o(document).ready(E)}}if(E.selector&&E.context){this.selector=E.selector;this.context=E.context}return this.setArray(o.makeArray(E))},selector:"",jquery:"1.3.1",size:function(){return this.length},get:function(E){return E===g?o.makeArray(this):this[E]},pushStack:function(F,H,E){var G=o(F);G.prevObject=this;G.context=this.context;if(H==="find"){G.selector=this.selector+(this.selector?" ":"")+E}else{if(H){G.selector=this.selector+"."+H+"("+E+")"}}return G},setArray:function(E){this.length=0;Array.prototype.push.apply(this,E);return this},each:function(F,E){return o.each(this,F,E)},index:function(E){return o.inArray(E&&E.jquery?E[0]:E,this)},attr:function(F,H,G){var E=F;if(typeof F==="string"){if(H===g){return this[0]&&o[G||"attr"](this[0],F)}else{E={};E[F]=H}}return this.each(function(I){for(F in E){o.attr(G?this.style:this,F,o.prop(this,E[F],G,I,F))}})},css:function(E,F){if((E=="width"||E=="height")&&parseFloat(F)<0){F=g}return this.attr(E,F,"curCSS")},text:function(F){if(typeof F!=="object"&&F!=null){return this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(F))}var E="";o.each(F||this,function(){o.each(this.childNodes,function(){if(this.nodeType!=8){E+=this.nodeType!=1?this.nodeValue:o.fn.text([this])}})});return E},wrapAll:function(E){if(this[0]){var F=o(E,this[0].ownerDocument).clone();if(this[0].parentNode){F.insertBefore(this[0])}F.map(function(){var G=this;while(G.firstChild){G=G.firstChild}return G}).append(this)}return this},wrapInner:function(E){return

131

this.each(function(){o(this).contents().wrapAll(E)})},wrap:function(E){return this.each(function(){o(this).wrapAll(E)})},append:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.appendChild(E)}})},prepend:function(){return this.domManip(arguments,true,function(E){if(this.nodeType==1){this.insertBefore(E,this.firstChild)}})},before:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this)})},after:function(){return this.domManip(arguments,false,function(E){this.parentNode.insertBefore(E,this.nextSibling)})},end:function(){return this.prevObject||o([])},push:[].push,find:function(E){if(this.length===1&&!/,/.test(E)){var G=this.pushStack([],"find",E);G.length=0;o.find(E,this[0],G);return G}else{var F=o.map(this,function(H){return o.find(E,H)});return this.pushStack(/[^+>] [^+>]/.test(E)?o.unique(F):F,"find",E)}},clone:function(F){var E=this.map(function(){if(!o.support.noCloneEvent&&!o.isXMLDoc(this)){var I=this.cloneNode(true),H=document.createElement("div");H.appendChild(I);return o.clean([H.innerHTML])[0]}else{return this.cloneNode(true)}});var G=E.find("*").andSelf().each(function(){if(this[h]!==g){this[h]=null}});if(F===true){this.find("*").andSelf().each(function(I){if(this.nodeType==3){return}var H=o.data(this,"events");for(var K in H){for(var J in H[K]){o.event.add(G[I],K,H[K][J],H[K][J].data)}}})}return E},filter:function(E){return this.pushStack(o.isFunction(E)&&o.grep(this,function(G,F){return E.call(G,F)})||o.multiFilter(E,o.grep(this,function(F){return F.nodeType===1})),"filter",E)},closest:function(E){var F=o.expr.match.POS.test(E)?o(E):null;return this.map(function(){var G=this;while(G&&G.ownerDocument){if(F?F.index(G)>-1:o(G).is(E)){return G}G=G.parentNode}})},not:function(E){if(typeof E==="string"){if(f.test(E)){return this.pushStack(o.multiFilter(E,this,true),"not",E)}else{E=o.multiFilter(E,this)}}var F=E.length&&E[E.length-1]!==g&&!E.nodeType;return this.filter(function(){return F?o.inArray(this,E)<0:this!=E})},add:function(E){return this.pushStack(o.unique(o.merge(this.get(),typeof E==="string"?o(E):o.makeArray(E))))},is:function(E){return !!E&&o.multiFilter(E,this).length>0},hasClass:function(E){return !!E&&this.is("."+E)},val:function(K){if(K===g){var E=this[0];if(E){if(o.nodeName(E,"option")){return(E.attributes.value||{}).specified?E.value:E.text}if(o.nodeName(E,"select")){var I=E.selectedIndex,L=[],M=E.options,H=E.type=="select-one";if(I<0){return null}for(var F=H?I:0,J=H?I+1:M.length;F<J;F++){var G=M[F];if(G.selected){K=o(G).val();if(H){return K}L.push(K)}}return L}return(E.value||"").replace(/\r/g,"")}return g}if(typeof K==="number"){K+=""}return

132

this.each(function(){if(this.nodeType!=1){return}if(o.isArray(K)&&/radio|checkbox/.test(this.type)){this.checked=(o.inArray(this.value,K)>=0||o.inArray(this.name,K)>=0)}else{if(o.nodeName(this,"select")){var N=o.makeArray(K);o("option",this).each(function(){this.selected=(o.inArray(this.value,N)>=0||o.inArray(this.text,N)>=0)});if(!N.length){this.selectedIndex=-1}}else{this.value=K}}})},html:function(E){return E===g?(this[0]?this[0].innerHTML:null):this.empty().append(E)},replaceWith:function(E){return this.after(E).remove()},eq:function(E){return this.slice(E,+E+1)},slice:function(){return this.pushStack(Array.prototype.slice.apply(this,arguments),"slice",Array.prototype.slice.call(arguments).join(","))},map:function(E){return this.pushStack(o.map(this,function(G,F){return E.call(G,F,G)}))},andSelf:function(){return this.add(this.prevObject)},domManip:function(K,N,M){if(this[0]){var J=(this[0].ownerDocument||this[0]).createDocumentFragment(),G=o.clean(K,(this[0].ownerDocument||this[0]),J),I=J.firstChild,E=this.length>1?J.cloneNode(true):J;if(I){for(var H=0,F=this.length;H<F;H++){M.call(L(this[H],I),H>0?E.cloneNode(true):J)}}if(G){o.each(G,z)}}return this;function L(O,P){return N&&o.nodeName(O,"table")&&o.nodeName(P,"tr")?(O.getElementsByTagName("tbody")[0]||O.appendChild(O.ownerDocument.createElement("tbody"))):O}}};o.fn.init.prototype=o.fn;function z(E,F){if(F.src){o.ajax({url:F.src,async:false,dataType:"script"})}else{o.globalEval(F.text||F.textContent||F.innerHTML||"")}if(F.parentNode){F.parentNode.removeChild(F)}}function e(){return +new Date}o.extend=o.fn.extend=function(){var J=arguments[0]||{},H=1,I=arguments.length,E=false,G;if(typeof J==="boolean"){E=J;J=arguments[1]||{};H=2}if(typeof J!=="object"&&!o.isFunction(J)){J={}}if(I==H){J=this;--H}for(;H<I;H++){if((G=arguments[H])!=null){for(var F in G){var K=J[F],L=G[F];if(J===L){continue}if(E&&L&&typeof L==="object"&&!L.nodeType){J[F]=o.extend(E,K||(L.length!=null?[]:{}),L)}else{if(L!==g){J[F]=L}}}}}return J};var b=/z-?index|font-?weight|opacity|zoom|line-?height/i,q=document.defaultView||{},s=Object.prototype.toString;o.extend({noConflict:function(E){l.$=p;if(E){l.jQuery=y}return o},isFunction:function(E){return s.call(E)==="[object Function]"},isArray:function(E){return s.call(E)==="[object Array]"},isXMLDoc:function(E){return E.nodeType===9&&E.documentElement.nodeName!=="HTML"||!!E.ownerDocument&&o.isXMLDoc(E.ownerDocument)},globalEval:function(G){G=o.trim(G);if(G){var F=document.getElementsByTagName("head")[0]||document.documentElement,E=document.createElement("script");E.type="text/javascript";if(o.support.scriptEval){E.appendChild(document.createTextNode(G))}else{E.text=G}F.insertBefore(E,F.firstChild);F.removeChild(E)}},nodeName:function(F,E){return F.nodeName&&F.nodeName.toUpperCase()==E.toUpperCase()},each:function(G,K,F){var E,H=0,I=G.length;if(F){if(I===g){for(E in G){if(K.apply(G[E],F)===false){break}}}else{for(;H<I;){if(K.apply(G[H++],F)===false){break}}}}else{if(I===g){for(E in G){if(K.call(G[E],E,G[E])===false){break}}}else{for(var

133

J=G[0];H<I&&K.call(J,H,J)!==false;J=G[++H]){}}}return G},prop:function(H,I,G,F,E){if(o.isFunction(I)){I=I.call(H,F)}return typeof I==="number"&&G=="curCSS"&&!b.test(E)?I+"px":I},className:{add:function(E,F){o.each((F||"").split(/\s+/),function(G,H){if(E.nodeType==1&&!o.className.has(E.className,H)){E.className+=(E.className?" ":"")+H}})},remove:function(E,F){if(E.nodeType==1){E.className=F!==g?o.grep(E.className.split(/\s+/),function(G){return !o.className.has(F,G)}).join(" "):""}},has:function(F,E){return F&&o.inArray(E,(F.className||F).toString().split(/\s+/))>-1}},swap:function(H,G,I){var E={};for(var F in G){E[F]=H.style[F];H.style[F]=G[F]}I.call(H);for(var F in G){H.style[F]=E[F]}},css:function(G,E,I){if(E=="width"||E=="height"){var K,F={position:"absolute",visibility:"hidden",display:"block"},J=E=="width"?["Left","Right"]:["Top","Bottom"];function H(){K=E=="width"?G.offsetWidth:G.offsetHeight;var M=0,L=0;o.each(J,function(){M+=parseFloat(o.curCSS(G,"padding"+this,true))||0;L+=parseFloat(o.curCSS(G,"border"+this+"Width",true))||0});K-=Math.round(M+L)}if(o(G).is(":visible")){H()}else{o.swap(G,F,H)}return Math.max(0,K)}return o.curCSS(G,E,I)},curCSS:function(I,F,G){var L,E=I.style;if(F=="opacity"&&!o.support.opacity){L=o.attr(E,"opacity");return L==""?"1":L}if(F.match(/float/i)){F=w}if(!G&&E&&E[F]){L=E[F]}else{if(q.getComputedStyle){if(F.match(/float/i)){F="float"}F=F.replace(/([A-Z])/g,"-$1").toLowerCase();var M=q.getComputedStyle(I,null);if(M){L=M.getPropertyValue(F)}if(F=="opacity"&&L==""){L="1"}}else{if(I.currentStyle){var J=F.replace(/\-(\w)/g,function(N,O){return O.toUpperCase()});L=I.currentStyle[F]||I.currentStyle[J];if(!/^\d+(px)?$/i.test(L)&&/^\d/.test(L)){var H=E.left,K=I.runtimeStyle.left;I.runtimeStyle.left=I.currentStyle.left;E.left=L||0;L=E.pixelLeft+"px";E.left=H;I.runtimeStyle.left=K}}}}return L},clean:function(F,K,I){K=K||document;if(typeof K.createElement==="undefined"){K=K.ownerDocument||K[0]&&K[0].ownerDocument||document}if(!I&&F.length===1&&typeof F[0]==="string"){var H=/^<(\w+)\s*\/?>$/.exec(F[0]);if(H){return[K.createElement(H[1])]}}var G=[],E=[],L=K.createElement("div");o.each(F,function(P,R){if(typeof R==="number"){R+=""}if(!R){return}if(typeof R==="string"){R=R.replace(/(<(\w+)[^>]*?)\/>/g,function(T,U,S){return S.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?T:U+"></"+S+">"});var O=o.trim(R).toLowerCase();var Q=!O.indexOf("<opt")&&[1,"<select multiple='multiple'>","</select>"]||!O.indexOf("<leg")&&[1,"<fieldset>","</fieldset>"]||O.match(/^<(thead|tbody|tfoot|colg|cap)/)&&[1,"<table>","</table>"]||!O.indexOf("<tr")&&[2,"<table><tbody>","</tbody></table>"]||(!O.indexOf("<td")||!O.indexOf("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||!O.indexOf("<col")&&[2,"<table><tbody></tbody><colgroup>","</colgroup><

134

/table>"]||!o.support.htmlSerialize&&[1,"div<div>","</div>"]||[0,"",""];L.innerHTML=Q[1]+R+Q[2];while(Q[0]--){L=L.lastChild}if(!o.support.tbody){var N=!O.indexOf("<table")&&O.indexOf("<tbody")<0?L.firstChild&&L.firstChild.childNodes:Q[1]=="<table>"&&O.indexOf("<tbody")<0?L.childNodes:[];for(var M=N.length-1;M>=0;--M){if(o.nodeName(N[M],"tbody")&&!N[M].childNodes.length){N[M].parentNode.removeChild(N[M])}}}if(!o.support.leadingWhitespace&&/^\s/.test(R)){L.insertBefore(K.createTextNode(R.match(/^\s*/)[0]),L.firstChild)}R=o.makeArray(L.childNodes)}if(R.nodeType){G.push(R)}else{G=o.merge(G,R)}});if(I){for(var J=0;G[J];J++){if(o.nodeName(G[J],"script")&&(!G[J].type||G[J].type.toLowerCase()==="text/javascript")){E.push(G[J].parentNode?G[J].parentNode.removeChild(G[J]):G[J])}else{if(G[J].nodeType===1){G.splice.apply(G,[J+1,0].concat(o.makeArray(G[J].getElementsByTagName("script"))))}I.appendChild(G[J])}}return E}return G},attr:function(J,G,K){if(!J||J.nodeType==3||J.nodeType==8){return g}var H=!o.isXMLDoc(J),L=K!==g;G=H&&o.props[G]||G;if(J.tagName){var F=/href|src|style/.test(G);if(G=="selected"&&J.parentNode){J.parentNode.selectedIndex}if(G in J&&H&&!F){if(L){if(G=="type"&&o.nodeName(J,"input")&&J.parentNode){throw"type property can't be changed"}J[G]=K}if(o.nodeName(J,"form")&&J.getAttributeNode(G)){return J.getAttributeNode(G).nodeValue}if(G=="tabIndex"){var I=J.getAttributeNode("tabIndex");return I&&I.specified?I.value:J.nodeName.match(/(button|input|object|select|textarea)/i)?0:J.nodeName.match(/^(a|area)$/i)&&J.href?0:g}return J[G]}if(!o.support.style&&H&&G=="style"){return o.attr(J.style,"cssText",K)}if(L){J.setAttribute(G,""+K)}var E=!o.support.hrefNormalized&&H&&F?J.getAttribute(G,2):J.getAttribute(G);return E===null?g:E}if(!o.support.opacity&&G=="opacity"){if(L){J.zoom=1;J.filter=(J.filter||"").replace(/alpha$[^)]*$/,"")+(parseInt(K)+""=="NaN"?"":"alpha(opacity="+K*100+")")}return J.filter&&J.filter.indexOf("opacity=")>=0?(parseFloat(J.filter.match(/opacity=([^)]*)/)[1])/100)+"":""}G=G.replace(/-([a-z])/ig,function(M,N){return N.toUpperCase()});if(L){J[G]=K}return J[G]},trim:function(E){return(E||"").replace(/^\s+|\s+$/g,"")},makeArray:function(G){var E=[];if(G!=null){var F=G.length;if(F==null||typeof G==="string"||o.isFunction(G)||G.setInterval){E[0]=G}else{while(F){E[--F]=G[F]}}}return E},inArray:function(G,H){for(var E=0,F=H.length;E<F;E++){if(H[E]===G){return E}}return -1},merge:function(H,E){var F=0,G,I=H.length;if(!o.support.getAll){while((G=E[F++])!=null){if(G.nodeType!=8){H[I++]=G}}}else{while((G=E[F++])!=null){H[I++]=G}}return H},unique:function(K){var F=[],E={};try{for(var G=0,H=K.length;G<H;G++){var J=o.data(K[G]);if(!E[J]){E[J]=true;F.push(K[G])}}}catch(I){F=K}return F},grep:function(F,J,E){var G=[];for(var H=0,I=F.length;H<I;H++){if(!E!=!J(F[H],H)){G.push(F[H])}}return G},map:function(E,J){var F=[];for(var G=0,H=E.length;G<H;G++){var I=J(E[G],G);if(I!=null){F[F.length]=I}}return

135

F.concat.apply([],F)}});var C=navigator.userAgent.toLowerCase();o.browser={version:(C.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[0,"0"])[1],safari:/webkit/.test(C),opera:/opera/.test(C),msie:/msie/.test(C)&&!/opera/.test(C),mozilla:/mozilla/.test(C)&&!/(compatible|webkit)/.test(C)};o.each({parent:function(E){return E.parentNode},parents:function(E){return o.dir(E,"parentNode")},next:function(E){return o.nth(E,2,"nextSibling")},prev:function(E){return o.nth(E,2,"previousSibling")},nextAll:function(E){return o.dir(E,"nextSibling")},prevAll:function(E){return o.dir(E,"previousSibling")},siblings:function(E){return o.sibling(E.parentNode.firstChild,E)},children:function(E){return o.sibling(E.firstChild)},contents:function(E){return o.nodeName(E,"iframe")?E.contentDocument||E.contentWindow.document:o.makeArray(E.childNodes)}},function(E,F){o.fn[E]=function(G){var H=o.map(this,F);if(G&&typeof G=="string"){H=o.multiFilter(G,H)}return this.pushStack(o.unique(H),E,G)}});o.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(E,F){o.fn[E]=function(){var G=arguments;return this.each(function(){for(var H=0,I=G.length;H<I;H++){o(G[H])[F](this)}})}});o.each({removeAttr:function(E){o.attr(this,E,"");if(this.nodeType==1){this.removeAttribute(E)}},addClass:function(E){o.className.add(this,E)},removeClass:function(E){o.className.remove(this,E)},toggleClass:function(F,E){if(typeof E!=="boolean"){E=!o.className.has(this,F)}o.className[E?"add":"remove"](this,F)},remove:function(E){if(!E||o.filter(E,[this]).length){o("*",this).add([this]).each(function(){o.event.remove(this);o.removeData(this)});if(this.parentNode){this.parentNode.removeChild(this)}}},empty:function(){o(">*",this).remove();while(this.firstChild){this.removeChild(this.firstChild)}}},function(E,F){o.fn[E]=function(){return this.each(F,arguments)}});function j(E,F){return E[0]&&parseInt(o.curCSS(E[0],F,true),10)||0}var h="jQuery"+e(),v=0,A={};o.extend({cache:{},data:function(F,E,G){F=F==l?A:F;var H=F[h];if(!H){H=F[h]=++v}if(E&&!o.cache[H]){o.cache[H]={}}if(G!==g){o.cache[H][E]=G}return E?o.cache[H][E]:H},removeData:function(F,E){F=F==l?A:F;var H=F[h];if(E){if(o.cache[H]){delete o.cache[H][E];E="";for(E in o.cache[H]){break}if(!E){o.removeData(F)}}}else{try{delete F[h]}catch(G){if(F.removeAttribute){F.removeAttribute(h)}}delete o.cache[H]}},queue:function(F,E,H){if(F){E=(E||"fx")+"queue";var G=o.data(F,E);if(!G||o.isArray(H)){G=o.data(F,E,o.makeArray(H))}else{if(H){G.push(H)}}}return G},dequeue:function(H,G){var E=o.queue(H,G),F=E.shift();if(!G||G==="fx"){F=E[0]}if(F!==g){F.call(H)}}});o.fn.extend({data:function(E,G){var H=E.split(".");H[1]=H[1]?"."+H[1]:"";if(G===g){var F=this.triggerHandler("getData"+H[1]+"!",[H[0]]);if(F===g&&this.length){F=o.data(this[0],E)}return F===g&&H[1]?this.data(H[0]):F}else{return this.trigger("setData"+H[1]+"!",[H[0],G]).each(function(){o.dat

136

a(this,E,G)})}},removeData:function(E){return this.each(function(){o.removeData(this,E)})},queue:function(E,F){if(typeof E!=="string"){F=E;E="fx"}if(F===g){return o.queue(this[0],E)}return this.each(function(){var G=o.queue(this,E,F);if(E=="fx"&&G.length==1){G[0].call(this)}})},dequeue:function(E){return this.each(function(){o.dequeue(this,E)})}}); /* * Sizzle CSS Selector Engine - v0.9.3 * Copyright 2009, The Dojo Foundation * Released under the MIT, BSD, and GPL Licenses. * More information: http://sizzlejs.com/ */ (function(){var Q=/((?:$(?:\([^()]+$|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]+['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[]+)+|[>+~])(\s*,\s*)?/g,K=0,G=Object.prototype.toString;var F=function(X,T,aa,ab){aa=aa||[];T=T||document;if(T.nodeType!==1&&T.nodeType!==9){return[]}if(!X||typeof X!=="string"){return aa}var Y=[],V,ae,ah,S,ac,U,W=true;Q.lastIndex=0;while((V=Q.exec(X))!==null){Y.push(V[1]);if(V[2]){U=RegExp.rightContext;break}}if(Y.length>1&&L.exec(X)){if(Y.length===2&&H.relative[Y[0]]){ae=I(Y[0]+Y[1],T)}else{ae=H.relative[Y[0]]?[T]:F(Y.shift(),T);while(Y.length){X=Y.shift();if(H.relative[X]){X+=Y.shift()}ae=I(X,ae)}}}else{var ad=ab?{expr:Y.pop(),set:E(ab)}:F.find(Y.pop(),Y.length===1&&T.parentNode?T.parentNode:T,P(T));ae=F.filter(ad.expr,ad.set);if(Y.length>0){ah=E(ae)}else{W=false}while(Y.length){var ag=Y.pop(),af=ag;if(!H.relative[ag]){ag=""}else{af=Y.pop()}if(af==null){af=T}H.relative[ag](ah,af,P(T))}}if(!ah){ah=ae}if(!ah){throw"Syntax error, unrecognized expression: "+(ag||X)}if(G.call(ah)==="[object Array]"){if(!W){aa.push.apply(aa,ah)}else{if(T.nodeType===1){for(var Z=0;ah[Z]!=null;Z++){if(ah[Z]&&(ah[Z]===true||ah[Z].nodeType===1&&J(T,ah[Z]))){aa.push(ae[Z])}}}else{for(var Z=0;ah[Z]!=null;Z++){if(ah[Z]&&ah[Z].nodeType===1){aa.push(ae[Z])}}}}}else{E(ah,aa)}if(U){F(U,T,aa,ab)}return aa};F.matches=function(S,T){return F(S,null,null,T)};F.find=function(Z,S,aa){var Y,W;if(!Z){return[]}for(var V=0,U=H.order.length;V<U;V++){var X=H.order[V],W;if((W=H.match[X].exec(Z))){var T=RegExp.leftContext;if(T.substr(T.length-1)!=="\\"){W[1]=(W[1]||"").replace(/\\/g,"");Y=H.find[X](W,S,aa);if(Y!=null){Z=Z.replace(H.match[X],"");break}}}}if(!Y){Y=S.getElementsByTagName("*")}return{set:Y,expr:Z}};F.filter=function(ab,aa,ae,V){var U=ab,ag=[],Y=aa,X,S;while(ab&&aa.length){for(var Z in H.filter){if((X=H.match[Z].exec(ab))!=null){var T=H.filter[Z],af,ad;S=false;if(Y==ag){ag=[]}if(H.preFilter[Z]){X=H.preFilter[Z](X,Y,ae,ag,V);if(!X){S=af=true}else{if(X===true){continue}}}if(X){for(var W=0;(ad=Y[W])!=null;W++){if(ad){af=T(ad,X,W,Y);var ac=V^!!af;if(ae&&af!=null){if(ac){S=true}else{Y[W]=false}}else{

137

if(ac){ag.push(ad);S=true}}}}}if(af!==g){if(!ae){Y=ag}ab=ab.replace(H.match[Z],"");if(!S){return[]}break}}}ab=ab.replace(/\s*,\s*/,"");if(ab==U){if(S==null){throw"Syntax error, unrecognized expression: "+ab}else{break}}U=ab}return Y};var H=F.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF_-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:$(even|odd|[\dn+-]*)$)?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:$(\d*)$)?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF_-]|\\.)+)(?:$(['"]*)((?:\([^$]+\)|[^\2]*)+)\2\))?/},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(S){return S.getAttribute("href")}},relative:{"+":function(W,T){for(var U=0,S=W.length;U<S;U++){var V=W[U];if(V){var X=V.previousSibling;while(X&&X.nodeType!==1){X=X.previousSibling}W[U]=typeof T==="string"?X||false:X===T}}if(typeof T==="string"){F.filter(T,W,true)}},">":function(X,T,Y){if(typeof T==="string"&&!/\W/.test(T)){T=Y?T:T.toUpperCase();for(var U=0,S=X.length;U<S;U++){var W=X[U];if(W){var V=W.parentNode;X[U]=V.nodeName===T?V:false}}}else{for(var U=0,S=X.length;U<S;U++){var W=X[U];if(W){X[U]=typeof T==="string"?W.parentNode:W.parentNode===T}}if(typeof T==="string"){F.filter(T,X,true)}}},"":function(V,T,X){var U="done"+(K++),S=R;if(!T.match(/\W/)){var W=T=X?T:T.toUpperCase();S=O}S("parentNode",T,U,V,W,X)},"~":function(V,T,X){var U="done"+(K++),S=R;if(typeof T==="string"&&!T.match(/\W/)){var W=T=X?T:T.toUpperCase();S=O}S("previousSibling",T,U,V,W,X)}},find:{ID:function(T,U,V){if(typeof U.getElementById!=="undefined"&&!V){var S=U.getElementById(T[1]);return S?[S]:[]}},NAME:function(S,T,U){if(typeof T.getElementsByName!=="undefined"&&!U){return T.getElementsByName(S[1])}},TAG:function(S,T){return T.getElementsByTagName(S[1])}},preFilter:{CLASS:function(V,T,U,S,Y){V=" "+V[1].replace(/\\/g,"")+" ";var X;for(var W=0;(X=T[W])!=null;W++){if(X){if(Y^(" "+X.className+" ").indexOf(V)>=0){if(!U){S.push(X)}}else{if(U){T[W]=false}}}}return false},ID:function(S){return S[1].replace(/\\/g,"")},TAG:function(T,S){for(var U=0;S[U]===false;U++){}return S[U]&&P(S[U])?T[1]:T[1].toUpperCase()},CHILD:function(S){if(S[1]=="nth"){var T=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(S[2]=="even"&&"2n"||S[2]=="odd"&&"2n+1"||!/\D/.test(S[2])&&"0n+"+S[2]||S[2]);S[2]=(T[1]+(T[2]||1))-0;S[3]=T[3]-0}S[0]="done"+(K++);return S},ATTR:function(T){var S=T[1].replace(/\\/g,"");if(H.attrMap[S]){T[1]=H.attrMap[S]}if(T[2]==="~="){T[4]=" "+T[4]+" "}return T},PSEUDO:function(W,T,U,S,X){if(W[1]==="not"){if(W[3].match(Q).length>1){W[3]=F(W[3],null,null,T)}else{var V=F.filter(W[3],T,U,true^X);if(!U){S.push.apply(S,V)}return false}}else{if(H.match.POS.test(W[0])){return true}}return

138

W},POS:function(S){S.unshift(true);return S}},filters:{enabled:function(S){return S.disabled===false&&S.type!=="hidden"},disabled:function(S){return S.disabled===true},checked:function(S){return S.checked===true},selected:function(S){S.parentNode.selectedIndex;return S.selected===true},parent:function(S){return !!S.firstChild},empty:function(S){return !S.firstChild},has:function(U,T,S){return !!F(S[3],U).length},header:function(S){return/h\d/i.test(S.nodeName)},text:function(S){return"text"===S.type},radio:function(S){return"radio"===S.type},checkbox:function(S){return"checkbox"===S.type},file:function(S){return"file"===S.type},password:function(S){return"password"===S.type},submit:function(S){return"submit"===S.type},image:function(S){return"image"===S.type},reset:function(S){return"reset"===S.type},button:function(S){return"button"===S.type||S.nodeName.toUpperCase()==="BUTTON"},input:function(S){return/input|select|textarea|button/i.test(S.nodeName)}},setFilters:{first:function(T,S){return S===0},last:function(U,T,S,V){return T===V.length-1},even:function(T,S){return S%2===0},odd:function(T,S){return S%2===1},lt:function(U,T,S){return T<S[3]-0},gt:function(U,T,S){return T>S[3]-0},nth:function(U,T,S){return S[3]-0==T},eq:function(U,T,S){return S[3]-0==T}},filter:{CHILD:function(S,V){var Y=V[1],Z=S.parentNode;var X=V[0];if(Z&&(!Z[X]||!S.nodeIndex)){var W=1;for(var T=Z.firstChild;T;T=T.nextSibling){if(T.nodeType==1){T.nodeIndex=W++}}Z[X]=W-1}if(Y=="first"){return S.nodeIndex==1}else{if(Y=="last"){return S.nodeIndex==Z[X]}else{if(Y=="only"){return Z[X]==1}else{if(Y=="nth"){var ab=false,U=V[2],aa=V[3];if(U==1&&aa==0){return true}if(U==0){if(S.nodeIndex==aa){ab=true}}else{if((S.nodeIndex-aa)%U==0&&(S.nodeIndex-aa)/U>=0){ab=true}}return ab}}}}},PSEUDO:function(Y,U,V,Z){var T=U[1],W=H.filters[T];if(W){return W(Y,V,U,Z)}else{if(T==="contains"){return(Y.textContent||Y.innerText||"").indexOf(U[3])>=0}else{if(T==="not"){var X=U[3];for(var V=0,S=X.length;V<S;V++){if(X[V]===Y){return false}}return true}}}},ID:function(T,S){return T.nodeType===1&&T.getAttribute("id")===S},TAG:function(T,S){return(S==="*"&&T.nodeType===1)||T.nodeName===S},CLASS:function(T,S){return S.test(T.className)},ATTR:function(W,U){var S=H.attrHandle[U[1]]?H.attrHandle[U[1]](W):W[U[1]]||W.getAttribute(U[1]),X=S+"",V=U[2],T=U[4];return S==null?V==="!=":V==="="?X===T:V==="*="?X.indexOf(T)>=0:V==="~="?(" "+X+" ").indexOf(T)>=0:!U[4]?S:V==="!="?X!=T:V==="^="?X.indexOf(T)===0:V==="$="?X.substr(X.length-T.length)===T:V==="|="?X===T||X.substr(0,T.length+1)===T+"-":false},POS:function(W,T,U,X){var S=T[2],V=H.setFilters[S];if(V){return V(W,U,T,X)}}}};var L=H.match.POS;for(var N in H.match){H.match[N]=RegExp(H.match[N].source+/(?![^\[]*\])(?![^$]*$)/.source)}var

139

E=function(T,S){T=Array.prototype.slice.call(T);if(S){S.push.apply(S,T);return S}return T};try{Array.prototype.slice.call(document.documentElement.childNodes)}catch(M){E=function(W,V){var T=V||[];if(G.call(W)==="[object Array]"){Array.prototype.push.apply(T,W)}else{if(typeof W.length==="number"){for(var U=0,S=W.length;U<S;U++){T.push(W[U])}}else{for(var U=0;W[U];U++){T.push(W[U])}}}return T}}(function(){var T=document.createElement("form"),U="script"+(new Date).getTime();T.innerHTML="<input name='"+U+"'/>";var S=document.documentElement;S.insertBefore(T,S.firstChild);if(!!document.getElementById(U)){H.find.ID=function(W,X,Y){if(typeof X.getElementById!=="undefined"&&!Y){var V=X.getElementById(W[1]);return V?V.id===W[1]||typeof V.getAttributeNode!=="undefined"&&V.getAttributeNode("id").nodeValue===W[1]?[V]:g:[]}};H.filter.ID=function(X,V){var W=typeof X.getAttributeNode!=="undefined"&&X.getAttributeNode("id");return X.nodeType===1&&W&&W.nodeValue===V}}S.removeChild(T)})();(function(){var S=document.createElement("div");S.appendChild(document.createComment(""));if(S.getElementsByTagName("*").length>0){H.find.TAG=function(T,X){var W=X.getElementsByTagName(T[1]);if(T[1]==="*"){var V=[];for(var U=0;W[U];U++){if(W[U].nodeType===1){V.push(W[U])}}W=V}return W}}S.innerHTML="<a href='#'></a>";if(S.firstChild&&S.firstChild.getAttribute("href")!=="#"){H.attrHandle.href=function(T){return T.getAttribute("href",2)}}})();if(document.querySelectorAll){(function(){var S=F,T=document.createElement("div");T.innerHTML="<p class='TEST'></p>";if(T.querySelectorAll&&T.querySelectorAll(".TEST").length===0){return}F=function(X,W,U,V){W=W||document;if(!V&&W.nodeType===9&&!P(W)){try{return E(W.querySelectorAll(X),U)}catch(Y){}}return S(X,W,U,V)};F.find=S.find;F.filter=S.filter;F.selectors=S.selectors;F.matches=S.matches})()}if(document.getElementsByClassName&&document.documentElement.getElementsByClassName){H.order.splice(1,0,"CLASS");H.find.CLASS=function(S,T){return T.getElementsByClassName(S[1])}}function O(T,Z,Y,ac,aa,ab){for(var W=0,U=ac.length;W<U;W++){var S=ac[W];if(S){S=S[T];var X=false;while(S&&S.nodeType){var V=S[Y];if(V){X=ac[V];break}if(S.nodeType===1&&!ab){S[Y]=W}if(S.nodeName===Z){X=S;break}S=S[T]}ac[W]=X}}}function R(T,Y,X,ab,Z,aa){for(var V=0,U=ab.length;V<U;V++){var S=ab[V];if(S){S=S[T];var W=false;while(S&&S.nodeType){if(S[X]){W=ab[S[X]];break}if(S.nodeType===1){if(!aa){S[X]=V}if(typeof Y!=="string"){if(S===Y){W=true;break}}else{if(F.filter(Y,[S]).length>0){W=S;break}}}S=S[T]}ab[V]=W}}}var J=document.compareDocumentPosition?function(T,S){return T.compareDocumentPosition(S)&16}:function(T,S){return T!==S&&(T.contains?T.contains(S):true)};var P=function(S){return S.nodeType===9&&S.documentElement.nodeName!=="HTML"||!!S.ownerD

140

ocument&&P(S.ownerDocument)};var I=function(S,Z){var V=[],W="",X,U=Z.nodeType?[Z]:Z;while((X=H.match.PSEUDO.exec(S))){W+=X[0];S=S.replace(H.match.PSEUDO,"")}S=H.relative[S]?S+"*":S;for(var Y=0,T=U.length;Y<T;Y++){F(S,U[Y],V)}return F.filter(W,V)};o.find=F;o.filter=F.filter;o.expr=F.selectors;o.expr[":"]=o.expr.filters;F.selectors.filters.hidden=function(S){return"hidden"===S.type||o.css(S,"display")==="none"||o.css(S,"visibility")==="hidden"};F.selectors.filters.visible=function(S){return"hidden"!==S.type&&o.css(S,"display")!=="none"&&o.css(S,"visibility")!=="hidden"};F.selectors.filters.animated=function(S){return o.grep(o.timers,function(T){return S===T.elem}).length};o.multiFilter=function(U,S,T){if(T){U=":not("+U+")"}return F.matches(U,S)};o.dir=function(U,T){var S=[],V=U[T];while(V&&V!=document){if(V.nodeType==1){S.push(V)}V=V[T]}return S};o.nth=function(W,S,U,V){S=S||1;var T=0;for(;W;W=W[U]){if(W.nodeType==1&&++T==S){break}}return W};o.sibling=function(U,T){var S=[];for(;U;U=U.nextSibling){if(U.nodeType==1&&U!=T){S.push(U)}}return S};return;l.Sizzle=F})();o.event={add:function(I,F,H,K){if(I.nodeType==3||I.nodeType==8){return}if(I.setInterval&&I!=l){I=l}if(!H.guid){H.guid=this.guid++}if(K!==g){var G=H;H=this.proxy(G);H.data=K}var E=o.data(I,"events")||o.data(I,"events",{}),J=o.data(I,"handle")||o.data(I,"handle",function(){return typeof o!=="undefined"&&!o.event.triggered?o.event.handle.apply(arguments.callee.elem,arguments):g});J.elem=I;o.each(F.split(/\s+/),function(M,N){var O=N.split(".");N=O.shift();H.type=O.slice().sort().join(".");var L=E[N];if(o.event.specialAll[N]){o.event.specialAll[N].setup.call(I,K,O)}if(!L){L=E[N]={};if(!o.event.special[N]||o.event.special[N].setup.call(I,K,O)===false){if(I.addEventListener){I.addEventListener(N,J,false)}else{if(I.attachEvent){I.attachEvent("on"+N,J)}}}}L[H.guid]=H;o.event.global[N]=true});I=null},guid:1,global:{},remove:function(K,H,J){if(K.nodeType==3||K.nodeType==8){return}var G=o.data(K,"events"),F,E;if(G){if(H===g||(typeof H==="string"&&H.charAt(0)==".")){for(var I in G){this.remove(K,I+(H||""))}}else{if(H.type){J=H.handler;H=H.type}o.each(H.split(/\s+/),function(M,O){var Q=O.split(".");O=Q.shift();var N=RegExp("(^|\\.)"+Q.slice().sort().join(".*\\.")+"(\\.|$)");if(G[O]){if(J){delete G[O][J.guid]}else{for(var P in G[O]){if(N.test(G[O][P].type)){delete G[O][P]}}}if(o.event.specialAll[O]){o.event.specialAll[O].teardown.call(K,Q)}for(F in G[O]){break}if(!F){if(!o.event.special[O]||o.event.special[O].teardown.call(K,Q)===false){if(K.removeEventListener){K.removeEventListener(O,o.data(K,"handle"),false)}else{if(K.detachEvent){K.detachEvent("on"+O,o.data(K,"handle"))}}}F=null;delete G[O]}}})}for(F in G){break}if(!F){var L=o.data(K,"handle");if(L){L.elem=null}o.removeData(K,"events");o.removeData(K,"handle")}}},trigger:function(I,K,H,E){var G=I.type||I;if(!E){I=typeof I==="object"?I[h]?I:o.extend(o.Event(G),I):o.Event(G);if(G.indexOf("!")>=0){I.type=G=G.slice(0,-

141

1);I.exclusive=true}if(!H){I.stopPropagation();if(this.global[G]){o.each(o.cache,function(){if(this.events&&this.events[G]){o.event.trigger(I,K,this.handle.elem)}})}}if(!H||H.nodeType==3||H.nodeType==8){return g}I.result=g;I.target=H;K=o.makeArray(K);K.unshift(I)}I.currentTarget=H;var J=o.data(H,"handle");if(J){J.apply(H,K)}if((!H[G]||(o.nodeName(H,"a")&&G=="click"))&&H["on"+G]&&H["on"+G].apply(H,K)===false){I.result=false}if(!E&&H[G]&&!I.isDefaultPrevented()&&!(o.nodeName(H,"a")&&G=="click")){this.triggered=true;try{H[G]()}catch(L){}}this.triggered=false;if(!I.isPropagationStopped()){var F=H.parentNode||H.ownerDocument;if(F){o.event.trigger(I,K,F,true)}}},handle:function(K){var J,E;K=arguments[0]=o.event.fix(K||l.event);var L=K.type.split(".");K.type=L.shift();J=!L.length&&!K.exclusive;var I=RegExp("(^|\\.)"+L.slice().sort().join(".*\\.")+"(\\.|$)");E=(o.data(this,"events")||{})[K.type];for(var G in E){var H=E[G];if(J||I.test(H.type)){K.handler=H;K.data=H.data;var F=H.apply(this,arguments);if(F!==g){K.result=F;if(F===false){K.preventDefault();K.stopPropagation()}}if(K.isImmediatePropagationStopped()){break}}}},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode metaKey newValue originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),fix:function(H){if(H[h]){return H}var F=H;H=o.Event(F);for(var G=this.props.length,J;G;){J=this.props[--G];H[J]=F[J]}if(!H.target){H.target=H.srcElement||document}if(H.target.nodeType==3){H.target=H.target.parentNode}if(!H.relatedTarget&&H.fromElement){H.relatedTarget=H.fromElement==H.target?H.toElement:H.fromElement}if(H.pageX==null&&H.clientX!=null){var I=document.documentElement,E=document.body;H.pageX=H.clientX+(I&&I.scrollLeft||E&&E.scrollLeft||0)-(I.clientLeft||0);H.pageY=H.clientY+(I&&I.scrollTop||E&&E.scrollTop||0)-(I.clientTop||0)}if(!H.which&&((H.charCode||H.charCode===0)?H.charCode:H.keyCode)){H.which=H.charCode||H.keyCode}if(!H.metaKey&&H.ctrlKey){H.metaKey=H.ctrlKey}if(!H.which&&H.button){H.which=(H.button&1?1:(H.button&2?3:(H.button&4?2:0)))}return H},proxy:function(F,E){E=E||function(){return F.apply(this,arguments)};E.guid=F.guid=F.guid||E.guid||this.guid++;return E},special:{ready:{setup:B,teardown:function(){}}},specialAll:{live:{setup:function(E,F){o.event.add(this,F[0],c)},teardown:function(G){if(G.length){var E=0,F=RegExp("(^|\\.)"+G[0]+"(\\.|$)");o.each((o.data(this,"events").live||{}),function(){if(F.test(this.type)){E++}});if(E<1){o.event.remove(this,G[0],c)}}}}}};o.Event=function(E){if(!this.preventDefault){return new o.Event(E)}if(E&&E.type){this.originalEvent=E;this.type=E.type}else{this.type=E}this.timeStamp=e();this[h]=true};function k(){return false}function u(){return

142

true}o.Event.prototype={preventDefault:function(){this.isDefaultPrevented=u;var E=this.originalEvent;if(!E){return}if(E.preventDefault){E.preventDefault()}E.returnValue=false},stopPropagation:function(){this.isPropagationStopped=u;var E=this.originalEvent;if(!E){return}if(E.stopPropagation){E.stopPropagation()}E.cancelBubble=true},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=u;this.stopPropagation()},isDefaultPrevented:k,isPropagationStopped:k,isImmediatePropagationStopped:k};var a=function(F){var E=F.relatedTarget;while(E&&E!=this){try{E=E.parentNode}catch(G){E=this}}if(E!=this){F.type=F.data;o.event.handle.apply(this,arguments)}};o.each({mouseover:"mouseenter",mouseout:"mouseleave"},function(F,E){o.event.special[E]={setup:function(){o.event.add(this,F,a,E)},teardown:function(){o.event.remove(this,F,a)}}});o.fn.extend({bind:function(F,G,E){return F=="unload"?this.one(F,G,E):this.each(function(){o.event.add(this,F,E||G,E&&G)})},one:function(G,H,F){var E=o.event.proxy(F||H,function(I){o(this).unbind(I,E);return(F||H).apply(this,arguments)});return this.each(function(){o.event.add(this,G,E,F&&H)})},unbind:function(F,E){return this.each(function(){o.event.remove(this,F,E)})},trigger:function(E,F){return this.each(function(){o.event.trigger(E,F,this)})},triggerHandler:function(E,G){if(this[0]){var F=o.Event(E);F.preventDefault();F.stopPropagation();o.event.trigger(F,G,this[0]);return F.result}},toggle:function(G){var E=arguments,F=1;while(F<E.length){o.event.proxy(G,E[F++])}return this.click(o.event.proxy(G,function(H){this.lastToggle=(this.lastToggle||0)%F;H.preventDefault();return E[this.lastToggle++].apply(this,arguments)||false}))},hover:function(E,F){return this.mouseenter(E).mouseleave(F)},ready:function(E){B();if(o.isReady){E.call(document,o)}else{o.readyList.push(E)}return this},live:function(G,F){var E=o.event.proxy(F);E.guid+=this.selector+G;o(document).bind(i(G,this.selector),this.selector,E);return this},die:function(F,E){o(document).unbind(i(F,this.selector),E?{guid:E.guid+this.selector+F}:null);return this}});function c(H){var E=RegExp("(^|\\.)"+H.type+"(\\.|$)"),G=true,F=[];o.each(o.data(this,"events").live||[],function(I,J){if(E.test(J.type)){var K=o(H.target).closest(J.data)[0];if(K){F.push({elem:K,fn:J})}}});o.each(F,function(){if(this.fn.call(this.elem,H,this.fn.data)===false){G=false}});return G}function i(F,E){return["live",F,E.replace(/\./g,"`").replace(/ /g,"|")].join(".")}o.extend({isReady:false,readyList:[],ready:function(){if(!o.isReady){o.isReady=true;if(o.readyList){o.each(o.readyList,function(){this.call(document,o)});o.readyList=null}o(document).triggerHandler("ready")}}});var x=false;function B(){if(x){return}x=true;if(document.addEventListener){document.addEventListener("DOMContentLoaded",function(){document.removeEventListener("DOMContentLoaded",arguments.callee,false);o.ready()},false)}else{if(document.attachEvent){document.attachEvent("

143

onreadystatechange",function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",arguments.callee);o.ready()}});if(document.documentElement.doScroll&&typeof l.frameElement==="undefined"){(function(){if(o.isReady){return}try{document.documentElement.doScroll("left")}catch(E){setTimeout(arguments.callee,0);return}o.ready()})()}}}o.event.add(l,"load",o.ready)}o.each(("blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error").split(","),function(F,E){o.fn[E]=function(G){return G?this.bind(E,G):this.trigger(E)}});o(l).bind("unload",function(){for(var E in o.cache){if(E!=1&&o.cache[E].handle){o.event.remove(o.cache[E].handle.elem)}}});(function(){o.support={};var F=document.documentElement,G=document.createElement("script"),K=document.createElement("div"),J="script"+(new Date).getTime();K.style.display="none";K.innerHTML=' <link/><table></table><a href="/a" style="color:red;float:left;opacity:.5;">a</a><select><option>text</option></select><object><param/></object>';var H=K.getElementsByTagName("*"),E=K.getElementsByTagName("a")[0];if(!H||!H.length||!E){return}o.support={leadingWhitespace:K.firstChild.nodeType==3,tbody:!K.getElementsByTagName("tbody").length,objectAll:!!K.getElementsByTagName("object")[0].getElementsByTagName("*").length,htmlSerialize:!!K.getElementsByTagName("link").length,style:/red/.test(E.getAttribute("style")),hrefNormalized:E.getAttribute("href")==="/a",opacity:E.style.opacity==="0.5",cssFloat:!!E.style.cssFloat,scriptEval:false,noCloneEvent:true,boxModel:null};G.type="text/javascript";try{G.appendChild(document.createTextNode("window."+J+"=1;"))}catch(I){}F.insertBefore(G,F.firstChild);if(l[J]){o.support.scriptEval=true;delete l[J]}F.removeChild(G);if(K.attachEvent&&K.fireEvent){K.attachEvent("onclick",function(){o.support.noCloneEvent=false;K.detachEvent("onclick",arguments.callee)});K.cloneNode(true).fireEvent("onclick")}o(function(){var L=document.createElement("div");L.style.width="1px";L.style.paddingLeft="1px";document.body.appendChild(L);o.boxModel=o.support.boxModel=L.offsetWidth===2;document.body.removeChild(L)})})();var w=o.support.cssFloat?"cssFloat":"styleFloat";o.props={"for":"htmlFor","class":"className","float":w,cssFloat:w,styleFloat:w,readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",tabindex:"tabIndex"};o.fn.extend({_load:o.fn.load,load:function(G,J,K){if(typeof G!=="string"){return this._load(G)}var I=G.indexOf(" ");if(I>=0){var E=G.slice(I,G.length);G=G.slice(0,I)}var H="GET";if(J){if(o.isFunction(J)){K=J;J=null}else{if(typeof J==="object"){J=o.param(J);H="POST"}}}var F=this;o.ajax({url:G,type:H,dataType:"html",data:J,complete:function(M,L){if(L=="success"||L=="notmodified"){F.html(E?o("<div/>").append(M.responseText.replace(/<script(.|\s)*?\/script>/g,"")).find(E):M.responseText)}if(K){F.each(K,[M.responseText,L,M])}}});return this},serialize:function(){return o.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?o.makeArray(this.elements):this}).filter(function

144

(){return this.name&&!this.disabled&&(this.checked||/select|textarea/i.test(this.nodeName)||/text|hidden|password/i.test(this.type))}).map(function(E,F){var G=o(this).val();return G==null?null:o.isArray(G)?o.map(G,function(I,H){return{name:F.name,value:I}}):{name:F.name,value:G}}).get()}});o.each("ajaxStart,ajaxStop,ajaxComplete,ajaxError,ajaxSuccess,ajaxSend".split(","),function(E,F){o.fn[F]=function(G){return this.bind(F,G)}});var r=e();o.extend({get:function(E,G,H,F){if(o.isFunction(G)){H=G;G=null}return o.ajax({type:"GET",url:E,data:G,success:H,dataType:F})},getScript:function(E,F){return o.get(E,null,F,"script")},getJSON:function(E,F,G){return o.get(E,F,G,"json")},post:function(E,G,H,F){if(o.isFunction(G)){H=G;G={}}return o.ajax({type:"POST",url:E,data:G,success:H,dataType:F})},ajaxSetup:function(E){o.extend(o.ajaxSettings,E)},ajaxSettings:{url:location.href,global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:function(){return l.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest()},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},ajax:function(M){M=o.extend(true,M,o.extend(true,{},o.ajaxSettings,M));var W,F=/=\?(&|$)/g,R,V,G=M.type.toUpperCase();if(M.data&&M.processData&&typeof M.data!=="string"){M.data=o.param(M.data)}if(M.dataType=="jsonp"){if(G=="GET"){if(!M.url.match(F)){M.url+=(M.url.match(/\?/)?"&":"?")+(M.jsonp||"callback")+"=?"}}else{if(!M.data||!M.data.match(F)){M.data=(M.data?M.data+"&":"")+(M.jsonp||"callback")+"=?"}}M.dataType="json"}if(M.dataType=="json"&&(M.data&&M.data.match(F)||M.url.match(F))){W="jsonp"+r++;if(M.data){M.data=(M.data+"").replace(F,"="+W+"$1")}M.url=M.url.replace(F,"="+W+"$1");M.dataType="script";l[W]=function(X){V=X;I();L();l[W]=g;try{delete l[W]}catch(Y){}if(H){H.removeChild(T)}}}if(M.dataType=="script"&&M.cache==null){M.cache=false}if(M.cache===false&&G=="GET"){var E=e();var U=M.url.replace(/(\?|&)_=.*?(&|$)/,"$1_="+E+"$2");M.url=U+((U==M.url)?(M.url.match(/\?/)?"&":"?")+"_="+E:"")}if(M.data&&G=="GET"){M.url+=(M.url.match(/\?/)?"&":"?")+M.data;M.data=null}if(M.global&&!o.active++){o.event.trigger("ajaxStart")}var Q=/^(\w+:)?\/\/([^\/?#]+)/.exec(M.url);if(M.dataType=="script"&&G=="GET"&&Q&&(Q[1]&&Q[1]!=location.protocol||Q[2]!=location.host)){var H=document.getElementsByTagName("head")[0];var T=document.createElement("script");T.src=M.url;if(M.scriptCharset){T.charset=M.scriptCharset}if(!W){var O=false;T.onload=T.onreadystatechange=function(){if(!O&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")){O=true;I();L();H.removeChild(T)}}}H.appendChild(T);return g}var K=false;var J=M.xhr();if(M.username){J.open(G,M.url,M.async,M.username,M.pa

145

ssword)}else{J.open(G,M.url,M.async)}try{if(M.data){J.setRequestHeader("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.beforeSend(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.readyState==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=="success"){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.handleError(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,httpSuccess: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","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];function t(F,E){var

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="block"}I.remove();m[G]=K}this[H].style.display=o.data(this[H],"olddisplay",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,arguments):G==null||E?this.each(function(){var H=E?G:o(this).is(":hidden");o(this)[H?"show":"hide"]()}):this.animate(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?"show":"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),slideToggle: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:typeof E.duration==="number"?E.duration:o.fx.speeds[E.duration]||o.fx.speeds._default;E.old=E.complete;E.complete=function(){if(E.queue!==false){o(this).dequeue()}if(o.isFunction(E.old)){E.old.call(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={}}}}

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.style||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:function(I,H,G){this.startTime=e();this.start=I;this.end=H;this.unit=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=setInterval(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(){this.options.orig[this.prop]=o.attr(this.elem.style,this.prop);this.options.show=true;this.custom(this.prop=="width"||this.prop=="height"?1:0,this.cur());o(this.elem).show()},hide:function(){this.options.orig[this.prop]=o.attr(this.elem.style,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(H){var G=e();if(H||G>=this.options.duration+this.startTime){this.now=this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;var E=true;for(var F in this.options.curAnim){if(this.options.curAnim[F]!==true){E=false}}if(E){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;this.elem.style.display=this.options.display;if(o.css(this.elem,"display")=="none"){this.elem.style.display="block"}}if(this.options.hide){o(this.elem).hide()}if(this.options.hide||this.options.show){for(var I in this.options.curAnim){o.attr(this.elem.style,I,this.options.orig[I])}}this.options.complete.call(this.elem)}return false}else{var J=G-this.startTime;this.state=J/this.options.duration;this.pos=o.easing[this.options.easing||(o.easing.swing?"swing":"linear")](this.state,J,0,1,this.options.duration);this.now=this.start+((this.end-this.start)*this.pos);this.update()}return true}};o.extend(o.fx,{speeds:{slow:600,fast:200,_default:400},step:{opacity:function(E){o.attr(E.elem.style,"opacity",E.now)},_default:function(E){if(E.elem.style&&E.elem.style[E.prop]!=null){E.elem.style[E.prop]=E.now+E.unit}else{E.elem[E.prop]=E.now}}}});if(document.documentElement.getBoundingClientRect){o.fn.offset=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.body,E=J.documentElement,L=E.clientTop||F.clientTop||0,K=E.clientLeft||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.scrollLeft)-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 o.offset.bodyOffset(this[0])}o.offset.initialized||o.offset.ini

148

tialize();var J=this[0],G=J.offsetParent,F=J,O=J.ownerDocument,M,H=O.documentElement,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.offset.doesNotAddBorder&&!(o.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(J.tagName))){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}F=G,G=J.offsetParent}if(o.offset.subtractsBorderForOverflowNotVisible&&M.overflow!=="visible"){N+=parseInt(M.borderTopWidth,10)||0,I+=parseInt(M.borderLeftWidth,10)||0}E=M}if(E.position==="relative"||E.position==="static"){N+=K.offsetTop,I+=K.offsetLeft}if(E.position==="fixed"){N+=Math.max(H.scrollTop,K.scrollTop),I+=Math.max(H.scrollLeft,K.scrollLeft)}return{top:N,left:I}}}o.offset={initialize: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:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"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.firstChild;this.doesNotAddBorder=(G.offsetTop!==5);this.doesAddBorderForTableAndCells=(I.offsetTop===5);H.style.overflow="hidden",H.style.position="relative";this.subtractsBorderForOverflowNotVisible=(G.offsetTop===-5);L.style.marginTop="1px";this.doesNotIncludeMarginInBodyOffset=(L.offsetTop===0);L.style.marginTop=J;L.removeChild(F);this.initialized=true},bodyOffset:function(E){o.offset.initialized||o.offset.initialize();var G=E.offsetTop,F=E.offsetLeft;if(o.offset.doesNotIncludeMarginInBodyOffset){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.offsetParent}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.boxModel&&document.documentElement[G]||document.body[G]:this[0][G]}});o.each(["Height","Width"],function(H,F){var

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.documentElement["client"+F]||document.body["client"+F]:this[0]==document?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.length?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 var caption = next.find('img').attr('rel');

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 $('#gallery .content').html(caption);}

Documents

PROYEKSI TATA RUANG BERBASIS WEB MULTIMEDIA …repository.uinjkt.ac.id/dspace/bitstream/123456789/4318/1/NURLAILA... · Nurlaila Maulina, Proyeksi Tata Ruang Berbasis Web Multimedia