Software Web Design
Software
web design nmerupakan perangkat lunak yang berguna untuk
membangun / membuat / mendisain halaman - halaman web, baik yang bersifat
statis maupun dinamis.
Software web design terpopuler
yang ada saat ini antara lain:
1.
Adobe Image
Ready,
2.
Macromedia
Dreamweaver
3.
Macromedia
Fireworks,
4.
Microsoft
Frontpage
5.
Dan lain
sebagainya.
Mengenal
Macromedia Dreamweaver MX
Macromedia Dreamweaver yang
merupakan salah satu softwarewebdesignterpopuler dipilih sebagai softwarewebdesignyang
akan digunakan dalam proses pemelajaran ini
Macromedia Dreamweaver
dipilih karena kompatibilitas dan dukungannya terhadap berbagai bahasa pemrograman
web, antara lain :
1.
ASP
2.
JSP
3.
CFM
4.
ASP
5.
NET
6.
PHP
7.
JavaScript
8.
CSS dan XML
Window
Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu :
1.Insert
Bar,
2.Document
Toolbar,
3.Document
Window,
4.Panel
Groups,
5.Tag Selector
6.Property
Inspector
7.Files
Panel
HTML
HTML yang merupakan kepanjangan dari Hyper Text
MarkUp Languagememiliki fungsi untuk memformat dokumen teks biasa agar bisa
digunakan pada World Wide Web (WWW).
HTML bukan merupakan suatu bahasa pemrograman, karena
sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen
teks dan bukan sebagai program
Struktur
dasar dokumen HTML berisi elemen-elemen atau tag, seperti pada gambar berikut :
Keterangan
:
<html>
</html> : mendefinisikan
bahwa teks yang berada diantara kedua tag tersebut adalah file HTML.
<head>
</head> : mendefinisikan
head dalam sebuah file HTML.
<title>
</title> :
mendefinisikan judul yang hendak ditampilkan pada browser.
<body>
</body> : mendefinisikan
teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web.
Format
Teks Dasar dalam HTML:
Heading, HTML
mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan
dengan font lebih besar dan tebal daripada teks normal
Paragraf,
setiap ada paragraf baru diawali dengan <p>
List, HTML
mendukung daftar (list) tidak bernomor, bernomor dan definisi
Performatted Text, dalam
HTML, spasi, tab dan baris baru (enter) tidak memiliki pengaruh
Extended Quotations, untuk
membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag
<blockquote>.
Ganti baris (line
break), untuk menulis alamat surat dengan baris-baris pendek,
tidak bagus jika menggunakan tag <p>(spasi terlalu lebar)
Garis datar
(horizontal rule), untuk membuat garis horizontal yang
digunakan untuk membatasi bagian-bagian digunakan tag <hr>.
Memformat karakter,
<b>
atau <strong>untuk membuat teks Bold.
<i>
atau <em>untuk membuat teks Italic.
<tt>
atau <code>untuk membuat teks typewriter.
Dasar
Link HTML
Hyperlink merupakan
sesuatu yang sangat penting di website, sebab hyperlink akan menghubungkan
antara satu halaman dengan halaman lainnya baik dalam satu website maupun antar
website.
Untuk
membuat hyperlink digunakan tag <a>. Huruf a artinya "anchor".
Tag <a> biasanya diikuti atribut "href" dimana nilai dari
atribut ini merupakan alamat halaman yang akan dituju.
Macam-macamlink
1. Relative
dan Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat
dengan menentukan relative path dari posisi dokumen asal berada. Ini disebut
sebagai relative link a
href=”Harga/index.html”>Daftar Harga</a>
Alamat (URL) dokumen secara lengkap
(absolute path) dapat digunakan untuk menentukan tujuan link,
disebut
link absolute : a href=”http://gmail.google.com”>E-mail Google</a>
2. Link ke
suatu bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di
dua.html, caranya adalah
Pada dokumen satu.html, dituliskan : <a
href=”dua.html#BT”>Tiga</a>
Pada bagian yang dituju, dituliskan :<a
name=”BT”>Tiga</a>
3. Link ke
suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas :
Pada dokumen satu.html, dituliskan : <a
href=”#BT”>Tiga</a>
Pada bagian yang dituju, dituliskan :<a
name=”BT”>Tiga</a>
4. Mailto,
link yang langsung menuju ke alamat e-mail.<a
href=”mailto:saya@gmail.com?subject=Masuk ga?”>Kirim E-mail</a>
Menyisipkan Gambar
Atribut ukuran gambar, bila tidak
dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa
dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width.
Membuat Tabel
Tabel merupakan cara untuk
menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris.
Membuat Frame
Frame HTML digunakan untuk membuat
tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya
merupakan satu halaman HTML yang terpisah.
Membuat Form
Form merupakan elemen HTML yang
berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna
Macam-macam
form :
Input,
dengantipe:
1.Text, password,
checkbox, radio button, reset, submitdanhidden.
2.Text
area.
3.Select.
Memperbaharui
Halaman WEB
Memperbaharui halaman situs web dengan sesuatu yang baru, dengan
mempertimbangkan kebutuhan pengunjung dan situ sweb itu sendiri Untuk memperbaharui
(update) halaman situ web yang perlu menjadi bahan pertimbangan sejak
halaman web tersebut dirancang adalah kita harus memastikan agar
elemen-elemenyang ada pada setiap halaman mudah untuk dirubah (edit).
Memeriksa
informasi untuk relevansi dan keterkinian
Pada dasarnya dalam proses pembuatan situs web diperlukan
kerja sama antara pihak pengembang dengan klien yang memesan situs web tersebut.
Dalam menentukan content (contentawal, tambahan maupun revisi)
pihak pengembang harus lebih banyak mendengar apa yang menjadi kebutuhan klien.
Interaktivitas
penggunan menjadi jantung sebuah situs web.
Beberapa Gagasan yang disampaikan
Tord Yard (programmer flash diWWW.EGO7.COM) tentang pentingnya
menambahkan interaktivitas pada content halaman sebuah situs web:
1. Gunakan
umpan balik grafik untukmenginformasikan penggunan tentang elemen interaktif,
seperti status tombol yang bergulung
2. Sertakan
suara sebagai bentuk umpan balik tambahan agar content tidak terlihat
membosankan
3. Pertimbangkan
pemakaianan imasi untuk menerangkan elemen penting, atau untuk meminta keikut
sertaan pengunjung
Beberapa
cara untuk memeriksa informasi content situs web untuk relevansi dan
keterkinian, adalah sebagai berikut:
1. Sesuaikan
content situs web dengan tujuan dan fungsi situs tersebut
2. Lakukan
rise untuk mencari informasi terbaru yang sesuai dengan content situs
3. Content
tambahan
atau revisi juga bisa dengan meminta content tersebut kepihak klien baik
berupa data tertulis maupun elektronik
4. Lakukan
konfirmasi dalam menentukan batasan umur sebuah links, apakah akan
dipertahankan atau dihapus
5. Pihak
pengembang selaku pembuat situs web bila perlu merevisi content yang
mungkin diperlukan dengan mengkonfirmasikan dahulu dengan pihak klien
Memeriksa
linksdan navigasi
Link dan Navigasi adalah bagian
yang terpenting dalam organisasi situs web karena keduanya sangat
berpengaruh pada kenyamanan pengunjung situs web.
Navigasi
adalah gabungan dari struktur representasi informasi situs web dan
mekanisme link yang mendukung pengunjung untuk melakukan penjelajahan
situs.
Kemudahan
bernavigasi dalam situs web melibatkan system navigasi situs web secara
keseluruhan dan desain interface situs web tersebut.
Navigasi dapat
ditampilkan dalam berbagai media, yaitu:
1. Teks,
2. Image
3. Animasi
Syarat navigasi yang baik :
1. Mudahdipelajari
2. Tetapkonsisten
3. Memungkinkan
feedback
4. Muncul dalam
konteks
5. Menawarkan
alternative lain
6. Memerlukan
perhitungan waktu dan tindakan
7. Menyediakan
pesanvisual yang jelas
8. Menggunakan
label yang jelas dan mudah dipahami
9. Mendukung
tujuan dan perilaku user
10. Beberapa
hal yang perlu diperhatikan untuk membuat navigasi yang baik :
11. Rencanakan
dengan benar sebelum membuat
12. Navigasi
atau struktur situs web nantinya akan sulit diubah. Jadi sebelum membuat
navigasi sebuah situs,
tentukan konsepnya
13. Kelompokkan
link navigasi dan aturlah sepeerlunya
14. Buat halaman dengan mock up navigasi
elemen, jenis konten yang akan ada di setiap halaman dan
prioritasnya.
15. Buatlah
tampilan navigasi berbeda dari tampilan lainnya
16. Agar
pengunjung lebih mudah mengenali bahwa bagian tersebut adalah navigasi
17. Buatlah
navigasi yang singkat, tepat dan jelas
18. Buat
navigasi yang logika susunannya mudah dipahami.
Mengedit informasi
sesuai kebutuhan
Dreamweaver
Dreamweaver merupakan piranti lunak
yang sangat baik untuk membuat halaman web.
Opsi-opsi
dalam dreamweaver dirancang begitu detail, sehingga designer mahir bisa
mengembangkan situsnya secara menyeluruh.
Dreamweaver memungkinkan kita
berpindah secara mudah antar design view dan code view, ini
berarti kita bisa explore code HTML begitu selesai menata halaman dengan
menggunakan tampilan antar muka (GUI).
Semua
tool yang diperlukan tersedia di bagian depan interface.
Berikut
adalah langkah-langkah untukproses pengeditan halaman web dengan
menggunakan fasilitas dreamweaver:
1. Mengubah
Objek menjadi Background
2. Memasukkan
Obyek
3. Memperbaharui
situs web yang bersifatstatis
4. Memperbaharui
situs web melalui fasilitas admin (yang bersifat dinamis)
Menguji
dan memastikan perubahan-perubahan
Pengujian yang dilakukan terhadap situs
web tidak sama dengan pengujian sebuah program aplikasi walaupun situs web
juga dapat dibuat dengan web programming.
Secara
umum, hal-hal yang harus diuji adalah sebagai berikut :
1. Code
Quality
2. Compatibility
3. Navigasii
4. User
Interaction
5. Usability
and Accessbility
6. Scalability
7. Reliability
1.Code Quality
Pengujia nterhadap code quality maksudnya
adalah pengujian terhadap kualitas kode HTML yang digunakan untuk membangun
halaman-halaman situs web.
Yang termasuk kedalam kategori ini
adalah sebagai berikut :
a. ValidasiHTML
b. ValidasiGambardanhurufyang
digunakan
2.Compatibility
Pengujian terhadap compatibility
situs web maksudnya adalah pengujian yang dilakukan terhadap situs web
tentang seberapa kompatibel dengan berbagai macam sistem operasi, browser
dan hardware.
Pengujian dengan sistem operasi
akan membuktikan bagaimana kemampuan pada berbagai sistem operasi yang
digunakan, misalnya Windows, Unix, OS/2, Macintos.
3.Navigasi
Pengujian navigasi dilakukan untuk
menguji kemampuan situs web dalam menyajikan link-link yang ada dalam
seluruh halaman situs web.
Pengujian
ini dilakukan karena pentingnya aspek navigator dalam situs webYang
termasuk pengujian untuk navigasi situs web adalah :
a. link,
b.
frame,
c.
organisasisitus.
4.User Interaction
Pengujian user interaction maksudnya
adalah bahwa situs web diuji sejauh mana dapat berinteraksi dengan
pengunjung yang mengunjungi situs web.
Yang
termasuk kedalam user interaction adalah:
a. pengujianpadafasilitasform,
b. validasiCGI
script,
c. validasiproses,
d. interface,
e. cookies,
f. session
g. dll
5. Usability and Accessbility
Pengujian usability dan accesbility
situs web adalah pengujian yang dilakukan terhadap situs web guna
melihat sejauh mana situs dapat memenuhi keinginan pengunjung atau target
pengguna situs web.
Contoh
pertanyaan berikut dapat digunakan untuk menguji tingkat usability dan accesbility
situs web :
1.
Halaman web yang menggunakan script atau aplet
haru stetap dapat ditampilkan pada browser yang tidak mendukung fungsi aplet dan
script tersebut.
2.
Jika menggunakan image maps, maka seharusnya
halaman situs juga menyediakan link yang digunakan sebaga ialternatif
3.
Situs web seharusnya juga dapat dipahami ketika
dibuka menggunakan browser berbasis teks
6. Performance
Pengujian terhadap performance atau
performa situs web maksudnya adalah pengujian yang dilakukan terhadap
situs web untu melihat sejauh mana kinerja situs web dalam
berbagai keadaan.
Contoh standar yang harus dimiliki
oleh sebuah situs yang memiliki kinerja yang baik:
1. 95%
halaman web dapat didownload kurang
dari10 detik pada modem 28,8 kbps
2. Proses
pemesanan dapat dilakukan dalam waktu 2 menit
3. Konfirmasi
suatu transaksi dikirimkan pada user dalam30 detik
7. Scalability
Pengujian
scalability maksudnya adalah pengujian terhadap sejauh mana situs web/system
yang dibangun dapat dikembangkan sebagai antisipasi terhadap perubahan
teknologi dimasa yang mendatang.
Evaluasi
scalability dapat dilakukan dengan menguji sejauh mana situs web dalam:
1.
Jumlah maksimal transaksi/detik yang masih
dalam batas response-time-requirement
2.
Jumlah rata-rata transaksi pada saat
normal
3.
Jumlah memori yang diperlukan untuk setiap
transaksi
8. Reliability
Pengujian reliability situs web
maksudnya menguji sejauh mana situs web masih dapat melakukan
tugasnya dalam kondisi yang berat.
Yang
termasuk kedalam pengujian ini adalah:
1.
Low-resource testing:
apakah aplikasi masih dapat berjalan pada reduced system resources.
2.
Endurance testing :
menguji tingkat stress system dalam waktu yang cukup lama
3.
Volume testing :
menguji unjuk kerja system dengan data yang besar
4.
Peak testing : menguji system
pada saat yang paling sibuk
Mengakses
Halaman Web Secara Cepat
1.
Perhatikan jam akses. Biasanya kecepatan
akses computer Siang hari,kira-kira pukul 09.00s/d15.00, jalur komunikasi
telepon sangat sibuk. Hal ini tentu saja akan sangat berpengaruh terhadap
kecepatan akses dimana dalam satu jalur yang sempit, dimasuki oleh banyak data
(bottleneck). Akan lebih baik jika mengakses internet pada malam hari atau
bahkan dinihari, sewaktu banyak orang sedang beristirahat
2.
Disable auto
load image. Untuk anda yang hanya ingin membaca berita atau sekedar menulis dan
mengirim email, akan lebih bijaksana jika fasilitas Auto Load Image -atau Auto
Load Multimedia untuk IE 4 -dinonaktifkan. Hal ini penting sebab bukan rahasia
lagi bahwa yang paling domiman mempengaruhi lambatnya akses internet adalah
banyaknya grafik (gambar) dalam suatu homepage.
3.
Perhatikan
indikator. Terkadang suatu website akan tampak lama sekali untuk diakses. Ada
dua sebab yang membuatnya demikian. Pertama, mungkin saja jalur komunikasi
telah penuh sehingga menyebabkan antri data, atau data yang telah dikirim dan
akan diterima "hilang" di tengah jalan. Solusinya, akan lebih baik
jika anda menekan tombol "reload" (atau "refresh") agar
data dimuat kembali.
4.
Buka beberapa
jendela browser. Pada saat kita menunggu suatu website selesai dimuat
seluruhnya, akan lebih bijaksana jika kita membuka jendela browser yang baru
dan mengakses alamat website yang baru pula. Membuka satu per satu alamat
website pada satu jendela browser adalah tidak bijaksana dan tidak efisien.
5.
Tutup jendela
yang tidak perlu. Ini adalah kebalikan dari point di atas. Ada kalanya, kita
terlalu bersemangat sehingga jendela browser yang kita buka sangat banyak,
sehingga alamat web yang kita akses pun tak kalah banyaknya. Tentu saja hal ini
sangat mempengaruhi kecepatan akses internet, karena banyaknya data yang harus
dikirim dan diterima. Untuk itu, tutuplah jendela browser yang tidak perlu.
Tips
Menampilkan Tulisan di halaman Web
Web
seperti sebuah brosur atau resume dari pada laporan yang ditulis secara lengkap
dan terperinci. Maka, untuk menampilkan tulisan pada halaman Web haruslah mudah
dan cepat untuk discan dengan panduan hyperlink untuk mengarahkan pengunjung.
Maka anda harus memiliki tujuan:
v Tulis karangan seperti sebuah piramid
Tulislah hal-hal yang menjadi pokok pemikiran terlebih dahulu pada tulisan
tersebut.
v Kurangi jumlah kataTulisan yang pendek
dan tajam lebih mudah dibaca dari pada halaman yang panjang
v Gunakan satu pokok pikiran per
paragrafIde yang “terkubur” dalam paragraf-paragraf yang banyak seringkali
tidak dapat dicerna dengan baik.
v Gunakan bullet list, teks tebal, dan
heading untuk menandakan bagian-bagian penting.
v Gunakan kata/title pada hyperlink yang
mudah dimengerti Hyperlink harus mudah dimengerti dan memberikan gambaran
seperti apa tujuan dari halaman setelah ia mengklik hyperlink tersebut.
v Hindari KekacauanHalaman Web yang penuh
sesak dapat menciptakan “kebisingan visual”
Kunci utamanya adalah pengunjung kurang sabara
nuntuk membaca tiap baris pada tulisan Anda, jadi halaman web haruslah didesain
untuk memberikan panduan kepada mata pengunjung menuju informasi yang
terpenting dalam tulisan tersebut
RANGKING Search
Engine
memiliki halaman web yang enak dipandang mata, belum
tentu memberikan hasil yang baik pada search engine. Ada hal-hal yang harus
anda perhatikan untuk optimasi ini. Anda perlu mengetahui bagaimana cara
mengoptimalkan halaman web dengan tag-tag HTML khusus, dan hal-hal apa saja
yang mempengaruhi rangking pada Search Engine.
1. Keyword pada domain name
Jika Anda memiliki website yangberisi koleksi
lagu-lagu mp3 atau jika situs anda menjual buku-buku alangkah baiknya jika
menggunakan nama yang
mengandung kata ebook. Cara ini masih terbilangefektif untuk saat ini.
2. Keyword pada nama file
Misalnya Anda memiliki halamanweb yang berisi informasi mengenai
cara promosi online,sebaiknya disimpan dengan nama promosi.html atau
marketing.html, ini
juga akan mempengaruhi rangking.
3. Keyword pada page title
Tag <title> pada halaman HTML sangat penting untuk
dioptimalkan. Usahakan agar title yang digunakan mengandung keyword yang
relevan dengan isi
halaman web.
4. Keyword pada headline
Bagi Anda yang sudah
menguasai HTML tentu mengenal tag <H1>,<H2>, dst. Tag headline
sangat baik dipakai untuk judul sebuah paragraf, misalnya :
<H1>TokoBuku
Online</H1>. Headline sangat diperhitungkan oleh SearchEngine.
5. Keyword yang
relevan pada meta tag
Janganlah
menggunakan keyword yang sama sekali tidak ada hubungannyadengan isi halaman
web anda. Hal ini bisa dideteksi oleh search engine dan akan
dianggap spamming
6. Keyword pada
page content
keyword yang
diharapkan harus terdapat pada isi halaman web. Gunakan juga frase atau
kata-kata lain yang berhubungan dengan keyword utama.
7. Meta tags
Adalah tag-tag HTML
khusus yang digunakan untuk menggambarkan keseluruhan dari isi web anda. Meta
tag akan kita bahas secara khusus di bagian
berikutnya
8. Link Popularity
Adalah jumlah halaman web lain yangmemasang link ke
web site anda. Beberapa search engine utama sangat memperhatikan hal ini.
Semakin besar link
popularity suatu web site, rangkingn ya
akan semakin tinggi. Jika situs anda ingin muncul pada posisi atas di Google
banyak-banyaklah bertukar link dengan web
lain.
Merancang
Navigasi Website
Navigasi pada sebuah website yang tertampil pada menu
dan links adalah petunjuk bagipengunjungterhadaphalaman-halamanyangterdapatdalamwebsite.Pengunjungakansemakinmudahmenemukanhalaman-halamandalamwebsiteAndajikamenu-menudanlinkyangadatampilsecaraterstruktur.Sudahpastipengunjungakankesalapabilatidakmendapatkanhalamanwebsiteyan
acarigara-garanavigasiyangruwet.
No comments:
Post a Comment