Jika pada detik ini Anda mulai membuat suatu alamat e-mail atau menentukan nama domain untuk website, maka bersiaplah untuk melakukan suatu pekerjaan yang menyita waktu cukup lama. Joko Nurjadi HAL INI DISEBABKAN Anda harus menentukan nama domain dan alamat e-mail yang unik, di antara jutaan pengguna Internet lainnya. Karena itu, menentukan nama yang umum tetapi unik sebagai nama domain atau alamat e-mail adalah pekerjaan yang memerlukan perjuangan.
Bagi mereka yang cepat menyerah, akhirnya membuat alamat e-mail yang nyentrik, misalnya p4k_r4d3n (maksudnya Pak Raden), joko_2007_10_30 (maksudnya si Joko membuat e-mail pada jam 10:30 tahun 2007) yang akhirnya membuat mereka kerepotan menyebutkan alamat e-mail sendiri. Demikian juga untuk nama domain, terutama untuk yang berakhiran .com, di mana sudah umum diketahui semakin singkat dan semakin mudah diingat sebuah nama domain, maka semakin susah didapatkan saat ini.
Hal tersebut menunjukkan sedemikian menjamurnya website sebagai “rumah virtual” sebuah perusahaan atau individu. Sebuah nama domain pada prinsipnya disediakan untuk sebuah website, walau tidak semua nama domain telah memiliki website. Website kadang kala mirip dengan seorang bayi, Anda telah mempersiapkan nama bayi itu sebelum bayi itu sendiri lahir.
Yang akan kita bahas pada artikel ini, adalah bagaimana membuat “bayi” (baca: website) tersebut tumbuh menjadi website profesional dan berkelas. Hal ini jelas dibutuhkan karena website Anda harus bersaing dengan jutaan website lainnya.
Panduan 1: Logo
Baik website Anda merupakan website perusahaan, institusi, yayasan, klub, individu, dan lain sebagainya, tentunya memiliki satu tujuan. Sebuah logo yang baik akan menimbulkan brand
image yang tidak mudah dilupakan.
Sebuah logo tidak harus rumit dan indah, yang lebih terutama adalah mengandung konsep, mudah diingat, dan khas.
Ambil contoh logo Coca-Cola, yang memiliki bentuk tulisan khas, atau lambang M pada McDonald’s yang nampak sangat bersahabat.
Tapi, bukankah karena mereka telah terkenal, maka logo mereka dikenal di mana-mana? Mungkin demikian pikir Anda, dengan kata lain memang jika Anda bekerja tiga hari tiga malam untuk menciptakan sebuah logo dengan konsep yang matang dan sangat berciri khas, tidak menjamin Anda akan terkenal 10 tahun mendatang.
Sebaliknya sebuah logo yang awalnya biasa-biasa saja, masih memiliki kemungkinan akan terkenal dan menjadi luar biasa saat produknya dikenal di mana-mana. Tetapi, jelas lebih baik Anda harus mempersiapkan segala sesuatunya dengan baik, termasuk di dalamnya adalah mempersiapkan logo dengan pertimbangan matang, sehingga di luar hal-hal lainnya, logo itu sendiri telah memiliki nilai lebih.
Tools yang dapat Anda gunakan dalam membuat logo adalah software editor gambar berbasis vektor. Kelebihan gambar berbasis vektor adalah dalam di-scale (diperbesar maupun diperkecil) tanpa mengalami pengurangan kualitas. Hal ini berbeda dengan gambar berbasis bitmap, yang terdiri dari susunan pixel, jika gambar bitmap diperbesar maupun diperkecil, akan terjadi penurunan kualitas.
Masing-masing gambar berbasis vektor maupun berbasis bitmap memiliki fungsinya sendiri, gambar berbasis vektor digunakan untuk membuat bentuk-bentuk seperti garis, lengkung, kotak, lingkaran, poligon dan bentuk-bentuk lainnya yang secara matematis dapat dipetakan pada layar.
Gambar bitmap digunakan untuk gambar yang lebih rumit, menggunakan informasi warna dan bayangan yang luas. Hal ini tidak berarti gambar vektor tidak dapat digunakan untuk gambar yang rumit, rata-rata software editor gambar berbasis vektor yang popular mampu memanipulasi gambar yang rumit, tetapi semakin kompleks gambar tersebut maka akan semakin tinggi resource yang dibutuhkan oleh komputer Anda.
Software editor gambar berbasis vektor yang popular adalah Adobe Illustrator, CorelDRAW, dan lain-lain. Sedangkan software editor gambar berbasis bitmap yang sangat popular adalah Adobe Photoshop. Kembali pada pembuatan logo, dengan alasan-alasan di atas sebaiknya Anda menggunakan software editor gambar berbasis vektor untuk menciptakan logo Anda.
Panduan 2: Layout
Segalanya dimulai dari halaman pertama, karena itu sebaiknya Anda membuat dahulu gambar desain layout halaman awal (front page) dengan menggunakan software editor gambar berbasis bitmap seperti Adobe Photoshop.
Mengapa bitmap? Karena elemen-elemen website Anda tidak akan mengalami perubahan skala yang signi.
Sebuah website dapat saja diciptakan dengan cara demikian, tetapi Anda akan kekurangan nilai visualisasinya jika langsung menerapkan kode-kode program tanpa layout. Anda akan mengalami kesulitan membuat bentuk-bentuk melengkung dan bentuk artistik lainnya.
Terlebih lagi, dengan membuat layout akan memudahkan Anda membayangkan website secara keseluruhan, karena umumnya halaman-halaman website hanya memiliki perbedaan pada content, sedangkan menu dan table-table utamanya tetap berada pada kerangka yang tetap. Jika Anda seorang developer profesional yang mengerjakan website untuk pihak client, ada baiknya menunjukkan layout sebelum masuk ke dalam tahap berikutnya.
Layout yang masih berupa gambar akan lebih mudah untuk dimodi. kasi dibandingkan telah berupa HTML dan kode program, apalagi jika telah menginjak pada tahap pemrograman database, saat itu tentunya masalah design dan layout sudah kadaluarsa untuk dibahas.
Panduan 3: Slice
Setelah gambar layout memenuhi keinginan Anda, langkah berikutnya adalah memotong (slice) gambar tersebut sehingga menghasilkan file HTML dan image yang menyertainya, hal ini sangat memudahkan pekerjaan programer web selanjutnya. Tools untuk melakukan slicing dapat menggunakan Adobe ImageReady, di mana link-nya telah terintegrasi pada menu Adobe Photoshop. Dimulai dari Adobe ImageReady CS2, ImageReady telah memiliki opsi untuk menghasilkan file CSS (Cascading Style Sheets).
Tools lain yang cukup popular adalah Adobe Fireworks, yang didesain agar mudah diintegrasikan dengan produk lainnya seperti Adobe Dreamweaver dan Adobe Flash (dulu merupakan produk Macromedia sebelum diakuisisi oleh Adobe).
Panduan 4: Editor
Setelah mendapatkan . le HTML atau CSS, diperlukan langkah editing selanjutnya yang telah menyangkut proses pengodean. Dalam hal ini Anda membutuhkan sebuah text editor.
Pada dasarnya text editor yang mampu menampilkan dan menyimpan file teks merupakan syarat utama untuk melakukan pengkodean. Tetapi untuk pengkodean yang cukup kompleks, Anda mungkin akan lebih nyaman jika menggunakan text editor yang telah dilengkapi fitur-fitur khusus yang diperuntukkan untuk web development.
Salah satu contohnya adalah Adobe Dreamweaver, yang mendukung CSS, JavaScript, dan berbagai bahasa scripting, dalam hal ini text editor telah berfungsi sebagai IDE (Integrated Development Environment) dalam pemrograman web, fitur seperti WYSIWYG bahkan membuat orang yang tidak memiliki dasar pemrograman mampu membuat website sederhana. Mungkin pada bahasa pemrograman lain Anda pernah menemukan dimana satu file mengandung dua bahasa pemrograman, seperti C++ yang dapat menuliskan bahasa Assembly secara inline assembler.
Pada pemrograman web, hal tersebut menjadi lebih unik lagi karena di dalam satu . le dapat terdiri berbagai macam bahasa pemrograman/script. Tidak aneh jika sebuah file ASP (Active Server Pages) atau PHP mengandung bahasa ASP/PHP itu sendiri, HTML, CSS, JavaScript, ataupun VBScript.
Karena itu editor yang baik akan mampu menampilkan dan membedakan berbagai bahasa tersebut dengan perbedaan warna/highlight, yang akan mempermudah developer untuk melakukan pengodean.
Panduan 5: Animasi Flash
Sejak diperkenalkan pada tahun 1996, teknologi Flash telah menjadi metode yang popular untuk keperluan animasi dan menghasilkan web yang interaktif.
Sebelum Flash dikenal, kebanyakan website menggunakan GIF animasi untuk menghasilkan animasi, yang pada dasarnya merupakana sekumpulan gambar diam yang ditampilkan frame demi frame.
Flash sendiri tidak selalu menggantikan keberadaan GIF animasi, tetapi tentu saja Flash memiliki banyak keunggulan. Contohnya Flash mampu berinteraksi dengan pengguna seperti menghasilkan opsi, musik, bahkan game.
Flash dapat digunakan untuk keperluan pada website, misalnya sebagai berikut:
- Button.
Dengan Flash, Anda dapat memberikan efek animasi pada sebuah tombol saat melalui event tertentu, sepertimouseover dan click.
- Banner.
Untuk banner sederhana Anda masih dapat memanfaatkan GIF animasi, tetapi jika diperlukan banner yang lebih interaktif, tentunya Flash akan lebih mampu mengakomodasi kebutuhan tersebut.
- Video/Movie.
Saat ini telah banyak dikenal file dengan format *.. v, yang tidak lain merupakan file Flash Video yang digunakan daridalam file *.swf.
- Mini Site.
Kemampuan Flash bahkan dapat digunakan untuk menciptakan sebuah website secara keseluruhan, membentuk sebuah website mini dari Flash.
Action Script pada Flash membuat Flash tidak melulu sebagai tools grafik dan animasi, tetapi juga sebagai tools pemrograman. Terkadang dengan melakukan scripting akan lebih efisien untuk menghasilkan animasi dibandingkan dengan mengatur animasi tersebut secara manual.
Panduan 6: Clien Side Coding
Berbicara tentang bahasa pemrograman website, kita membaginya dua kategori, yaitu Client Side Coding dan Server Side Coding. Sesuai dengan namanya, Client Side berjalan pada sisi client/ browser sehingga tidak membebani server, bahasa/script yang digunakan adalah CSS, HTML/XHTML, JavaScript, Flash, Silverlight, dan lain sebagainya.
Jika bekerja dengan Client Side Coding, maka Anda masih tidak lepas dari tahap layout dan design.
Sebelum CSS dikenal, atau lebih tepatnya saat Anda hanya mengenal HTML, Anda memberikan warna, layout, maupun jenis font dengan murni menggunakan HTML. Keberadaan CSS adalah untuk menggantikan HTML dalam mende. Nisikan layout atau presentasi dokumen.
CSS dengan efisien dapat mende. nisikan presentasi dokumen (bahkan dalam file terpisah berekstensi *.css yang dipanggil dari HTML), sehingga HTML khusus digunakan untuk menampilkan isi dokumen.
JavaScript mungkin merupakan yang tersulit dalam kumpulan Client Side Coding, karena struktur dan sintaksnya yang menyerupai bahasa C atau Java. JavaScript sering digunakan di dalam website untuk proses validasi form/input, melakukan perubahan image/animasi saat terjadi event tertentu, membuka window baru dengan pengaturan ukuran, posisi, dan tampilan.
Karena berjalan pada sisi client, JavaScript berinteraksi melakukan respon dengan pengguna dengan cepat. Pemrograman Ajax bahkan menggali lebih dalam lagi kemampuan JavaScript.
Panduan 7: Server Side Coding
Server Side Coding mencakup bahasa pemrograman/teknologi seperti ASP/ASP.NET, PHP, CGI/Perl, Java, Phyton, Ruby, Cold- Fusion, Lotus Domino, dan lain-lain.
Masuk ke dalam Server Side Coding, berarti Anda telah meninggalkan tahap layout dan design sebuah website, masuk ke dalam tahap membangun fungsi website dan sistem back end. Ikuti kaidah-kaidah pemrograman seperti pemrograman modular/ OOP (Object Oriented Programming) yang didukung oleh bahasa pemrograman yang digunakan, karena akan mempermudah proses pemeliharaan dan pengembangan lebih lanjut.
Suatu terobosan dalam pemrograman Server Side Coding yang signi.
Cara development website pada .NET menawarkan apa yang biasa kita lakukan saat mengembangkan aplikasi Windows, dengan pengaturan controls seperti button atau label pada halaman web, membangun website dengan paradigma eventdriven GUI (Graphics User Interface).
Kuncinya dalam melakukan Server Side Coding (dan pemrograman pada umumnya) adalah memanfaatkan sebaik mungkin apa yang dapat ditawarkan oleh bahasa pemrograman/ teknologi yang Anda gunakan.
Ingat bahwa pengguna atau konsumen Anda hanya perlu merasa nyaman dan ingat untuk mengunjungi website Anda kembali.
Panduan 8: Database
Database merupakan satu topik besar tersendiri yang tidak akan pernah habis dikupas. Walaupun tidak semua website harus memiliki database, tetapi untuk membuat sebuah website menjadi dinamis, database merupakan unsur yang sangat penting. Untuk melakukan pengaturan isi database dari sisi administra- tor web, umumnya developer membuat sebuah website Content Management System, yang memungkinkan administrator melakukan pemeliharaan database.
Sebagaimana bahasa pemrograman, database juga memiliki banyak alternatif vendor dengan kelebihan dan kekurangannya masing-masing.
Pada umumnya, antara Server Side Coding dan database memiliki hubungan erat, misalnya ASP.NET lazimnya menggunakan database Microsoft SQL Server, sedangkan PHP umumnya menggunakan database MySQL. Hal ini tentunya karena tersedianya library dan dukungan yang saling menunjang antara keduanya.
Panduan 9: Lain-lain
Setelah melewati panduan-panduan sebelumnya, tentunya kini Anda telah memiliki sebuah website yang spesifik, di sinilah Anda menyesuaikan website Anda sesuai dengan kebutuhan lebih lanjut.
Misalnya jika website Anda merupakan sebuah website ecommerce yang mengizinkan pembayaran melalui kartu kredit, maka sisi sekuritas dan . tur payment gateway akan menjadi tugas selanjutnya.
Atau jika website Anda membutuhkan lebih banyak iklan, dapat memanfaatkan program seperti Google AdSense. Software atau tools lainnya juga dapat Anda integrasikan sesuai kebutuhan website Anda, misalnya software CMS, forum, Rich Text Editor, dan lain sebagainya.
Penutup
Membuat sebuah website profesional memang memerlukan berbagai disiplin ilmu seperti bahasa pemrograman dan desain gra. k/web, bahkan juga dapat melibatkan pengetahuan arsitektur informasi, copywriting, security, search engine optimazition dan project management.
Walaupun terlihat cukup kompleks, tetapi hal tersebutlah yang membuat sebuah website yang mengimplementasikan hal tersebut mampu memiliki nilai tambah dibandingkan sebuah website yang tidak memiliki dasar konsep yang kuat.
VARIASI WEBSITE
Skill membuat website dapat dianalogikan seperti keahlian koki dalam memasak, yang mampu menghasilkan berbagai jenis masakan dengan cita rasa yang lezat.
Seperti menu-menu masakan yang bervariasi, masing-masing website tampil dengan fungsi dan keunikannya sendiri. Beberapa variasi website dapat digolongkan sebagai berikut:
1. Website Jaringan Sosial.
Dikenal juga dengan istilah social networking, website jaringan sosial fokus pada jaringan komunitas dari para pengguna website yang saling berbagi pada bidang atau kegiatan tertentu. Interaksi antar pengguna dapat diciptakan melalui chat, pesan, e-mail, video, grup diskusi, dan lain-lain.
Contoh website jaringan sosial yang popular di Asia adalah Friendster, sehingga menanyakan Friendster seseorang hampir sama lazimnya dengan menanyakan e-mail atau ID messenger-nya.
2. Website Perusahaan.
Dimulai sejak era dotcom, kurang lengkap rasanya jika sebuah perusahaan belum memiliki website, atau setidaknya domain.
Bahkan ada yang beranggapan jika sebuah e-mail berisi lowongan pekerjaan dimana contact person-nya menggunakan e-mail gratisan (tidak menggunakan domain sendiri), maka kemungkinan ada udang di balik e-mail.
Sebuah website perusahaan umumnya memiliki menu seperti misi dan visi, sejarah, news, link, customer/client, dan seterusnya.
3. Portal.
Seperti namanya, sebuah web portal merupakan gerbang masuk untuk mendapatkan sekumpulan informasi. Sebuah search engine merupakan salah satu ciri khas standar web portal.
Sebuah web portal dapat dikhususkan mengambil informasi sebatas domain tertentu, regional, ataupun seluruh dunia. Umumnya kategori yang lebih rinci yang dapat mengarahkan pengguna untuk mendapatkan informasi yang lebih spesifik. Masih banyak lagi variasi website lainnya, dari yang sederhana hingga kompleks. Anda selalu dapat mengawali sebuah website dari hal yang sederhana, tetapi tetap memiliki perencanaan dan pengerjaan yang matang.
Dengan memiliki dasar panduan membuat website yang baik, membuat berbagai jenis website diatas akan relatif lebih mudah bagi Anda. Apalagi didukung dengan semangat terus mempelajari teknologi dan perkembangannya, yang akan relatif mudah diserap jika Anda telah memiliki pemahaman fundamental yang baik.
LEBIH LANJUT
