Desain input,output dan desain web ~ STEFANI

1. Jelaskan pengertian dan kegunaan desain input ! Berikan Contohnya !

JAWAB :

Masukan (input) merupakan awal dimulainya informasi. Bahan mentah dari informasi adalah data yang terjadi dari transaksi yang dilakukan oleh organisasi. Desain input digunakan untuk merancang tampilan layar dikomputer yang menggambarkan bagaimana bentuk pemasukan data.
Proses input melibatkan 3 tahapan utama yaitu :

Penangkapan Data (Data Capture), Merupakan proses mencatat kejadian nyata yang terjadi akibat transaksi yang dilakukan ke dalam dokumen dasar
Penyiapan Data (Data Preparation), Yaitu mengubah data yang telah ditangkap kedalam bentuk yang dapat dibaca oleh mesin (Machine Readable Form 1), misalnya kartu plong, pita magnetik/disk magnetick)
Pemasukan Data (Data Entry), Merupakan proses membacakan atau memasukan data ke dalam komputer

Langkah-langkah Desain Input

Yang perlu didesain secara rinci untuk input adalah bentuk dari dokumen dasar yang digunakan untuk menangkap data, kode-kode input yang digunakan dan bentuk dari tampilan input di alat-alat input. Langkah-langkanya sebagai berikut :

1. Menentukan kebutuhan input dari sistem baru
Input yang akan didesain dapat ditentukan dari DAD sistem baru yang telah dibuat. Input DAD ditunjukan oleh arus data dari suatu kesatuan luar ke suatu proses dan bentuk tampilan input di alat input yang ditunjukan oleh suatu proses pemasukan data
Menentukan parameter dari input
a. Bentuk dari input, dokumen dasar atau bentuk isian di alat input (Dialog layar terminal)
b. Sumber input
c. Jumlah tembusan untuk input berupa dokumen dasar dan distribusinya
d. Alat input yang digunakan
e. Volume input
f. Periode input

Cara Menngurangi Input sistem

Menggunakan kode
Data yang relatif konstan disimpan dalam file acuan, gunakan kode untuk mengambil datanya.
Jam dan tanggal diambil da
Rutin perhitungan dilakukan oleh sistem.
Penomoran/pengkodean Otomatis
Penggunaan nilai default
Input data berdasarkan filter tertentu.
Gunakan kontrol pilihan

Petunjuk Pembuatan Kode

Mudah diingat
Unik
Fleksibel
Konsisten
Standarisasi
Hindari spasi
Hindari karakter yang mirip
Panjang kode sebaiknya sama

Tipe Kode

Kode Mnemonik

Dibuat dengan dasar singkatan atau mengambil sebagian karakter dari item yan akan diwakili. Tujuannya mudah digunakan.
Misalnya :

P : Perempuan
L : Laki-laki
93TIA0005 : Angkatan 1993, Prodi Teknik Informatika, Urut No 5, Kelas A

Kode Urut
nilainya urut antara satu kode dengan berikutnya. Contoh :

001 Kas
002 Piutang Dagang
003 Persedian Produk selesai

Kebaikannya :

Sangat Sederhana
Mudah diterapkan
Mudah dalam pencarian
Baik Untuk pengendalian
Mudah dalam automatisasi

Kelemahannya :

Sulit diingat
Sulit untuk disisipkan
Tidak fleksibel bila terjadi perubahan

Kode Blok

Mengklasisfikasikan item ke dalam kelompok blok tertentu yang mencerminkan suatu klasifikasi tertentu atas dasar pemakain maksimum.
Contoh:

Blok	Kelompok
1000 – 19992000 – 29993000 – 34993500 – 3999	Aktiva LancarAktifa TetapHutang LancarHutang Jangka Panjang

Dari blok-blok kode untuk masing-masing kelompok rekening utama, maka rekening-rekening AKTIVA LANCAR dapat mempunyai kode diantara 1000 sampai dengan 1999 sebagai berikut:

1000 Kas
1100 Piutang Dagang
1200 Persedian Produk
1210 Persedian Produk dalam proses
1220 Persedian Bahan Baku
1300 Biaya dibayar dimuka

Kebaikannya

Nilai dari kode mempunyai arti, yaitu masuk dalam blok yang sudah ditentukan
Mudah diperluas
Kode dapat ditambah atau dibuang sebagain
Cocok untuk laporan keuangan/anggaran

Kelemahannya

Bisa menjadi sangat panjang jika jumlah bloknya panjang
Kurang mudah diingat

Kode Group

Kode group diambil dari gabungan field-field

Petunjuk penggunaan kontrol

Label
Label digunakan untuk memberikan penjelasan suatu input
Text box (Edit Box)

digunakan untuk skop yang tidak terbatas
Atur properti yang mengatur panjang text (Max Length)
Untuk password/pin/koderahasia gunakan karakter topeng (PasswordChar)
Atur properti Multiline untuk tipe memo.

Option (Radio Button)

Pilihan yang dipilih hanya boleh Satu
Jumlah pilihan terbatas dan tidak terlalu banyak
Kelompokkan menggunakan container (mis: frmae) jika terdiri dari beberapa kelompok pilihan.

Check Box

Pilihan yang dipilih boleh tidak ada, satu atau beberapa.
Jumlah pilihan terbatas dan tidak terlalu banyak

Listbox

List box adalah obyek antarmuka grafik yang membolehkan pengguna memilih satu atau beberapa item dari daftar pilihan yang disajikan. Pengguna dapart mengklik item untuk memilih, kadang-kadang dalam pemilihan dikombinasikan dengan tombol Shift atau Control untuk beberapa pilihan.

Listbox

Spinbox (Spinner)
Spinner adalah sebuah widget grafis di GUI, biasanya berorientasi vertikal, dimana pengguna dapat menyesuaikan nilai dalam kotak teks yang berada disampingnya dengan mengklik panah atas atau bawah, atau dengan menekan panah atas dan bawah. Penekanan tombol atas akan mengakibatkan nilai pada kotak teks naik, sebaliknya jika tombol panah bawah ditekan maka nilainya akan turun.
Biasanya, nilai spinbox ditampilkan dalam kotak teks yang berada di sampingnya, yang memungkinkan pengguna untuk menggunakan pemintal untuk menyesuaikan nilai, atau mengetik nilai ke dalam kotak teks.
Spinbox berbeda dengan scrollbar atau slider, pada spinbox biasanya digunakan untuk mengatur nilai tanpa mengubah format tampilan atau informasi lain di layar.

KEGUNAAN NYA :
Tujuan desain Input :
1. Membuat penyelesaian input yang mudah dan efisien
2. Menjamin input akan memenuhi tujuan yang diharapkan
3. Menjamin penyelesaian yang tepat
4. Membuat tampilan layer dan formulir yang menarik
5. Membuat input yang tidak rumit
6. Membuat tampilan layer dan formulir yang konsisten

CONTOH :

2. Jelaskan pengertian dan fungsi desain output ! Berikan Contohnya !

JAWAB :

Output merupakan produk dari sistem informasi yang dapat dilihat. Output ini dapat berupa hasil yang dikeluarkan di media keras (kertas dan lain-lain) dan output yang berupa hasil dikeluarkan ke media lunak (tampilan di layar).

Wujud :

— Hard Copy : Printer, Kertas, dll.

— Soft copy : Layar komputer, audio

Tujuan Output :

— Merancang Output untuk tujuan tertentu

— Membuat Output bermanfaat bagi para pengguna

— Mengirim jumlah output yang tepat

— Menyediakan distribusi output yang tepat

— Menyediakan output tepat waktu

— Memilih metode output yang paling efektif

Tipe Output

Output diklasifikasikan ke dalam bebarapa tipe yaitu :

Output intern (internal Output) adalah output yang dimaksudkan untuk mendukung kegiatan manajemen. Output ini akan tetap tinggal di dalam perushaan dan akan disimpan sebagai arsip atau dimusnahkan bila sudah tidak dipergunakan lagi. Output jenis ini dapat berupa laporan-laporan terinci, laporan-laporan ringkasan dan laporan-laporan-laporan lainnya.

Output ekstern (external output) adalah output yang akan didistribusikan kepada pihak luar yang membutuhkannya. Seperti faktur, check, tanda terima pembayaran dan lain sebagainya.

Teknologi output

Untuk menghasilkan output yang berbeda-beda diperlukan teknologi yang berbeda pula. Teknologi ouput yang diperlukan sbb :

1. Printer

— Dipilih karena laporan cetakan masih merupakan jenis output yang paling umum

— Masih banyak organisasi besar menggunakan printer sebagai teknologi output

2. Layar display

— Teknologi output yang semakain populer

— Keuntungan yang melebihi printer

— Tidak bising

— Potensial untuk digunakan oleh para pengguna secara interaktif

— Fleksibelitas (memungkinkan pengubahan informasi secara real time)

— Memungkinkan pengguna melihat output yang disimpan dengan mengaksesnya terlebih dulu dan tampilan item-item dari basis data yang relevan

3. Video, audio dan Animasi

— Video

— Melengkapi output cetakan yang sifatnya statis

— Kolaborasi jarak jauh

— Menunjukan suatu tindakan

— Menyediakan episode-episode pelatihan singkat

— Mengubah waktu dari suatu peristiwa aktual yang merekamnya untuk keluaran berikutnya

— Mempertahankan suatu kejadian penting sebagi tambahan arsip

— Audio

— Baik untuk pengguna individu

— Baik untuk pesan-pesan sementara

— Baik dimana pegawai memerlukan hands free

— Animasi

— Bentuk lain dari output yang bisa digunakan untuk meningkatkan suatu situs web atau presentasi

— Tersusun atas 4 komponen

— Simbol-simbol elemental

— Orientasi spatial

— Efek transisional

— Efek alterasi

4. CD-R, CD-RW / DVD

— Memiliki kapasitas besar

— Memungkinkan output multimedia

— Perolehan output yang lebih cepat dibandingkan metode sebelumnya

5. Output Elektronik

— Bentunya : email, fax, halaman web

— Keuntungan :

— Mengurangi kertas

— Bisa diperbaharui dengan mudah

— Bisa dipublikasikan dengan mudah

— Bisa interaktif

Faktor-faktor yang dipertimbangkan saat memilih Teknologi Output

— Siapa yang akan menggunakan (melihat) output tersebut ?
— Berapa banyak orang yang membutuhkan output tersebut ?
— Dimana keluaran tersebut dibutuhkan ?
— Apa tujuan output tersebut ?
— Seberapa sering ouput tersebut diakses?
— Berapa lama output tersebut akan disimpan ?
— Menurut peraturan khusus apa output tersebut diproduksi, disimpan dan didistribusikan?
— Berapa biaya awal dan biaya selanjutnya untuk pemeliharaan dan pasokan ?
— Apa syarat-syarat lingkungan (penyerapan kebisingan, pengendalian temperatur, ruang untuk peralatan, dan pengkabelan) untuk teknologi-teknologi output tersebut ?

Merancang Output

— Pada tahap perancangan output terdiri dari :

Desain output secara umum serta, pada tahap ini hanya menentukan kebutuhan output dari sistem, output apa saja yang dibutuhkan oleh sistem
— Desain output secara terinci menampilkan output berbentuk laporan di media kertas.

Contoh

Merancang Output Cetakan

Laporan Berbentuk Tabel

1. Notice Report

Merupakan bentuk laporan yang memerlukan perhatian khusus, yang harus dibuat sesederhana mungkin, tetapi jelas, karena dimaksudkan supaya permasalahan-permasalahan yang terjadi tampak dengan jelas sehingga dapat langsung ditangani. Contoh :

2. EQUIPOISED REPORT

Isi dari equipoised report adalah hal-hal yang bertentangan dan biasanya untuk maksud perencanaan, sehingga dapat dijadikan sebagai dasar di dalam pengambilan keputusan. Contoh :

3. VARIANCE REPORT

Bentuk laporan ini menunjukkan selisih (variance) antara standar yang sudah ditetapkan dengan hasil kenyataannya atau sesungguhnya.

Contoh gambar :

4. COMPARATIVE REPORT

Bentuk laporan ini adalah untuk membandingkan antara satu hal dengan hal yang lainnya. Misalnya pada laporan rugi/laba atau neraca dapat dibandingkan antara nilai-nilai elemen tahun berjalan dengan tahun-tahun sebelumnya. Contoh gambar :

Laporan Berbentuk Grafik

1. Bagan Garis

Bagan Garis(line chart), variasi data ditunjukkan dengan suatu garis atau kurva.

Contoh:

2. Bagan Batang

Nilai-nilai data dalam bagan batang (bar char) digambarkan dalam bentuk batang-batang vertikal ataupun horisontal.

3. Bagan Pastel (pie chart) merupakan bagan yang berbentuk lingkaran menyerupai kue pastel (pie). Tiap-tiap potong dari pie dapat menunjukkan bagian dari data.

Pedoman Desain Laporan

— Untuk laporan formal, sedapat mungkin dibagi menjadi tiga bagian utama, yaitu :

— Judul Laporan
— Tubuh Laporan
— Catatan Kaki Laporan yang dapat berisi ringkasan, subtotal atau grandtotal

— Untuk laporan-laporan penting, gunakanlah kertas yang berkualitas baik, tidak mudah sobek serta tidak mudah kotor
— Untuk tiap-tiap batas tepi laporan (margin), sebaiknya diberi jarak sehingga bila pinggir laporan tersobek tidak akan mengenai isi laporannya.
— Gunakanlah spasi baris yang cukup, sehingga mudah dibaca.
— Untuk hal-hal yang ingin ditonjolkan, dapat dituliskan dengan huruf besar, tebal atau garis bawah.
— Gunakanlah bentuk huruf cetak yang jelas dan tidak membingungkan serta hindari penggunaaan font yang sulit dimengerti.
— Jika isi laporan menjelaskan suatu daftar urutan, gunakanlah tanda “.” Atau “-“. Bila urutannya penting dapat dipergunakan tanda 1,2,3 dan seterusnya dan sajikan dalam urutan yang terpenting.
— Letakkanlah informasi yang mendetail di lampiran dan gunakanlah penunjuk yang mudah dipahami untuk menjelaskan kepada pemakai laporan bila keterangan-keterangan tersebut tidak ada.
—Usahakan di dalam laporan berisi keterangan-keterangan yang diperlukan yang mungkin akan ditanyakan oleh pemakai laporan bila keterangan-ketearangan tersebut tidak ada.
— Laporan untuk tingkat manajemen yang lebih tinggi, sebaiknya lebih tersaring dan untuk tingkat manajemen yang lebih rendah lebih terinci.
— Laporan harus dibuat dan didistribusikan tepat pada waktunya.
— Laporan harus sederhan tetapi jelas
— Laporan harus diungkapkan dalam bentuk dan bahasa yang mudah dimengerti dan dipahami oleh pemakainya.
— Isi laporan harus akurat
— Laporan bilamana mungkin harus distandarisasi. Bentuk-bentuk laporanyang selalu berubah akan menyebabkan kebingungan bagi mereka yang menggunakannya.
— Laporan harus berguna
— Biaya pembuatan laporan harus dipertimbangkan.

Merancang Output Layar

— Petunjuk untuk merancang layar :

— Buatlah layar yang sederhana
— Buatlah presentasi layar yang tetap konsisten
— Fasilitasi gerakan pengguna di antara layar-layar
— Ciptakan suatu layar yang menari

3. Jelaskan mengenai Desain Web ! Berikan contohnya !

JAWAB :

Web Design adalah jenis desain grafis yang ditujukan untuk pengembangan dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis.

FUNGSI

Sebelum men-design , sebaiknya kita mngetahui dan memahami beberapa fungsi situs web agar design yang dibuat sesuai dengan fungsi situs web.

Secara umum fungsi situs web adalah sebagai berikut:

1. Fungsi Komunikasi

Situs web tang berfungsi sebagai komunikasi pada umumnya adalah web dinamis.Karena dibuat menggunakan pemrograman web(server side) maka dilengkapi dengan fasilitas yang memberikan fungsi-fungsi komunikasi seperti web mail ,formanthec,chatting,forum dll.

2. Fungsi Informasi

· Menekankan pada kualitas konten,karena tujuan situs ini mnyampaikan isinya

· Sebaiknya berisi teks dan grafik

· Fasilitas yang memberikan fungsi informasi, news, file, company, library, prefences dll.

4. Fungsi Entertainment

Sebagai sarana hiburan/penggunaan animasi gambar dan element bergerak dapatmeningkatkan mutu persentasi design,meski tetap harus mempertimbangkan kecepatandownloadnya.Contoh fungsi Entertaiment: game online,film online,music online dll.

5. Fungsi Transaksi

Situs web dapat dijadikan transaksi bisnis baik barang jasa,dll.situs web menghubungkanperusahaan konsumen dan komunitas tertentu melalui sarana elektronik.Pembayarannyabisa memudahkan kartu kredit,transfer atauupun membayar langsung.

TUJUAN

untuk membuat situs web atau dokumen elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML.

Jenis-jenis rancangan website

1. Basic
Secara basicly website disediakan untuk publikasi informasi. Adapun informasi yang akan disediakan adalah beraneka ragam dari profile pribadi hingga company profile.

2. Search Engine
Situs search engine adalah situs yang menyediakan mesin pencari. Search engine secara otomatis mencari dan menyimpan data-data situs yang beredar di internet. Adapun materi yang dapat dicari adalah segala sesuatu yang tergabung di dalam website yang terhubung di internet. Seperti mencari sebuah alamat website, file-file multimedia dan grafis yang terkandung di dalam website. Dalam hal ini situs-situs lain berlomba-lomba untuk menduduki tempat tertinggi untuk dapat di cari oleh search engine.

3. Portal
Situs jenis portal merupakan pintu gerbang bagi situs lain seperti halnya juga search engine. Tetapi di dalam portal situs-situs tersebut lebih disusun untuk disajikan. Berbeda dengan search engine situs-situs tersebut bukan dicari datanya secara otomatis oleh mesin pencari tetapi disimpan dan dikelola oleh pengelola portal secara dictionary. Umumnya portal-portal besar juga menyediakan layanan internet lain seperti email bagi member dan lain-lain.

4. Blog
Blog merupakan buku harian yang terpublish di internet. Seorang pengelola blog dapat dengan bebas menuangkan pikirianya dalam bentuk tulisan ke dalam website ini. Tulisan tersebut selanjutnya disimpan di database dan di publish di internet. Fungsional situs ini adalah publikasi dalam bentuk artikel di internet.

5. Networking
Situs jenis networking adalah situs penyedia yang menampung member-member untuk membentuk suatu komunitas. Sehingga member-member di dalam website tersebut dapat saling berkomunikasi dan bertukar pikiran. Di dalam website ini sesama member dapat saling berkenalan dan menjalin relasi satu sama lain. Pertukaran pesan dan testimonial pun terjadi diantara member yang belum atau sudah menjalin relasi.

6. Forum
Forum adalah situs membership seperti networking juga. Tetapi tidak berfokus pada friend relationship seperti situs networking. Situs ini lebih berfokus sebagai ajang diskusi di internet. Adapun diskusi dalam bentuk tulisan yang diposting oleh member di organisasikan dengan lebih baik hingga perkategori yang terdiri dari berbagai sub-sub. Tujuan situs ini adalah wadah saling bertukar pikiran dalam diskusi.

7. News
News site adalah situs yang mengelola berita untuk di publish ke internet. Pengelola website dapat mengelola yaitu antara lain menulis dan memanage berita. Kemudian user internet dapat melihat informasi berita tersebut melalui website.

8. Event Organizer
Situs jenis ini adalah situs yang mengelola manajemen informasi pengadaan acara.
Informasi yang disajikan situs ini biasanya berorientasi waktu, misalnya informasi kapan diadakannya sebuah event, event yang terlewatkan dan event yang akan diadakan nantinya. Di dalamnya juga terdapat keterangan deskripsi tentang event tersebut dan judul event.

9. Gallery
Gallery site menyediakan fasilitas publikasi foto dan gambar secara online. Pengelola website dapat menyimpan foto atau gambar yang diinginkan lalu dikategorikan dan di manage setelah itu di publish.

10. Multimedia Streaming
Video streaming dan audio streaming sekarang merupakan trend baru dari dunia website. Di dalam situs jenis ini seseorang dapat menonton atau mendengarkan secara langsung multimedia melalui web. Untuk membangun situs ini diperlukan server yang memiliki koneksi internet yang high dan up stream, ini dikarenakan file-file multimedia yang relatif berukuran besar.

11. E-Commerce
Situs dengan sistem e-commerce adalah situs yang bertujuan untuk melakukan perdagangan melalui media internet. Pengelola dapat mengorganisir barang-barang yang ingin dijual lalu mempublikasikan secara online beserta harganya. Ada juga yang menyediakan transaksi online melalui website ini. Yang jelas dalam hal ini website dimanfaatkan sebagai toko di dalam internet.

12. E-Learning
E-Learning merupakan situs yang menyediakan pembelajaran online melalui internet. Pembelajaran dilakukan melalui berbagai media seperti tulisan, gambar hingga multimedia.

Contoh web desain :

1. Website E-Commerce, website yang mana untuk kepentingan komersial dan biasanya proses transaksi terjadi yang secara online juga, dilengkapi dengan keranjang belanja dan atau dilengkapi pembayaran online melalui Payment Gateway seperti paypal dan sebagainya.

2. Website Marketing, website yang mana digunakan sebagai media pemasaran, biasanya terdapat media presentasi berupa gambar, hingga video-audio.

3. Website Portal, website yang mana digunakan sebagai media informasi, berita atau bahkan diskusi.

4. Website E-Service, website yang mana digunakan sebagai media pelayanan kepada konsumennya, biasanya terdapat chat online instant dan kontak lainnya

STEFANI

Sabtu, 07 Maret 2015