pertemuan 1

TERMINOLOGI  PERANCANGAN WEB

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 ari 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  web  yang  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 Pemrograman yang berfungsi sebagai back-end dari situs dan Pengembangan tampilan front-end

Fungsi Situs We
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. Karakteristik dari Web           Apalications

Product-Related  Characteristic

Merupakan blok  utama dari aplikasi Web, yang terdiri dari: 

a.        Content, 

Document-centric  character  and  multimediality  disini struktur  yang  disediakan  sebagai  tabel,  teks,  grafik, animasi, video, audio. Quality demands, tergantung pada area aplikasi, isi aplikasi Web tidak hanya berbeda frekuensi update, tetapi juga untuk metrik kualitas yang berbeda mengenai informasi yang up to date, tepat, konsisten dan dapat diandalkan. Product-Related  Characteristic

b.      Hypertextual structure (navigational structure) Elemen  dasar  model  hypertext  adalah  node,  link  dan jangkar. Fitur  penting  dari  paradigma  hypertext  adalah  Non-linearity, Disorientation and cognitive overload.

c.       Presentation (user interface). Ada 2 fitur utama: Aesthetics dan Self-explanation

 Usage-related Characteristics Dibagi dalam 3 bagian yaitu:

1.       Social Context: Users

Mengacu  pada  aspek  pengguna  tertentu  seperti Spontaneity dan Multiculturality

2.  Technical Context: Network and Devices  Konteks  teknis  yang  terdiri  dari  properti  yang berhubungan  dengan  koneksi  jaringan  tentang  Quality  of service, dan perangkat keras dan perangkat lunak perangkat yang  digunakan  untuk  mengakses  aplikasi  Web  untuk  Multi-platform delivery

3.   .Natural Context: Location and Time  Mencakup aspek lokasi dan waktu akses.  Sedangkan  Globality  dan  availability  membuat  tingkat heterogenitas yang tinggi

Development-related Characteristic

Pengembangan aplikasi Web ini ditandai oleh sumber daya yang diperlukan:

1.       The Development Team  Pengembangan  aplikasi  Web  sangat  dipengaruhi oleh  kenyataan  bahwa  pembangunan  tim  yang multidisciplinary  dan  umumnya  masih  muda  serta community development.
2.       Technical Infrastructure Karakteristik  yang  penting  disini  adalah inhomogeneity  dan immaturity. Development-related Characteristic
3.       Process pembangunan  adalah  kerangka  untuk semua karakteristik yang berkaitan dengan pembangunan, dan pada gilirannya dipengaruhi oleh flexibility dan parallelism
4.       Integration Karakteristik  khusus  dari  banyak  web  adalah internal dan external integration.
Evolusi  merupakan  karakteristik  yang  mengatur  semua  tiga dimensi produk, penggunaan dan pengembangan
Kebutuhan akan evolusi dapat dikatakan untuk:
1.       Continuous change
2.       Competitive pressure
3.       Fast pace
Evolusi WEB
Tujuan  awal  penciptaan  dari  web  adalah  untuk  memfasilitasi  dan mempermudah  berbagi  informasi  antara  beberapa  ilmuwan menggunakan  situs  Web  sederhana  yang  terutama  terdiri  dari dokumen teks hyperlink. Kontribusi  dari  masing-masing  disiplin  ilmu  ini  pada  evolusi dan pertumbuhan dari Web adalah:
a.       Media:  integrasi  dari  berbagai  jenis  media  seperti  data, teks, grafik, gambar, audio dan video,  dan presentasi (animasi,  visualisasi  3D);  jenis  interaksi  dan  saluran komunikasi  (satu-ke-satu,  satu-ke-banyak,banyak-ke-satu, dan banyak-ke-banyak).
b.      Informasi  ilmu:  informasi  organisasi,  presentasi,  indexing, retrieval,  agregasi,  manajemen,  kolaboratif  dan pembuatan konten.
c.       Informasi dan teknologi komunikasi dan jaringan: efisien dan costeffective penyimpanan, pengambilan,  pengolahan, dan penyajian informasi; infrastruktur yang memfasilitasi transfer dan berbagi data dan informasi; kabel dan komunikasi internet nirkabel,  aplikasi Web pribadi.
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  benar-benar menggunakan belum diketahui.
3.       Persyaratan volatilitas dan kendala Hambatan  seperti  properti  dari  platform  penyebaran  atau komunikasi  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 keberhasilan-kritis  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

pertemuan2

MODELING Web Apligations

Spesifikasi Model Web Applications 

1.      LEVELS 
       Dibedakan tiga tingkat yaitu Content, hypertext, dan presentation

2. ASPECTS
       Mengikuti  prinsip-prinsip  berorientasi  objek,  struktur  dan dimodelkan  pada  masing-masing  tiga  tingkat,  yaitu  pada konten, hypertext dan presentasi.  Relevansi  struktur  dan  sifat  model  tergantung  pada  jenis aplikasi Web.
3. PHASES
       Urutan  langkah-langkah  pemodelan  tergantung  pada  jenis aplikasi Web. Pendekatan  informasi-driven,  dimulai  dengan  pemodelan  isi, atau  pendekatan  presentasi-driven, yaitu,  dimulai  dengan presentasi pemodelan aplikasi.
4. Customization                                                                       
        Customization  mempertimbangkan  konteks,  misalnya, pengguna,  karakteristik  perangkat,  atau  pembatasan bandwidth,  yang  memungkinkan  untuk  beradaptasi  dengan aplikasi Web. 

METHODE dan TOOLS

Metode  tersedia  untuk  pemodelan  aplikasi  Web  yang  biasanya didasarkan pada metode tradisional, seperti sebagai ER, atau mereka  meningkatkan  bahasa  pemodelan  berorientasi  objek, misalnya, UML.

Metode  Pemodelan  mengikuti  paradigma  yang  berbeda, tergantung pada asal mereka dan fokus:

1.   Data-oriented methods

Data  berasal  dari  bidang  sistem  database  terutama  didasarkan  pada model  ER  yang  lebih  dispesifikkan  dengan  konsep-konsep  untuk pemodelan pada tingkat hypertext. Fokus utama dari metode ini adalah pemodelan aplikasi Web database-driven.  Contoh  metode  berorientasi  data  termasuk  Relationship Management Metodologi(RMM) dan Bahasa Modeling Web (WebML).

2.   Hypertext-oriented methods

  Fokus pada karakter hypertext aplikasi Web. Misalnya  Hypertext  Desain  Model  (HDM)  berkembang  ke W2000,  dan  HDM-lite  atau  Situs  Web  Design  Method (WSDM) 

3.   Object-oriented methods

  Metode  yang  sangat  awal  seperti  UML,  termasuk  dalam kategori  ini  Object-Oriented  Hypermedia  Design  Method (OOHDM),  UML-based  Web  Engineering  (UWE),  Object-Oriented  Web  Solutions  (OOWS),  Object-Oriented Hypermedia (OO-H) method.

4.   Software-oriented methods

  Contoh  untuk  kategori  ini  adalah  Aplikasi  Web  Extension (WAE), atau WAE2 yang disempurnakan.

Untuk  pengembangan  aplikasi  web  dalam  pemilihan  Tools menggunakan  alat  yang  mendukung  tidak  hanya  model  itu sendiri, tetapi terutama juga otomatisasi, misalnya:

1. WebRatio Site Development Studio merupakan pengembangan model berbasis alat yang dibangun di Web Modeling Language (WebML) (http://www.webml.org). Alat ini menggunakan notasi sendiri untuk pemodelan hypertext dan tambahan mendukung  notasi dan UML.  Code generator  alat ini menggunakan XSL untuk mengubah isi dan  hypertext   model  yang  direpresentasikan  dalam  XML  ke dalam  representasi  basis  data  yang  diperlukan  dan  database koneksi  serta  komponen  perangkat  lunak  dan  format  output (HTML, WML,PDF, Microsoft Word). WebRatio  menggunakan  utilitas  bernama  EasyStyle  untuk menghasilkan presentasi halaman, yang akan mengubah notasi halaman  ke  stylesheet  XSL  secara  otomatis  tanpa  kegiatan pemrograman tambahan. Aplikasi  Web  yang  dihasilkan  oleh  WebRatio  adalah ditempatkan  dalam  kerangka  runtime  didasarkan  pada seperangkat komponen Java, yang dapat dikonfigurasi dengan menggunakan  file  XML

2. VisualWADE Alat VisualWADE (http://www.visualwade.com)  didasarkan pada metode  OO-H.  Alat  ini  mendukung  pemodelan  dan  aplikasi generasi  otomatis berbasis pada XML, ASP, JSP, dan PHP. VisualWADE  menambah  model  UML  dengan  dua  model tambahan: 

a.       Navigasi  adalah  digunakan  untuk  memodelkan  aspek hypertext dari sebuah aplikasi Web.

b.   Presentasi  adalah  mewakili  interaksi  elemen  antarmuka pengguna  yang  berkaitan  dengan  struktur  dan  perilaku menggunakan  struktur  template.

3.   OpenUWE

   Open UWE  (http://www.pst.ifi.lmu.de/projekte/uwe)  adalah sebuah  lingkungan  pengembangan  untuk  desain  dan  generasi aplikasi Web menggunakan metodologi UWE. Fitur  utama  dari  suite  ini  adalah  arsitektur  terbuka  berdasarkan standar yang ditetapkan. Dalam  versi  saat  ini  (masih  dalam  pengembangan),  ini  termasuk  lingkungan  pengembangan  alat  kasus  ArgoUWE dan  UWEXML  kerangka  kerja,  yang  terdiri  dari  pemeriksaan konsistensi  model,  editor  tata  letak,  dan  generator  kode  untuk  Publishing XML Cocoon Framework dan Java Server Pages.

4.   WEB  APLICATION  ARCHITECTURE

Ada beberapa pengertian menyangkut arsitektur:

a.     Arsitektur  menjelaskan  struktur,  arsitektur  dari  sistem  perangkat  lunak  terdiri  dari  strukturnya,  dekomposisi kedalam komponen, dan hubungan antarmuka.

b.      Arsitektur  membentuk  transisi  dari  analisis  terhadap implementasi. 

c.       Architecture dilihat dari sudut pandang yang berbeda, yaitu

·         Pandangan konseptual, yang mengidentifikasi entitas dari  domain aplikasidan hubungan.

·     Pandangan runtime, yang menggambarkan komponen diruntime system. pandangan proses, peta proses pada sistem runtime.

·         Peta  proses  pada  sistem  runtime,  melihat  aspek  seperti sinkronisasi dan concurrency.

·         Pandangan implementasi, yang menggambarkan artefak perangkat lunak sistem.

·         Arsitektur membuat sistem dimengerti.

·         Arsitektur merupakan kerangka untuk sistem yang fleksibel.

5.   Developing Architectures

A.    Pola

        Menjelaskan  permasalahan  desain  berulang  yang  timbul dalam konteks desain yang spesifik.Buschmann et al. (1996) mengidentifikasi pola pada tiga tingkat abstraksi yang berbeda: 

·         Arsitektur pola  Pola-pola  peta  mekanisme  penataan  mendasar  untuk perangkat  lunak  sistem  yang  menggambarkan  subsistem arsitektur,  tanggung  jawab,  hubungan  yang  saling mempengaruhi.  Salah  satu  contoh  adalah  jenis  pola  Model-View-Controller (MVC) .

·         Desain pola Pola-pola  ini  menggambarkan  struktur,  hubungan  yang saling  mempengaruhi  antar  komponen  untuk  memecahkan masalah desain dalam konteks tertentu.

·          Idiom Mmenjelaskan  pola-pola  yang  mengacu  pada implementasi  spesifik  dalam  pemrograman  suatu  bahasa, misalnya  idiom  Counted-Pointer  untuk  manajemen penyimpanan di C + +.

B.     Frameworks

  Sebagai  cetak  biru  untuk  arsitektur  dasar  dan  fungsi-fungsi dasar untuk suatu bidang tertentu dari aplikasi. Frameworks  juga  memiliki  kekurangan,  yaitu  tinggginya  tingkat pelatihan,  kurangnya  standar  untuk  integrasi  kerangka  kerja yang  berbeda,  dan  ketergantungan  yang  dihasilkan  pada produsen.

C.     Pengkategorian Arsitektur

Anastopoulos  dan  Romberg(2001)  serta  Bongio  dkk  (2003) menggambarkan  arsitektur  untuk  lingkungan  aplikasi  Web, mengambil  aspek  layering  dari  arsitektur,  atau  dukungan  data yang berbeda dan format data - data aspek arsitektur , yaitu:

·    Aspek  Layering,layering  berarti  bahwa  sistem  perangkat lunak yang terstruktur dalam beberapa tingkatan.

·         Aspek Data, data dapat terstruktur atau non-terstruktur. data erstruktur  mengikuti  didefinisikan  skema  seperti  tabel  dalam database  relasional  atau  struktur  XML  dalam  dokumen.  Non-data terstruktur multimedia, misalnya, gambar, audio, dan video, yang biasanya tidak mengikuti skema secara eksplisit

Peningkatan  sistem  perangkat  lunak  terdistribusi  telah menyebabkan  perkembangan  arsitektur  dan  menangani infrastruktur distribusi data dan pesan: 

a.     Distributed  Objsect  Middleware  (DOM):  Jenis  infrastruktur memungkinkan  untuk       mengakses  remote  objek  secara ransparan.  Hal  ini  didasarkan  pada  mekanisme  Remote Procedure  Call  (RPC).  Contoh  Microsoft  DCOM  (Distributed Component  Object  Model),  atau  EJB  (Enterprise  Java Beans) oleh Sun Microsystems. 

b.      Virtual  Shared  Memory  (VSM):  Model  VSM  memungkinkan akses  terdistribusi  proses  data  yang  umum.  Proses  sendiri mengakses  memori  bersama.  Contoh  Corso (Http://www.tecco.at) dan Equip(http://www.crg.cs.nott.ac.uk). 

c.        Message  Berorientasi  Middleware  (MOM):  MOM  sistem menawarkan  fungsionalitas  untuk  asynchronous  transmisi  pesan.  MOM  memastikan  bahwa  pesan  yang disampaikan  tetap.  Contoh  Sun  JMS  (Java  Messaging Service) dan Microsoft MSMQ (Microsoft Message Queue). 

d.     Peer  to  Peer  (P2P):  untuk  mempersingkat  komunikasi langsung  antara  dua  perangkat  dalam  suatu  sistem  tanpa menggunakan  server,  yaitu,  mereka  berkomunikasi  melalui sambungan  point-to-point.  Contoh  JXTA  (http://www.jxta.org) dan Xmiddle (http://xmiddle.sourceforge.net/). 

e.       Service  Oriented  Middleware  (SOM):  SOM  meningkatkan sistem  DOM,  contoh  SOM  sistem  Jini  Sun (Http://www.sun.com/software/jini/). 

D.    Komponen Arsitektur Aplikasi Web Generik

Teknologi Web Aplikasi

1.      Hypertext dan Hypermedia

Hypertext dipahami sebagai organisasi dari interkoneksi unit informasi tunggal dimana hubungan antara unit-unit ini dapat dinyatakan oleh link dengan inti konsep dasarnya World Wide Web. Hypermedia  umumnya  dipandang  sebagai  cara  untuk memperluas prinsip hypertext untuk objek multimedia.

2.      Komunikasi Client/Server

a.  SMTP (Simple Mail Transfer Protocol) adalah Memungkinkan  untuk  mengirim  dan  menerima  e-mail  juga  digunakan  sebagai  protokol  transport   pesan asynchronous pertukaran berdasarkan SOAP .

b.   RTSP (Real Time Streaming Protocol) Merupakan  standar  dipublikasikan  oleh  Internet Engineering  Task  Force  (IETF),  dan  dirancang  untuk mendukung  pengiriman  data  multimedia  dalam  kondisi  real-time.

c.  HTTP  (HyperText Transfer Protocol) Protokol berbasis teks, mengendalikan bagaimana sumber daya  dokumen  atau  gambar  diakses  yang  menggunakan konsep Uniform Resource Identifier (URI).

3.      Bagian Pelacakan 

a.  Penulisan Ulang URL Mekanisme  yang  mentransmisikan  data  sesi-relevan sebagai  parameter  dalam  URL,  data  yang  dikirimkan kemudian  dapat  digunakan  untuk  merekonstruksi  sesi  pada server.

b.   Cookie  adalah  file  teks  kecil  yang  digunakan  untuk menyimpan  informasi  server  (misalnya,  sebuah  ID)  yang  diklasifikasikan sebagai "sesi" atau "permanen" cookies. Permanen,  permanen  tetap  dikomputer  client  (disimpan  di hard disk). Sesi,  hanya  disimpan  sampai  situs  yang  kiri  atau  browser ditutup.

c.       Penggunaan Skenario Bagaimana  mengkombinasikan  cookies  untuk  menyimpan  URL.

4.      Teknologi Dokumen yang Spesifik

a.  HTML - Hypertext Markup Language Sebuah  aplikasi  SGML,  menggambarkan  unsur-unsur  yang  dapat  digunakan  untuk  menandai  isi  dokumen  hypertext  dan bagaimana  unsur-unsur  ini  saling  berhubungan  (dalam  Document Type Definition (DTD).

b.      SVG - Scalable Vector Graphics

Memungkinkan  menggambarkan  grafik  dua  dimensi  dalam XML.

c.    SMIL - Synchronized Multimedia Integration Language Dikembangkan  oleh  W3C  untuk  mewakili  disinkronisasi presentasi multimedia.

d.  XML - eXtensible Markup Language Untuk  kemudahan  pelaksanaan,  dan  untuk  interoperabilitas dengan kedua SGML dan HTML .