RESUME WEB ENGINERING 2010 “Technology

RESUME
WEB ENGINERING 2010
“Technology-aware Web Application Design”
“Perancangan Aplikasi Web”
BY
NURRACHMAT
070411100126
UNIVERSITAS TRUNOJOYO
FAKULTAS TEKNIK
INFORMATIKA
2010
Technology-aware Web Application Design “Perancangan Aplikasi Web”
Pendahuluan
Web muncul sebagai suatu sistem hypertext yang sangat sederhana yang mendukung konsep global yang
menghubungkan. Sebuah " simplicity " adalah resep untuk sukses dan alat untuk hypertext / hypermedia ke hari saat ini.
XML adalah teknologi pertama untuk membuat sistem hypertext " fully grown " memungkinkan, tetapi itu jauh dari
adat. Selain itu, dalam sejarah yang relatif singkat fokus Web telah di koneksi dengan database dan dengan desain
informasi. Namun, desain informasi hanya sebagian dapat digunakan untuk desain aplikasi Web. Integrasi modul
perangkat lunak yang luas di klien dan server dan teknik perangkat lunak sehingga berorientasi objek telah lama
penting dalam " Web melting pot ".
Tiga lapisan tersebut sebagai berikut:
(1) desain presentasi, di mana desain tampilan dan nuansa, dan di mana user interface multi-modal ikut bermain, (2)
desain interaksi, di mana desain navigasi dengan menggunakan anchors, dan dialog khusus dengan menggunakan
komponen, dan (3) desain fungsional, yang menentukan "inti" dari aplikasi Web.
5.1 Introduction
Sebagai pendekatan umum untuk desain aplikasi Web, dianjurkan untuk mencakup semua enam bagian seperti
disorot dalam Gambar 5-1, dan untuk mengamati aspek-aspek berikut:
Latar belakang budaya dari semua pengembang harus terwakili dalam tim, dan perawatan harus diambil untuk
integrasi.
Ada beberapa model independen, metode, dan alat untuk desain dan implementasi di masing-masing enam
bagian layer, tapi sangat berbeda, tergantung pada kategori aplikasi Web.
Pemilihan disebutkan di atas tidak hanya harus mempertimbangkan direncanakan kategori aplikasi Web,
tetapi juga teknologi yang direncanakan.
Sebuah proses desain yang komprehensif sebagai jalan melalui enam bagian ditunjukkan dalam Gambar 5-1
tidak dapat secara umum direkomendasikan.
5.2 Web Design from an Evolutionary Perspective
5.2.1 Latar Belakang (Background)
Salah satu karakteristik utama atau latar belakang aplikasi web adalah kebutuhan sumber dokumentasi, yaitu
pentingya informasi yang dibutuhkan dalam suatu website dibandingkan dengan perangkat lunak atau software. Hal ini
dibuktikan oleh tim Berners-Lee yang ingin mengembangkan aplikasi Web yang sederhana walaupun berbasis hipertext
melalui via internet, dan juga hanya fokus dalam tulisan teks dalam suatu informasi website itu sendiri. Jadi intinya
suatu aplikasi web yang bagus adalah seberapa besar informasi yang dikembangkan untuk dapat memberikan manfaat
bagi setiap penggunanya dan juga merasa nyaman dengan tampilan atau fitur-fitur tampilan yang disajikan dalam
aplikasi website tersebut jika memungkinkan.
5.2.2 Information Design: An Authoring Activity
Dapat disimpulkan hipertext pastinya lebih tua dari HTML, dari segi pengembangan. Hal ini terbukti dari dasar
pemikiran oleh Vannevar Bush pada akhir era Perang Dunia II dimana saat itu sangat besar pengaruh jasa teknisi yang
menyampaikan informasi maupun yang proses pengolahannya. Karena, informasi sangatlah penting pada masa itu maka
dibutuhkan teknisi yang dapat mengolah informasi sebaik mungkin yang dapat diterima dan diolah kembali. Dan
komposisi dari hipertext itu sendiri terdiri dari :
Nodes, links dan anchors
Meshes dan aggregate yang lain, Meshes dibentuk untuk node-node koheren dan link yang sebelumnya
dikenal dengan dokumen hypertext sebelum ditemukannya aplikasi web yang baru. Sedangkan aggregate yang
lain seperti : tipe pengguna ( mahir atau pemula), path-path atau petunjuk (urutan dokumen, atau kategori) dan
meta-nodes (meshes yang tertanam dalam node-node dokumen).
Web yang popular adalah karena kesederhanaan dan ketersediaan informasi yang gratis dalam aplikasi web tersebut.
Dan berikut adalah kelemahan yang sering ditemui dalam HTML :
HTML dapat dipahami sebagai bahasa pemrograman yang kuno (classic) karena dokumen atau informasi
dimasukkan pada node-node tag atau kode program HTML itu sendiri.
HTML adalah gabungan dari aspek orthogonal seperti struktur hypertext (via tags for links an anchors),
struktur dokumen (headers, body, list,etc.), dan tampilan atau interface (background color, italic, tipe font,
etc.).
HTML adalah berbasis teks, media lain seperti gambar, video dan suara hanya sebatas link-page.
Identifikasi beberapa aturan dasar untuk desain aplikasi web berbasis dokumen, yaitu, untuk aspek authoring, dari
pembahasan di atas:
Meshes harus membentuk pusat desain informasi.
Dokumen konvensional harus dipecah menjadi node-node atom atau kecil.
Aspek-aspek seperti tata letak dan konten, simpul dan mesh, dll, harus dipisahkan konseptual.
Teknologi yang dipilih harus mendukung konsep maju, misalnya, manajemen link pusat, setidaknya dalam
desain, idealnya juga dalam sistem manajemen konten (disembunyikan dari pengguna akhir), dan di intranet
bahkan dalam implementasi teknologi itu sendiri. solusi berbasis XML harus diberi preferensi atas pendekatan
proprietary.
5.2.3 Software Design: A Programming Activity
Mampu Memprogram Web (Programmable Web)
Script atau program harus menawarkan struktur data yang telah ditetapkan dan operasi untuk dapat membuat
elemen halaman HTML yang khas, seperti header dari tingkat yang berbeda, paragraf, daftar, dan hal-hal lain, mengisi
body dengan content, dan meletakkannya bersama-sama (sebagai struktur tipe tree dari elemen tersebut). Serupa dengan
dokumen HTML, (applet) user interface sebuah program akan muncul di jendela browser. Dengan demikian, fokus
utama ditempatkan pada aspek keamanan untuk mencegah applet pihak ketiga dari melaksanakan operasi yang tidak
diinginkan pada mesin end-user. Selain script dan applet, browser menjalankan program terutama untuk representasi
dinamis pada presentasi multimedia, misalnya yang dikembangkan dengan Macromedia Flash.
Pemograman Terdistribusi (Distributed Programming)
Jenis pemrograman berorientasi obyek terdistribusi telah terjebak dalam tahap akademik sampai hari ini.
Sebaliknya, komunikasi berdasarkan aktivitas atau event-based communication (EBC untuk jarak pendek), dan
mempublikasikan / berlangganan arsitektur-tectures telah menjadi semakin penting. Dalam EBC pencipta informasi
menentukan kapan berkomunikasi ("when a new event occurs ") menggunakan prinsip push di con-trast dengan prinsip
menarik di mana pengguna memulai komunikasi.
5.2.4 Merging Information Design and Software Design (Penggabungan Desain Informasi
dan Desain Perangkat Lunak)
Kemudian untuk merancang aplikasi Web dari unsur-unsur (object–node hermaphrodites) dan link-link (which
could also be method call relationships). Berikut alternatif yang sangat sederhana harus diperhatikan:
•
Elemen dapat diimplementasikan, halaman statis yang dihasilkan klien (misalnya, JavaScript), atau sebagai
halaman server- generated seperti (ASP, JSP).
•
Link berdiri untuk URL dalam HTML, atau untuk XLinks dalam XML, jika target adalah informasi daripada
sebuah program, dan jika baik isi dan alamat diketahui pada saat pelaksanaan (HTML biasa) atau pada saat
presentasi (HTML dinamis)
5.2.5 Problems and Restrictions in Integrated Web Design (Masalah dan Pembatasan dalam
Desain Web Terpadu)
Contoh beberapa masalah hambatan teknologi lebih mudah untuk melihat secara lebih rinci:
Desain halaman web dalam arti desain informasi dan desain perangkat lunak dan fase perkembangan
selanjutnya biasanya tidak didukung oleh teknologi yang tersedia di pasar.
Transisi dari bentuk berbasis user interface interaktif untuk perangkat lunak dengan antarmuka pengguna grafis
biasanya merupakan perubahan teknologi yang dramatis, karena Java applet tidak memperoleh space banyak di
dunia produksi industri perangkat lunak, meskipun Java sebagai bahasa pemrograman jauh lebih umum "
programming language for the Web"dari yang diharapkan, misalnya, dalam bentuk Java Server Pages (JSPS).
Tidak ada teknologi yang tepat untuk beberapa varian yang diinginkan dari dua konsep desain, yaitu unsurunsur dan link. Sebagai contoh, HTML tidak memiliki cara untuk menghitung tujuan link pada waktu navigasi
(jika diklik), kecuali dengan menggunakan proxy menengah, yang agak rumit.
Campuran fine-grained dari aspek authoring dan pemrograman dalam elemen atau link tidak cukup didukung
oleh teknologi. Sebagai contoh, jika kita ingin mendukung navigasi canggih di mesh, kita harus menerapkan
lapisan navigasi perangkat lunak terpisah dalam HTML atau XML dan memperkenalkan di atas mesh.
5.2.6 A Proposed Structural Approach (Usulan Pendekatan Struktural)
Cara membedakan antara desain hypertext, desain informasi, dan desain perangkat lunak dapat disebut pada
daftar di bawah ini, masing-masing dengan sisi komponen dan sisi mesh:
•
Presentasi Desain: desain ini memiliki output dokumen, media, dan data (dalam arti sistem informasi, atau
dalam arti data aplikasi komponen perangkat lunak) pada sisi komponennya.
•
Desain Interaksi: Bagian ini berkaitan dengan aliran kontrol interaksi pengguna dengan aplikasi Web. Di sisi
mesh, navigasi istilah telah menjadi adat, sedangkan istilah dialog digunakan pada sisi komponen.
•
Desain Fungsional: Bagian 5.5 memperkenalkan desain inti dari komponen dan jerat, menekankan perspektif
pengembang perangkat lunak, karena ini penting untuk kategori terbaru dari aplikasi Web.
5.3 Presentation Design
Dalam desain presentasi, "media designers" mendefinisikan tampilan dan - sampai batas tertentu - struktur
tentang bagaimana isi multimedia disajikan. Isi dari hasil aplikasi Web dari komposisi konten multimedia secara
eksplisit dikembangkan pada sisi komponen dan isi implisit didefinisikan di sisi mesh. Ini berarti bahwa desain
presentasi yang baik memungkinkan kita untuk fleksibel beradaptasi dalam presentasi untuk kebutuhan budaya,
teknologi, dan berbagai kontekstual.
Alat yang tersedia untuk membuat aplikasi Web dapat dikelompokkan menjadi dua kategori oleh bagaimana cara
mendukung desain presentasi: conventional page editors and more advanced content management systems.
5.3.1 Presentation of Nodes and Meshes
Sebuah Halaman Web konten hasil dari komposisi isi multimedia secara eksplisit dikembangkan pada sisi
komponen dan isi implisit didefinisikan di sisi mesh (misalnya, pilihan navigasi).
5.3.2 Device-independent Development Approaches
Spektrum perangkat Web-enabled mencakup hampir semua kelas dibayangkan perangkat mobile, dari telepon
seluler sangat kecil dengan browser WAP, melalui telepon pintar dan untuk tablet PC dengan menampilkan sentuhan
yang sensitif. Ketika melihat fitur-fitur teknis dari perangkat mobile, set sangat berbeda dari hasil presentasi dan
interaksi pilihan untuk digunakan dalam aplikasi Web.
5.4 Interaction Design
Interaksi desain menyangkut persimpangan dari unsur-unsur visual, dinamis, fungsional, dan teknis dari
aplikasi Web. Tujuan utamanya adalah untuk menggabungkan unsur-unsur dan konflik halus, dalam rangka untuk
menawarkan pengguna yang menarik dan serta pengalaman yang konsisten dan mudah dipahami. Bagian ini
menunjukkan pendekatan sistematis yang membagi interaksi aplikasi Web menjadi empat aspek: user interaction, user
interface organization, navigation, and user activities.
5.4.1 User Interaction
Sebuah aplikasi web menjadi lebih canggih, semakin banyak peran itu digabungkan ke dalam HTML:
transportasi informasi, tata letak, interaksi pengguna, navigasi, proses (sebagai produk sampingan dari traversal link
berikutnya), dan akses langsung ke konten digital.
Berikut akan diuraikan kriteria untuk membantu mengatur keputusan pembangunan yang akan dilakukan
dengan kembali ke sifat inti dari sebuah aplikasi perangkat lunak: maintainability, reusability, scalability, sustainability
and expandability (Carnegie Mellon Software Engineering Institute 2005) (see Table 5-1).
•
Maintainability mengacu pada rata-rata upaya untuk mencari dan memperbaiki kegagalan perangkat lunak, dan
biasanya diukur dengan kesederhanaan, keringkasan, modularitas dan self-descriptiveness.
•
Reusability mengacu pada kemungkinan keluar kode aplikasi tertentu untuk digunakan dalam aplikasi lain tanpa
(banyak) perubahan.
•
Skalabilitas tidak hanya merujuk pada kemampuan mempertahankan jumlah besar pengguna tetapi juga, dari
sudut pandang pembangunan, dengan kemampuan cerdas kegiatan pembangunan yang berbeda yang dapat
dilakukan secara paralel oleh tim pengembangan.
5.4.2 User Interface Organization
Masalah sering terjadi ketika sebuah node berisi informasi dari sesuai pada layar. Ketika mencoba untuk
menimbang aspek desain presentasi terhadap aspek interaksi desain. Maka dapat dibedakan pada pendekatan berikut
(lihat Tabel 5-2):
1.
Seluruh node dikirim ke pengguna sebagai HTML. Halaman HTML mencakup baik script atau kebiasaan teknologi plug-in untuk membiarkan subset akses informasi pengguna.
2.
Seluruh node dikirim ke pengguna sebagai salah satu halaman HTML besar tanpa script. Pengguna memilih
link relatif pada halaman untuk menelusuri halaman.
3.
Pandangan parsial ke node dikirim ke pengguna. Halaman ini menampilkan arti diatur dalam subkumpulan
informasi. Pengguna dapat menavigasi ke halaman lain untuk sepenuhnya membaca informasi yang
diinginkan.
5.4.3 Navigation Design
Hasil dari desain navigasi adalah dua kali lipat: elemen pengguna dapat mengakses di satu sisi, dan struktur
navigasi di sisi lain. Elemen menjadi node dalam kasus yang paling sederhana. Struktur mendefinisikan hubungan
antara node. Hubungan ini nantinya akan menjadi struktur link yang terlihat di user interface. Desain interaksi
mendefinisikan aspek-aspek yang diperlukan untuk navigasi itu sendiri (anchor and URL), dan unsur-unsur yang
dibutuhkan bagi pengguna untuk menyesuaikan diri.
5.4.4 Designing a Link Representation: The Anchor
Anchors adalah terlihat sebagai korespondensi dari URL dan dengan demikian, harus menyampaikan baik
motivasi bagi pengguna untuk mengaktifkan dan konsekuensi yang mungkin terjadi. Karena implementasi HTML
berbasis Web campuran dengan konsep anchor dan konsep link ke satu elemen searah tunggal. Ini adalah alasan
mengapa pengguna tidak bisa memastikan apa konsekuensi yang mungkin akan terjadi ketika mengikuti link (lihat
Tabel 5-3).
Teks dari anchor idealnya harus cukup jelas (W3C 2001c). Hal ini juga berguna untuk mengelompokkan link
berdasarkan kategori. Selain itu, ikon dapat digunakan di dalam anchors untuk memvisualisasikan link. Sementara anchors tersebut dan ikon bisa ditentukan secara statis, sifat yang berubah secara dinamis (misalnya, apakah atau tidak jenis
media tertentu dapat dibuka) harus ditandai dengan menggunakan script tertanam di halaman tersebut.
5.4.5 Designing Link Internals: The URL
Proses navigasi dipicu dengan mengaktifkan anchors di user interface. Anchors merupakan link (URL dalam
HTML) yang menetapkan tujuan proses navigasi harus mengarah juga. Anchors harus bisa, oleh karena itu, menjadi
jelas, ringkas, berumur panjang, dan alamat harus absolut.
Pengenalan XML berarti langkah progresif besar untuk link dan anchors. Gabungan XML standar seperti XPath,
XPointer, dan XLink, menawarkan fungsionalitas hypermedia infrastruktur untuk umum, mencapai jauh melampaui
link HTML. Sebagai contoh, link multi disebut dapat digunakan untuk menghubungkan dokumen XML dengan
beberapa sumber daya.
5.4.6 Navigation and Orientation
Alat atau tool navigasi harus dapat membantu untuk membatasi stres kognitif bagi pengguna. Dan mengidentifikasi
tiga strategi dasar untuk mencapai tujuan yaitu:
•
Navigation organization: Strategi ini menentukan struktur navigasi keseluruhan.
•
Orientation aid: Strategi ini membahas pertanyaan dan "Di mana aku?" dan "Mana aku?" Dalam aspek-aspek
interaksi dari desain presentasi.
•
Link perception: Strategi ini terutama menyangkut isu-isu yang berkaitan dengan asosiasi link ke motivasi dan
konsekuensi.
5.4.7 Structured Dialog for Complex Activities
Masalah
ini
menunjukkan
bahwa,
dari
interaksi
perspektif,
Proses
karakteristik
bisnis
sangat berbeda dari aplikasi hypertext. Tabel 5-4 meringkas karakteristik tersebut.
5.4.8 Interplay with Technology and Architecture
Bahwa desain, arsitektur, dan teknologi yang erat terkait dalam pengembangan aplikasi Web. Transisi ini
berdampak pada arsitektur teknologi dan perangkat lunak pilihan, kadang-kadang menjadi keras transisi ke arsitektur
yang lebih kompleks dan teknologi berperforma lebih baik sebagai aplikasi web yang berkembang. Tentu, seperti
transisi memiliki dampak pada desain.
Mengambil informasi dapat dilaksanakan dengan sederhana "membangun struktur arsitektur 3-layer-", yang
menggunakan template untuk menghasilkan output HTML yang sesuai permintaan klien (misalnya, berdasarkan
ASP.NET, JSP, atau PHP). Dalam arsitektur sederhana seperti, pengendalian aplikasi dan logika aplikasi yang tertanam
dalam kode sumber script dari template.
5.5 Functional Design
Rancangan fungsional juga harus mempertimbangkan aspek-aspek teknologi yang memiliki dampak yang kuat
dalam pengembangan pada aplikasi Web.
5.5.1 Integration
Kita dapat mengintegrasikan sistem pada tiga tingkatan, yang harus ditafsirkan sebagai sub-tingkat desain
fungsional: tingkat data, tingkat aplikasi, dan tingkat proses.
5.5.2 Communication Paradigms and Middleware
Middleware telah disebutkan di atas sebagai teknologi untuk menghubungkan aplikasi. pendekatan yang ada
sangat berbeda dalam kompleksitas dan tujuan, di mana sudah secara singkat dijelaskan Inter-Process Communication
(IPC), Remote Procedure Call (RPC), Event Berbasis Komunikasi (EBC), pesan- Oriented Middleware (MOM), dan
pendekatan berorientasi objek terdistribusi.
5.5.3 Distributed Cross-corporate Web Applications
Gambar 5-3 memberikan gambaran tentang bagaimana protokol ini bergantung satu sama lain.
Web Services Transaksi Spesifikasi (WS-Transaction) menggambarkan kerangka extensible untuk mengkoordinasikan
tindakan dalam aplikasi terdistribusi (WS-Koordinasi) dan jenis koordinasi khusus untuk transaksi atom dan transaksi
bisnis (IBM 2005a). Pendekatan ini sangat cocok terutama untuk merangkum format proprietary dari sistem transaksi
yang berorientasi saat ini. Kegiatan usaha dalam kontras dimaksudkan untuk tindakan jangka panjang, karena tidak
memblokir sumber daya selama periode waktu yang panjang.
5.6 Outlook
Pada Era pasca-PC yang disebut tidak lagi didominasi oleh satu kelas satu perangkat (PC), tetapi ditandai
dengan sejumlah besar perangkat yang berbeda. Selama beberapa tahun mendatang, ponsel akan sangat penting. Oleh
karena itu, untuk menjadi berkelanjutan, aplikasi web harus siap untuk tren hari ini, yaitu dengan mempertimbangkan
dua konsep penting, yaitu, context awareness and device independence.
5.6.1 Context-aware Applications
Sebuah aplikasi context-aware adalah sebuah aplikasi yang membutuhkan pengetahuan pengguna tertentu konteks pengguna - untuk menyesuaikan secara optimal baik interaksi dan fungsinya. Selain itu, kesadaran konteks
yang mengarah pada jenis baru dari aplikasi, misalnya, Location-Based Services (LBSs), untuk menyebutkan salah satu
contoh. Tergantung pada lokasi, kita bisa, misalnya, menampilkan informasi yang disesuaikan oleh kebutuhan.
5.6.2 Device-independent Applications
Produsen alat Web Teknik telah lama memahami masalah aplikasi perangkat-independen namun mereka telah
menyarankan terlalu optimis bahwa masalahnya bisa diselesaikan dengan mengubah presentasi generik (XML-based)
ke bahasa markup yang digunakan oleh perangkat (HTML, WML, dll). Seperti contoh: sebagian implementasi lengkap
dan berbeda versi HTML, sejauh yang berbeda elemen antarmuka pengguna yang tersedia (misalnya, kotak daftar,
tombol radio), ukuran layar dan orientasi, dan daya komputasi terbatas atau bandwidth jaringan. Pembatasan ini telah
menyebabkan beberapa proposal, termasuk WML sebagai bahasa markup tertentu untuk perangkat mobile.