EIGHT GOLDEN RULE OF INTERFACE DESIGN

EIGHT GOLDEN RULE OF INTERFACE DESIGN

Apa yang dimaksud dengan Eight Golden Rule of Interface Design?

Eight Golden Rule of Interface Design adalah delapan aturan dalam mendesain interface yang dikemukakan oleh Ben Shneiderman.Untuk meningkatkan kegunaan dari aplikasi,penting bagi kita  untuk memiliki antarmuka yang dirancang dengan baik. Menurut Shneiderman "Eight Golden Rule of Interface Design" adalah panduan untuk desain interaksi yang baik.

 Berikut merupakan 8 Aturan yang dimaksud :

1. Strive for consistency  

   Maksudnya pengguanaan jenis font, warna, symbol, bentuk tombol harus tetap sama atau tidak mengalami perubahan makna diseluruh bagian program.

2. Enable frequent user to user shortcuts

    Maksudnya program menyediakan suatu tombol khusus yang berfungsi untuk masuk kebagian lain secara langsung dan tidak perlu melalui bagian-bagian yang biasa dilewati 

3. Offer informative feedback  

   Untuk setiap operator action, beberapa di antaranya harus mempunyai sistem feedback. Untuk setiap tindakan yang sering dan sederhana, maka respon yang diberikan juga sederhana,tetapi jika tindakan yang jarang dan major actions, maka respon juga harus lebih substancial.

4. Design dialog to yield closure

     Dalam melakukan berbagai tindakan melalui langkah-langkah yang dibuat, maka harus dibedakan dalam dialog pembuka, isi dan penutup. Hal-hal ini harus dibedakan agar user mengetahui apabila mereka sudah mulai masuk, mengerjakan isi dengan step by step yang benar dan sampai dialog penutup apabila hasil yang dikerjakan user telah benar. 

5. Offer simple error handling

    Sedapat mungkin merancang system yang dapat menghindari pengguna dari kesalahan yang serius. Apabila pengguna membuat kesalahan, Sistem harus dapat mendeteksi kesalahan dan dapat memberikan jalan keluar yang termudah untuk mengatasi kesalahan tersebut.

6. Permit easy reversal of action
    Tindakan harus dapat dibalikkan menjadi keadaan sebelumnya sehingga membuat user merasa aman karena ia tahu bahwa kesalahan yang dibuat dapat diperbaiki.

7. Support internal locus of control

    Dalam hal ini dapat dikatakan bahwa user ingin menjadi raja atas sistem, sehingga akan lebih baik apabila user yang mengendalikan semua sistem ketimbang hal yang terjadi sebaliknya. Sehingga antara user dan sistem dapat tercipta suatu keharmonisan atau hasil yang cukup memuaskan.

8. Reduce short-term memory load

    Manusia mempunyai keterbatasan dalam berpikir, oleh karena itu sistem akan menjadi lebih baik apabila adanya semacam simbol2, atau seperti halaman yang disatukan, atau diberikan waktu yang cukup untuk latihan dan menguasai sistem tersebut.

 

Read More

JAVASCRIPT

JAVASCRIPT

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan di browser.

 

Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan masukan pada formulir sebelum formulir dikirimkan ke server.Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

Sejarah Singkat JAVASCRIPT 

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai LiveScript yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman Java) pada masa itu, maka Netscape memberikan nama JavaScript kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai Jscript di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.

Fungsi JAVASCRIPT 

Javascript biasanya di gunakan untuk menyediakan akses script pada objek embedded(dibenamkan).Javascript biasa digunakan untuk membuat aplikasi,misalnya game,robot,kalkulasi validasi form sebelum mengirim data ke server,widget situs,pop up dan lain lainnnya.

Kelebihan JAVASCRIPT

JavaScript bekerja di client side(sisi pengguna) maksudnya javascript bekerja di browser client dan tindak membebani kinerja server kita. Jadi keuntunganya, Javascript dapat bekerja di hampir semua web browser dan dapat merespon perintah user/client dengan cepat, sekaligus membuat halaman web menjadi lebih responsif

Kekurangan JAVASCRIPT

• Kinerja menjadi lambat apabila digunakan di komputer/perangkat yang spesifikasinya rendah.
• Sangat lambat saat first loading jika halaman sebelum file js tercache.
• Sangat mudah untuk mencuri script kita walau sudah diencrypt dengan cara apapun.
•  Dapat disusupi malware/malicious script. 

Struktur dan Contoh JAVASCRIPT 

<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>

Pembuatan Form

Form input :

<html>
<head> </head>
<SCRIPT language="Javascript">
function test () {
var val1=document.kirim.T1.value
if (val1%2==0)
document.kirim.T2.value="bilangan genap"
else
document.kirim.T2.value="bilangan ganjil"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>BIL <input type="text" name="T1" size="20">
MERUPAKAN BIL <input type="text" name="T2" size="20">
</p>
<p><input type="button" value="TEBAK" name="B1" onclick=test()>
</p>
</form>
</body>
</html>

Form Button :

<HTML>
<HEAD>
<TITLE>Objek document</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function ubahWarnaLB(warna) {
document.bgColor = warna;
}
function ubahWarnaLD(warna) {
document.fgColor = warna;
}
//-->
</SCRIPT>
<H1>TES</H1>
<FORM>
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Hijau"
onClick = "ubahWarnaLB('GREEN')">
<INPUT TYPE = "BUTTON"
VALUE = "Latar Belakang Putih"
onClick = "ubahWarnaLB('WHITE')">
<INPUT TYPE = "BUTTON"
VALUE = "Teks Kuning"
onClick = "ubahWarnaLD('YELLOW')">
<INPUT TYPE = "BUTTON"
VALUE = "Teks Biru"
onClick = "ubahWarnaLD('BLUE')">
</FORM>

<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Dimodifikasi terakhir pada " +
document.lastModified);
//-->
</SCRIPT>
</BODY>
</HTML>

Read More

HTML VS HTML5

HTML VS HTML5

 

 

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.Sedangkan HTML5 merupakan revisi ke-5 untuk menyempurnakan versi sebelumnya yang pernah di keluarkan oleh W3C(World Wide Web Concorcium) namun dalam pengembangan html5 W3C bekerja sama dengan WHATWG (Web Hypertext Application Technology Working Group).

Aturan-aturan yang disepakati dalam pengembangan HTML :

• Fitur-Fitur baru harus berdasarkan pada HTML,CSS,DOM dan Javascript.
• Mengurangi penggunaan plugin-plugin eksternal,misalnya : flash,silverlight etc.
• Memilik error handling yang baik.
• Menambah markup untuk mengurangi scripting.
• HTML5 harus independen
• Pengembangan harus diikuti oleh khalayak umum.

Lalu apa saja yang menjadi kelebihan HTML5 di bandingan HTML?

HTML 5 memiliki beberapa kelebihan dibandingkan HTML,yaitu : offline, audio/video, penyimpanan, 3d grafis, konektivitas, presentasi, akses file, kinerja, dan semantik.

 OFFLINE

HTML5 mendukung penggunaan cache (media penyimpanan pada browser), local storage, web sql & database.Proses ini memang tidak terlihat langsung oleh kita,tetapi dapat kita rasakan ketika kita membuka website yang sebelumnya pernah kita buka,prosesnya akan lebih cepat dibandingkan dengan HTML.Karena kita tidak perlu lagi melakukan proses download data data pada web yang sudah pernah kita kunjungi.

Audio/Video

Untuk memudahkan pengguna,HTML5 memberikan dukungan untuk Audio/Video tanpa harus menginstall plugin-plugin eksternal,seperti flash dan silverlight.Salah satu contoh penggunaan fitur ini dapat Anda lihat di http://craftymind.com/factory/html5video/CanvasVideo.html

Media Penyimpanan (Storage)

Seperti pada konsep Offline fitur, HTML5 mendukung beberapa jenis media penyimpanan baru yaitu Web Storage (name/value pairs), Indexed DB, dan Web SQL Database. Keuntungan dari adanya berbagai macam media penyimpanan ini adalah peningkatan kecepatan dari aplikasi.

3D/Grafis

Ini merupakan salah satu fitur canggih lainnya dan sering digunakan dalam pembuatan permainan/game. Secara teknologi, HTML 5 sudah mendukung pembuatan 2D Canvas, 3D Canvas/ WebGL, SVG, CSS Transform, dan SMIL. Salah satu contoh menarik dari implementasi fitur ini dapat dilihat di http://muro.deviantart.com/  dan http://www.chromeexperiments.com/.  Untuk mengetahui variasi browser yang mendukung fitur ini, Anda dapat mengunjungi http://caniuse.com.

Konektifitas

Fitur ini memungkinkan peningkatan konektifitas seperti pada aplikasi games dan real time chats.

Presentasi

HTML5 bersama-sama dengan CSS 3 dapat dipergunakan untuk menciptakan presentasi yang interaktif menggunakan transformasi 2D, transisi/animasi, 3D transformasi, dan web font (mendukung berbagai jenis tulisan dari berbagai bahasa).

Akses file

HTML 5 memberikan kemudahan untuk aplikasi web dalam membaca file yang berada pada PC/Laptop Anda. Sebagai contoh aplikasi web http://studio.html5rocks.com/#Photos, yang memungkinkan Anda men-drag and drop foto dari komputer Anda ke Browser tanpa melalui fitur upload.

Kinerja

Performance/kinerja dari HTML 5 dapat hampir disamakan dengan aplikasi desktop atau native. Drag-and-drop, animasi, local storage, dan fitur-fitur lainnya pada HTML5 akan mengunguli aplikasi dekstop maupun native dimasa depan.

Semantik

Fitur ini menjadikan web site yang menggunakan teknologi HTML 5 lebih mudah dikenali oleh Google Search Engine. Akibatnya, web aplikasi akan sering muncul pada mesin pencari google sehingga akan lebih sering diakses dan cepat diketahui oleh orang lain.

Dari semua fitur di atas dapat dilihat bahwa HTML5 akan merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan menjadi nilai dari teknologi ini.

HTML5 memang belum menjadi standar resmi,dan belum ada browser yang memiliki dukungan HTML5 secara penuh.Namun pada beberapa browser sudah menambahkan HTML5 pada versi terbaru mereka,misalnya (Safari, Chrome, Firefox, Opera, Internet Explorer) 

Read More