Merancang dan Membangun Website

Ketika merancang website Anda, perawatan besar harus diambil untuk memastikan setiap detail dari situs melakukan pada tingkat optimal dan benar-benar melayani tujuannya. ‘Berikut adalah lima aturan sederhana dari desain web yang baik bahwa siapa pun akan melakukannya dengan baik untuk diingat ketika mempertimbangkan membangun atau merancang sebuah website baru. 

1) Jangan menggunakan flash intro
Flash intro masih sering terlihat sebagai halaman pertama pengunjung web melihat ketika mereka tiba di sebuah website. ‘Flash intro atau halaman splash karena mereka juga dikenal, biasanya film flash pendek berdasarkan dengan gambar bergerak dan teks; menampilkan informasi tentang situs dan banyak kali kata-kata seperti “selamat datang” atau “klik untuk memasuki situs web”. “Dalam kenyataannya, mereka hanya gangguan dan ketidaknyamanan kepada pengunjung web yang tidak melayani tujuan yang nyata. “Jangan memaksa pengunjung Anda untuk memiliki alasan untuk klik pada browser mereka kembali tombol! ‘Beri mereka konten yang berharga dari situs web Anda yang sebenarnya itulah yang mereka cari setelah semua dan menyingkirkan flash intro / splash page.

2) Jangan menggunakan iklan banner terlalu banyak
Hari-hari ini bahkan pemula internet cukup cerdik untuk mengabaikan banner iklan sehingga dont buang situs Anda yang berharga real estate di iklan banner berkedip menjengkelkan. “Mengapa dont Anda hanya menyediakan lebih banyak konten berharga, bukan? Kemudian campuran dalam beberapa link afiliasi yang relevan dalam konten situs ini tubuh Anda membantu pengunjung website Anda merasa bahwa mereka ingin membeli, bukan merasa seperti mereka didorong untuk membeli.

3) Mudah digunakan dan intuitif navigasi
Sebuah mutlak penting sejauh yang bersangkutan desain web adalah penyediaan sistem navigasi menu langsung dan jelas. ” Harus begitu jelas dalam kenyataan bahwa bahkan berumur 8 tahun bisa menggunakannya. “Steer juga jelas rumit navigasi menu flash atau multi-tier dropdown. “Jika pengunjung Anda menemukan situs Anda sulit untuk menavigasi mereka akan meninggalkan situs Anda dan mereka mungkin wont kembali.

4) Beri pengunjung indikasi yang jelas dari mana mereka
Bila pengunjung sedang melihat jauh di dalam halaman batin dari situs Anda dan menikmati berada di sana Anda harus memastikan mereka tahu bagian mana dari situs web mereka sebenarnya pada pada suatu saat tertentu. ‘Dengan memberikan pengunjung indikasi yang jelas dari mana mereka mereka akan dapat menelusuri semua informasi yang relevan di situs Anda atau bahkan menavigasi ke bagian lain dari website Anda dengan mudah. “Jangan rela membingungkan pengunjung Anda karena kebingungan dapat menyebabkan mereka meninggalkan website Anda.

5) Hindari menggunakan musik latar belakang di website Anda
Jika Anda benar-benar ingin pengunjung Anda untuk berlama-lama di situs web Anda, membaca konten Anda, paling tidak harus Anda lakukan adalah memastikan bahwa mereka arent menunda oleh musik latar yang mengganggu perulangan di website Anda. “Jika Anda benar-benar merasa Anda harus menggunakan musik latar belakang setidaknya membuat pengunjung yakin telah beberapa kontrol atas hal itu memberi mereka pilihan untuk kontrol volume atau mematikan setidaknya

 http://sumberdaya.web.id/2011/5-aturan-dasar-desain-web-yang-bagus/

 

 

Pengertian Struktur Navigasi dan Contohnya

Struktur navigasi digunakan sebagai penuntun alur sebuah aplikasi multimedia atau dapat pula dianalogikan sebagai diagram alur dalam perancangan bahasa pemrograman. Struktur navigasi berfungsi untuk menggambarkan dengan jelas hubungan dan rantai kerja seluruh elemen yang akan digunakan dalam aplikasi.

Dengan penggambaran struktur navigasi, pembuatan sebuah aplikasi dapat sistematis dan mudah. Jenis struktur navigasi dikelompokkan menjadi 4 struktur yang berbeda yaitu linier, hirarki, non linier dan campuran yang mempunyai perbedaan dalam bentuk rangkaiannya.

1. Struktur Navigasi Linear

Merupakan struktur yang hanya mempunyai satu rangkaian cerita berurut. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. Biasanya struktur ini digunakan Multimedia Presentasi karena tidak menuntut keinteraksian tetapi hanya memerlukan keindahan dan kemudahan menampilkan data sebagai informasi.

2. Struktur Navigasi Non Linear

Struktur navigasi non linear ( tidak berurut ) merupakan pengembangan dari struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan yang dibuat pada struktur linear ini berbeda dengan percabangan pada struktur hierarki, karena pada percabangan non linear ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama tidak ada master page dan slave page.

3. Struktur Navigasi Hierarchi

Struktur navigasi hierarchi ( bercabang ) merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan informasi yang berdasarkan criteria tertentu. Informasi pada halaman utama disebut parent dan informasi pada cabangnya disebut child.

4. Struktur Navigasi Composite

Struktur Navigasi Composite ( campuran ) merupakan struktur gabungan dari ketiga struktur sebelumnya. Struktur ini disebut juga struktur navigasi bebas. Kelebihan dengan menggunakan struktur navigasi ini adalah suatu aplikasi mampu memberikan keterkaitan informasinya lebih baik.

http://wenythepooh.wordpress.com/struktur-navigasi

Modeling Web Applications

Tingkatan Pemodelan Aplikasi Web ada 3 macam, yaitu :1. ContentInformasi yang diberikan oleh aplikasiWeb adalah salah satu faktor yang paling penting bagi keberhasilan aplikasi itu sendiri, tidak sedikit karena asal-usul dari Web sebagai media informasi. Pemodelan konten dalam arti pemodelan data murni biasanya cukup untuk aplikasi web statis. Selain karakteristik Web berikut aplikasi yang harusdiperhitungkan:

• Document-centric character and multimedia: Harus memperhitungkan semua jenis format media berbeda ketika memodelkan content, termasuk menstrukturkan informasi sebagai basis.

• Integration of existing data and software: Banyak aplikasi web dibangun di atasrepositori data dan komponen software yang telah ada dimana awalnya tidak dimaksudkan untuk aplikasi web.

TujuanPemodelan content bertujuan untuk mentransfer kebutuhan informasi dan fungsi yang ditentukan oleh rekayasa kebutuhan untuk suatu model.

• Pemodelan content menghasilkan suatu model yang menyusun aspek struktural dari content misalnya berbentuk diagram kelas, dan tergantung pada jenis aplikasi web, aspek perilaku dapat berbentuk diagram status dan interaksi.

2. HypertextMerupakan salah satu sifat yang paling penting untuk dipertimbangkan ketika memodelkan aplikasi Web. Dengan demikian struktur hypertext harus dirancang dengan hati-hati.
Tujuan

• Menetapkan navigability (dapat dijelajah) dari semua content aplikasi web, yaitu tesedianya path navigasi kepada pengguna.

• Pemodelan hypertext menghasilkan dua hal berikut:

1. Model struktur hypertext yang dikenal sebagai model struktur navigasi. Mendefinisikan struktur dari hypertext, yaitu kelas-kelas mana dari model content yang dapat dikunjungi dengan navigasi.

1. Model struktur hypertext tersaring, dimana elemen-elemen akses berbentuk suatu access model.

Konsep Pemodelan Struktur Hypertext

• Pemodelan struktur hypertext didasarkan pada konsep hypertext, yaitu terhadap node (halaman/dokumen) dan link antar node tersebut.

• Starting point untuk pembuatan model struktur hypertext biasanya adalah model content yang berisi kelas dan obyek. Diperoleh node-node dalam hypertext.

• Model struktur hypertext sering dijadikan sebagai view pada model content. Karena itu disebut pula navigational view

•  Node yang ditetapkan sebagai view pada model content memilih satu atau lebih obyek dari content

>> Beberapa metode mendefinisikan aturan transformasi untuk menurunkan link pada basis relationship pada level content.
Hypertext tidak akan lepas dari yang namanya link.
Berikut klasifikasi link :

• Metode HDM (Hypertext Design Model)

• MetodeWebML (Web Modeling Language)

• Memperhatikan distribusi node-node pada level hypertext terhadap halaman (page) pada level presentation.

• Berdasarkan pada kebutuhan fungsional dari aplikasi Web

• Metode pemodelan OO-H (Object-OrientedHypermedia)

Bicara tentang pasti tidak akan  lepas dari yang namanya akses, karena pasa saat kita menge-linkan sesuatu pasti kita akan mengakses ke page yang tertera pada link tersebut. Berikut konsep permodelan akses :

• Struktur akses terulang digambarkan sebagai pola rancangan (design patterns), disebut pula “hypermedia design patterns” atau “navigation patterns”.

• Pemanfaatan pola navigasi ini akan meningkatkan kualitas dari model hypertext.

• index adalah suatu struktur yang memungkinkan pengguna memilih obyek tunggal keluar dari daftar obyek yang homogen

• menu memungkinkan pengguna mengakses node-node heterogen

• guided tour memungkinkan pengguna secara runut berjalan melalui sejumlah node

• query memungkinkan pengguna mencari node-node

• Pola navigasi khusus termasuk:

1. home, mengarah ke home page dari aplikasiWeb

1. landmark, menunjuk ke suatu node yang dapat dicapai dari dalam semua node.

• Beberapa struktur akses ini dapat ditambahkan ke model struktur hypertext secara otomatis

Contoh: index dapat ditambahkan secara otomatis kapanpun kita menginginkan akses kesuatu himpunan (>1) obyek dari suatu node.
3. PresentationMirip dengan Rekayasa Perangkat Lunak tradisional, pemodelan presentasi dengan user interface dan dengan tampilan dari aplikasi Web. Berbeda dengan aplikasi tradisional,unsur utama dari presentasi dalam aplikasi web adalah halaman sebagai unit visualisasi.
Tujuan

• Pemodelan presentasi membidik perancangan struktur dan perilaku dari user interface untuk memastikan bahwa interaksi dengan aplikasi Web adalah sederhana dan self-explanatory.

• Pemodelan presentasi memberikan dua hasil:

1. Menghasilkan suatu konsep presentasi uniform dengan memodelkan elemen-elemen terulang pada page, misalnya headers dan footers. Idealnyamenunjukkan komposisi dari setiap page dan rancangan dari fields, texts, images, forms, dll.,
2. Mendeskripsikan aspek berorientasi perilaku dari userinterface.

http://ahmadferdiansah.wordpress.com

Terminologi Perancangan Web

Sobat, pada kesempatan kali ini saya akan share materi perancangan web yang saya dapat dari mata kuliah tersebut pada pertemuan pertama, sengaja saya tulis untuk sarana belajar dan siapa tau bisa menjadi sumber referensi sobat pembaca semua.

WEB DESIGN

adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan dan bisa melibatkan estetika dan seluk beluk mekanis dari suatu operasi situs web walaupun yang yang utama memusatkan pada look dan feel,walaupun yang yang utama memusatkan pada look dan feel dari situs web tersebut.

WEB ENGINEERING

adalah aplikasi pendekatan sistematis dan terukur (konsep, metode, teknik, alat) untuk biaya-efektif sebagai syarat analisis, implementasi, desain, pengujian, pengoperasian, dan pemeliharaan aplikasi web berkualitas tinggi.

Mood

adalah dasar dari sebuah desain untuk memberikan pesan kepada pengunjung mengenai perasaan dari situs tersebut, tampilan situs bisa membawa rasa sedih

DESAINER WEB 

adalah orang yang bertugas mendesain halaman halaman web yang menentukan menentukan look dan feel yang mempunyai kemampuan mencari dan menentukan ide dan kemudian mengolahnya dalam pikiran, menggunakan ide secara efektif, menentukan nilai dari ide tersebut, menempatkan dengan benar dan memakainya dengan tepat.

WEB DESIGN dapat didefinisikan sebagai:

1. Pemrograman yang berfungsi sebagai back-end dari situs
2. Pengembangan tampilan front-end

Fungsi Situs Web :

1. Fungsi Komunikasi
2. Fungsi informasi
3. Fungsi entertainment
4. Fungsi transaksi

Jenis situs web yang dikelompokkan sesuai tujuan:

1. Alat Pemasaran
2. Nilai Tambah
3. Katalog
4. E-Commerce
5. E-Learning
6. Komunitas
7. Portal
8. Personal

Kategori dari Web Aplications:

1. Document Centric : static homepage, web radio, company website.
2. Interactive : virtual exhibition, news site, time table information.
3. Transactional : online banking, online shopping, booking system.
4. Workfloe-based : e-government, B2B solution, patient workflow
5. Collaborative : chatroom, e-learning platform, P2P services
6. Ubiquitous : customized services, location-aware service
7. Semantic Web : reommender system, syndication, knowledge management.
8. Social Web : weblogs, collaborative filtering, virtual shared workspace.

Spesifikasi WEB : 

1. Multidisciplinarity
   - Pengembangan aplikasi web membutuhkan partisipasi dari para ahli dari berbagai disiplin.
2. Unavailability of Stakeholders
   - Selama aktivitas pengembangan web, user yang benarbenar menggunakan belum diketahui.
3. Persyaratan volatilitas dan kendala
   - Hambatan seperti properti dari platform penyebaran atauk omunikasi lebih mudah saat mengembangkan sistem perangkat lunak konvensional daripada aplikasi Web
4. Lingkungan Operational yang sulit diprediksi- Lingkungan operasional aplikasi Web juga sangat dinamis dan sulit diprediksi
5. Dampak Sistem Legacy- Pengembangan aplikasi Web ini ditandai dengan integrasi perangkat lunak dengan komponen yang ada seperti produk komersial dengan perangkat lunak open source.
6. Aspek Kualitas- Kualitas aspek menentukan bagi keberhasilan aplikasi Web Contohnya kinerja aplikasi Web, keamanan di e-commerce, ketersediaan, atau kegunaan.
7. Kualitas Antar muka Pengguna- Kualitas antarmuka pengguna adalah aspek lain keberhasilankritis dari aplikasi Web dengan prinsip IKIWISI ((I Know It When I See It)
8. Pengembang yang kurang berpengalaman- Banyak teknologi yang mendasari dalam aplikasi Web yang masih cukup baru sehingga pengalaman dengan alat-alat teknologi pembangunan, standar, bahasa, dapat menyebabkan perkiraan yang salah dalam menilai kelayakan dan biaya pelaksanaan.
9. Tanggal Pengiriman- Banyak proyek web desain harus memenuhi deadline proyek sehingga prioritas kebutuhan adalah hal utama.

PRINSIP-PRINSIP PENGEMBANGAN APLIKASI WEB :

1. Memahami Konteks Sistem

• Mendukung tujuan bisnis pelanggan
• Menganalisa dan menjelaskan proses bisnis yang ada
• analisis bisnis dapat menentukan nilai dari sebuah aplikasi Web dalam kaitannya dengan sumber daya 

2. Melibatkan Stakeholder

Kerjasama aktif dan langsung dalam mengidentifikasi dan  negosiasi persyaratan penting dalam setiap fase proyek.

3. Iterative Definition

Pada awal proyek, persyaratan utama biasanya didefinisikan pada tingkat yang lebih tinggi.

4. Fokus pada Arsitektur Sistem

"Ruang solusi“ dapat mendefinisikan "ruang masalah" dan pemahaman elemen solusi teknis dengan kemungkinan dan keterbatasan

5. Risiko Orientasi

• Masalah tidak terdeteksi, 
• Masalah yang belum terpecahkan
• Menghindari masalah IKIWISI, rilis awal dari suatu aplikasi  Web untuk mengumpulkan umpan balik pengguna, atau  disatukan komponen awal eksternal untuk menghindari  integrasi yang terlambat 

http://www.arissaryanto.net/