Pert 2

PRINSIP-PRINSIP REKAYASA PERANGKAT LUNAK & PERANCANGAN WEB Erick Kurniawan, S.Kom

Perbedaan RekWeb dan RPL ? „ „ „ „ „

Perancang website tidak tahu spesifikasi pengguna Banyak faktor selain software client Teknologinya sangat cepat berubah Biasanya lebih document oriented drpd process oriented Tampilan sangat penting

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 „ „ „

Tanpa perancangan / diskusi Proses cepat Dianjurkan untuk website skala kecil

Waterfall Model „ „ „ „

Mempunyai banyak tahap dikerjakan kelompok besar 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

Definisi Masalah (Problem Definition) „ „ „

“ Why” : Mengapa website itu diperlukan, apa tu juan website yang akan dibangun? .“For Whom” : Untuk siapa website itu dibuat. “What” : Data atau informasi apa yang akan diumumkan lewat website? Bagaimana presentasi data tersebut? Masihkah ada data yang belum diketahui atau semua data sudah tersedia?

Requirement Analysis dan Specification „ „ „ „ „

Analisis perangkat lunak dan perangkat keras Teknologi yang akan digunakan Pemilihan SO, Web Server, DBMS yg digunakan Spesifikasi semua halaman web Penentuan isi (content)

Design / Prototyping „

„

Design visual : menentukan tampilan halaman web, seperti di mana letak banner, navigasi, menu, logo untuk website, dan seterusnya. Design visual ini seringkali dilakukan oleh seorang designer dengan keahlian Web Design Design teknologi adalah pendefinisian prosedurprosedur yang diperlukan dan interface antara prosedur itu (hanya diperlukan kalau sebuah website dinamis dirancang).Design ini sangat mirip dengan perancangan program pada rekayasa perangkat lunak biasa.

Design / Prototyping „

Design struktur informasi atau dokumen menentukan bagaimana informasi bisa dicocokkan dengan struktur halaman web. Informasi seringkali disimpan dalam dokumen yang cukup panjang. Sebaliknya, dalam web perancangan cenderung memiliki banyak halaman web dengan hubungan (link) antar halaman web tersebut. Perancangan ini masuk akal karena pemakai web biasanya hanya membaca sebagian kecil dari semua halaman yang tersedia dalam website. Oleh karena itu, informasi harus dipecah menjadi bagian kecil dengan link-link .

Struktur Link „

Pure Linear

„

Linear with Options

Struktur Link „

Linear with Alternatives

„

Linear with Side Trips

Struktur Link „

Grid

„

Wide Hierarchy (Pohon)

Struktur Link „

Narrow Hierarchy

„

Mixed Hierarchy: Campuran antara narrow dan wide Pure Web: tidak memiliki struktur yang jelas

„

Implementation & Unit Testing „ „

Implementasi semua halaman web yang ada pada website tersebut Jika implementasi sudah selesai kemudian dilanjutkan dengan pengujian (testing)

Integration & System Testing „

„ „

Integrasi adalah proses penggabungan semua halaman web yang sudah selesai dibuat secara keseluruhan (utuh) Setelah itu harus dilakukan pengujian kembali terhadap website secara menyeluruh Harus dilakukan pengecekan broken link

Release Operation & Maintenance „ „

Tahap terakhir adalah proses upload semua halaman web ke web server Website juga harus selalu dipelihara oleh seorang administrator

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 should respect GUI principles where appropriate „ Serupa tapi tak sama „ Pakai prinsip-prinsip yang telah dikenal pengguna 6. Navigation is only a means to an end result „ 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.

WEBSITE YG DIREKAYASA SCR BENAR „ „

„ „

„

Correct : berfungsi secara benar dan error free. Pada kenyataannya, WS yang correct, sulit didefinisikan, suatu site mungkin benar tetapi user tidak melihatnya secara benar. Maintainable : web site dapat dirubah secara mudah. Portable : dapat dijalankan pada multiple platforms (browser, server). Ö mirroring dan distribusi Scalable : dapat diperbesar untuk menangani lebih banyak pengguna.

WEBSITE YG DIREKAYASA SCR BENAR „ „

„ „ „ „ „

Reusable : dapat digunakan kembali. Tidak perlu dirombak total Ö tampilan/gambar, tetapi infrastruktur jangan (database, script, content). Robust & Reliable : dapat diandalkan. Efficient: performa yang baik. Ö program, jaringan, server, client Readable : source file dapat dipahami. Well Documented : terdokumentasi dengan baik (spec. dokumen, flowchart, perubahan, dll).

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