Prinsip RPL & Perancangan Web (rekayasa Web)

IntroductionWebsite sudah menjadi seperti software
Membangun Websites menjadi semakin
kompleks
Dari ‘
document delivery
’menjadi‘
business
process automation

’
Software Engineering method dapat diterapkan
pada Website development
Dapat membantu mengatur proses sehingga
bisa dikontrol, meminimalkan resiko dari
kegagalan proyek
 

Website Sebagai Software
Software adalah computer program atau
kumpulan dari computer program ditambah
kumpulan material seperti dokumentasi, yang
digunakan untuk menyelesaikan tugas tertentu
Apakah Website dapat dianggap sebagai
program?
Website yang sederhana hanya berisi koleksi
dokumen yang dapat diambil dari remote
server
 

Website Sebagai Software
Ada juga Website yang mempunyai banyak
fungsi seperti menerima masukan data dari
pengguna dalam form, menyediakan fasilitas
untuk menquery data dari database,
menghasilkan halaman secara dinamis,
ataupun menyediakan online game
Website seperti ini dapat dikategorikan sebagai
sebuah program
 

Static Web Sites
Bentuk yang paling sederhana
Websites hanya mrupakan koleksi dari
halaman yang statis dibuat dengan HTML
Dihubungkan dengan menggunakan
links
Satu-satunya aspek software yang dimiliki
adalah interaktifitas yang disediakan untuk
menghubungkan antar halaman dan berpindah
halaman dengan menggunakan
links
 

Static Sites Dengan Interaktifitas Form
Interaktifitas yang terbatas ditambahkan pada
form
Form biasanya digunakan untuk mengambil
informasi dari pengguna seperti komentar dan
permintaan informasi
Informasi dapat dicatat dalam file teks misal :
aplikasi guest book
 

Sites Dengan Dynamic Data Access
Websites sebagai aplikasi front end untuk
mengakses database yang ada di server
Pada halaman web pengguna dapat mencari
katalog atau meng-query data dari database
Data yang diminta dikirimkan dari server ke
komputer client untuk kemudian ditampilkan
dalam bentuk dokumen HTML
Website ini sudah banyak menggunakan
teknik-teknik pemrograman untuk mengakses
database
 

Sites Yang Digenerate Secara Dinamis
Masalah yang timbul adalah : website dibuat
untuk memenuhi banyak kebutuhan yang
berbeda
Berarti kita harus selalu membuat website
tersebut dari awal untuk tujuan yang spesifik
Padahal mungkin fungsi dan tampilannya mirip
untuk tiap kasusnya hanya content saja yang
berbeda
Dikembangkan system seperti CMS (Content
Management System)
 

Software Aplikasi Berbasis Web
Sekarang kita sudah masuk kedalam era
Aplikasi yang berbasis web
Kita dapat membuat system berbasis web
sama dengan system yang berbasis aplikasi
desktop biasa atau aplikasi client / server
Mis: Aplikasi Google Earth, Google Office, dll
 

Websites Yang Direkayasa Secara Benar
Correct : website dapat dikatakan correct jika
website tersebut dapat berfungsi dengan baik
dan bebas dari error / error free (dilakukan
testing)
Testable : sebelum di deploy harus dilakukan
proses testing terlebih dahulu yang terdiri dari
beberapa level testing untuk memastikan
website tersebut sesuai dengan requirement
dan bebas error
 

Websites Yang Direkayasa Secara Benar
Maintable :  website harus mudah untuk di-
maintain, mudah untuk melakukan perubahan
terhadap suatu websites
Portable : website yang portable adalah
website yang bisa dijalankan di berbagai
platform (teknologi web servernya) dan dapat di
tampilkan dengan baik di semua browser
(cross browser)
 

Websites Yang Direkayasa Secara Benar
Scalable : Website yang scalable adalah
website yang mudah untuk dikembangkan
(ditambah fungsi baru, feature baru,
bertambahnya user, dll)
Reusable : website yang komponen-komponen
atau fungsi-fungsinya dapat digunakan kembali
(pemrograman menggunakan konsep OOP)
 

Websites Yang Direkayasa Secara Benar
Robust dan Reliable : mengacu pada kualitas
implementasi secara teknis dan visual (banyak
gambar, dll) bagaimana website tersebut dapat
digunakan oleh user (masalah bandwith,
jaringan)
Efficient : Performa yang baik terutama dalam
delivery datanya (penanganan server dan
network)
 

Websites Yang Direkayasa Secara Benar
Readable : Source File program yang dibuat
dapat dipahami dengan baik oleh programmer
lain
Well Documented : Website yang
terdokumentasi dengan baik (spec,flowchart,
document, perubahan)
Appropriately Presented : tampilan / user
interface juga harus mendukung tujuan dari
web agar menarik user (untuk marketing /
promo, brand image)
 

Ad Hoc Web Process
Adanya Web Crisis melatarbelakangi
munculnya web process untuk mendevelop
sites, khususnya pada proses implement, test,
dan release
Biasanya kode yang ditulis untuk project web
skala kecil berupa “spaghetti code”
Perencaan yang lebih matang dapat membantu
pada proses pengembangan web, karena itu
banyak metode yang dikembangkan untuk
menangani project web skala besar /enterprise
 

Kebutuhan Akan Proses
Membangun websites merupakan pekerjaan
yang cukup sulit
Untuk memudahkan pembangunan website
maka dikembangkan “process model” yang
mendeskripsikan fase-fase dari pengembangan
web
Adapun factor-faktor yang membuat proses
pengembangan web menjadi sulit adalah:
 

Kebutuhan Akan Proses
Complexity : Webiste dapat menjadi sangat
kompleks, tantangan terbesar adalah adanya
fungsi-fungsi baru yang terus ditambahkan
pada website (sulit pada proses
pengembangan)
Changebility : Website memerlukan perubahan
yang terus menerus, sehingga membuat
proses pengembangan website menjadi
komplek
 

Kebutuhan Akan Proses
Invisibility : proses pengembangan website
tidak bisa diukur kemajuannya. Client mungkin
ingin melihat sampai mana proses
pengembangan website yang dibuat / progress
dari proyek (mis: halaman apa saja yang sudah
jadi, fungsi-fungsi apa saja yang sudah jadi)
Unrealistic Schedules : jadwal yang tidak
realistis (mis: deadline terlalu cepat), kita harus
memperhitungkan resiko yang dapat muncul
pada proses pengembangan web
(management risk)
 

Aspek Utama Perancangan Web
Isi
Teknologi
Visual
Ekonomis.
 

Piramida Perancangan Web
Isi suatu website adalah batu-batu yang
dipergunakan untuk membangun piramid
Pondasinya terletak di atas aspek teknologi dan
visual
Ekonomi adalah aspek yang memungkinkan
proyek dilaksanakan.
 

PROCESS MODEL
Pendekatan Deduktif (Top-Down)
menentukan tujuan
buat spesifikasi
rancang sesuai spesifikasi
implementasikan rancangan
test
‘publikasikan’
Process Model
membantu proses pembuatan
web dengan cepat dan akurat.
 

Tiga Model Proses RekWeb
Web Rapid Application Development
Waterfall Model
Modified Waterfall Model
 

Web RAD
Tidak ada standarisasi baku
Tanpa perancangan / diskusi
Proses pembuatan cepat
Dianjurkan untuk website skala kecil / website
pribadi
 

Waterfall Model
Mempunyai banyak tahap
Dikerjakan oleh kelompok besar / team
Sangat terstruktur
Proses lama unt perancangan
 

 Waterfall Model

 

Modified Waterfall Model
Memperbaiki Waterfall Model
perbedaan pada problem definition &
requirement diulang-ulang sampai hasil tidak
berubah
 

 Modified Waterfall Model

 

 
Rekayasa Web vs RPL
Pengembang website tidak mengetahui
peralatan yang digunakan oleh pengguna,
Misal: pada waktu perancangan tidak ada
informasi sama sekali dari pengguna browser
apa yang nanti akan digunakan untuk
mengakses website
 

Rekayasa Web vs RPL
Banyak faktor selain keadaan software di client
ikut mempengaruhi keberhasilan sebuah
website, terutama kondisi jaringan yang
digunakan, kecepatan jaringan tidak bisa
dipredikasi karena tergantung banyak faktor
(traffic padat atau tidak, kecepatan koneksi, dll)
 

Rekayasa Web vs RPL
Teknologi dibidang Rekayasa Web berubah
sangat cepat dibandingkan teknologi dibidang
perangkat lunak, sehingga setiap website perlu
’continues change’ sehingga penyesuaian
websites terhadap teknologi baru dipermudah,
perancangan harus dilakukan dengan teliti
 

Rekayasa Web vs RPL
Website biasanya document oriented
dibandingkan software yang process oriented
(lebih berfokus pada process / komputasi).
Dalam perancangan web harus sangat
diperhatikan bahwa informasi dalam dokumen
dipresentasikan dengan menarik dan jelas
sehingga lebih dimengerti oleh pengguna
 

Rekayasa Web vs RPL
Penampilan halaman web sangat penting untuk
penerimaan atau penolakan oleh pengguna.
Halaman pertama pada web yang dianggap
tidak menarik akan menyebabkan orang tidak
akan berkunjung lagi
 

PRINSIP-PRINSIP WEB DESIGN
1.
Building For User
Anda bukan pengguna
Pengguna bukan seorang
designer
Pengguna memiliki karakteristik yang berbeda
2.
Utility & Usability
Utility : kegunaan/fungsionalitas suatu web
Usability : kemampuan pengguna memanipulasi
web sehingga pengguna memperoleh apa yang
diperlukannya.
 

PRINSIP-PRINSIP WEB DESIGN
3.
Correctness
HTML benar
Gambar tampil sesuai dengan yang diharapkan
Elemen-elemen yang interaktif (JavaScript, CGI,
dll) dapat berfungsi dengan benar
Navigasi sistem tidak ada kesalahan (
broken
link
)
4.
Know and respect the Web and Internet
medium constraint
(Browser, bandwidth,
programming, protocol)
 

PRINSIP-PRINSIP WEB DESIGN
5.
Web Site harus mengikuti prinsip-prinsip
GUI
Disesuaikan dengan tampilan windows
Pakai prinsip-prinsip yang telah dikenal
pengguna
6
.
Web site yang baik memiliki sistem navigasi
.
yang jelas
Untuk meningkatkan navigasi diperlukan suatu
struktur yang tepat.
Alat bantu:
site map, search engines, site index,
help system
.
 

PRINSIP-PRINSIP WEB DESIGN
7.
Look matter
Tampilan visual sangat mempengaruhi persepsi
awal pengguna mengenai suatu web.
 

DESIGN TIPS
Buatlah Website yang dapat digunakan semua
orang
Buatlah website yang bisa dijalankan di semua
browser
Buatlah halaman web dng memperhatikan
setting
browser pengguna
Buatlah website dengan teknologi yang paling
compatible
 

DESIGN TIPS
Buatlah website yang cepat diakses
Buat halaman yang cepat diload
Buat agar halaman cepat ditampilkan
Pakai format citra yang efisien
Buat website yang mudah dimengerti
 

DESIGN TIPS
Buatlah website yang mudah digunakan
Mempunyai bantuan navigasi
Buat halaman web bebas dari penyusunan yang
kacau
Halaman utama harus dapat ditampilkan / diload
dengan cepat
Halaman harus mudah dibaca (gunakan font yg
mudah dibaca, ukuran font harus cukup besar,
warna teks dan background hrs cocok, format
hrs konsisten)
Hindari penggeseran (scrolling) lebih dari yang
betul-betul diperlukan
 

DESIGN TIPS
Sebuah site harus user friendly baik untuk
pengguna lama maupun pengguna baru
Pakai menu yang bisa dimengerti dan tidak
begitu panjang
Struktur link hendaknya menggunakan
campuran Narrow Hierarchy dan Wide Hierarchy
Jangan memaksa pengguna untuk registrasi
kalau tidak berguna
Dalam setiap halaman yang penting cantumkan
hak cipta dan informasi siapa yang harus
dihubungi jika ada pertanyaan
Untuk website yang besar (lebih dari 100 hal)
sebaiknya menyediakan fasilitas pencarian kata
yang bersifat lokal

Prinsip RPL &
Perancangan Web
Erick Kurniawan, S.Kom, M.Kom