BAB I Mendesain Website Untuk mendesain sebuah website diperlukan beberapa aplikasi pendukung, diantaranya adalah aplikasi image editor, aplikasi web authoring, dan aplikasi web server. Aplikasi image editor yakni adalah sebuah aplikasi yang digunakan untuk membuat gambar atau tampilan antarmuka web contohnya Macromedia Firework, Adobe Photoshop danl lain-lain. Aplikasi web authoring adalah aplikasi yang digunakan untuk mengolah gambar yang telah kita buat di aplikasi image editor tadi menjadi elemen-elemen web, contoh dari aplikasi ini adalah Macromedia Dreamweaver, Microsoft Frontpage dan lain-lain. Sebelum anda membuat sebuah website portal, sebaiknya anda mempersiapkan kelengkapan apa saja yang akan dimuat dalam website anda berupa coretan di kertas atau papan tulis sebelum mengerjakannya dengan computer. Hal ini akan sangat membantu kerja anda agar lebih sistematis, terorganisir dengan baik, dan tentu saja menghemat waktu yang diperlukan dalam membuat sebuah website. Setidaknya ada tiga langkah persiapan yang anda buat di atas kertas kerja sebelum menuangkan ide desain website dengan computer, yakni : diagram pohon isi website portal, sketsa tampilan website, dan storyboard website portal anda. 1. Membuat Diagram Pohon Isi Website Diagram pohon atau tree chart diperlukan unutk menggambarkan hirarki isi website. Yang menjadi halaman utama adalah index atau home. Sesuai dengan namanya, index, maka halaman ini harus memuat link-link menuju ke halaman isi. Halaman-halaman selanjutnya yang merupakan is website berada bawah halaman index. Sebaiknya semua halaman isi dapat diklik dari halaman index, atau setidaknya halaman-halaman utama dari setiap halaman isi dapat diakses melalui halaman index dengan hyperlink. Kondisi seperti ini sangat diperlukan agar website anda memiliki system navigasi yang baik dan memudahkan pengunjung menemukan informasi yang diperlukan di setiap halaman website. Home Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Jika halaman isi website anda sangat banyak dan bervariasi, usahakan mengklasifikasikannya menjadi beberapa halaman induk. Pada halaman index, anda dapat menampilkan hyperlink ke tiap-tiap halaman induk klasifikasi. 2. Membuat Sketsa Tampilan Website Setelah selesai membuat rancangan organisasi halaman website dalam bentuk diagram pohon, kini anda dapat membuat sketsa tampilan website yang anda inginkan. Biasanya tampilan setiap halaman website memiliki kemiripan. Khususnya pada website berita, sebaiknya setiap halaman memiliki keseragaman sebab perubahan tampilan yang mencolok dari setiap halaman website yang menyajikan informasi utnuk pengunjung, akan memberatkan pekerjaan desainer dan juga membingungkan pengunjung.
Sketsa web Anda bisa saja langsung berkreasi dengan computer untuk membuat tampilan website tanpa bantuan sketsa diatas kertas sebelumnya tetapi dengan bantuan sketsa, pekerjaan mendesain website akan lebih terarah. Sketsa yang dimaksud tidak perlu mendtail, cukup dengan membuat tampilan kasar dari sebuah website. Tampilan tersebut harus mencakup tata letak, jenis font, kolom-kolom, navigasi dan warna dasar dari tampilan website. Untuk pekerjaan detilnya baru dimulai ketika anda mendesain di computer. Satu hal yang penting untuk anda ingat. Website yang menyajikan informasi harus memiliki kemudahan navigasi, tidak terlalu ramai dengan permainan grafis dan warna, tetapi bukan berarti mengabaikan aspek keindahan dan estetika. 3. Membuat Storyboard Website Setelah sketsa tampilan portal anda selesaikan, kini anda dapat membuat gambaran bagaimana perubahan tampilan website pada setiap halamannya. Storyboard sebenarnya adalah penggabungan diagram pohon dan sketsa tampilan website. Storyboard menjadi penting jika dalam pembuatan website melibatkan desainer lain dalam satu tim, tetapi jika website hanya dikerjakan seorang diri, maka pembuatan story board dapat diabaikan. Jika sebuah proyek pembuatan website dibatasi tenggat atau deadline yang ketat, maka biasanya pembuatan web melibatkan beberapa desainer sekaligus. Pada kondisi ini, bantuan storyboard sangat diperlukan guna memperjelas pekerjaan masing-maisng desainer yang tergabung dalam tim. Selanjutnya tetap harus dilakukan sinkronisasi oleh satu desainer web agar hasil desain iap halaman website tetap seragam.
Bab II Memulai kerja di Firework Macromedia Fireworks 8 adalah sebuah aplikasi computer yang ditujukan untuk mendesain grafis yang digunakan di lingkungan web. Anda bisa membuat dan memodifikasi image bitmap dan vector sekaligus, membuat efek web seperti rollover dan pop-up menu, crop dan optimisasi gambar untuk mengurangi ukuran file. Aplikasi ini merupakan sebuah inovasi dalam menghadapi berbagai permasalahan yang menyangkut design grafis dan web. Ketika anda membuka sebuah dokumen di Firework, akan terlihat lingkungan kerja yang terdiri dari panel Tools, Property Inspector, Menu dan panel-panel lainnya. Panel Tool, berada disisi kiri, meliputi beberapa kategori, bitmap, vector, dan web tool. Property inspector tampil dibawah dokumen dan memunculkan property dari dokumen yang aktif, ketika anda membuat atau menyorot bagian lain, property ini akan menampilkan property dari dokumen yang dimaksud. Panel-panel lainnya muncul dalam kategori – kategori yang tersusun di sisi kanan layar.
Menggunakan Panel Tool Panel tool dibagi dalam enam kategori : Select, Bitmap, Vector, Web, Colors, dan View. Panel Tool Tentang format bitmap dan vector Komputer dapat menampilkan suatu objek dalam vector atau bitmap. Bitmap terdiri dari kumpulan titik yang disebut dengan pixel, tersusun dalam suatu grid. Ketika anda mengedit gambar bitmap, anda memodifikasi pixel. Bitmap sangat bergantung pada resolusi gambar, artinya gambar tersebut harus menyatu pada grid atau ukuran tertentu. Membesarkan suatu gambar bitmap berarti memecah gambar tersebut dalam satuan resolusi yang lebih besar, hal ini seringkali membuat gambar menjadi terlihat pecah. Vektor terdiri dari garis dan kurva, yang terdiri dari informasi warna dan posisi. Ketika anda mengedit suatu gambar vector, berarti anda memodifikasi informasi dari kurva dan garis dari gambar itu. Gambar vector tidak bergantung pada resolusi, yang berarti anda dapat memindahkan, memperkecil, memperbesar, atau mengubah warna, seperti yang terlihat pada layar anda. Tanpa harus mengorbankan kualitas dari gambar tersebut. Anda dapat membandingkan format keduanya dalam Firework untuk melihat perbedaannya.
Mengenal lingkungan kerja di Firework Sebuah segitiga kecil di bagian bawah panel Tool menandakan bagian itu terdapat grup. Sebagai contoh Tool Rectangle adalah bagian dari grup basic shape, yang terdiri dari Rounded Rectangle, Ellipse, dan Polygon. Untuk memilih tool alternative dari sebuah grup : Klik ikon tool dan tahan, sebuah pop-up menu akan tampil beserta penjelasan, dan shortcut key-nya. Tool yang sedang dipakai akan diberi tanda check mark. Geser pointer pada tool yang anda inginkan lalu lepaskan, maka akan terpilih tool yang anda inginkan tadi.
Menggunakan Property inspector Property inspector mengijinkan anda untuk mengedit properti dari tool, dokumen atau seleksi dari objek yang sedang terpilih/aktif. Secara default, window property akan muncul pada bagian bawah dari layar kerja.
Menggunakan Panel Panel membantu anda untuk mengedit aspek-aspek dari objek atau elemen suatu dokumen. Panel juga bisa membuat layer, symbol dan lain-lain. Setiap panel bisa dipindahkan / draggable, sehingga anda dapat membuat grup dari panel dalam susunan yang anda inginkan. Beberapa panel secara default tidak ditampilkan, tapi dapat ditampilkan jika anda inginkan. Beberapa panel juga tidak dikelompokan, tapi anda juga bisa membuat kelompok sesuai yang diinginkan. Ketika anda membuat dari suatu panel menjadi satu, nama grup tersebut akan tampil dalam title bar. Bahkan anda dapat memberi nama dari grup panel yang baru saja anda buat. • •
Panel Optimize memberikan control terhadap ukuran file, jenis file, bekerja dengan color palette dari suatu file atau potongan / slice yang akan dieksport. Panel Layers menghimpun sebuah struktur dokumen dan berisi pilihan untuk membuat, menghapus dan manipulasi suatu layer • Panel Frames berisi pilihan untuk membuat animasi • Panel History berisi daftar perintah yang terakhir anda kerjakan, sehingga anda dapat dengan mudah untuk undo dan redo. • Panel Shapes berisi Auto Shapes yang tidak ditampilkan dalam panel Tools. • Panel Styles berisi kombinasi dari suatu perintah sehingga objek yang sedang aktif dapat mengikuti styles yang dipilih • Panel Library berisi symbol graphic, symbol tombol / button, symbol animasi. Anda dapat dengan mudah men-drag instances dari symbolsimbol ini kedalam dokumen anda. Anda dapat membuat perubahan yang mendasar dari simbolsimbol, hanya dengan memodifikasinya • Panel URL berisi kumpulan URL yang berasal dari dokumen yang sedang anda kerjakan. • Panel Color Mixer (Window > Color Mixer) mengijinkan anda untuk membuat kombinasi warna baru dalam palette atau untuk diterapkan dalam dokumen anda. • Panel Swatches (Window > Swatches) mengatur warna palette dari dokumen aktif • Panel Info (Window > Info) menyediakan informasi tentang dimensi dari objek terpilih dan
• • • • • •
juga koordinat dari pointer mouse yang sedang anda gerakan diatas kanvas. Panel Behaviors (Window > Behaviors) mengatur behavior, dimana dapat menentukan hotspot dan potongan tertentu Panel Find (Window > Find) mengijinkan anda untuk mencari dan mengganti dari suatu elemen dokumen seperti teks, URL, Font dan juga warna dalam suatu atau kumpulan dari dokumen. Panel Align (Window > Align) berisi perintah untuk pengaturan aligning dan distributing objek dalam kanvas. Panel Auto Shape Properties (Window > Auto Shape Properties)berisikan perintah unutk mengubah / mengeset property dari Auto Shapes. Panel Image Editing (Window > Image Editing) menyatukan fungsifungsi yang sering digunakan dalam photo editing Panel Special Characters (Window > Special Character) digunakan untuk memasukan special karakter langsung dari dalam firework, daripada harus copy dan paste dari sumber lain.
Secara default, panel akan terletak disisi kanan dari lingkungan kerja anda. Beberapa panel akan terbuka namun beberapa panel lainnya akan dalam kondisi tertutup, untuk membukanya anda cukup mengklik bagian nama dari panel yang anda tuju. Tentang tombol Quick Export Tombol ini dapat memudahkan adna mengeksport dokumen yang anda kerjakan dalam Firework kedalam format lainnya seperti Dreamweaver, Flash, Director dan Freehand. Namun tak hanya itu, anda juga dapat mengekpor ke aplikasi Adobe Photoshop, Golive, atau hanya sekedar melihat hasil tampilannya pada browser favorit anda.
menekan tombol ini
Tombol navigasi Anda dapat mengatur pembesaran dan pengecilan dari suatu dokumen hanya dengan
Ketika dokumen anda di maximized, anda dapat dengan mudah berpindah dari satu dokumen ke dokumen lainnya dalam rangkaian tab diatas dokumen yang sedang aktif.
Tentang format file gambar Anda dapat mengerjakan suatu dokumen dalam beberapa format sekaligus, sebagai contoh mulailah dengan PNG, lalu simpan sebagai JPG atau GIF. Anda juga dapat membuat file HTML yang terdiri dari kode-kode Javascript. Anda juga dapat menyimpan untuk dibuka dalam aplikasi lainnya seperti Flash, Photoshop atau program lainnya. Format-format gambar yang umum digunakan dalam Firework: • PNG, Portable Network Graphic, adalah format file yang digunakan dalam Firework, mendukung format warna 32 bit, dapat berisi transparansi, atau channel alpha. • GIF, Graphic Interchange Format, adalah format file yang umum digunakan dalam web, bisa memiliki area transparent dan bisa memuat animasi. Format GIF hanya memiliki 256 warna. • JPEG, Joint Photographic Expert Group, adalah format gambar yang diperuntukan untuk fotografi atau gambar beresolusi tinggi. Format ini baik untuk digunakan untuk kamera digital, scanner, gradasi atau gambar lain yang membutuhkan lebih dari 256 warna.
