Pertemuan 11 - Perancangan Aplikasi Web

Hi, Assalamualaikum Warahmatulahi Wabarakatuh.

Bismillahirahmanirahim.

Kali ini aku bakal share penjelasan materi mata kuliah RPL Pertemuan 11 yaitu mengenai Perancangan Aplikasi Web.

Semoga Bermanfaat! ✨

1.     Pengenalan Sistem Berorientasi Objek

Perancangan aplikasi web memerlukan aktivitas teknis berupa:

a.     Menetapkan tampilan pada web

b.     Pembuatan rancangan estetika antarmuka pengguna

c.     Pendefinisian struktur arsitektur aplikasi web secara keseluruhan

d.     Pengembangan isi dan fungsional

e.     Perencanaan navigasiIstilah dalam Objek Oriented

Perancangan web sangat penting bagi designer karena:

a.     Membuat model yang dapat dinilai kualitasnya dan dapat diperbaiki sebelum isi dan kode dibentuk

b.     Membuat model sebelum pengujian dilakukan

c.     Membuat model sebelum end-user yang berjumlah besar menggunakan aplikasi

 

2.     Langkah-Langkah Web Design

a.     Perancangan Isi Dikembangkan selama tahapan analisis, dilakukan sebagai basis untuk penetapan objek-objek

b.     Perancangan Estetika (Perancangan Grafis) Membuat tampilan yang akan dilihat oleh user

c.     Perancangan Arsitektural Fokus pada struktur hypermedia untuk semua objek isi dan untuk semua fungsi pada aplikasi web

d.     Perancangan Antarmuka Menentukan tampilan dan mekanisme interaksi yang mendefinisikan user interface

e.     Perancangan Struktur Navigasi Mendefinisikan bagaimana end user melakukan penelusuran untuk melintasi hypermedia

f.      Perancangan Komponen Merepresentasikan rincian struktur elemen-elemen fungsional aplikasi web

3.     Sifat-Sifat Aplikasi Web

a.     Kepadatan jaringan

b.     Keserempakan

c.     Jumlah pengguna yang tidak dapat diprediksi

d.     Kinerja

e.     Ketersediaan

f.      Digerakkan oleh data

g.     Peka terhadap isi

h.     Evolusi yang berkesinambungan

i.      Kesegeraan

j.      Keamanan

k.     Estetika

 

4.     Kualitas Perancangan Aplikasi Web

Attribut kualitas:

a.     Keamanan Kemampuan aplikasi web dan lingkungan server untuk mencegah akses yang tidak sah, dan mencegah serangan-serangan yang berasal dari luar.

b.     Ketersediaan Pengukuran atas persentase waktu yang tersedia bagi aplikasi web untuk dapat digunakan oleh user.

c.     Skalabilitas Aplikasi web mampu mengakomodasi kebutuhan terhadap jumlah end user yang semakin bertambah

d.     Waktu untuk masuk ke pasar Ditinjau dari sudut pandang bisnis

 

5.     Kualitas Aplikasi Web

a.       Kemudahan Penggunaan : Kemudahan pemahaman situs global, Umpan balik dari user dan fitur-fitur bantuan, User interface fitur-fitur estetika dan Fitur-fitur khusus.

b.      Fungsionalitas : Kemampuan pencarian dan penerimaan, Fitur-fitur navigasi perambahan (browsing) dan Fitur-fitur aplikasi yang berhubungan dengan lingkungan.

c.       Keandalan : Pembetulan pemrosesan tautan (link), Pemulihan dari kesalahan, Validasi dan pemulihan pada user.

d.      Efisiensi : Kinerja waktu tanggap aplikasi web, Kecepatan pembentukan halaman-halaman, dan Kecepatan penggambaran grafik-grafik.

e.       Kemudahan Pemeliharaan : Kemudahan untuk dilakukan koreksi, Keamanan aplikasi web untuk beradaptasi, dan Kemudahan aplikasi web untuk dikembangkan.

 

6.     Perancangan Antarmuka

Salah satu tantangan membuat user interface adalah bagaimana caranya user masuk ke aplikasi.Objek dapat memiliki atribut khusus yang disebut state. Keadaan suatu objek adalah kata sifat yang menggambarkan status objek saat ini. Misalnya: rekening bank dapat aktif, tidak aktif, tertutup, atau dibekukan. Sasaran-sasaran user interface adalah untuk:

a.     Menetapkan suatu jendela yang konsisten untuk meletakkan isi-isi dan fungsionalitas yang disediakan oleh user interface

b.     Memandu user melalui serangkaian interaksi dengan aplikasi web yang dikembangkan

c.     Mengorganisasikan pilihan-pilihan navigasi dan isi-isi yang dapat dilihat user yang dapat berupa menu navigasi, icon grafis, dan gambar-gambar grafis

7.     Perancangan Estetika

Sering juga disebut Perancangan Grafis, yang merupakan tambahan artistik yang sering digunakan untuk melengkapi aspek-aspek teknis dari perancangan aplikasi web. Tata letak yang baik pada perancangan interface:

a.     Jangan mengisi bagian dari halaman web dengan informasi yang akhirnya sulit untuk mengidentifikasi informasi tersebut

b.     Lakukan penekanan pada isi yang merupakan alasan utama bagi user untuk masuk ke aplikasi web

c.     Lakukan pengelompokkan fitur navigasi, isi, dan fungsi

d.     Jangan perluas bagian aplikasi dengan penggunaan scrollbar, sebaiknya kurangi isi yang jumlahnya banyak

e.     Sesuaikan resolusi layar dan ukuran jendela browser

8.     Perancangan Isi

Hubungan objek isi dengan objek isi lainnya adalah sebagai bagian dari suatu model kebutuhan untuk aplikasi web. Permasalahan yang terjadi pada perancangan isi jika jumlah objek isi yang digabungkan untuk membentuk halaman web tunggal merupakan fungsi dari kebutuhan user, yang dibatasi oleh kecepatan pengunduhan koneksi ke internet, juga dibatasi oleh besarnya ukuran jendela monitor yang digunakan user.

9.     Perancangan Arsitektural

Perancangan arsitektur web terkait dengan sasaran untuk aplikasi web, terkait dengan isi yang akan ditampilkan, user, dan navigasi. Arsitektur isi pada umumnya fokus pada bagaimana objek-objek isi distrukturkan agar layak untuk dipresentasikan kepada user dan menarik untuk ditelusuri. Aplikasi web distrukturkan untuk dapat mengelola interaksi user dengan aplikasi web, bagaimana menangani pekerjaan proses internal, bagaimana melakukan pengaturan navigasi, serta bagaimana menampilkan isinya.

a.     Arsitektur Isi :

*       Struktur Linier: Dilakukan saat interaksi user dengan aplikasi web secara umum memperlihatkan urutan yang dapat diramalkan. Contoh: urutan pemasukan pemesanan produk dimana informasi tertentu harus dalam urutan yang bersifat spesifik.

*       Struktur Grid: arsitektur yang diterapkan saat isi aplikasi web dapat diorganisasikan menjadi 2 dimensi atau lebih. Dimensi horizontal merepresentasikan jenis jenis produk, dan dimensi vertikal merepresentasikan penawaran yang disediakan oleh penjualnya.

*       Struktur Hirarki: rancangan dimungkinkan adanya pencabangan hypertext (aliran kendali) secara horizontal bergerak melintasi cabang-cabang vertikal pada struktur aplikasi web.

*       Struktur Jaringan (Web Murni): struktur ini dapat digabungkan untuk membentuk struktur-struktur yang bersifat komposit.

 

b.     Arsitektur Aplikasi Web : Mendeskripsikan infrastruktur yang memungkinkan sistem atau aplikasi berbasis web untuk mencapai sasaran-sasaran bisnisnya. Arsitektur aplikasi web dibuat dalam 3 lapisan yang bertujuan untuk memisahkan antarmuka dari mekanisme navigasi dan dari perilaku yang dimiliki oleh aplikasi. Hal ini akan menyederhanakan implementasi aplikasi web dan akan meningkatkan penggunaan ulang komponen-komponennya. Aristektur MVC (Model View-Controller) secara fungsional dijelaskan sebagai berikut:

*       Pengendalian: mengelola akses ke model, ke view dan melakukan koordinasi aliran data di antara model dan view.

*       Model: memuat semua isi yang bersifat spesifik terhadap aplikasi dan memuat logika pemrosesan, termasuk di dalamnya semua objek isi.

*       View: memuat semua fungsi yang bersifat spesifik terhadap user interface yang di dalamya termuat presentasi isi dan logika pemrosesan, objek isi, akses ke data dan ke sumber informasi lainnya, dan semua fungsionalitas pemrosesan yang diperlukan end user.

10.  Implementasi Penting Desain Web

Desain web yang telah dibuat, bisa dilanjut ke tahap implementasi. Dalam pemimplemetasiannya, web membutuhkan beberapa kompenen pendukung diantaranya; code editor, programmernya, komponen deployment, dan sebagainya. Pengimpelementasian website yang telah dirancang bertujuan untuk menghasilkan situs jadi sehingga dapat digunakan oleh end-user.