: Membuat Website yang berkualitas
Bab 8 : Membuat Website yang berkualitas
Pelajaran ini diberikan setelah peserta mengenal banyak tool dalam pembuatan website. Setelah mempelajari bab ini mahasiswa mampu untuk memilih rancangan yang baik berdasarkan pada berbagai pertimbangan yang diperlukan.
Kriteria sebuah qualitas website
Sangatlah disarankan bahwa dalam membuat website selalu mengikuti kriteria kualitas. Website dibuat bukanlah untuk dibaca sendiri tetapi untuk orang lain. Pembuat web sudah tahu isi yang dibuat. Tetapi pembaca belum. Untuk itu tampilan harus rapi dan tulisan harus mudah dimengerti.
Berikut ini adalah beberapa acuan yang bisa dipakai untuk pedoman.
Latarbelakang
Hindari penggunaan tampilan yang menyolok khususnya untuk web komersial. Penggunaan text berwarna yang sulit untuk dibaca dan pola latar belakang yang komplek sudah seharusnya ditinggalkan..
Halaman harus bersih, uncluttered, dan sangat mudah dibaca tanpa hurting mata. Jangan menggunakan latar belakan hitam. Ini sangat menyulitkan untuk dicetak dengan printer. White, off-white, pale, or an exceptionally light texture is okay as long as it NEVER detracts from the text and the images have impact.
Banner Jangan menempatkan banner pada top halaman dan tempatkan banner kurang dari empat macam.
Ingin menjadikan Web Komersial? Jelaskan tentang siapa anda, apa yang dilakukan dan buat sesuatu yang unik. Kenapa menggunakan produk atau servis dari anda dan bagaimana anda bisa memenuhi kebutuhan pembaca disana.Harus diperhatikan bahwa web menjadi tidak efektif kalau yang diinginkan hanyalah uang.
Tawarkan informasi tentang produk atau servis yang anda punyai melalui link atau catatan subliminial tapi ambil backseat dari isi. Isi adalah segalanya menjual tanpa rasa menjual adalah cara untuk menjadi komersial. Yang paling penting semuanya adalah kejelasan dari isi dan maksud.
Komlain pada browser. Harus diperiksa bahwa web yang dibuat harus bisa terlihatn baik dengan semua browser sebelum mengirimkannya. Sekurang kurangya dilakukan pengujian dengan tiga browser teraktif. Ada sekitar 85% pembaca menggunakan Firefox, Chrome dan Internet Explorer.
Isi Isi adalah raja. Web yang dibuat haruslah mempunyai isi yang ada kontribusinya ke visitor terhadap keluhan atau kebutuhannya. Tawarkan sesuatu yang mereka tidak bisa mendapatkan dari yang lain.
Bisa juga menyampaikan opni anda sendiri tetapi harus diyakini bahwa itu benar.
Counter/ Penghitung Pinghitung untuk beberapa site adalah efektif untuk menunjukkan kredibilitas, tetapi untuk site yang kaya dengan isi, nilai dari penghitung jauh dari penting.
Kontak.
Harus diberikan cara yang jelas untuk menghubungi perosahaan dengan melengkapi email, alamat lengkap, telepon/fax. Jika tidak ada alamat dan telepon, akan diasumsikan ada sesuatu yang disembunyikan. Harus ada navigasi yang jelas ke halaman kontak.
Hindari menggunakan doorwaypage(splash screen). Pengunjung akan kehilangan waktu hanya menunggu sebuah logo anda tampil pertama kali dalam waktu yang lama.
Animasi yang berlebihan.
Gambar animasi dan teks flashing seharusnya menjadi web kian menarik, namun tidaklah demikian saat ini. Harus diperhatikan bahwa peralatan anda mempunyai tujuan, kalau akan memparlambat dan tidak ada tambahan kepada pesan sebaiknya jangan digunakan.
Frame.
Jangan gunakan frame apa bila tidak ada kontribusi kepada web seperti untuk navigasi. Frame yang digunakan baik akan membuat web menjadi lebih berarti.
Grafik.
Isi dari web adalah utama tetapi isi tanpa tampilan menarik, kalau tidak ibarat menjual rumah, orang hanya melihat dari jalan tanpa mau melihat kedalam. Tetapi bila tampilan bagus, orang akn masuk kedalam dan melihat-lihat sekeliling. Mengecilakan ukuran grafik untuk alas an kecepatan adalh baik, tetapi jangan sampai merusak tampilan. Membuat icon email yang bergerak bisa sedikit member kontrobusi ke isi.
Kebersihan code HTML. Tidak perlu dikawatirkan tentang kebersihan kode HTML yang dibuat, hanya saja perlu menjadi perhatian apabila memperjelek tampilan pada waktu berpidah browser atau monitor Menggunakan site inspection tool adalah bagus, tetapi anda harus adhere untuk melakukan praktek yang baik dalam menulis kode halaman.
Javascript Jangan terlalu berlebihan menggunakan Javascript. Javascript bisa efektif sebagai bantuan navigasi (untuk mengetahui tombol ), tetapi diluar itu harus mempunyai tujuan yang lebih bagus. Hanya sekedar mengatakan kepengguna bahwa anda browser apa atau nama anda siapa tidaklah membantu dalam isi.
Link Kalau ada link yang rusak, betulkan sebelum di upload. Gunakan tool yang bisa menguji akurasi dari link.
Matching. Rancangan yang umum dari site adalah semuanya harus maching. Pengunjung akan merasa nyaman kalau melihat dan perpindahan yang hamper sama dari satu halaman ke halaman yang lain. Navigasi harus ditempatkan disuatu lokasi yang sama. Pergantian style dalam sebuag situs tidak direkomendasikan.
Tujuan yang jelas. Harus diyakini bahwa teks pada halaman paling atas mengatakan pada pengunjung sehingga dia akan merasa mendapatkan sesuatu dari situs anda. Jangan sampai dia meninggalkan situs anda setelah membaca kalimat dihalaman atas. Buat dia tahu bahwa situs anda akan menghilangkan sakitnya atau kebutuhan akan terpenuhi.
Hindari penggunaan plugins. Jika dimasukkan file suara harus ada tombol untuk mematikannya.
Ukuran layar. Saat ini ukuran yang umum digunakan adalah 1024x768. Sebelum mempublikasi situs ke umum, periksa ukuran halaman anda adalah 1024x768 atau lebih
Pesan berjalan. Pesan berjalan menggunakan scrolling marquee pada bagian bawah. Sebaiknya dengan tulisan tebal dan bila di klik akan menuju ke link.
Tugas : Merancang Web Menggunakan Template
Template merupakan media yang efektif untuk memulai merancang sebuah web. Dengan mnggunakan template tugas kita sebagian besar hanya memilih layout yang paling sesuai dengan isi web yang dibuat.
Banyak template yang tersedia baik free atau komersial. Template juga disediakan oleh beberapa web hosting.
Contoh web template:
http://www.wix.com/afzerit/template1
www.dotemplate.com
Ambil sebuah template dari dotemplate.com, dowload dan simpan dalam server web anda. Lakukan editing pada template tersebut untuk menghasilkan sebuah halaman web pelajaran.
Kode sebuah contoh template adalah seperti dibawah ini:
<!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" xml:lang="en">
<head> <title>Web site</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="title" content="Web site" /> <meta name="description" content="Site description here" /> <meta name="keywords" content="keywords here" /> <meta name="language" content="en" /> <meta name="subject" content="Site subject here" /> <meta name="robots" content="All" /> <meta name="copyright" content="Your company" /> <meta name="abstract" content="Site description here" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <link id="theme" rel="stylesheet" type="text/css" href="style.css" title="theme" />
<script type="text/javascript" language="javascript" src="js/addon.js"></script> <script type="text/javascript" language="javascript" src="js/custom.js"></script>
</head> <body>
<!-- top wrapper --> <div id="topWrapper">
<div id="topBannerWrapper"> <div id="topBanner"> <div id="hmenuWrapper"> <div id="hmenu"> <ul> <li id="current" style="border:none"> <a href="#" shape="rect">Home</a> </li> <li>
<a href="service.html" shape="rect">Products</a> </li>
<li> <a href="#" shape="rect">Services</a> </li> <li>
<a href="#" shape="rect">News</a> </li> <li>
<a href="#" shape="rect">About</a> </li> </ul> </div> </div> </div> </div> <div id="topSlideshowWrapper">
<div id="sliderContainer">
<!-- YOUR SLIDESHOW IMAGES HERE (recommended size 920x300) -->
<div id="slider1"> <ul id="slider1Content"> <li class="slider1Image"> <a href="http://all-free-download.com" title="Audi R8" target="_blank" shape="rect"> <img src="http://lh4.ggpht.com/_d6vKxl1jKWk/TB3zMLtS9xI/AAAAAAABdSs/WUtytrhJd8c/AudiR8.jpg" />
<span class="bottom" style="display: inline;"> <strong>Audi R8</strong> <br clear="none" /> Change the slideshow image easily in the HTML code.
</span> </a>
</li>
<li class="slider1Image">
<a href="http://all-free-download.com" title="Ferrari 612" target="_blank" shape="rect">
<img src="http://lh4.ggpht.com/_d6vKxl1jKWk/TByyLb_qnWI/AAAAAAABc38/sHskIRlXAdc/FerrariBlack.jpg" />
<span class="bottom" style="display: inline;">
<strong>Ferrari 612</strong>
<br clear="none" /> Change the slideshow image easily in the HTML code.
</span> </a> </li> <li class="slider1Image">
<a href="http://all-free-download.com" title="Lamborghini Gallardo" target="_blank" shape="rect"> <img src="http://lh3.ggpht.com/_d6vKxl1jKWk/TB3zMNrh-4I/AAAAAAABdSo/6WO4HBMCWDI/LamborghiniGallardoBlack.jpg" /> <span class="bottom" style="display: inline;">
<strong>Lamborghini Gallardo</strong> <br clear="none" /> Change the slideshow image easily in the HTML code.
</span> </a> </li> <li class="slider1Image" style="clear:both"></li>
</ul> <div id="sliderLeftMask"></div> <div id="sliderRightMask"></div>
</div> </div> </div> </div> <!-- end top wrapper --> <div id="wrapper">
<div id="container"> <!-- content --> <div id="content">
<div style="margin-top:20px;"> <div id="main"> <h1>Halaman Depan</h1> <p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</p>
<h2>Heading 2 sample</h2>
<p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</p> </div> <div id="sidebar">
<div class="bloc rounded" style="margin-top:20px;"> <h3>License</h3> <p>This template is free. You are free to use it, share it, redistribute it, modify it in any way you want as long as you
<strong>keep a link back to doTemplate Website</strong> in the footer. You can remove this link by making a $10 <a href="http://www.dotemplate.com/dt/index.jsp#donate" target="_blank" shape="rect">donation</a>.
</p> </div> <div class="bloc rounded" style="margin-top:20px;">
<h3>Latest news</h3> <p>Lorem ipsum dolor sit amet, turpis egestas commodo, eget non ultrices nec lectus, ac interdum, netus aliquam, vulputate vel reiciendis risus.
Lorem ipsum dolor sit amet, turpis egestas commodo</p>
</div> </div> </div> <div class="clear"></div>
</div>
<!-- end content --> <div class="clear" style="height:40px"></div>
</div> <!-- end container -->
</div> <div id="bottomWrapper">
<div id="footer"> <div class="footer-one-third"> <h2>Company</h2> <ul>
<li> <a href="#" shape="rect">Who are we</a> </li> <li>
<a href="#" shape="rect">What we do</a>
</li>
<li>
<a href="#" shape="rect">Contact</a>
</li>
<li>
<a href="#" shape="rect">Partners</a>
</li>
<li>
<a href="#" shape="rect">Links</a>
<div class="footer-one-third">
<h2>Products</h2>
<ul>
<li>
<a href="#" shape="rect">Products</a>
</li>
<li>
<a href="#" shape="rect">Services</a>
</li>
<li>
<a href="#" shape="rect">Clients</a>
</li>
<li>
<a href="#" shape="rect">Testimonials</a>
</li>
<li>
<a href="#" shape="rect">Links</a>
<div class="footer-one-third footer-last">
<h2>Blog archives</h2>
<ul>
<li>
<a href="#" shape="rect">Lorem ipsum</a>
</li>
<li>
<a href="#" shape="rect">Dolor sit</a>
</li>
<li>
<a href="#" shape="rect">Turpis egestas</a>
</li>
<li>
<a href="#" shape="rect">Commodo</a>
</li> <li>
<a href="#" shape="rect">Eget non</a> </li> </ul> </div> </div>
<div id="bottom-links">
<div style="padding-top:20px">
<!--
DO NOT REMOVE OR MODIFY THE FOOTER LINK BELOW.
If you want to remove this link please make a 10 dollars donation at www.dotemplate.com
-->
<a href="http://www.dotemplate.com" shape="rect">Templates</a> maker </div> </div> </div>
</body> </html>