6 Prinsip dalam Membuat Desain User Interface

Posted by: Unknown Posted date: 06:14:00 / comment : 0 infotech, tutorial, webdesaign

Dalam mendesain user interface untuk pengguna atau client, tentunya ada beberapa hal yang perlu diperhatikan. Mengapa? Karena tentunya anda tidak ingin pengguna yang menggunakan produk anda mengalami kesulitan dalam menggunakan produk buatan anda.
Nah untuk itulah prinsip desain user interface ini diperkenalkan oleh Larry Constantine and Lucy Lockwood. Berikut merupakan prinsip dari desain user interface.

1. The structure principle

Tampilan desain untuk user interface harus diatur sesuai fungsinya agar lebih terorganisir. Tampilan yang dibuat juga harus jelas, konsisten dan dapat dipahami oleh pengguna. Misalnya seperti menaruh beberapa hal yang saling terkait fungsinya dan memisahkan yang tidak ada hubungannya. Prinsip struktur ini saling berkaitan dengan keseluruhan arsitektur user interface.

2. The simplicity principle

Desain yang dibuat haruslah sederhana, mudah digunakan, dan dapat berkomunikasi dengan jelas dengan bahasa yang dipahami oleh penggunanya.

3. The visibility principle

Desain yang kita buat sebaiknya dibekali dengan pilihan dan memenuhi kebutuhan pengguna dalam mengerjakan suatu tugas tanpa membuat pengguna kesusahan dengan banyaknya informasi yang sebenarnya tidak diperlukan.

4. The feedback principle

Desain yang baik harus memberikan informasi yang jelas kepada setiap hal yang dilakukan pengguna, seperti ketika menunjukan error ketika ada langkah yang bermasalah, menunjukan keterangan sukses jika langkah yang dilakukan pengguna sudah benar dan lain sebagainya. Intinya harus ada komunikasi yang jelas antara sistem dan pengguna.

5. The tolerance principle

Desain sebaiknya dibuat dengan fleksibel dan toleran, seperti dapat mengurangi kesalahan pengguna dengan menggunakan fitur undo atau redo dan juga mencegah munculnya error.

6. The reuse principle

Prinsip ini mengharuskan pengguna untuk menggunakan kembali komponen internal maupun eksternal. Hal ini dikhususkan agar pengguna tidak perlu mengingat kembali kebiasaan atau input yang telah dilakukan berulang ulang.

Nah kurang lebih seperti itulah prinsip dalam membuat desain user interface yang baik dan efektif. Tentunya ketika anda akan mengembangkan sebuah desain user interface maka dapat menggunakan prinsip diatas sebagai acuan untuk menghasilkan desain yang baik dan mudah digunakan oleh pengguna. Sekian ulasan kali ini, semoga bermanfaat :D

Mengatasi masalah use mysqli or PDO instead in /home/u729743652/public_html di MySQL Id hostinger

Posted by: Unknown Posted date: 14:06:00 / comment : 0 tutorial, webdesaign

Kemarin saya Upload file php ke IdHostinger yang menggunakan Database.
Saat buka page nya muncul comment kayak gini :

Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in/home/u729743652/public_html/publishcomment.php on line 3

Untuk mengatasi masalah di atas ikuti langkah - langkah berikut ini

1. Contoh script php yang sebelumnya

2. Kemudian letakan error_reporting(E_ALL ^ E_DEPRECATED);
Pada script yang bermasalah, lihat gambar di bawah

Coba di test kembali pasti sudah tidak bermasalah lagi, cara ini saya sudah coba dan hasilnya
Berhasil !!

Cara Buat Form Registrasi HTML & CSS (1)

Posted by: Unknown Posted date: 14:59:00 / comment : 9 tutorial, webdesaign

Assalamualaikum Warohmatullahi Wabarokatu.

InfotechBoltim.Org - Pada tutorial pertama saya ini, saya akan membahasa bagaimana cara membuat Form Registrasi menggunakan html dan css.

Yang harus diperhatikan adalah anda harus sudah menginstall Sublime Text, Notepad ++. jika belum punya aplikasi Sublime Text Silahkan download disini via mediafire
Buka aplikasi htm editor: Sublime Text/Notepad ++

Silahkan lihat Kode script html dan css dibawah ini.

html

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>

<form action="index.html" method="post">

<h1>Sign Up</h1>

<fieldset>
<legend><span class="number">1</span>Your basic info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">

<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">

<label for="password">Password:</label>
<input type="password" id="password" name="user_password">

<label>Age:</label>
<input type="radio" id="under_13" value="under_13" name="user_age"><label for="under_13" class="light">Under 13</label><br>
<input type="radio" id="over_13" value="over_13" name="user_age"><label for="over_13" class="light">13 or older</label>
</fieldset>

<fieldset>
<legend><span class="number">2</span>Your profile</legend>
<label for="bio">Biography:</label>
<textarea id="bio" name="user_bio"></textarea>
</fieldset>
<fieldset>
<label for="job">Job Role:</label>
<select id="job" name="user_job">
<optgroup label="Web">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</optgroup>
<optgroup label="Mobile">
<option value="Android_developer">Androild Developer</option>
<option value="iOS_developer">iOS Developer</option>
<option value="mobile_designer">Mobile Designer</option>
</optgroup>
<optgroup label="Business">
<option value="business_owner">Business Owner</option>
<option value="freelancer">Freelancer</option>
</optgroup>
<optgroup label="Other">
<option value="secretary">Secretary</option>
<option value="maintenance">Maintenance</option>
</optgroup>
</select>

<label>Interests:</label>
<input type="checkbox" id="development" value="interest_development" name="user_interest"><label class="light" for="development">Development</label><br>
<input type="checkbox" id="design" value="interest_design" name="user_interest"><label class="light" for="design">Design</label><br>
<input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label>

</fieldset>
<button type="submit">Sign Up</button>
</form>

</body>
</html>

Css

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: 'Nunito', sans-serif;
color: #384047;
}

form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}

h1 {
margin: 0 0 30px 0;
text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}

select {
padding: 6px;
height: 32px;
border-radius: 2px;
}

button {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}

fieldset {
margin-bottom: 30px;
border: none;
}

legend {
font-size: 1.4em;
margin-bottom: 10px;
}

label {
display: block;
margin-bottom: 8px;
}

label.light {
font-weight: 300;
display: inline;
}

.number {
background-color: #5fcf80;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}

@media screen and (min-width: 480px) {

form {
max-width: 480px;
}

}

Hasilnya bisa dilihat dibawah ini:

Nantikan untuk tutorial-tutorial selanjutnya dari saya...

Silahkan berikan komentar anda jika ada yang kurang paham dengan pemaparan tutorial diatas...Terima Kasih (Iswanto Mahmud)

Cara membuat tampilan website sederhana dengan html dan css

Posted by: Unknown Posted date: 10:44:00 / comment : 0 tutorial, webdesaign

html adalah bahasa pemrograman inti untuk membuat halaman web, untuk membuat halaman web biasanya html dikombinasikan dengan script css agar tampilannya lebih dinamis dan mudah di edit. css adalah cascading style sheet dimana fungsinya untk mempercantik halaman web html. untuk contohnya adalah seperti berikut:

1. pertama kita ketik kodehtml berikut (copas juga bisa, hehe):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>belajar membuat halaman web dengan html dan css</title>
</head>

<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>

2. kemudian kita buat kode css nya seperti ini :

body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}

kemudia taruh kode css tersebut dibawah kode ‘</head>’ dan diawal script tambahkan <script>, kemudia di akhir kode tambahkan tag script penutup ‘</script>’ , karena disini kita membuat css yang embeded dengan html artinya kode css menyatu dengan kode htmlnya (css di halaman html).

sehingga kode lengkapnya seperti ini :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>belajar membuat halaman web dengan html dan css</title>

<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>

Membuat Site Definition di Dreamweaver

Posted by: Unknown Posted date: 06:34:00 / comment : 0 tutorial, webdesaign

Kemarin Kita sudah membahas Langkah Awal Membuat CMS di Dreamweaver.

sekarang kita akan membahas Membuat Site Definition di Dreamweaver.

Dreamweaver sudah menyediakan settingan yang lebih mudah dalam membuat Site Definition. Berikut adalah langkah-langkah membuat site definiton:

Klik Site > New Site

Isi Site Name, dalam tutorial ini Site name diisi phpcms sesuai dengan folder yang kita buat di tutorial sebelumnya.

Local Site Folder, arahkan ke folder yang kita buat sebelumnya dengan nama phpcms

Arahkan ke dalam folder C:\xampp\htdocs\phpcms\, lalu klik select

Klik Server pada list di sebelah panel sebelah kiri, hal ini akan membuka panel dimana anda dapat mengatur jenis untuk pengetesan di Local Server ataupun Remote Server.

Klik Tanda Plus (+) untuk menambah Server baru guna untuk pengetesan website dinamis yang akan kita buat. untuk lebih jelasnya lihat gambar diatas.
Setelah itu Pada Menu Basic, Klik pada Connect Using: Local/Network
Untuk Settingan selanjutnya Perhatikan Gambar dibawah ini.

Selanjutnya, jangan langsung di Save, klik pada tab Advanced aturlah setinggannya seperti pada Gambar dibawah ini....!!!

Perhatikan yang dirubah disini hanyalah Server Model menjadi PHP MySQL, Setelah itu Save.

Setelah di save settingan kita tadi maka selanjutnya kita akan dibawah ke halaman Site Setup, untuk lebih jelasnya perhatikan gambar dibawah ini.

Selanjutnya kita harus memastikan apakah Site Definition yang kita buat tadi apakah sudah benar-benar jalan atau tidak, caranya perhatikan Gambar dibawah ini....!!!

Setelah itu akan muncul halaman baru setelah anda klik testing server, untuk lebih jelasnya perhatikan gambar dibawah ini, dan jangan lupa klik save.

dan akhirnya selesai sudah cara membuat Site Definition di Dreamweaver...!!!

Apabila ada yang kurang paham dari pemaparan diatas, silahkan tanyakan di kolom komentar yang ada dibawah....Terima Kasih Atas Kunjungannya (Iswanto Mahmud)

Silahkan Tunggu untuk tutorial selanjutnya....!!!

Langkah Awal Membuat CMS di Dreamweaver

Posted by: Unknown Posted date: 04:41:00 / comment : 0 tutorial, webdesaign

Assalammualaikum warohmatullahi wabarokatu,

Baiklah sebelum saya memulai tutorial ini hal yang perlu diperhatikan adalah:

1. Anda harus menginstall Dreamweaver terlebih dahulu

2. Anda harus menginstall Xampp di komputer/laptop anda dan

3. yang terakhir adalah siapkan kopi dan roko U-Mild (hehehe bercanda).....

Hal yang pertama yang harus anda lakukan adalah buka aplikasi dreamweaver yang telah anda install di komputer anda, setelah dreamweaver anda terbuka Klik pada Tab File, lalu pilih New atau Ctrl+N, seperti pada gambar di bawah ini.

setelah itu akan muncul halaman baru seperti dibawah ini.

setelah anda Create akan muncul halaman awal yang anda buat tadi seperti gambar dibawah ini.

Jangan lupa save halaman yang baru anda Create tadi, caranya klik File lalu pilih Save As,

ada yang ketinggalan, jangan lupa buatlah struktur folder seperti gambar di bawah ini.

simpan file yang anda buat tadi di Dreamweaver didalam folder yang anda buat seperti gambar diatas. jangan lupa simpan dengan nama index.php, perhatikan gambar dibawah ini.

Selesai.....

Apabila ada yang kurang paham dari pemaparan diatas, silahkan tanyakan di kolom komentar yang ada dibawah....Terima Kasih Atas Kunjungannya (Iswanto Mahmud)

Tutorial Selanjutnya....Membuat Site Definition di Dreamweaver

CARA SETTING CCTV KONEKSI KE INTERNET

Posted by: Unknown Posted date: 16:43:00 / comment : 0 network, tutorial

HARUS DIPERHATIKAN DULU...!!!!!!

1. Cahaya

Jangan memasang CCTV dengan sumber cahaya secara langsung di depannya dan jangan menempatkan kamera inframerah saling berhadapan untuk menghilangkan risiko pencahayaan.
Hindari pemasangan kamera ke arah cahaya yang dapat menyilaukan.
Gunakan infra merah untuk kondisi yang sangat gelap atau gunakan fitur camera B/W (black-white).

2. Tempatkan kamera di tempat yang strategis.

3. Usahakan agar pengkabelan kamera tidak terlalu jauh dari DVR untuk hasil kualitas video yang baik dan sistem instalasi kabel jangan digabungkan dengan jaringan listrik yang bertegangan tinggi untuk menghindari imbas elektromagnetik.

SETTING DVR

1. Sambungkan DVR ke monitor komputer beserta mouse-nya.

2. Klik kanan mouse, selanjutnya akan muncul menu konfigurasi. Kemudian pilih setup. Jika menanyakan password, biasanya password-nya: 0000 (nol 4x) atau tergantung dari merk DVR-nya.

3. Pilih Network Setup dan pilih saja LAN.

- IP address disesuaikan dengan IP pada modem ADSL/Router.

- Untuk DNS sebagai contoh saya gunakan DNS open dns. Menggunakan DNS google juga bisa: 8.8.4.4

4. Pilih HTTP Setup dan tentukan port -nya

Port bebas diberikan asal anda ingat. Sebagai contoh saya berikan 7500

5. DDNS

Jika kamu punya akun DDNS di dyndns.org sebaiknya masukkan alamatnya pada menu DDNS setup.

6. Setting modem ADSL

Pada modem ADSL (saya contohkan TP-Link TD-8817) setting NAT-nya agar dapat diakses di luar jaringan atau diakses jarak jauh melalui internet.

Coba perhatikan port yang digunakan harus sesuai dengan port pada DVR, begitupula IP address-nya.

7. Jalankan perintah ping pada komputer yang tersambung dengan jaringan ke DVR, yaitu 192.168.1.10. Harusnya akan melakukan reply dengan sukses.

8. Buka browser dan isi alamat 192.168.1.10:7500, maka akan terbuka halaman dengan tulisan:

- open with internet explorer

- download remote monitor client

Silahkan gunakan internet explorer, namun security level harus dirubah menjadi custom level dan izinkan active x controlnya.

Atau dengan software bawaan software-nya dengan cara men-download monitor remote client.

9. Dengan internet explorer coba akses dengan IP public kamu (jika tidak tau coba ke www.whatismyip.com), contoh http://222.124.204.5:7500. Harusnya bisa langsung tampil gambar dari kamera. Atau dengan akun DDNS kamu, contoh http://bdgjarkom.dvrdns.com:7500

10. Jangan lupa berikan password untuk DVR kamu pada menu setup------>account

Selamat mencoba.

Lihat juga cara setting IP Camera

Cara Setting Bullet M5 | TUTORIAL

Posted by: Unknown Posted date: 15:25:00 / comment : 0 infotech, network, tutorial

Hari kemarin saya telah mencoba menyeting bullet m5, dan berikut cara-sara nya :

1. Pastikan semua pemasangan telah benar sesuai dengan petunjuk maka masukkan IP pada LAN komputer anda,Baca pada bungkus Bullet 2 Ubiquity bahwa IP ubiquity adalah 192.168.1.20 Maka pada komputer anda harus satu blok dengan IP bullet 2 Ubiquity.

2. Buka browser dan ketikkan IP address dari BULLET 2 ubiqity yaitu 192.168.1.20, kemudian jika meminta username password masukkan username default ubnt password default ubnt.

3. Pilih Menu Link Setup kmudian wireless mode nya pilih station, untuk menjadi client, apabila ingin menjadi pemancar pilih option Access Point.

4. Pilih menu select di samping kolom SSID untuk mengkoneksikan denga access point ISP yang ada di daerah anda, kemudian pilih SSID Access Point dan klik tombol select.

5. Muncul Tampilan proses seperti di bawah ini biarkan saja sampai selesai :

6. Selesai… pada posisi default Bullet bertindak sebagai Bridge, dan posisi Bridge ini bisa kita lihat pada menu Network, seperti tampilan di bawah ini :

7. Misal kita di kasih IP oleh pemancar ISP nya atau RTRWNET nya sebagai berikut :
IP :192.168.40.247
Subnet : 255.255.255.0
Gateway :192.168.40.254
DNS : 202.155.0.10
DNS 2 : 202.155.0.15
Maka IP tersebut harus kita masukkan ke IP Address komputer kita karena posisi Bullet sebagai Bridge.

8. Jika kita ingin memilih posisi Bullet 2 sebagai router, maka IP yang diberikan dari ISP atau server kita, kita isikan ke Bullet nya sebagai berikut :

9. Dan centang pada DHCP server nya BULLET, maka ip komputer harus kita kosongkan, (obtained) yang ip nya langsung di dapat dari BULLET nya sendiri.

10. Selesai. Sekarang coba kita ping ke google.com. jika reply berarti sudah terkoneksi dengan baik.

Pages

Teckno Boltim

Info Tech News

Info Tech News

Nasional

Artikel

Network

Tutorial

6 Prinsip dalam Membuat Desain User Interface

1. The structure principle

2. The simplicity principle

3. The visibility principle

4. The feedback principle

5. The tolerance principle

6. The reuse principle

Mengatasi masalah use mysqli or PDO instead in /home/u729743652/public_html di MySQL Id hostinger

Cara Buat Form Registrasi HTML & CSS (1)

Cara membuat tampilan website sederhana dengan html dan css

Membuat Site Definition di Dreamweaver

Langkah Awal Membuat CMS di Dreamweaver

CARA SETTING CCTV KONEKSI KE INTERNET

HARUS DIPERHATIKAN DULU...!!!!!!

Cara Setting Bullet M5 | TUTORIAL

Translate

Boltim Junior Web Design

Halaman Facebook

Hitstat

Total Pageviews

Pages

Info Tech News

Info Tech News

Nasional

Artikel

Network

Tutorial

1. The structure principle

2. The simplicity principle

3. The visibility principle

4. The feedback principle

5. The tolerance principle

6. The reuse principle

HARUS DIPERHATIKAN DULU...!!!!!!

Translate

Películas populares

Labels

Boltim Junior Web Design

Halaman Facebook

Hitstat

Total Pageviews