Prinsip Pembuatan Website

Transkripsi

1 Prinsip Pembuatan Website I Dalam dunia maya (internet) kita mengenal beberapa istilah tentang : web, www, website, web pages, dan homepage. www Web Website Web Pages Homepage (Word Wide Web) : merupakan kumpulan web server dari seluruh dunia yang berfungsi menyediakan data dan informasi untuk digunakan bersama-sama. adalah adalah fasilitas hypertext yang mampu menampilkan data berupa teks, gambar, suara, animasi, dan multimedia lainnya, di mana di antara data-data tersebut saling terkait dan berhubungan satu dengan yang lainnya. Untuk memudahkan dalam membaca data tersebut diperlukan sebuah web browser seperti Internet Explorer, Netscape, Opera, maupun Mozilla Firefox (situs web) : merupakan tempat penyimpanan data dan informasi berdasarkan topik tertentu. Diibaratkan web site ini seperti buku yang berisi topik tertentu. (halaman web) : merupakan sebuah halaman khusus dari situs web tertentu. Diibaratkan halaman web ini seperti halaman khusus dari buku. merupakan sampul halaman yang berisi daftar isi atau menu dari sebuah situs web. Terdapat beberapa point penting yang perlu diperhatikan sebelum kita akan membuat sebuah website yang profesional. 1. Homepage (halaman utama) situs harus dapat diakses maksimal 8 detik atau dapat diakses melalui koneksi jaringan internet minimal 28,8 kbps. Apabila proses koneksi membutuhkan waktu yang sangat lama, hal ini akan berpotensi hilangnya customer (pengunjung) yang tidak betah menunggu terlalu lama. Akhirnya situs tidak akan dikunjungi olah para calon customer. 2. Pilihlah warna latar belakang (background) yang sesuai, jangan menggunakan warna yang mempengaruhi teks untuk dibaca. Warna situs menjadi sebuah ekspresi hati Kita. Warna orange melambangkan keceriaan sedangkan warna ungu atau hitam melambangkan kesuraman. Untuk itu pilihlah warna yang sesuai untuk situs Kita berdasarkan isi yang terkandung dalam situs tersebut. 3. Gunakan animasi seperlunya, jangan terlalu berlebihan karena dapat mempengaruhi konsentrasi pengguna ketika sedang membaca informasi. Selain itu, animasi juga dapat menghambat akses ke halaman situs. Sebuah animasi yang bagus bukan menjadi jaminan bahwa situs menarik perhatian pengunjung. 4. Halaman Utama situs harus lebih spesifik agar para pengunjung dapat mengetahui produk yang ditawarkan. Sebagai contoh, jika situs yang akan kita buat merupakan sebuah lembaga konsultasi maka sebaiknya jasa-jasa konsultasi yang ditawarkan ditampilkan di halaman utama. 1

2 Jangan sampai pengunjung merasa bingung dengan keberadaan situs yang tidak jelas produk yang ditawarkan. 5. Hindari pemasangan banner secara berlebih di bagian atas website Kita. Batasi jumlah banner yang akan ditayangkan, maksimal 2 dan idealnya cukup 1 banner. Semakin banyak jumlah banner, semakin lama proses akses dan akan sangat mengganggu konsentrasi pengguna ketika mengunjungi situs Kita. 6. Periksa ejaan yang salah dan pastikan gambar dan link terhubung dengan baik sebelum ditampilkan secara on-line. 7. Kesalahan dalam mengetikkan alamat url mengakibatkan halaman tersebut akan ERROR. Jika sebuah situs terdapat salah satu atau beberapa halaman yang error menjadikan situs tersebut nampak tidak profesional. 8. Lengkapilah website Kita dengan tombol navigasi yang mudah dan tersusun dengan rapi pada bagian atas, bawah, kiri,maupun kanan. Jika menggunakan tombol dalam bentuk gambar, perlu diingat bahwa kemungkinan proses akses lebih lama. Mengapa? Karena gambar memiliki ukuran yang cukup besar, dan seperti kita ketahui. Sebuah halaman situs maksimal berukuran tidak lebih dari 100kb. 9. Perhitungkan jumlah klik yang dibutuhkan untuk pindah dari halaman satu ke lainnya. Jika terlalu banyak klik akan sangat membosankan bagi pengunjung. Kita bisa menerapkan sistem navigasi yang lebih nyaman dengan menyertakan logo pada setiap halamannya. ASPEK ASPEK DALAM PERANCANGAN WEBSITE DAPAT DIGUNAKAN (USABILITY) Usabilitas merupakan hal yang sangat penting dalam merancang web (web design). Memang sangat baik jika memiliki sebuah website dinamis yang nampak profesional dan bagus, namun jika perlu waktu yang sangat lama untuk mendownload sebuah artikal atau penggunaan navigasinya sangat rumit maka tidak heran jika pengguna akan hengkang dari website Kita dan tidak akan kembali lagi. Perlu diketahui, umumnya pengguna (user) ingin mendapatkan informasi secara cepat meskipun tampilan website-nya biasa saja. Jika terlalu lama saat mencari informasi maka para pengguna akan langsung menutup halaman web tersebut. Ingat, jangan mengorbankan aspek usabilitas dalam mendesain website. NAVIGASI (NAVIGATION) Navigasi juga menjadi hal yang sangat penting dalam sebuah website yang berfungsi untuk membantu pengguna (user) dalam menjelajah website kita untuk mencari informasi yang diinginkan secara mudah. Navigasi yang bagus mencerminkan struktur website yang sangat baik. KONSEP PENULISAN (WRITING CONCEPT) Teknik penulisan dalam web berbeda dengan penulisan untuk publikasi (cetak). Waktu merupakan hal sangat penting bagi mereka yang menggunakan Internet, sehingga para pengguna Internet tidak akan membuang waktunya hanya untuk membaca teks yang sangat banyak sekali. Riset membuktikan bahwa para pengguna cenderung meneliti teks dalam layar monitor. Selain itu, lebih cepat membaca di layar monitor dibandingkan membaca di atas kertas. 2

3 KESEDERHANAAN (SIMPLICITY) Kesederhanaan merupakan hal penting dalam membuat sebuah web profesional. Sederhana di sini bukan dalam arti tampilan sebuah situs, namun lebih mengarah ke teknik penulisannya. MUDAH DIAKSES (ACCESSIBILITY) Suatu hal yang mudah diakses ke semua orang dengan mengabaikan browser, paltform, sistem operasi, tersambung atau putus merupakan hal yang sangat utama untuk mempertimbangkan ketika merancang sebuah website. Mudah digunakan = Pengunjung akan kembali. Sulit digunakan = Pengunjung akan kapok. KELEBIHAN DAN MANFAAT WEBSITE Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi, sama pentingnya dengan alamat perusahaan. Website dapat dijadikan guide bagi pelanggan untuk mengetahui lebih jauh tentang profil sebuah institusi secara online. Ada beberapa kelebihan dan manfaat website sehingga banyak orang membutuhkan kehadirannya, diantaranya: - Memiliki alamat secara online - Jangkauan tanpa batas sehingga dapat diakses oleh pengguna di seluruh dunia dalam waktu yang tak terbatas (24jam sehari tanpa henti). - Dapat berfungsi sebagai identitas pribadi/perusahaan tentang profil diri agar dapat diketahui oleh para customer dalam menjalankan bisnis sehingga komunikasi dapat berjalan dengan mulus. - Situs personal dapat berfungsi sebagai juru bicara untuk menuangkan ide, gagasan, kritik, saran, berbagi ilmu, dan suara hati lainnya yang ingin dituangkan ke dalam situs melalui tulisan. Pada akhirnya menjadi image branding terhadap orang yang bersangkutan. - Menjadi cermin pribadi maupun citra perusahaan apabila fitur yang disediakan cukup interaktif dan dinamis. KATEGORI WEB Website berdasarkan kategorinya dikelompokkan kedalam beberapa kelompok yaitu: - SITUS BISNIS DAN EKONOMI: Asosiasi & Organisasi, E-commerce dan Jasa, Finansial & Investasi, Bussines Center, dan lain-lain. - SITUS BERITA DAN MEDIA : Buku, Majalah, Media Online, Portal Berita, Radio, Surat Kabar, Tabloid, Televisi, dan lain-lain. - SITUS HIBURAN : Film, Games (Permainan), Humor, Musik, Ringtones, Selebritis - SITUS PRIBADI : Galeri Foto, Blog / Weblog, Website Pribadi, dll - SITUS INFORMASI : Bisnis dan Ekonomi, Informasi Kerja, Informasi Kota, Gaya Hidup, Jual Beli, Sains dan Teknologi, dan lain-lain. - SITUS KOMPUTER DAN INTERNET : Database, Desain Grafis, Hacking, Internet dan Web, Jaringan, Multimedia, Pemrograman, Perangkat Keras, Perangkat Lunak, Tutorial, dan lain-lain. - SITUS ORGANISASI :Bisnis, LSM, Politik, Profesional, Keagamaan, Sains dan Teknologi, Sosial, dan lain-lain. 3

4 - SITUS OLAH RAGA : Olah Raga Air, Baseball, Bela Diri, Basket, Bola Voli, Bowling, Bulu Tangkis, Catur, Golf, Otomotif, Sepak Bola, Skateboard, Tenis, Tinju, dan lain-lain. - SITUS KESEHATAN: Asosiasi, Fitness dan Spa, Medis, Pengobatan Alternatif, Rumah Sakit, dan lain-lain. - SITUS PEMERINTAH : Lembaga Pemerintah, Hukum, Kedutaan Asing, Kedutaan Indonesia, Politik, Kementerian, Militer, Organisasi,Perwakilan Kota, dan lain-lain - SITUS PENDIDIKAN : Anak-anak, Asosiasi Mahasiswa, Dakwah, Edukasi, Bahasa, Komputer, Kursus dan Pelatihan, Perguruan Tinggi, Sekolah Menengah, dan lain-lain - SITUS REFERENSI : Ensiklopedi, Kamus, Perpustakaan, Sejarah, Museum, Peta, dan Lain-lain - SITUS REGIONAL : Aceh, Bali, DKI Jakarta, Jawa, Kalimantan, Sulawesi, Sumatera, dan lainlain - SITUS REKREASI : Candi, Danau, Gunung, Kolam Renang, Laut, Bioskop, Games, dan lain-lain - SITUS SAINS DAN TEKNOLOGI : Riset, Penelitian, Teknologi Terpadu, Teknologi Tepat Guna, dan lain-lain - SITUS SENI DAN KERAJINAN : Barang Antik, Kerajinan, Kultur dan Tradisi, Museum dan Galeri, Sastra, Seni Peran (Acting), Seni Visual, Seni Desain, dan lain-lain - SITUS SOSIAL DAN BUDAYA : Agama, Anak-anak, Hobi, Keluarga, Komunitas, Lingkungan, dan lain-lain - SITUS WISATA : Agen Wisata, Aktivitas, Hotel, Informasi dan Tips, Jasa Transportasi, Restoran, Petunjuk Wisata, dan lain-lain 4

5 II Mengenal Program Pembuat Website Dream Weaver Dalam merancang sebuah website bisa saja kita hanya menggunakan program notepad, dengan menuliskan kode-kode HTML. Namun hasil dari penulisan kode-kode tersebut secara manual akan memakan waktu yang cukup lama belum lagi kalau ada kesalahan dalam penulisanya maka akan memakan waktu tersendiri di dalam mengoreksinya. Saat ini sudah banyak program-program yang ditawarkan untuk membuat sebuah website, kita bisa menggunakanya relative lebih mudah dibandingkan harus mengetikkan kode-kode HTML secara manual. Program profsional yang paling populer saat ini adalah Dream Weaver. Dengan program ini kita diberikan keluasaan dalam berkreasi dan diberikan kemudahan untuk mengintegrasikan dengan program lain seperti : Photoshop, Image Ready, Flash, dll. Sehingga hasil karya website yang kita bangun akan mempunyai tampilan visual yang lebih sempurna. A. Perancangan Website dengan program Dream weaver. 5

6 Dreamweaver MX adalah program yang sangat fleksibel, program ini mengijinkan kita untuk melihat kode dalam tampilan yang berbeda : Code View, Code dan Design View, dan Design View. Kita bisa berpindah antara tampilan ini dengan menggunakan tiga tombol icon yang terdapat diatas sebelah kiri monitor. Dalam Code view, Dreamweaver MX Menampilkan halaman web dalam bentuk format baris : HTML code. Jika kita sudah akrab dengan HTML, kita bisa mengedit halaman web ini dari yang ditampilkan. The Code dan Design View membagi layar dalam setengah tampilan, tampilan code HTML untuk halaman web dibagian atas, dan setengahnya lagi tampilan Design View yang bisa kita edit. Design view : Menampilkan halaman web secara visual, kita bisa mengedit dan menambahkan elemenelemen website secara langsung tanpa melihat dan menuliskan kode-kode HTML. Perangkat - perangkat A. Panels Design Kontrol panel CSS (Cascading Style Sheet) Styles, HTML Style Tags, dan sifat halaman web, dan menu. Application Panel ini digunakan untuk mengatur fungsi database yang ditempatkan dalam halaman web. 6

7 Code Panel ini mengijinkan kita untuk mengetahui kode dan mendeteksi kesalahan code. Answers Panel ini seperti menu help pada program-program lain. Files Dari semua panel yang ada dalam Dreamweaver MX, panel files merupakan panel yang paling penting dan banyak digunakan. Pada jendela ini kita bisa mengatur hubungan files ke situs kita atau halaman web, dan merupakan mekanisme utama untuk uploading dan downloading files ke web. 7

8 B. The Insert Bar Insert bar, terletak disebelah atas layar, berbeda dari panel. Insert bar berisi lebih banyak perangkat, dan memiliki beberapa pilihan untuk memasukkan dan manipulasi objek dan fungsi ke halaman web. Kita nantinya akan lebih banyak bekerja dengan perangkat perangkat yang terdapat di Insert Bar Common Fitur tab umum yang banyak digunakan dalam Dreamweaver MX 1. Hyperlink: merupakan perangkat untuk membuat link ke lokasi lain dari halaman web, file atau lokasi pada halaman yang sama. 2. Link: merupakan perangkat untuk membuat link 3. Named Anchor: merupakan perangkat untuk membuat link istimewa, perangkat ini akan membawa user ke bagian lain pada halaman yang sama. Klik nama tombol nama anchor untuk mempercepat membuat link untuk anchor. 4. Insert Table: merupakan perangkat untuk membuat sebuah tabel. Tabel bisa membantu ketika mendesain layout halaman. 5. Draw Layer: merupakan perangkat untuk membuat sebuah layer. Layer bisa membantu ketika mendesain layout halaman. Layer bukanlah tabel, tapi merupakan kotak yang bisa diisi teks, gambar, atau apa saja, dan bisa ditempatkan dimana saja dilayar. 6. Image: Kita bisa dengan mudah menempatkan gambar dalam halaman web dengan mengklik tombol ini. Ketika kita melakukannya, jendela baru akan muncul. Dari sini, kita bisa membrowser komputer kita untuk mencari gambar yang ingin dimasukkan ke dalam halaman web. 7. Image Placeholder: Ini merupakan pixel kosong yang bisa digunakan untuk berbagai hal, seperti membuat ruang antar objek, atau membuat garis dan kotak untuk layouts. 8. Fireworks HTML: Jika kita membuat halaman web memakai Macromedia Fireworks, kita akan bisa memasukkannya ke dalam halaman Dreamweaver MX dengan menggunakan tool ini. 9. Flash: Mengijinkan kita untuk memasukkan elemen flash dalam halaman web. 10. Rollover image: Suatu efek khusus pada gambar, ketika kursor mouse digerakkan pada gambar maka gambar akan berubah. 11. Navigation Bar: merupakan perangkat untuk mengendalikan bar, dan mengubah gambar untuk link ke halaman lain. 12. Horizontal Rule: Untuk membuat sebuah garis lurus 13. Date: perangkat untuk memasukkan tanggal ke halaman web, 14. Tabular Data: Memasukkan data ke dalam tabular 15. Comments: digunakan untuk membuat catatan kita, catatan ini tidak akan muncul di Website karena digunakan hanya sebagai catatan pengingat pribadi. 16. Tag Chooser: digunakan untuk memasukkan spesifik HTML tag. Biasanya digunakan oleh Web Disainer yang sudah mahir HTML. 8

9 Layout Fungsi dalam layout tab digunakan untuk membuat layout desain halaman. 1. Insert Table: digunakan untuk membuat layout desain halaman dengan tabel. 2. Draw Layer: merupakan kotak yang sifatnya bebas, kita bisa mengisinya dengan teks, gambar maupun animasi. Text Fungsi ini membantu dalam mengedit dan memformat teks. 1. Font Tag Editor: membuat font spesial untuk digunakan dalam Cascading Style Sheet,. 2. Bold: Menebalkan teks yang kita pilih 3. Italics: Memiringkan teks yang kita pilih. 4. Strong: Seperti Bold hanya digunakan dalam HTML yang berbeda. 5. Emphasis: Sama seperti Italic, hanya Emphasis digunakan untuk HTML tag yang berbeda (<em>). 6. Paragraph: menempatkan ruang antar blocks teks untuk membuat paragraph. 7. Block Quote: Pilih teks yang diinginkan, suatu teks akan diberi tkita kutip dari sumber lain, dan klik tombol ini untuk mengubah format ke block quote. 8. Preformatted Text: Teks akan terlihat monospace atau, fixewidth font.. 9. Heading 1: Memilih teks ke ukuran besar. 10. Heading 2: Memilih teks ke ukuran sedang. 11. Heading 3: Memilih teks ke ukuran kecil 12. Unordered List: Membuat daftar bulet 13. Ordered List: Membuat daftar angka 14. List Item: Mengijinkan kita untuk mengedit teks dari daftar item 15. Definition List: Format otomatis ke daftar untuk definisi 16. Definition Term: Format otomatis memasukkan definisi. 17. Definition Description: Otomatis format deskripsi 18. Abbreviation: Memasukkan dalam arti penuh 19. Acronym: Memasukkan nama panjang dari acronim 9

10 Frames Merupakan pilihan perangkat untuk membuat dan menyusun sebuah halaman. Melalui penyusunan frame ini kita akan mendapatkat sebuah halaman Website yang terbagi menjadi beberapa bagian. Bagian-bagian tersebut merupakan bagian halaman yang berdiri sendiri. Hal ini ditkitai dengan adanya scroll pada halaman yang kita buat. 1. Left Frame: Memasukkan frame pada sebelah kiri. 2. Right Frame: Memasukkan frame pada sebelah kanan. 3. Top Frame: Memasukkan frame di atas. 4. Bottom Frame: Memasukkan frame disebelah bawah. 5. Bottom and Nested Left Frame: Memasukkan frame utama dibawah, dan sebagian kecil dikiri. 6. Bottom and Nested Right Frame: Memasukkan frame utama dibawah, dan sebagian kecil dibawah. 7. Left and Nested Bottom Frame: Memasukkan frame utama disebelah kiri, dan sebagian frame dibawah. 8. Right and Nested Bottom Frame: Memasukkan frame disebelah kanan, dan sebagian frame dibawah. 9. Top and Bottom Frames: Memasukan fram diatas dan dibawah. 10. Left and Nested Top Frame: Memasukkan frame utama disebelah kiri dan sebagian diatas. 11. Right and Nested Top Frame: Memasukkan frame utama disebelah kanan, dan frame lainnya disebelah bawah. 12. Top and Nested Left Frame: Memasukkan frame utama diatas, dan frame lainnya disebelah kiri. 13. Top and Nested Right Frame: Memasukkan frame utama diatas, dan frame lainnya disebelah kanan. Forms Digunakan untuk membuat halaman Web lebih interaktif dengan tambahan form 1. Form: Membuat area form baru pada halaman web 2. Text Field: Membuat kotak teks bagi user untuk memasukkan data pada halaman web. 3. Hidden Field: Bidang yang tersembunyi untuk mengetahui informasi tentang pengunjung. Informasi akan dikembalikan oleh server ketika format disampaikan. 4. Textarea: Sama seperti teks field, tapi diijinkan lebih dari satu baris teks untuk dimasukkan. 10

11 5. Checkbox: Checkbox mengijinkan users untuk memilih pilihan dari list users. 6. Radio Button: radio button mengijinkan user untuk memilih satu pilihan dari daftar. 7. Radio Group: Memasukkan lebih dari satu radio button pada daftar. 8. List/Menu: Membuat menu panah bawah 9. Jump Menu: Membuat jump menu. jump menu membawa users ke lokasi yang berbeda tergantung apa yang dipilih dalam menu. 10. Image Field: Memasukkan image ke field 11. File Field: Membuat file dalam field yang akan upload. 12. Button: Digunakan untuk membuat tombol, setelah user selesai mengisis form pada halaman. 13. Label: Membuat label untuk field. 14. Fieldset: membuat tag untuk elemen group form. Characters Digunakan untuk membuat simbol umum dan karakter. 1. Line Break: Membuat ruang antar baris. 2. Non-breaking Space: Membuat ruang antar huruf dan kata. 3. Left Quote: Membuat tkita kutip kiri. 4. Right Quote: Membuat tkita kutip kanan. 5. Em Dash: Memasukkan dash panjang ke halaman. 6. Pound: Memasukkan simbol poundsterling. 7. Euro: Memasukkan simbol mata uang Euro. 8. Yen: Memasukkan simbol mata uang Yen Jepang. 9. Copyright: Memasukkan simbol copyright 10. Registered Trademark: Memasukkan simbol registered trademark. 11. Trademark: Memasukkan simbol trademark 12. Other Characters: Untuk memilih character simbol yang lain. B. PROPERTY INSPECTOR Property inspector merupakan perangkat yang digunakan untuk memeriksa dan mengedit elemen yang ada pada halaman web. (Elemen itu adalah object atau teks). Untuk menampilkan atau menyembunyikan Property inspector, pilih menu Window > Properties. Dengan Property inspector kita dapat membuat teks atau mengedit object didalam dokumen pada tampilan window secara cepat.(seperti contohnya : kita ingin merubah jenis fonts teks yang sudah kita buat dengan shadding teks lalu mengganti jenis font, atau pada object kita dapat merubah alamat URL atau link yang dituju). Tampilan Property inspector sangat bervariasi tergantung elemen yang dipilih. Untuk informasi properties yang spesifik, pilih elemen yang diinginkan pada dokumen window lalu klik icon Help pada pojok kanan atas Property inspector. 11