R2W (RENCANA - RANCANG WEB SITE)

Menentukan tujuan dibuatnya suatu web site

 Sebagai mana sesuatu hal yang akan kita lakukan terlebih dahulu atau sebagai pendahulunya sebelum memulai kita menentukan tujuan sebagai arah yang akan kita tempuh nanti, begitu juga dalam hal pembuatan sebuah website terlebih dahulu kita patutnya menentukan tujuan dari website yang akan kita buat, sebagai missal untuk e-commerce, sharing atau bahkan hanya lifestyle saja.

Menganalisa pemirsa (audience)

Pada bagian ini kita akan menganalisa, kalau-kalau website yang akan kita buat nanti apakah memiliki tempat dihati dihati para users, khususnya bagi kita akan mencari sebuah pencapaian dan menjadikan sebagian atau keseluruhan penunjang pundi-pundi keuangan pribadi. Untuk itu sedikit penganalisaan audience sangat baik untuk dilakukan terlebih dahulu.

 Analisa Audience dapat dilakukan dengan mudah sebagai berikut ini :

- Tentukan Siapa yang menjadi target anda.

- Umur atau usia berapakah mereka.

- Bahasa dan budaya serta hal-hal yang menjadikan mereka royal.

- Tingkat pendidikan dan keilmuan.

- Akses ke web (High-speed? Dial-in? Low-speed?)

- Ke-familiaran terhadap Web itu sendiri.

- Hambatan pengaksesan yang dialami.

- Apa yang mereka cari atau butuhka dari web site anda?

- Informasi yang tersedia.

- Layanan yang memadai.

- Komunitas yang beragam.

Bagaimana cara mengenal audience anda?

- Bertanya ke pemilik web site

- Menganalisa log dan statistik web site

- Menanyakan pada orang yang sudah menjadi audience

- Mereview hasil penelitian yang dipublikasikan

- Membuat sarana feedback pada web site anda

- Mengenal perilaku audience secara umum terhadap web site anda

:: Bisa jadi ada lebih dari satu target audience yang diprioritaskan oleh karena itu kelebihan andalah sebagai authors yang benar-benar memahami hal ini, semoga bermanfaat !

Menganalisa kompetisi

Seberapa jauh atau rating website kita nanti ketika suatu saat terjadi kompetisi dengan website lainnya yang menyongsong beberapa feature yang sedianya hampir serupa bahkan melibihi kita, untuk itu analisa dalam hal kompetisi termasuk hal yang patut ketahui pula sebelum memulai yang kita akan lakukan.

Tips Menganalisa kompetisi

- Perhatikan web site lain yang isinya serupa dengan web site anda

- Menganalisa trend masa kini, wah kalau yang ini penting !

- Apa kelebihan dan kelemahan web site lain?

- Apakah web site anda harus sesuai dengan parent site?

Memahami kemampuan dan sumber daya yang kita miliki

Ini hal yang sangat prinsipil bahkan mendasar yang harus disadari oleh seorang programmer (dalam hal ini bertindak selaku authors) dalam menciptakan sebuah website agar tetap dapat eksis dan langgeng didunia maya, udah kaya nikahan 

Hal-hal yang bisa dilakukan sebagai berikut :

- Pengetahuan teknis apa yang anda miliki?

- Tools dan sumber daya apa yang tersedia serta seberapa banyak waktu yang anda miliki?

- Software

- Web authoring tools

- Image editing and tools

- Animation tools

- Hardware

- Camera (video and/or still)

- Scanner

- Orang lain

:: berfikirlah jangka panjang! pastikan anda memahami kemampuan dan sumber daya ini (dalam hal ini orang, teknis atau biaya) untuk me-maintain web site anda kemudian hari, jika terdapat kekurangan berusahalah sebijak mungkin dalam mengelolanya.

Memetakan Web site yang sudah ada

Membuat sebuah algoritma sebagaimana seorang programmer menyebutkan hal ini sebagai flowchart (alur yang akan dilalui sejak “mulai” dan diakhiri dengan “selesai”), namun hal ini tentunya tidak menjadi sesuatu yang bersifat mengikat sehingga cara apapun yang kita pandang sebagai cara pemetaan itu lebih layak untuk dipakai dibanding terlihat keren namun kenyataan yang ada tidak terealisasi satupun juga dari rencana yang telah kita buat jauh-jauh hari.

Tahap dalam pemetakan sebuah web site

- Memetakan seluruh halaman dan link dari web site yang sudah ada

- Halaman dinyatakan oleh kotak sedangkan garis menunjukkan link

- Tunjukkan seberapa “dalam” web site anda

 Mengenai kedalaman suatu web site

- Dalam dan sempit

- Hanya ada sedikit link pada setiap halaman

- Banyak tingkatan halaman

- Dangkal dan luas

- Banyak link pada setiap halaman (terutama halaman utama)

- Seringkali hanya ada sedikit tingkatan halaman

Struktur yang dalam

Struktur yang dangkal

Merancang Web site baru

Setelah memahami dan melaksanakan beberapa tahap yang telah disebutkan dan dijelaskan diatas tentunya kita berharap sebuah website akan tercipta setelahnya, untuk itu pesan yang sangat bijak disampaikan disini adalah “take in action”, lakukanlah yang mudah dahulu, selamat mencoba. Berikut sedikit perkenalan dan aka disudahi dengan sebuah perancangan website sederhana semoga menuai manfaat bagi saya (penulis) dan kalian semua (pembaca).

Mengapa kita membutuhkan sebuah Website?

Semoga pertanyaan ini tidak sampai menyurutkan kita dalam belajar bahkan sampai berfikir website itu sesuatu yang sulit karena mahal, tidak terjangkau dan bahkan tidak semua kita dapat membuatnya atau bahkan yang lainnya, apapun persepsi kalian dalam hal ini sebaiknya dihilangkan sejauh mungkin dan beranggapan semua hal yang kita inginkan pasti semua kita dapat melakukannya hanya saja semuanya memiliki saat dan bagiannya masing-masing layaknya perkataan saudara saya sekamar di Wisma “Seperti kita saat masih bayi belajarnya mulai dari berkedip, merayap sampai berjalan”. However, Pengguna Internet semakin hari semakin bertambah banyak, sehingga hal ini adalah penanda akan potensi pasar yang senantiasa mengalami perkembangan yang terus-menerus. Semua orang menggunakan Web untuk segala sesuatu yang dilakukan mulai dari pekerjaan sehari-hari sampai dengan memesan makanan karena prosesnya yang cepat, murah, mudah, mendunia & menyenangkan. Sebagai dampak positif dari internet pada saat ini orang lebih suka mencari informasi tentang suatu produk melalui internet dengan mencari virtual (bukan yang sebenarnya) terlebih dahulu sebelum mengunjungi toko atau pasar tersebut untuk mendapatkannya.

Resolusi : Tujuan dan Panduan untuk Suatu Web Site

Kalau sudah cukup memahami minimal setengah dari tulisan saya diatas besar harapan saya anda akan bisa menjawab beberapa resolusi yang saya kemukakan dibawah ini, untuk bersama-sama memulai sesuatu yang baik niatkan dahulu sesuatu yang akan dijadikan tujuan atau bahkan panduan dalam membuat dan merancang suatu website, berikut resolusi tersebut :

- Kenapa anda membuat web site?

- Apa yang ingin dicapai oleh si pemilik web site?

- Apa tindakan pengunjung web site yang diharapkan oleh pemilik web site?

- Apa batasan atau panduan yang harus dipatuhi ketika merancang sebuah web siet?

Apa yang dapat dilakukan dengan sebuah Website?

Pertanyaan ini sulit-sulit mudah tergantung implementasi kita kemana dalam membuat dan merancang sebuah website namun hal-hal yang umum dapat dilakukan oleh sebuah Website sebagai berikut :

• Membuat pengumuman atau pemberitahuan.

• Memberikan pelayanan kepada Customer Anda.

• Menerima masukan dari pengunjung/customer Anda.

• Membagi dan mendistribusi file dan foto.

• Berkomunikasi langsung dengan Customer Anda yang berada di belahan dunia manapun.

Bagaimana cara sebuah Website Bekerja?

Secara sederhana kita memahami bahwa Website hanyalah sebuah kumpulan file yang terletak pada sebuah komputer yang terhubung ke Internet dan disajikan sekehendak perancangnya (authors). Ketika seseorang mengunjungi Website Anda, mereka sebenarnya hanya terhubung ke sebuah komputer dan komputer (yang kemudian disebut sebagai Server) tersebut memberikan file informasi yang ingin mereka lihat atau butuhkan. Ini kedengaran simple, tetapi umumnya komputer biasa tidak memiliki power dan software yang dibutuhkan untuk merespon semua permintaan yang dibutuhkan oleh pengunjung Website Anda. Dan walaupun komputer/server Anda sanggup, komputer Anda akan membutuhkan koneksi/akses Internet yang luar biasa cepat untuk melayani jumlah pengunjung yang setiap saat mengunjungi Website Anda. Nah, Untuk membuat sebuah web sendiri tanpa bantuan jasa pembuat website dibutuhkan lebih dari sekedar ide dan software web editor yang baik dan tentunya familiar dikalangan programmer tentunya lebih diutamakan. Disamping harus menyediakan menu pilihan sebagai feature yang tersedia untuk penggunaan dengan struktur yang jelas, tata-letak dan teknik yang digunakan juga harus harmonis. Dengan demikian, pertama-tanma harus di buat sebuah perencanaan yang matang untuk menghasilkan sebuah web yang baik dan selalu eksis tentunya . Mulai dari pribadi atau komersil, menguntungkan atau tidak menguntungkan, namun demikian dalam perencanaan dan perancangan sebuah web bila kita akan membuat web pribadi jika terdapat kesalahan kecil dapat ditolerin, tidak demikian dengan web perusahaan atau kelembagaan, karena tujuannya adalah menarik sebanyak mungkin pelanggan. Dengan demikian anda dapat melakukannnya tahap-demi tahap untuk menghasilkan yang sejatinya anda harapkan.

Memilih Alamat ( Domain )

Tahap ini memang tidak selalu harus dilakukan dalam tahap pertama tetapi harus di pertimbangkan alamat apa yang akan digunakan oleh web yang akan anda buat. usahakan untuk segera membeli sebuah domain yang diinginkan. Jangan sampai web anda selesai dengan bagus, tetapi domain yang anda inginkan sudah dipakai oleh pihak lain. Sebagai contoh saya telah membeli domain dengan selang waktu sebulan sebelum web saya akan saya rancang untuk mendapatkan domain yang saya harapkan karena berulang kali domain yang saya idamkan ternyata selang beberapa waktu selalu diperoleh orang lain dalam hal ini tentunya domain yang mudah diingat, kompetensi baik, dan relevan dengan tujuan website yang akan dibuat.

Memilih Hosting

Hosting adalah tempat dimana anda meng-host atau menyimpan file web yang anda buat. Tentukan apakah anda ingin membeli ruang hosting ataukah akan membuat serve web anda sendiri. Jika anda memilih meng-hosting file web anda, maka pilih penyedia hosting yang tidak lagi diragukan kehandalannya atau anda tanyakan kepada kawan dan bisa juga dengan cara sharing dengan user lainnya via internet, namun jika belum berfikir sama sekali saya menyarankan Indonix bisa menjadi pilihan anda. Jika anda memilih membuat serve web anda sendiri, gunakan aplikasi-aplikasi yang telah handal dan dipercaya kehebatannya untuk digunakan sebagai serve sebuah web dan anda juga bisa menyewa seorang IT untuk men-setting dan membuat sistem keamanan yang bagus untuk menghindari dari serangan para Hacker dan Cracker sebagai pihak yang tidak memiliki izin akses sama sekali.

Membuat Rancangan Yang Benar

Pertama-tama anda harus jelas menentukan rancangan yang jelas. Siapa yang anda tuju, bagaimana penampilan halaman, sarana dan teknik apa yang anda gunakan, dan anda juga harus sudah memikirkan efek multimedia apa yang anda gunakan untuk mempercantik halaman web anda. Contohnya anda ingin menambahkan animasi bergerak pada web nanti, anda dapat menggunakan Macromedia Flash untuk membuatnya.

Merancang Tampilan Website

Jika anda telah mengerti dengan jelas (meskipun sebenarnya belum, tetap akan saya anggap telah mengerti ) kearah mana web anda tertuju, sekarang anda tinggal membuat tampilan web anda semenarik mungkin agar pengunjung betah, tidak bosan dan sesering mungkin mengunjungi web milik anda. Biasanya ide kreatif muncul jika kita sesering mungkin browsing untuk melihat-lihat dan mengambil ide kreatif dari pesaing. boleh meniru asalkan tidak sama persis, seperti akronim yang disampaikan oleh pak Purdi E Chandra (pencetus dan pemilik bimbel Primagama) “BOBOL” = Berani Optimis Bisnis (usaha) Orang Lain. Hanya sebaiknya dibuat variasi lainnya yang lebih menarik lagi. Atau anda juga bisa mendownload template web dari internet secara gratis atau ada juga yang berbayar dengan mencarinya pada google.

Menguji Sebelum Menghosting

Hal ini merupakan tahapan pembuka sebelum web anda benar-benar akan sampai kepada media yang lebih luas tentunya untuk menjawabnya tahapan ini perlu diketahui sebab beberapa kesalahan pasti akan anda temukan setelah selesai merancang web anda, konsistensi web, pengujian hyperlink, posisi elemen-eleman halaman yang benar pada setiap halaman web harus terus diamati, seperti halnya tampilan secara umum yang akan disajikan nantinya. Anda juga dapat meminta bantuan kepada teman anda untuk mengkoreksi web anda, karena pada umumnya mereka dapat memberikan saran-saran terbaiknya untuk perbaikan web anda. Jika anda ingin agar para pengunjung mendapat penampilan halaman yang sama, anda harus menggunakan pengujian pada browser-browser yang ada dan familiar dikalangan pengguna internet. Sebagai misal Internet Explorer, Netscape Navigator, Opera, Google Chrome dan Mozilla Firefox.

Meng-update Secara Berkala

Setelah anda melalui berbagai alur/tahapan dalam pembuatan website pribadi, orang lain atau bahkan lembaga dan telah berhasil meluncurkan web yang telah anda desaign sendiri tersebut tahap demi tahap. maka sudah waktunya anda meng-update secara berkala agar para pengunjung tidak bosan dan jenuh dengan isi informasi (content) web yang anda kelola. Lakukan perbaikan secara berkala agar menyempurnakan web tersebut dikemudian hari, tampilkan semua saran dan kritik para pengunjung untuk mengkoreksi atau memberikan ide-ide kreatifnya untuk anda, hal ini cukup efektif sebagai motivasi terkuat untuk anda agar terus membaik kedepannya.

PERENCANAAN DAN PERANCANGAN WEBSITE

Pada bagian sedikit akan saya sampaikan beberapa bagian yang terbilang cukuplah penting diketahui untuk merencanakan serta merancang bangun sebuah halaman site secara umum, hanya saja tidak akan saya jelaskan secara panjang lebar tentang semuanya (seperti biasa sesuatunya memiliki waktu dan porsi masing-masing ) dan akan lebih sebagai pembuka cakrawala pemahaman atau bahkan titik cerah sebagai arah yang mendekatkan kita kepada tahap dan prosedur yang sebenarnya akan kita alami ketika membuat sebuah sebuah site nantinya, berikut hal-hal mendasar (tahap-tahap) yang maksudkan tersebut.

Sekilas tahap merancang atau merancang ulang web site. (Headline step : Website Authoring or Reauthoring)

- Mereview kebutuhan/keinginan audience

- Menentukan struktur web site (peta web site)

- Mengumpulkan isi web site (informasi, visual)

- Membuat rancangan visual

- Membangun web site dalam mode “test”

- Lakukan pengujian user dan kalau perlu lakukan perubahan

- Lakukan pembuatan website

- Web site di-maintain dan di-update

:: setiap langkah yang akan ditempuh harus dikonsultasikan dengan pemilik web site.

HTML (Hypertext Markup Language)

- HTML adalah bahasa dari WWW

- File HTML = halaman web

- Syntax HTML

- Dokumen HTML mengandung tag markup

- <H1> Example </H1>

- tags adalah case insensitive

- <H1> atau <h1> sama saja

- Atribut tag bisa case sensitive

- Misalnya namafile

- Tag biasanya berpasangan yang terdiri dari tag pembuka dan penutup

- <H1> Example </H1>

Dokumen HTML

Dokumen HTML yang minimal

<html>

<head>

<title> document title </title>

</head>

<body>

document body - text . . .

</body>

</html>

Cascading Style Sheets (CSS)

- Mekanisme untuk menambahkan style ke sebuah dokumen HTML

- Dibuat untuk memisahkan isi dari penampakan

- Contoh penggunaan CSS :

<STYLE TYPE=“text/css”>

css rules ...

</STYLE>

____________________________________________

<LINK REL="STYLESHEET"

TYPE="text/css"

HREF=".../my_style.css">

____________________________________________

<TAG STYLE=“css-rule;...;css-rule”>...</TAG>

Active Web pages

- Untuk meningkatkan web site anda

- Interaksi dua arah

- Animasi halaman

- Multimedia yang lebih baik

- Akses ke sistem lain

Beberapa teknik yang bisa digunakan:

- CGI - Common Gateway Interface

- Server WWW berkomunikasi dengan program lain(CGI scripts)

- SSI - Server Side Includes (*.shtml)

- PHP

- API - Application Programming Interface

- Cookies (“making a browser remember”)

- scripting languages (embedded in HTML document)

- Javascript, VBscript, …

- DHTML

- Java (applets, servlets)

- ActiveX

Who is doing the job?

- browser downloads and automatically executes program (Java applet) OR

- HTML document is generated on the server machine (by CGI or PHP script)

contoh:

- forms (feedback processing)

- special tags: <FORM>, <INPUT>, <SELECT>, ...

- Biasanya skrip CGI dan PHP digunakan untuk mengolah form

- active maps (clickable maps)

- special tags and attributes: <MAP>, <IMG>, ...

- client-side or server-side (CGI scripts are used)

- database or other internet service gateways

Cookies

- cookies.txt

- Informasi mengenai komunikasi antara client dan server

- Data dikirimkan dalam sebuah header Set-Cookie oleh server

- dikembalikan di dalam header Cookie oleh browser bila server tersebut dikunjungi

- security ?

Scripting languages

- JavaScript, VBScript, ...

- embedded in HTML source

- workload is on the clients side

- simple example:

<HTML>

<HEAD>

<SCRIPT LANGUAGE=“JavaScript”>

document.write(“Hello World!”)

</SCRIPT>

</HEAD>

<BODY>

Example

</BODY>

</HTML>

Java

- object oriented programming language

- platform independent

- programs are transferred via network and executed on client side - applets

- Java programs executing on server side - servlets

- special development tools (JDK, …)

- http://www.javasoft.com

- http://www.javaworld.com

- http://www.gamelan.com

Security

- plain WWW is not secure!

- security on:

- content level

- PGP, data encription

- channel level

- SSL (Secure Socket Layer)

- message level

- SHTTP, PEP, ...

Authoring (membuat) halaman Web

- Kita memerlukan:

- authoring tools untuk membuat materi

- HTML authoring tools

- tools untuk mengedit grafis dan multimedia

- Web server

- Beberapa mekanisme publikasi

- Paling tidak kemampuan mengupload file ke server

Authoring (membuat) HTML files

- File HTML dapat dibuat menggunakan:

- simple editors

- specialized tools (HTML authoring tools)

- Tool tambahan

- Untuk membuat (mengedit) multimedia (graphics, audio, video)

- Untuk validasi HTML validation

- untuk mengembangkan kode Java (JDK)

- Untuk maintenance web site

Simple editors

- Notepad, vi, emacs, joe, ...

- Harus mengerti betul HTML

- Sangat mungkin timbul kesalahan

- Perlu validasi

- Baik untuk halaman tunggal

- Tidak sering digunakan lagi dengan adanya tool khusus untuk membuat halaman HTML (authoring tools)

Authoring tools

- Dreamweaver, Adobe GoLive, HomeSite, HotMetal, Netscape Composer, MS Front Page, MS Office, ...

- commercial, shareware, freeware

- Memudahkan penulisan HTML

- Menawarkan WYSIWYG (What You See Is What You Got)

- Validasi secara otomatis

- Selalu dikembangkan

- Fitur tambahan:

- CSS editor

- (Java)script editor

- templates (web pages, style sheets)

- image editing (clickable maps, …)

- handling multimedia objects

- web site maintenance capabilities

- database support (ODBC)

Where to put the files?

• WWW server document tree:

> cd /…/htdocs/

> chmod 775 .

> vi index.html

> ...(upload and/or edit files)...

> chmod 664 *

• Home Pages:

> cd

> chmod 711 .

> mkdir public_html

> chmod 755 public_html

> ...(upload and/or edit files)...

> chmod 644 *

Mempromosikan Web site

- Daftarkan web site anda ke search engine :

- “one is nothing”

- follow the rules

- use meta tags

- promotion tools:

- http://www.submit-it.com

- http://www.register-it.com

- http://www.ambition.com/register

Good practices

- Ikuti standard HTML yang sudah ada

- Jangan menggunakan ekstension yang khusus

- Jangan menggunakan tag yang baru muncul

- Pikirkan semua user:

- (all) browsers and computer platforms

What is a bad design?

- Halaman terlalu panjang, terlalu banyak scrolling, dan teks yang membosankan

- Tidak terstruktur

- Tidak ada navigasi

- URL terlalu panjang

- Terlalu banyak multimedia

- Gambar besar

- Terlalu banyak gambar dan/atau video clips

- Gangguan musik

- Animasi yang membosankan

- Kualitas gambar jelek

Sumber :   

1. Pak Taufan Riyadi

2. Pak Tutun Juhana

Posted in: TUGAS SOFTSKILL