Konsep Dasar Desain WEB

Sumber: http://log35.com/2007/09/17/aturan-dasar-desain-website-bagian-1-konsep/

 

Sebuah lukisan yang indah selalu dimulai dari sebuah coretan sederhana di atas kanvas, tetapi ingat … sebelumnya pelukis pasti sudah mempunyai ide atau paling tidak dasar style yang akan dipakai untuk melukis. Tanpa ide dasar, berapa kalipun mencoretkan kuasnya pelukis tidak akan bisa menghasilkan lukisan yang indah (setidaknya lukisan yang indah bagi orang awam seperti saya dan Anda). Jadi mulailah dengan KONSEP.

Desain website harus mempunyai fungsi.
Hal ini berarti semua bagiannya harus memainkan peran dalam menyediakan informasi kepada pengunjung tentang siapa Anda, produk Anda atau layanan Anda.
Jangan membuat website hanya untuk “sekedar” ikut-ikutan, tentukan fungsinya terlebih dahulu baik untuk (perusahaan) Anda sendiri maupun bagi calon pengunjung website Anda.

Website harus mudah dibaca dan dikunjungi
Tidak semua yang Anda tulis akan dibaca oleh pengunjung dan tidak semua pengunjung akan membaca semuanya. Pada kenyataannya pengunjung hanya membaca sesuatu yang menarik untuk mereka. Untuk menarik pembaca/pengunjung, Anda bisa mulai dengan beberapa aturan dasar berikut:

• Tentukan “tema besar” website Anda.
• Jika Anda pemilik website, tentukan nama yang catchy, mudah diingat dan yang pasti merujuk pada tema besar Anda. Ingat…memikirkan “makanan” akan mudah jika Anda mengingat “tempe” atau bahkan yang sedikit lebih jauh dengan mengingat “piring”, tapi Anda tidak akan pernah memikirkan “makanan” jika Anda mengingat “semen” atau “pasir”.
• Kembangkan struktur artikel atau navigasi yang tertata dengan baik, selalu umpamakan website merupakan urutan ruang-ruang, jangan sampai pengunjung “tersesat” ketika mengunjungi website Anda.
• Kelompokkan teks, gambar dan isi website lain sesuai dengan peruntukan (halaman).
• Penggunaan header atau sub judul untuk memisahkan topik/ ide yang berbeda-beda untuk memberikan kemudahan bagi pembaca dalam menemukan yang mereka inginkan.
• Selalu menitik beratkan pada kesinambungan & konsistensi.
• Jangan menggunakan kalimat yang terlalu panjang, warna, gambar atau jenis font yang berlebihan. Kompleksitas hanya akan menghilangkan esensi dari artikel atau isi website Anda. Cobalah untuk mengungkapkan ide-ide Anda dengan kata-kata yang singkat tapi mudah dimengerti. Gunakan pembedaan warna antara 1-2 warna saja atau font style (bold, italic dan underline). Tentunya untuk poin ini sangat bersifat subjektif; artinya sesuaikan dengan kebutuhan & fungsi website Anda.
• Sebelum merencanakan menggunakan beberapa jenis font sekaligus, usahakan Anda sudah benar-benar menguasai dasar-dasar tipografi. Jika belum, gunakan cara aman; batasi pembedaan jenis font hingga maksimal 3 jenis font.
  Pastikan font yang Anda pilih merupakan jenis font standard dan mudah dibaca.

Setelah Anda selesai dengan tahap ke-2 diatas, kembalilah ke tahap 1, cek apakah struktur, konsep desain, font, warna dll sudah sesuai dengan fungsi website yang Anda rencanakan.

 

Web Tanpa Tabel

CSS memungkinkan kita mendesain web tanpa tabel,  bahkan lebih dinamis dan cooool

berikut pengertian dan sekilas tentang css (ngopy dari wikipedia) hehe…

http://id.wikipedia.org/wiki/CSS

CSS

Dari Wikipedia Indonesia, ensiklopedia bebas berbahasa Indonesia.

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi.

CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Sintaks

Sintaks CSS terdiri dari tiga bagian: pemilih atau selektor (selector), sifat atau properti (property), dan nilai (value). “Selektor” biasanya adalah elemen atau tag HTML yang akan didefinisikan, “properti” adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({).Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik ("). Untuk memberikan lebih dari satu properti bagi suatu selektor, pisahkan setiap kombinasi “properti:nilai” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap properti dapat dilakukan per baris.

Contoh:

p { color: black }
div { font-family: "sans serif" }
pre { text-align:center; color:red; }
blockquote {
  text-align: center; 
  color: black; 
  font-family: arial 
}

Huruf dan teks

Pengaturan jenis huruf serta format tampilan karakter, spasi, kata, dan paragraf merupakan salah satu penggunaan umum lembar gaya dan dapat diatur dengan properti-properti berikut ini:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
• text-indent
• text-align
• text-decoration
• text-transform
• letter-spacing dan word-spacing
• line-height dan vertical-align
• white-space

Warna dan latar

Pengaturan warna dan latar tampilan dilakukan dengan properti-properti berikut:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Format visual

Format visual elemen dokumen HTML diatur dengan properti-properti:

• width dan height
• top, right, bottom, dan left
• margin, border, dan padding
• float dan clear
• position
• display dan visibility
• z-index
• overflow dan clip

Fasilitas dari Internet

Sumber :http://www.elektroindonesia.com/elektro/utama3-a.html

Fasilitas di Internet

Mungkin ada baiknya kita membahas secara sepintas tentang fasilitas apa saja yang mungkin digunakan di Internet, dengan harapan akan memudahkan seseorang nantinya melakukan manouver informasi dalam melakukan usahanya. Detail dari fasilitas di Internet dapat diketahui lebih lanjut di berbagai buku / makalah seminar tentang Internet. Fasilitas yang umumnya digunakan adalah:

Surat elektronik (E-mail). Fasilitas ini merupakan fasilitas yang paling primitif & merupakan alat bantu untuk berkirim berita, surat, file antar komputer. Dengan menggunakan fasilitas E-mail sebetulnya kita dapat menjangkau lebih banyak pemakai jaringan komputer karena masih ada pengguna jaringan komputer yang hanya dapat berkomunikasi menggunakan E-mail karena saluruan komunikasi yang digunakan masih terlalu lambat (contohnya: penggunakan jaringan packet radio di Indonesia). Kelompok diskusi / Mailing List. Fasilitas ini dibangun menggunakan teknik yang sama dengan proses penyebaran surat elektronik. Hanya menggunakan fasilitas ini sebuah berita / file dapat disebarkan ke banyak pengguna sekaligus – dengan cara ini kita dapat melakukan diskusi, seminar, ceramah, konferensi secara elektronik tanpa terikat pada dimensi ruang, dimensi waktu – diskusi dapat berlangsung setiap hari tanpa henti. Hasil yang diperoleh akan jauh lebih effektif daripada penyelenggaraan seminar / konferensi yang konvensional – kebiasaan yang buruk dari para peserta diskusi elektronik adalah biasanya kita akan sangat informal & tidak terlalu suka hal yang formal.

Pada saat ini kondisi akses ke Internet dari Indonesia sudah cukup overloaded. Cara terbaik untuk memanfaatkan akses Internet dengan kondisi ini adalah dengan melakukan monitoring berbagai newsgroup & mailing list, karena akses ke Web kemungkinan terlalu lama & time consuming. Beberapa mailing list yang berkaitan dengan ekonomi yang mungkin akan banyak bermanfaat antara lain:

Mailing List	Keterangan
http://www.cfonline.com/lists.htm	Commercial Finance Online Mail List Servers
http://www.prgone.com/ibsi/	Medical Mailing Lists
http://www.bayne.com/wolfBayne/htmarcom/mktglist.html	List of Internet Marketing Mailing List
can-imarket@idirect.com	(Canadian Internet Marketing – Discussions)
buscom-l@utepvm.utep.edu	Business Communication Students, Classes and the Internet
BOOKMKT@ttx.com	Book Marketing
ELMAR@columbia.edu	Academic Research in Marketing
FREE-MARKET@ar.com	Marketing on the Internet
GLOBMKT@ukcc.uky.edu	Applied Global Marketing
IMALL-CHAT@netcom.com	Internet Malls
woolford@trip.net	International Business
MARKET-L@mailer.fsu.edu	General Marketing
PRFORUM@indycms.iupui.edu	Public Relations and Corporate Communications

Tentunya untuk topik-topik yang spesifik, misalnya tentang Garmen, Kesehatan dll. ada banyak sekali kelompok diskusi yang dapat di ikuti.

Buku yang cukup baik yang memuat daftar berbagai mailing list adalah Edward T.L. Hardie & Vivian Neou, INTERNET: Mailing Lists, Prentice Hall, Englewood Cliffs 1993 (ISBN 0-13- 289661-3)

• Fasilitas File Server / Transfer File. Fasilitas ini memungkinkan kita menyimpan berbagai file komputer. Dengan cara ini kita dapat dengan mudah melakukan disseminasi informasi seperti Frequently Asked Questions (FAQ) yang akan sangat membantu bagi customer / user dalam melakukan usaha di Internet.
• Fasilitas Web / Distributed Multimedia Database. Fasilitas Web barangkali merupakan terobosan yang sangat penting bagi pesatnya perkembangan Internet di dunia saat ini. Fasilitas ini menjadi sangat menarik karena adanya fasilitas search engine yang sangat memudahkan kita dalam melakukan navigasi informasi di Internet. Contoh search engine yang cukup baik adalah http://www.lycos.com diperlihat pada gambar 3.

Tampak pada contoh Gambar 3, ada sebuah form yang bisa kita isi query yang dapat dimanfaatkan untuk mencari informasi yang kita inginkan. Jangan terkejut apabila ternyata sering kali kita under-estimate pada saat melakukan pencarian informasi – karena informasi yang ada di Internet sangat’lah banyak. Beberapa search engine yang besar di Internet tampak pada Tabel 3 di bawah ini.

Open Text	http://www.opentext.com/
Yahoo!	http://www.yahoo.com/
Alta Vista	http://www.altavista.digital.com/
Lycos	http://www.lycos.com/
WebCrawler	http://www.webcrawler.com/
Inktomi	http://inktomi.cs.berkeley.edu/
BimaSakti	http://www.cs.utexas.edu/users/adison/cgi/bimasakti/
DejaNews	http://www.dejanews.com/

• FAX Server. Fasilitas FAX Server adalah tempat kita bisa mengirimkan FAX ke seluruh dunia melalui E-mail. Jadi kita cukup dengan mengirimkan E-mail ke FAX Server tersebut, berita FAX ke seluruh dunia dapat kita kirimkan. Beberapa FAX Server yang ada terdaftar dalam tabel berikut.
  

  Nama	Web	E-mail Address
  The PC Group	http://www.tpcg.com/free.htm	faxaway@tpcg.com

• Video Conference. Teknologi Video Conference maupun transmisi video melalui Internet adalah hal yang sangat mungkin sekali, sekitar US$4 / jam bandingkan dengan cara yang sama melalui Indosat harus membayar lebih dari US$1000 / jam. Konfigurasi yang dikembangkan juga relatif sederhana dengan berbekal Multimedia PC menggunakan peralatan kamera CCD tambahan tidak sampai Rp. 300,000,-. Fasilitas VideoConference menggunakan standard Internet CU-see-Me telah beroperasi dengan baik di ITB. Fasilitas Multicast Backbone (MBONE) digunakan untuk melakukan broadcast video di Internet.

Tentunya masih banyak lagi fasilitas yang ada di Internet. Trend yang cukup gencar berkembang saat ini adalah:

1. Penggunaan Virtual Reality Modelling Languange (VRML) untuk menyajikan bentuk yang lebih nyata lagi dari Web yang saat ini telah berjalan.
2. Penggunaan Internet-Phone yang dapat menghemat pulsa telepon, khususnya Interlokal.
3. Penggunaan untuk transmisi audio secara untuk broadcasting di Internet.

WEB 2.0

Sumber : http://www.wahanakom.com/teknologiweb2.htm

Teknologi Web 2.0

 

Oleh : Andi Setiawan

 

Internet

Dunia internet seakan-akan telah menjadi bagian hidup dari masyarakat modern saat ini. Betapa tidak, karena internet secara lengkap menyediakan kebutuhan akan informasi, berita, serta ilmu pengetahuan. Dengan internet seolah-olah tidak ada lagi batasan antar ruang dan waktu dalam berkomunikasi dengan berbagai orang di berbagai belahan dunia. Sebagai konsumen dari teknologi web tentunya mengharapkan tampilan layar yang mengasyikan serta mudah dipakai dan dimanfaatkan. Pada dasarnya web merupakan suatu kumpulan hyperlink yang menuju dari alamat satu ke alamat lainnya dengan bahasa HTML (HyperText Markup Languange).

 

Teknologi AJAX

 

Dalam pengaplikasian web HTML tidak mungkin sendiri dalam membuat suatu desain yang benar-benar bagus. Oleh karena itu HTML selalu ditemani oleh CSS (Cascading Style Sheet) untuk mempercantik desain, JavaScript untuk membuat tampilan yang dinamis, dan XML (eXtensible  Markup Language) yang digunakan untuk mendefinisikan format data . Teknologi penggabungan dari JavaScript dan XML saat ini yang marak disebut dengan AJAX (Asynchorous JavaScript And XML) yang menekankan pada pengelolaan content dalam website.

 

Perkembangan Web 2.0

 

Inovasi dalam dunia web semakin hari kian mengalami perkembangan yang berarti, ini dibuktikan dengan adanya Teknologi Web 2.0 yang dikembangkan sekitar tahun 2004. Walaupun sudah termasuk lama kedengarannya oleh para praktisi web, namum sebagian besar mereka masih bertanya-tanya tentang fungsi dan kegunaannya. Web 2.0 merupakan teknologi web yang menyatukan teknologi-teknologi yang dimiliki dalam membangun web. Penyatuan tersebut merupakan gabungan dari HTML, CSS, JavaScript, XML, dan tentunya AJAX.

 

Perkembangan web 2.0 lebih menekankan pada perubahan cara berpikir dalam menyajikan konten dan tampilan di dalam sebuah website. Dalam perkembangannya Web 2.0 diaplikasikan sebagai bentuk penyajian halaman web yang bersifat sebagai program desktop pada umumnya seperti Windows. Fungsi-fungsi pada penerapannya sudah bersifat seperti desktop, seperti drag and drop, auto-complete, serta fungsi lainnya. Aplikasi Web 2.0 disajikan secara penuh dalam suatu web browser tanpa membutuhkan teknologi perangkat yang canggih dari sisi user. Tidak mengherankan bila suatu aplikasi (software) dapat diakses secara online tanpa harus menginstalnya terlebih dahulu. Software tersebut misalnya software pengolah kata (seperti MS Word) atau software pengolah angka (seperti MS Excel).

 

Teknologi ke depan suatu software berbasisi web tidak lagi dijual melainkan suatu fasilitas gratis yang dapat digunakan setiap waktu. Permasalahan manajemen file juga tidak merepotkan, bahkan file dapat disimpan dan juga dapat di-sharing dengan user lain. Implementasi dari teknologi Web 2.0 dapat dilihat pada aplikasi sprearsheet pada Google yang merupakan aplikasi untuk operasi mengolah angka seperti MS Excel. Aplikasi ini dapat dilihat pada http://spreadsheets.google.com/ , tentunya aplikasi tersebut membutuhkan suatu akun Google untuk memasukinya.

 

 

Suatu web 2.0 biasanya digunakan sebagai akhir dari siklus peluncuran produk software, mengilustrasikan setiap produsen software tidak lagi meluncurkan produknya dalam bentuk fisik. Karena web menjadi platform, pengguna cukup datang ke website untuk menjalankan aplikasi yang ingin mereka gunakan. Hasil dari pengembangan fitur di dalam software dapat langsung dirasakan oleh pengguna. Software tidak lagi dijual sebagai produk namun berupa layanan (service).

 

Karakteristik Web 2.0

 

Kemudahan berinteraksi antara user dengan sistem merupakan tujuan dibangunnya teknologi Web 2.0. Interaksi tersebut tentunya haruslah diimbangi dengan kecepatan untuk mengakses, oleh karena itu diperlukan suatu bandwith yang cukup untuk loading data. Loading data tersebut dilakukan saat pertama kali membuka situs, data-data tersebut antara lain CSS, JavaScript, dan XML. Salah satu karakteristiknya adalah adanya dukungan pada pemrograman yang sederhana dan ide akan web service atau RSS. Ketersediaan RSS akan menciptakan kemudahan untuk di-remix oleh website lain dengan menggunakan tampilannya masing-masing dan dukungan pemrograman yang sederhana. Adanya kemajuan inovasi pada antar-muka di sisi pengguna merupakan karakter dari Web 2.0. Dukungan AJAX yang menggabungkan HTML, CSS, Javascript, dan XML pada Yahoo!Mail Beta dan Gmail membuat pengguna merasakan nilai lebih dari sekedar situs penyedia e-mail. Kombinasi media komunikasi seperti Instant Messenger (IM) dan Voice over IP (VoIP) akan semakin memperkuat karakter Web 2.0 di dalam situs tersebut.