Basic Web Design

BASIC WEB DESIGN By Sugeng Wibowo ([email protected]) 1. Pengantar Web Page 2. Pengetahuan Dasar Pembuatan Website 3.1 Pemahaman elemen-elemen dalam situs web Desain grafis, Web Content animasi Programming 3.2 Perangkat software pendukung untuk pembuatan web 3. Membuat Website Sederhana dengan MS Frontpage 4. Menampilkan Website di Internet 5. Parameter Evaluasi Sebuah Situs

Author: Sugeng Wibowo [email protected] www.myindo.co.id

I. Pengantar tentang Web Page Web page merupakan sarana alternatif dalam penyampaian informasi (media lainnya misal: koran, brosur, televisi), yang berbentuk HTML file (biasanya berekstensi *.htm atau *.html). Pada awal perkembangannya dalam dunia internet, web page hanya berupa text (tulisan) dan beberapa gambar seperti koran pada umumnya. Dengan berkembangnya teknologi internet, web page juga ikut berkembang. Web page tidak hanya berisi informasi berupa text dan gambar, tapi juga berisi audio (suara), animasi dan video (visual audio). Selain itu informasi menggunakan web page juga banyak mengalami perkembangan, mulai dari informasi pengetahuan, permainan online dan sampai menjadi sarana iklan. Mengapa banyak orang menggunakan fasilitas ini? Sebenarnya banyak faktor yang mempengaruhi, tetapi alasan yang paling banyak dikemukakan adalah karena faktor kemudahan dalam distribusi, kecepatan penyampaian informasi, dan interaktivitasnya dibandingkan dengan sarana konvensional lainnya (mis: televisi dan koran). Kesimpulan : -

fungsi dari web page adalah sarana alternatif dalam penyampaian informasi.

-

Informasi yang ditempatkan dalam web page bermacam-macam (mis: pengetahuan, berita, permainan, iklan)

-

Faktor kebutuhan menggunakan web page antara lain: o

Kemudahan dalam pendistribusian informasi ke khalayak umum (tidak terbatas ruang dan waktu).

o

Kecepatan penyampaian informasi yang uptodate.

o

Informasi yang disampaikan lebih interaktif dibandingkan media lainnya.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

II. Pengetahuan Dasar Pembuatan Website Website pada intinya adalah hasil dari rangkaian program yang tersusun secara sistematis dan dasar pemrograman web adalah HTML.

3.1 Pemahaman elemen-elemen dalam situs web Desain grafis Terkait dengan tampilan, layout, pewarnaan dan elemen lainnya.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Contoh desain web situs yang menarik

Web Content Isi/content adalah bagian terpenting dari website! Satu elemen yang harus diperhatikan dalam sebuah web, karena web merupakan media untuk menyajikan informasi yaitu isi dari website. Ketika Anda ingin membuat web, sebaiknya anda membuat struktur content terlebih dahulu. Misalkan, Anda ingin membuat web personal, anda merencanakan isinya misalkan: 1. Profil a. Riwayat pendidikan b. Riwayat pekerjaan c.

Pengalaman organisasi

2. Galeri Foto 3. Catatan Pribadi 4. Buku Tamu 5. Links 6. Download Struktur content terkait ke banyak hal, seperti di desain tampilan/layout, programming, dan lainnya.

Animasi dalam Halaman Web Banyak macam format file yang digunakan animasi dalam web, tapi yang sering digunakan adalah Animasi GIF, Java Applets / ActiveX Components, DHTML manqgunakan JavaScript / VBScript. dan Macromedia Flash. Animasi GIF Animasi GIF merupakan format yang paling umum digunakan untuk animasi di web saat ini. Animasi GIF terdiri dari dari image-image dalam format GIF dan diatur dengan urutan tertentu (dengan delay tayangan tertentu pula untuk setiap image), kemudian digabungkan kedalam satu file yang berformat GIF juga. Java Applets / ActiveX Components Java Applets adalah program kecil yang dibuat dari bahasa Java (bahasa program yang dibuat oleh Sun - dan sangat berdeda dengan JavaScript yang dikeluarkan oleh Netscape) dan cukup kecil unfuk didownload oleh browser. Contoh Java Applets dapat anda lihat di http://java.sun.com/applets/ ActiveX Components (yang diterbitkan oleh Microsoft) hampir sama dengan Java Applets dan dapat ditempelkan dalam Internet Explorer web pages secara langsung dalam penggunaannya. Author: Sugeng Wibowo [email protected] www.myindo.co.id

Contoh sederhana adalah menepelkan file AVI kehalaman web menggunakan tag EMBED, sehingga file tersebut dapat di-play, pause dan stop. DHTML manggunakan JavaScript / VBScript DHTML Adalah Halaman Web yang dapat bergerak, beranimasi maupun merespon input dari pengunjung web setelah terdownload. DHTML memberikan interaktivitas kepada pengunjung web tanpa membebani Webserver dan tanpa perlu mendownload applets. Macromedia Flash Flash adalah format animasi yang dapat menggabungkan vektor image, video, teks, audio, dan bitmap image dalam satu file.

Programming Programming web dasarnya adalah pemrograman HTML yang kemudian berkembang dengan adanya CSS (Cascading Style Sheet) untuk mengatur tampilan, lalu javascript untuk menambahkan berbagai macam kelengkapan web seperti pembuatan calendar, menu dan lainnya. Berikutnya berkembang lagi ke bahasa pemrograman tingkat lanjut seperti PHP, ASP, JSP, Perl, Phyton, JAVA, CGI dan lain sebagainya.

3.2 Perangkat software pendukung untuk pembuatan web Desain grafis: •

Adobe Photoshop,

•

Paintshop

•

Corel Draw , dsb.

Web Editor: •

MS Frontpage,

•

Macromedia dreamweaver , dsb.

Text editor (programming/scripting editor) : •

notepad,

•

EditPlus, dsb

Animasi : •

Gif Animator,

•

Macromedia Flash, dsb

Author: Sugeng Wibowo [email protected] www.myindo.co.id

III. Membuat Website Sederhana dengan MS Frontpage 1. Pendahuluan Sebelum kita membuka program Microsoft Frontpage 2000, kita siapkan dahulu sebuah direktori baru untuk tempat file web yang akan kita buat, misalkan di : C:\my documents\web Selanjutnya kita mulai menggunakan FrontPage, jalankan dari window Start - Program Microsoft FrontPage

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Kemudian akan muncul tampilan frontpage editor seperti pada gambar. Tampilan awal merupakan halaman baru dengan nama file new_page_1.htm yang merupakan nama default dari frontpage editor. Format file web bisa berupa htm maupun html. Nama file ini bisa diganti sesuai dengan keinginan pengguna.

Nama file

Frontpage editor HTML

Tampilan hasil editor

Gambar Tampilan Editor Frontpage Sekarang kita dapat mulai mengedit web kita. Untuk langkah awal, kita bisa mengetikan isi dari web yang kita buat, lalu disimpan (save atau save as) didalam folder/direktori yang telah kita siapkan sebelumnya. Misalkan nama file tersebut adalah belajar1.htm disimpan di folder web yang sudah kita siapkan. Pada saat kita menyimpan web kita, terdapat 3 pilihan yaitu nama file (file name :) , judul page (page title) dan format file yang akan disimpan (save as type). Isi nama file dengan belajar1.htm, judul page dengan My Personal page, dan format file web pages. Author: Sugeng Wibowo [email protected] www.myindo.co.id

Merubah Title/judul page

Nama File

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Untuk melihat hasilnya kita bisa melihatnya dengan frontpage maupun dengan browser seperti Internet Explorer, Netscape Navigator maupun browser lainnya.

Gambar di bawah ini merupakan hasil dari web yang telah kita buat dengan menggunakan browser Internet Explorer dengan langkah-langkah : klik File – Open – Browse – cari nama file di direktori tempat file disimpan.

2. Mengedit Web Dengan Microsoft Frontpage 2000 Sekarang kembali ke FrontPage Editor.Sekarang kita coba memperindah tampilan web kita yang masih sederhana tadi. Gantikan jenis heading judul web menjadi Heading1 dengan cara sebagai berikut: 1. Arahkan mouse ke judul web (yaitu baris paling atas yang berbunyi "Home Page ku yang Pertama") 2. Klik combo box style yang terletak pada kiri atas toolbar, pilih Heading1. Author: Sugeng Wibowo [email protected] www.myindo.co.id

2. klik disini 1. arahkan mouse ke sini

3. klik disini

Lihat apa yang terjadi pada halaman web anda sekarang. Lalu arahkan mouse ke kata frontpage di paragraph pertama. Kita ingin mengganti font-nya menjadi font Courier New. Double click kata frontpage itu, lalu tekan combo box Font dan pilih Courier New seperti pada gambar.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

2. klik disini

3. klik disini

1. double click disini

Lihat lagi apa yang terjadi pada halaman web anda sekarang. Sekarang arahkan mouse pointer ke paragraph pertama tepat sebelum kata "Homepage pertama …". Kita ingin menambah garis vertikal yang terkesan seperti garis tiga dimensi di bawah judul sepanjang dokumen. Lalu pilih menu Insert - Horizontal Line. Lihat pada gambar.

2. klik disini

1. arahkan mouse dan klik disini

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Sekarang kita ingin membuat efek huruf membesar pada awal paragraf. Blok huruf H pada kata "Hari". Lalu tekan pilih ukuran font nya (misalkan pilih 14 pt). Lihat apa yang terjadi.

Sekarang blok kata homepage pada paragraph ke dua. Lalu tekan tombol Bold (

) pada

toolbar. Perhatikan apa yang terjadi. Kemudian blok frase " mudah mengubah tampilan" pada paragraph yang sama dan tekan tombol Italic (

). Masih pada paragraph yang sama, blok

frase " Microsoft Frontpage 2000" dan tekan panah untuk tombol text color (

) sehingga

muncul window seperti ini:

Pilihlah warna merah lalu tekan tombol OK. Selagi frase itu masih ter-blok tekan tombol underline (

) lalu perhatikan apa yang terjadi.

Sekarang home page kita telah "sedikit lebih indah". Jangan lupa men-save setiap kali ada perubahan pada dokumen kita. Jika semua berjalan dengan baik, dari Internet Explorer web kita akan terlihat seperti ini: Author: Sugeng Wibowo [email protected] www.myindo.co.id

OK, kita telah mempelajari dasar-dasar peng-editan dokumen web melalui FrontPage. Kebanyakan fungsi edit FrontPage Editor terletak pada toolbar yang nama dan fungsinya dapat dijelaskan sebagai berikut: Tombol save

Combo Jenis Style

Combo Jenis Font

Bold Italic

Combo Ukuran Font

Justifikasi Paragraph Underline

List Number

Bulleted List Warna Font

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Membuat Hypertext/hyperlink Inti dari web adalah hypertext, jadi marilah kita mulai belajar membuatnya pada dokumen kita. Kembali lagi ke FrontPage Editor. Pertama kita ingin membuat hyperlink (link) pada kata frontpage di paragraph pertama yang menuju ke suatu informasi detail tentang apa itu frontpage. Kita ingin bahwa informasi itu berada pada dokumen lain tapi masih berada pada satu lokasi dengan web kita. Caranya adalah: 1. Blok kata "frontpage" 2. Tekan tombol Hyperlink

2. klik di sini

1. Double Click disini

3. Jika window seperti ini muncul, pilih file tujuan link tersebut. Misalkan kita telah mempunyai file frontpage.htm di folder yg sama dengan file belajar1.htm dan file tersebut merupakan tujuan dari link yang akan kita buat.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Isi disini apabila link ke alamat URL tertentu

Klik disini Untuk link ke file lain

selanjutnya klik seperti pada gambar di atas, lalu pilih file frontpage.htm lalu tekan tombol OK. Setelah itu simpan (save) file tersebut. Kita bisa melihat hasilnya pada browser misalkan Internet Explorer, Kata frontpage telah menjadi hypertext dan dapat di-click menuju informasi detail tentang frontpage. Simbol link

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Hypertext yang baru saja kita buat mempunyai "link" ke satu dokumen (yang bernama frontpage.htm) yang berada pada satu folder dengan file belajar1.htm. Dan pada umumnya suatu hypertext/link ditunjukkan dengan gambar sebuah tangan, seperti pada gambar. Sekarang homepage kita telah memiliki satu link ke satu dokumen lain, walaupun masih dalam satu web. Sekarang kita ingin membuat hypertext yang me-link ke suatu web pada satu alamat internet tertentu yang tentu saja berada bukan satu server/lokasi dengan web yang sedang kita buat. Blok frase Microsoft FrontPage 2000 pada paragraph kedua. Lalu tekan tombol Hyperlink.

Isikan alamat homepage yang ingin dituju (yaitu http://www.microsoft.com/frontpage ) pada kolom URL seperti pada gambar di bawah ini.

Setelah itu klik tombok OK. Perhatikan tampilan homepage kita sekarang dan jangan lupa men-save file setelah diedit

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Tampilan homepage kita dilihat dari Internet Explorer sekarang telah menjadi seperti ini, dan coba klik hypertext yang baru saja kita buat.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Ok, sekarang kita telah mempelajari bagaimana membuat sebuah web baru, mengedit dokumen web, membuat hyperlink dengan frontpage. Tidak ada satu baris kode HTML pun yang kita ketikkan. Frontpage telah membuatkannya untuk kita. Coba lihat dari browser misalkan Internet Explorer pada menu View - Source, kode-kode itulah yang telah dibuatkan oleh frontpage untuk kita. Kode tersebut adalah bahasa HTML (HyperText Markup Language) merupakan bahasa program penyusun tampilan web.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

4. Menyertakan Gambar pada dokumen web Serikali kita ingin menyertakan gambar pada dokumen web. Dengan frontpage ini gampang sekali dilakukan asal kita telah memiliki file gambarnya. Untuk menyertakan gambar, arahkan kursor pada lokasi dimana kita ingin meyertakan gambar lalu klik tombol Insert Picture From File (

) sehingga muncul window baru seperti gambar di

bawah ini:

Sekarang kita diminta untuk menentukan file gambar yang akan kita sertakan dalam homepage. Author: Sugeng Wibowo [email protected] www.myindo.co.id

Pada saat kita klik pertama kali tombol

maka frontpage langsung menanyakan file di dalam

komputer kita. Apabila kita klik tombol cancel, maka ada tiga pilihan lokasi sumber gambar yaitu: 1.

Select a file on your computer (

). Untuk menyertakan gambar yang berada

pada web yang sedang kita edit sekarang. Di kolom daftar file dan direktori akan kelihatan struktur direktori web dan nama-nama file yang ada.

2.

Use your web browser

to select a page or a file (

). Untuk meyertakan

gambar yang berada pada lokasi lain selain pada web yang sedang kita edit sekarang. Lokasi lain ini bisa pada alamat homepage web lain maupun lokasi file lokal. 3.

Clipart. Untuk menyeratkan gambar yang berada pada database gambar (clipart) bawaan fp. Di sini banyak terdapat gambar-gambar yang bagus dan siap digunakan pada web kita

Sekarang kita akan menyertakan gambar yang berasal dari file yang telah ada pada hard disk. Pada window di atas klik pilihan Select a file on your computer ( pada saat kita menekan tombol

) ataupun langsung memilih

. Setelah kita pilih file gambar, klik tombol OK.

Pada training kali ini kami telah menyiapkan beberapa contoh gambar yang siap digunakan untuk disertakan pada halaman web. Lokasi direktorinya adalah c:\My Documents\belajar\images. Pilih salah satu gambar misalnya computer.jpg. Biasakan men-save gambar pada direktori images. Sekarang web kita akan menjadi seperti pada gambar di bawah ini :

Author: Sugeng Wibowo [email protected] www.myindo.co.id

5. Mengubah latar belakang dokumen Kita dapat mengubah latar belakang dokumen web sehingga tampilannya menjadi lebih menarik. Pada FrontPage Editor tekan tombol mouse kanan pada salah satu area dokumen. Kemudian pilih Page Properties.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Kemudian pada window yang muncul lakukan langkah-langkah sebagai berikut:

1. klik disini

2. klik di sini

3. klik di sini untuk memilih file

Ketika kita klik tombol Browse, akan muncul window baru sebagai berikut:

Lalu kita pilih file gambar sebagai background page dan kita telah disediakan di folder image file background yaitu bg_kotak.gif. Author: Sugeng Wibowo [email protected] www.myindo.co.id

Setelah tombol OK di klik pada page properties akan

meminta konformasi bahwa kita telah

mengubah konfigurasi sebelumnya. Klik tombol OK untuk menampilkan halaman web dengan background sebuah gambar. Hasil tampilan web setelah kita berikan background gambar adalah sebagai berikut :

Author: Sugeng Wibowo [email protected] www.myindo.co.id

IV. Menampilkan Website di Internet Anda sudah membuat situs web (website) di komputer Anda dan bisa diakses dengan menggunakan browser (Microsoft Internet Explorer, Netscape Navigator maupun browser lainnya) di komputer Anda sendiri. Akan tetapi situs web tersebut hanya bisa dilihat di komputer Anda sendiri, sedangkan orang lain di komputer yang lain tidak bisa mengaksesnya, mungkin bisa dengan mekanisme share folder akan tetapi ada permasalahan lain, yaitu pada saat Anda ingin situs web tersebut bisa diakses di browser Internet dengan alamat http://www…….. , tentu hal tersebut tidak bisa dilakukan begitu saja. Bagaimana caranya ?

Tentu saja situs web Anda harus disimpan di sebuah tempat (server) yang bisa diakses oleh semua orang yang terkoneksi ke Internet. Misalkan Anda ingin mempunyai sebuah situs web di Internet dengan alamat tertentu: http://www.namaku.com Bagaimana caranya ? bagaimana prosesnya ? apa yang harus Anda lakukan supaya situs web Anda bisa diakses di Internet dengan sebuah alamat tertentu ?

Dari sisi data website Anda: 1. Website Anda sudah siap untuk ditampilkan, bisa dilihat di komputer pribadi Anda dengan baik. 2. Pastikan data situs web Anda terbebas dari kesalahan/eror supaya bisa tampil dengan baik di Internet. Dari sisi proses menampilkan situs web di Internet: 1. Anda harus memiliki account web hosting untuk menyimpan data situs web Anda di server tertentu. 2. Anda harus mempunyai nama domain tertentu. 3. Anda harus mengetahui cara memasukkan data (upload) dari komputer pribadi Anda ke hosting server.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Berikut ini merupakan diagram alir secara umum mengenai proses sebuah situs web supaya bisa tampil di Internet:

Data Website Anda sudah membuat website di komputer anda (dengan catatan data sudah siap dan bebas dari eror/kesalahan)

Punya nama domain & account hosting ?

Sudah

Belum

Registrasi

Web Hosting Tempat untuk menyimpan data website yang terkoneksi dengan Internet selama 24 jam.

Nama Domain Alamat website anda supaya pengakses internet mengetahui bilamana mereka ingin mengunjungi website anda

You have Account Anda telah memiliki account untuk akses ke web hosting server dengan alamat host tertentu. anda akan mendapat data: 1. host address (umumnya menyesuaikan dengan nama domain) 2. Username 3. Password

Proses Upload Memasukkan data website anda ke web hosting server dengan data account yang anda miliki.

Website Tampil di Internet website anda akan tampil di internet dengan alamat domain yang telah ditentukan sebelumnya.

Proses sebuah situs web supaya bisa tampil di Internet Author: Sugeng Wibowo [email protected] www.myindo.co.id

V. Parameter Evaluasi Sebuah Situs Proses optimasi pada umumnya diawali dengan evaluasi dari sebuah situs yang sudah ada, menemukan sisi lemah dan terakhir adalah proses optimasi sebuah situs dari sisi desain grafis dan animasi. Selanjutnya proses desain web akan terus optimal seiring pengalaman dan pemahaman anda bahkan dimulai pada proses awal anda membuat sebuah website. Parameter-parameter yang dinilai pada saat mengevaluasi sebuah situs secara umum meliputi : -

Readability

-

Speed/Kecepatan

-

Accuracy/Ketepatan

-

Mobilitas Content

-

Efficiency

Parameter-parameter tersebut akan berpengaruh pada saat anda memulai sebuah pekerjaan untuk membuat sebuah desain grafis maupun pada saat membuat animasi untuk website.

1. Readability Apakah situs tersebut nyaman dibaca ? apakah pengakses bisa mudah membaca dan mengerti isi situs ? Sebagai penyaji informasi, selayaknya sebuah situs harus memperhatikan faktor kenyamanan dan kemudahan pengakses pada saat mengunjungi situs tersebut Ada beberapa parameter yang harus kita pertimbangkan pada saat kita ingin membuat sebuah situs yang nyaman dibaca, diantaranya kita harus memperhatikan :

-

Who is Target Audience ? Siapakah target pengakses situs kita ? Sebagai contoh, pada saat kita membuat situs yang akan dibaca oleh pengakses yang berusia di atas 40 tahun maka kita harus menyajikan informasi dengan huruf yang besar dan jelas, bukan menampilkannya dengan font-font yang kecil ukurannya yang membuat pengakses tidak nyaman dan kesulitan membacanya. Pengkatagorian isi mengikuti target pengunjung seringkali diperlukan untuk situs yang berskala besar seperti situs institusi pendidikan, situs pemerintahan, situs komunitas. Hal ini semata-mata untuk memudahkan pengunjung supaya mereka bisa dengan mudah mengakses informasi yang mereka butuhkan.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

-

Pemilihan warna. Warna merupakan salah satu elemen yang penting dalam tampilan sebuah situs. Situs dengan pemilihan warna yang baik akan membuat pengakses nyaman dan mempunyai kesenangan tersendiri pada saat dia mengakses situs dan membaca isi di dalamnya

-

Desain Struktur Content Struktur content yang baik adalah bisa membuat pengunjung merasa mudah dalam mencari sebuah informasi. Struktur content ini bila digambarkan meliputi: Apa sajakah isi dari situs anda ? apakah sajakah menu utama dan sub menu yang akan ditampilkan ? aplikasi web apa sajakah yang akan diletakkan di situs anda ? Pendefinisian isi sebuah situs sangat penting dilakukan pada saat anda memulai sebuah proses desain secara umum.

-

Desain Tata Letak Situs Meliputi bagaimana penempatan isi situs secara umum. Isi situs secara umum seperti ada sebuah menu, lalu ada isi (content) ,

header (title), Footer, dan isi-isi lainnya

menyesuaikan struktur situs yang sudah kita rancang sebelumnya. Lalu misalnya ada sebuah foto yang ingin anda tonjolkan/tampilkan, bagaimana penempatannya? Banner ? dan elemen-elemen lain dari sebuah situs. Kombinasi tata letak dari semua elemen-elemen yang ingin ditampilkan akan berpengaruh pada tampilan dan selanjutnya pengunjung akan menilai tata letak situs anda.

-

Desain Grafis Desain grafis merupakan elemen utama yang diperhatikan oleh pengunjung situs karena disini ada sebuah kondisi dimana pengunjung akan berkomentar, situs ini bagus atau tidak. Parameter-parameter yang kita bahas sebelumnya seperti desain layout, struktur content dan lainnya sangat berpengaruh untuk desain grafis situs anda. Terutama untuk desain tata letak biasanya menjadi satu dalam proses desain. Itu hanya masalah cara dan kebiasaan dari masing-masing desainer.

-

Navigasi Apakah navigasi yang digunakan memudahkan pengunjung untuk mencari informasi dalam situs tersebut ?

Author: Sugeng Wibowo [email protected] www.myindo.co.id

Navigasi yang baik tergantung dari struktur menu yang disusun pada saat pembuatan struktur content secara menyeluruh. Untuk implementasinya di situs bisa menggunakan berbagai macam cara seperti : o

pull down menu

o

jump menu (select form)

o

tree menu

Menu-menu tersebut pada umumnya dibuat dengan pemrograman javascript, applet maupun yang lainnya dan perlu juga diperhatikan kompatibilitasnya dengan browserbrowser yang umum dipakai.

2. Speed Faktor kecepatan tampilnya sebuah situs sangat berpengaruh terhadap pengakses. Pengakses cenderung malas dan langsung menutup browser pada saat mereka membuka sebuah situs yang lambat diakses, sehingga mereka harus menunggu beberapa lama untuk melihat tampilan situs tersebut. Pengakses cenderung tidak mau menunggu terlalu lama untuk melihat sebuah situs. Berikut ini faktor-faktor yang mempengaruhi kecepatan situs pada saat diakses adalah : 1. Ukuran file yang digunakan. Sebuah situs yang menampilkan banyak image/gambar dan animasi dengan ukuran file yang besar akan menyebabkan kelambatan situs pada saat diakses. Hal ini bisa diatasi dengan optimalisasi pada data yang akan ditampilkan terutama untuk text, image dan animasi. 2. Pemilihan hosting server yang tepat. Kita harus pintar memilih hosting server tempat kita menyimpan seluruh data situs yang akan diakses di internet. Tentunya seorang network analyst bisa menganalisa apakah

hosting server yang digunakan cepat atau lambat diakses di internet. 3. Algoritma program untuk sebuah web aplikasi. Saat ini banyak situs yang menggunakan program tertentu seperti asp, php, jsp, cgi dan lain sebagainya untuk membuat web aplikasi seperti news yang dinamis dengan sebuah tools untuk proses update-nya, forum diskusi dan aplikasi lainnya. Bila algoritma program yang digunakan kurang tepat atau bahkan salah, maka akan mengakibatkan lambatnya sebuah situs diakses atau bahkan sama sekali tidak bisa diakses/error. Disini dibutuhkan ketelitian dan kehandalan seorang web programmer pada saat membuat program untuk sebuah web aplikasi. Faktor-faktor di atas adalah faktor dari sisi pemilik situs, dan belum kita bahas dari sisi pengunjung itu sendiri seperti jalur koneksi internet si pengunjung itu sendiri, browser yang digunakan dan faktor lainnya.

Author: Sugeng Wibowo [email protected] www.myindo.co.id

3. Accuracy/Ketepatan isi Apakah di situs tersebut terbebas dari broken link ? bebas dari error ? Pada kasus yang umum hal ini sering terjadi pada saat halaman yang kita tuju tidak ada isinya (The page cannot be found), lalu ada aplikasi-aplikasi yang mengalami gangguan/error, atau bahkan ada yang melakukan percobaan-percobaan/trial situs di area aktif situs tersebut (try & error). Terkadang para web developer lupa untuk tidak melakukan developent atau uji coba di area server yang sudah aktif/running. Tentunya broken link ataupun error tadi harus diusahakan seminimal mungkin untuk sebuah situs yang sudah bisa diakses di internet. Hal tersebut bisa menjadi bug atau titik lemah sebuah situs yang seringkali menjadi celah para hacker untuk merusak situs tersebut.

4. Mobilitas Content Kapan situs tersebut terakhir update ? apakah informasi di situs selalu diperbaharui dan tidak statis ? adakah sebuah kolom interaktif antara pemilik situs dengan pengunjung situs atau bahkan antar pengunjung itu sendiri ? Pengunjung tentunya selalu ingin melihat sesuatu yang baru terutama informasi yang ditampilkan. Bila mereka melihat isi situs selalu sama dan tidak berubah dalam jangka waktu tertentu maka mereka akan menilai situs ini statis dan tidak menarik lagi untuk mereka kunjungi. Bisa anda lihat sebagai contoh yaitu www.cnn.com, www.detik.com mereka menyajikan beritaberita terkini dan mempunyai mobilitas yang tinggi.

5. Efficiency Dalam point ini kita bicara mengenai konsistensi penempatan dan tampilan untuk content desain di setiap halaman. Hal ini akan mempermudah pengunjung dalam pencarian informasi, tidak membingungkan mereka dan dengan adanya konsistensi tersebut akan mempercepat loading

time halaman web. Bayangkan bila ada sebuah situs dimana setiap halaman memiliki perbedaan dalam tata letaknya, misalkan dari sisi penempatan isi, warna teks, penempatan menu dan lain sebagainya. Pengunjung akan kebingungan dan harus menyediakan waktunya untuk memahami maksud dan isi situs tersebut “per halaman”. Sebuah kejadian yang membuat pengunjung merasa malas melihat halaman berikutnya.

Author: Sugeng Wibowo [email protected] www.myindo.co.id