BAB II LANDASAN TEORI 2.1. Pengertian Visualisasi Visualisasi adalah tampilan pada layar monitor baik dalam bentuk gambar yang bergerak ataupun tidak, serta dapat pula gambar yang disertai dengan suara. 2.1.1. Internet Internet adalah kependekan dari International Networking, yang artinya jaringan computer berskala international/global yang dapat membuat masingmasing komputer saling berkomunikasi. 2.1.2. WWW WWW adalah kependekan dari World Wide Web, atau lebih dikenal dengan nama web. Web adalah sebuah layanan yang dapat dibuat oleh pemakai komputer apabila komputernya tersambung dengan internet. Dengan Web, pengguna computer diseluruh dunia dapat saling berinteraksi dengan pengguna internet lainnya tanpa harus beranjak dari tempat dimana internet tersebut diakses. 2.1.3. HTML HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tatacara penulisan yang digunakan dalam dokumen web. Dokumen HTML adalah sebuah dokumen teks murni yang dapat dibuat dengan editor web sembarang seperti Notepad. Dokumen ini akan dieksekusi oleh sebuah browser (misal Internet Explorer), sehingga browser mampu menghasilkan suatu dokumen yang sesuai dengan keinginan seorang designer atau programmer web. 4
5 2.1.4. Website Website adalah sekumpulan halaman web yang bisa diakses melalui browser web. Satu halaman disebut homepage, halaman ini adalah halaman yang pertama kali dilihat ketika seseorang mengunjungi website. Dari homepage pengunjung dapat mengklik teks atau gambar untuk berpindah kehalaman lain dalam website tersebut atau kehalaman lain diwebsite lain. Homepage berada pada posisi teratas dengan halaman-halaman terkait berada dibawahnya. 2.1.5. TCP/IP TCP/IP adalah kependekan dari Transmission Control Protocol/Internet Protocol, artinya protokol yang terdiri dari sub-protokol, yang beroperasi pada lapisan yang berbeda. Ini merupakan standar protokol internet. Protokol ini memberikan nomor Unix pada setiap komputer yang terkoneksi. 2.2. Peta Navigasi Navigasi merupakan unsur penting dalam banyak halaman web. Tujuannya adalah agar seseorang merasa mudah mengemudikan suatu halaman web. Program web browser sendiri seprti Internet Explorer dan Netscape Navigator, dilengkapi fasilitas navigasi untuk mempermudah seseorang dalam menjelajahi dunia internet. Komponen navigasi biasanya berupa fasilitas yang berfungsi untuk berpindah kehalaman web lainnya, yang diwujudkan dalam berbagai macam cara. 2.2.1. Navigasi Linier Struktur navigasi yang hanya mempunyai suatu rangkaian cerita terurut. Struktur ini menampilkan satu demi satu tampilan layar secara berurut menurut aturannya. Tampilan yang ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya. Gambar 2.1 Struktur navigasi model linear
6 2.2.2. Navigasi Hirarki Struktur navigasi yang menghandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertamanya disebut sebagai master page (halaman uatama ke-1), halaman utama ini akan mempunyai halaman percabangan yang disebut slash page (halaman pendukung). Gambar 2.2 Struktur navigasi hirarki 2.2.3. Navigasi Non Linier Struktur navigasi yang tidak memperhatikan batasan rute dengan kata lain pemakai dapat menelusuri program sesudahnya. Tampilan pada menu pertamanya disebut sebagai master page (halaman utama ke-1), halaman utama ini akan mempunyai halaman percabangan yang disebut slash page (halaman pendukung). Gambar 2.3 Struktur navigasi model non linear
7 2.2.4. Navigasi campuran Struktur navigasi yang merupakan gabungan demi struktur navigasi non linear dan hirarki. Gambar 2.4 Struktur navigasi model campuran 2.3. Pengenalan Macromedia Dreamweaver 8 Dreamweaver adalah software yang digunakan oleh Web desainer ataupun Web programmer untuk mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam mendesain ataupun membangun situs web. Dreamweaver juga dilengkapi dengan fasilitas yang cukup lengkap. Maka dari itu aplikasi yang akan dibuat ini menggunakan Macromedia Dreamweaver 8. 2.3.1. Ruang Kerja Dreamweaver 8 Pada saat pertama kali anda memulai Dreamweaver 8, sebuah kotak dialog Workspace akan muncul, memberikan penawaran kepada anda untuk memilih tampilan ruang kerja yang ingin anda gunakan. Dreamweaver 8 Workspace adalah ruang kerja yang semua jendela dokumen dan panel integrasi pada satu jendela besar, dengan panel group yang berada disisi kanan. Pilihan ini dipakai oleh banyak pengguna. Dreamweaver
8 Workspace adalah tampilan lama seperti pada Dreamweaver. Setiap dokumen akan berada pada jendela yang terpisah. Ruang kerja pada Draemweaver 8 memiliki komponen yang memberikan fasilitas dan ruang untuk menuangkan kreasi dalam bekerja, seperti yang terlihat pada Gambar 2.5. Komponen yang disediakan oleh Dreamweaver 8 antara lain adalah Insert bar, Document toolbar, Document window, Panel groups, Site panel, Property inspector. Perhatikan Gambar 2.5 dibawah ini. Berikut bagian-bagian yang terdapat pada jendela kerja dari Dreamweaver 8. A D B C Gambar 2.5 Jendela Kerja Dreamweaver 8 A. Insert Bar Insert Bar merupakan kumpulan menu yang digunakan untuk memasukkan sebuah objek atau fungsi lainnya ke dalam jendela dokumen. Contoh: image, Layer, Tabel dan lain-lain. Insert Bar juga mempunyai tujuh menu didalamnya yaitu Common, Layout, Forms, Text, HTML, Application dan Flash Elements. Untuk menampilkan dan menggunakan menu yang terdapat pada Insert Bar, Anda dapat meng-klik tombol drop down yang berada di sebelah kiri Insert Bar. Perhatikan Gambar 2.6 pada halaman berikut.
9 Gambar 2.6 Menu Insert Bar B. Document Toolbar Document Toolbar digunakan sebagai penempatan file-file yang telah dibuka dan sekaligus untuk menampilkan nama dari file tersebut. Document Toolbar juga mempunyai tiga buah tab yang dapat membantu Anda mendesain web dengan mengubah tampilan dari jendela dokumen, diantaranya Code, Split, Design. Gambar 2.7 Tampilan Document Toolbar Code : merupakan kumpulan kode program yang telah disusun, dan berfungsi untuk mengedit listing dari program. Split : digunakan untuk menampilkan tab dari code view dan design view secara bersamaan. Design : digunakan sebagai tempat untuk meletakkan objek-objek ke dalam jendela dokumen, seperti Tabel, Form, dan lainnya. Perhatikan Gambar 2.8 di bawah ini mengenai contoh dari tab Code, Split, dan Design.
10 Code View Split View Design View Gambar 2.8 Tab-tab View C. Document Window Document Window atau biasa disebut dengan jendela dokumen, merupakan tempat untuk menampilkan objek-objek atau kode program dari tab code, split, dan design. D. Panel Groups Panel Group berfungsi untuk mengatur halaman web yang telah Anda buat. Contoh : Panel File, berfungsi untuk mencari dan mengetahui letak halaman file-file yang telah di buat. E. Property Inspector Property Inspector berfungsi untuk mengetahui atau mengubah property dari sebuah objek. Contoh : untuk penulisan sebuah teks, Anda dapat mengubah font, color, dan size dari teks tersebut dengan menggunakan Property Inspector. Gambar 2.9 Tampilan Property Inspector
11 2.3.2. Komponen Ruang Kerja Di dalam ruang kerja Dreamweaver 8 terdapat beberapa komponen utama yang membentuk suatu ruang kerja. Berikut ini keterangan singkat tentang menu yang ada pada Dreamweaver 8. Menu berisi submenu yang biasanya ditampilkan sebagai dropdown menu yang akan muncul ketika anda menekan tombol menu utama. Gambar 2.10 Menu pada Dreamweaver 8 Di dalam sistem menu Dreamweaver 8 terdapat beberapa komponen yang dapat digunakan, yaitu : 1. File Menu Berisi menu standar seperti New, Open, Save, Cut, Copy, dan Paste. Fole menu juga berisi beberapa perintah tambahan, seperti Preview in Browser dan Print Code. 2. Edit Menu Berisi perintah seleksi dan pencarian, seperti Select Parent Tag dan Find and Replace, dan menyediakan akses ke Keyboard Shortcut Editor dan Tag Library Editor. 3. View Menu Mengijinkan anda melihat tampilan dokumen dengan beberapa cara (seperti Design view dan Code view) dan untuk menampilkan atau menyembunyikan beberapa elemen pada dokumen dan peralatan yang dimiliki Dreamweaver 8. 4. Insert Menu Menyediakan alternatif untuk memasukkan objek pada dokumen. 5. Modify Menu Untuk mengubah properti elemen halaman web atau item lainnya yang dipilih. Menggunakan menu ini dapat mengedit tag, mengubah table dan elemen tabel dan menampilkan beberapa tindakan yang dapat dilakukkan untuk item pada library da template.
12 6. Text Menu Menyediakan perintah yang dibutuhkan untuk melakukan pemformatan pada teks. 7. Commands Menu Menyediakan akses untuk beberapa macam perintah, termasuk untuk membuat album foto dengan cepat dan melakukan optimasi gambar dengan menggunakan program lain. 8. Site Menu Menyediakan item menu untuk membuat, membuka, mengedit site. 9. Window Menu Menyediakan akses kesemua panel, inspectors, dan jendela pada Dreamweaver. 10. Help Menu Menyediakan akses ke dokumentasi yang dimiliki oleh Dreamweaver 8, termasuk cara penggunaan Dreamweaver 8, membuat ekstensi dan material lainnya yang dapat membantu anda menggunakan Dreamweaver 8 dengan lebih baik. 2.4. Pengenalan Macromedia Flash 8 Macromedia Flash 8 adalah program grafis animasi standar professional untuk menghasilkan halaman web yang menarik. Movie Flash terdiri atas grafik, teks, animasi dan aplikasi untuk situs web. Macromedia Flash 8 juga mempunyai kemampuan untuk mengimpor video, gambar dan suara dari aplikasi diluarnya. Movie Flash juga bisa memasukkan unsur interaktif dalam movienya menggunakan action script, yaitu bahasa pemrograman berorientasi objek, yang nantinya user bisa berinteraksi dengan movie, menggunakan keyboard atau mouse untuk berpindah kebagian-bagian yang berbeda dari suatu movie, mengontrol movie, memindahkan objek-objek, memasukkan informasi melalui form dan operasi-operasi lainnya.
13 Kemampuan flash lainnya adalah membuat animasi logo, pengaturan navigasi halaman web, pembuatan animasi form, dan lainnya sesuai kreativitas dan imajinasi dalam menggunakan kemampuan Flash yang ada. 2.5. Perangkat Pendukung Perangkat pendukung utama dalam pembuatan website yakni : Macromedia Dreamweaver 8, dan software pendukung Macromedia Flash 8, untuk pembuatan animasi teks dan gambar. Spesifikasi Hardware yang digunakan : a. Processor Intel Pentium II dengan 300 Mhz atau yang lebih tinggi. b. Sistem Windows 98, Windows 2000, Windows NT, Windows ME atau Windows XP. c. Menggunakan browser Netscape Navigator versi 4 atau yang lebih tinggi dan menggunakan Internet Explorer. d. Minimal 98 MB RAM (Random Access Memory) atau menggunakan 128 MB RAM yang direkomendasikan. e. Ruangan yang tersisa pada Harddisk minimal 275 MB. f. CD-ROM.