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 unsur-unsur 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 tek-nologi 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 anc-hors 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.
