Pertemuan 1 -- TERMINOLOGI PERANCANGAN WEB

Terminologi

     1.     WEB DESIGN  : seni dan proses dalam menciptakan halaman web tunggal atau keseluruhan dan bisa melibatkan estetika dan seluk beluk mekanis dari suatu operasi situs web.

2.     WEB ENGINEERING : 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.

3.     Mood    : dasar dari sebuah desain untuk memberikan perasaan kepada pengunjung.

4.     DESAINER WEB   : orang yang bertugas mendesain halaman web yang menentukan look dan feel yang mempunyai kemampuan mencari dan menentukan ide dan kemudian mengolahnya dalam pikiran.

Fungsi Situs Web

• Fungsi Komunikasi

• Fungsi informasi

•  Fungsi entertainment

• Fungsi transaksi

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

•  Usage-related Characteristics

•  Development-related Characteristic

•  Evolution

Spesifikasi WEB

1.          Multidisciplinarity

2.          Unavailability of Stakeholders

3.          Persyaratan volatilitas dan kendala

4.          Lingkungan Operational yang sulit diprediksi

5.          Dampak Sistem Legacy

6.          Aspek Kualitas

7.          Kualitas Antar muka Pengguna

8.          Pengembang yang kurang berpengalaman

9.          Tanggal Pengiriman

PRINSIP-PRINSIP PENGEMBANGAN APLIKASI WEB

1.          Memahami Konteks Sistem

2.          Melibatkan Stakeholder

3.          Iterative Definition

4.          Fokus pada Arsitektur Sistem

5.          Risiko Orientasi

Pertemuan 2 – MODELIN WEB APPLICATIONS

Spesifikasi Model Web Applications

1.          LEVELS

Dibedakan 3 tingkat, yaitu;

·        Content

·        Hypertext

·        Presentation

2.          ASPECTS

Mengikuti prinsip-prinsip berorientasi objek, struktur dan dimodelkan pada masing-masing tiga tingkat, yaitu pada konten, hypertext dan presentasi.

3.          PHASES

Urutan langkah-langkah pemodelan tergantung pada jenis aplikasi Web.

4.          Customization

Customization mempertimbangkan konteks, misalnya, pengguna, karakteristik perangkat, atau pembatasan bandwidth, yang memungkinkan untuk beradaptasi dengan aplikasi Web.

METHODE dan TOOLS

1.Data-oriented methods (lebih dispesifikkan dengan konsep-konsep untuk   

   pemodelan pada tingkat hypertext)

2. Hypertext-oriented methods (Fokus pada karakter hypertext aplikasi Web)

3. Object-oriented methods (Metode yang sangat awal seperti UML)

WEB APLICATION ARCHITECTURE

beberapa pengertian menyangkut arsitektur:

1.Arsitektur menjelaskan struktur

2.Arsitektur membentuk transisi dari analisis terhadap implementasi.

3.Architecture dilihat dari sudut pandang yang berbeda, yaitu:

a. Pandangan konseptual, yang mengidentifikasi entitas dari domain

    aplikasidan hubungan.

b. Pandangan runtime, yang menggambarkan komponen di runtime

    system. pandangan proses, peta proses pada sistem runtime.

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

    concurrency. d. Pandangan implementasi, yang menggambarkan artefak

    perangkat lunak sistem.

4.Arsitektur membuat sistem dimengerti.

5.Arsitektur merupakan kerangka untuk sistem yang fleksibel. 

Developing Architectures

1.Pola

2. Frameworks

3. Pengkategorian Arsitektur

Teknologi Web Aplikasi  

A. 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.

B. Komunikasi Client/Server

C. Bagian Pelacakan
D. Teknologi Dokumen yang Spesifik

Pertemuan 3 -- Merancang dan Membangun Website

7 aturan merancang website

• Just becouse you can doesn’t mean you should.
• There is almost always an exception
• Users are the ultimate judges
• Crossover experience is something a designer needs to always strive for
• Humility is the best approach
• It is impossible to please everyone
• Try to stay on top of specifications and standard

3 Filosofi Merancang Web

•Estetika

Bagaimana profesional tampilan dan nuansa situs ini? Apakah konsisten dengan yang diinginkan branding bisnis atau individu?

•Kegunaan

Seberapa cepat dan mudah pengguna mampu menemukan dan memproses informasi ketika sedang melakukan tugas-tugas yang diperlukan?

•Fungsi

Pemrograman harus mengaktifkan aspek fungsional situs, seperti formulir dan konten database-driven.

Desain Web

 Desain web dibagi 3, yaitu:

1.Desain Antar Muka

2.Desain Situs

3.Desain Halaman

 Requirement

 Ketika membangun sebuah situs, beberapa informasi yang paling penting bagi seorang desainer meliputi:

•Look and feel requirements

•Bandwidth requirements

•Resolution requirements

•Scalability requirements

•Content requirements

Creating Layout

•Tata letak yang baik penting untuk penyajian gambar profesional dan kegunaan dari sebuah situs.

•Pengguna harus dapat menemukan informasi dengan mudah lengkap, hal inilah yang mempengaruhi tata

  letak/layout.

•Layout dalam sebuah web lebih mengacu pada posisi elemen, daripada tampilan dan nuansa situs.

Scrolling vs Nonscrolling

Keuntungan Scrolling

• Desain bisa muat lebih banyak konten pada satu halaman.
• Pengguna tidak harus klik dan menunggu untuk me-load halaman lain, yang tidak hanya butuh waktu, namun pengguna juga harus kembali matanya terfokus pada daerah baru yang sebagian besar kemungkinan pada atau di dekat bagian atas layar.
• Sangat mudah untuk navigasi cepat jika pengguna menggunakan mouse dengan roda atau scroller stylus dan memungkinkan untuk menggerakan kursor dengan mudah.

Kerugian Scrolling:

• Dibutuhkan sedikit usaha untuk mengklik link yang membuka halaman baru.
• Karena halaman digulir lebih panjang, waktu download mereka biasanya lebih besar.

Posisi Content

1. Posisi menu
2. Header
3. Body

Struktur Navigasi

Linier

Linier merupakan struktur yang hanya mempunyai satu rangkaian cerita yang berurut.

 

Hirarki

Struktur hirarki merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu.

Non Linier

Pada struktur nonlinier diperkenankan membuat struktur navigasi bercabang, percabangan ini berbeda dengan percabangan pada struktur hirarki.

 

Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya.

Teknik Typografy

•Tipografi (typography) adalah ilmu yang mempelajari tentang huruf.

•Tipografi lebih dari seni memilih font, tentang membuat konten lebih mudah dibaca.

•Teks merupakan bagian sentral dari antarmuka pengguna, sehingga kebutuhan User Interface dipengaruhi

  pemilihan font, ukuran, dan spasi.

Anatomi Huruf

• Huruf dikelompokan menjadi 2 jenis, yaitu:

                 - huruf besar (upper case atau capital letter)

                 - huruf kecil (lower case).

• Huruf dikelompokan menjadi 3 yaitu:

                 - huruf berkait (serif)

                 - huruf tak berkait (sansserif)

                 - huruf latin (script)

@JAasfarina

Pertemuan 4 -- Manajemen Situs Web

Elemen dari metodologi pembangunan situs web :

• Informasi audience Informasi-informasi ini termasuk latar belakang pengguna, minat, dan semua perincian yang membantu untuk mempertajam informasi untuk dicocokkan dengan kebutuhan audience.
• Proposal Berisi tentang informasi yang jelas tentang alasan dan ruang lingkup dari existensi web.
• Pernyataan yang Objektif Sebuah pernyataan objektif yang berdasarkan pada proposal.
• Informasi Domain Kumpulan pengetahuan dan informasi tentang subjek domain yang ada di cover web, yaitu informasi yang disediakan untuk audience web dan informasi yang dibutuhkan oleh perancang web.
• Spesifikasi Web Adalah gambaran secara rinci dari batasan dan elemen yang akan ditampilkan di web.
• TampilanWeb Adalah informasi yang akan dikirimkan kepada user. Tampilan tersebut adalah hasil dari rancangan dan proses implementasi pembangunan web.

6 proses dari metodologi perancangan situs web:

•Perencanaan Antisipasi dan memutuskan target untuk audience, tujuan dan sasaran dari informasi.

•Analisis Proses mengumpulkan dan membandingkan informasi tentang web dan pengoperasiannya dengan tujuan untuk memperbaiki kualitas web secara keseluruhan.

•Perancangan Sebuah proses yang dilakukan oleh perancang web, mengerjakan spesifikasi web, membuat keputusan tentang bagaimana komponen web diaktualisasikan.

•Implementasi Proses dibangunnya web menggunakan Hyper Text Markup Language (HTML), sehingga proses implementasi mungkin lebih mirip dengan pengembangan software sebab menggunakan syntax yang spesifik untuk pengkodean struktur web dalam sebuah bahasa formasi dalam file komputer.

•Promosi Proses mengendalikan semua masalah promosi di web. Termasuk di dalamnya bagaimana web ini dikenal eksis oleh komunitas on line melewati publisitas, sebaik bisnis atau hubungan informasi lain dengan web yang lain.

•Inovasi Proses pengembangan dan perbaikan secara terus menerus.

• SMI adalah sebuah aplikasi komputer yang digunakan untuk mengatur alur kerja yang diperlukan untuk membuat, menyunting, memeriksa, indeks, pencarian, arsip, dan menerbitkan pelbagai jenis media dijital dan elektronik, baik yaang berupa teks, gambar, maupun gambar bergerak.
• SMI sering digunakan dalam aplikasi berbasis web generasi 2.0.
• Dalam web generasi 2.0 terjadi pemisahan antara tampilan dan pengaturan isi web. SMI terdiri dari dua struktur yaitu:

                    - Frontend adalah tampilan halaman web, yaitu halaman yang diakses oleh pengunjung umum.

                    - Backed adalah bagian administrasi yang hanya bisa diakses sang pemilik portal maupun

                      orang-orang yang telah ditunjuk untuk melakukan manajemen portal atau istilah umumnya

                      halaman admin (admin page).

• SMI berfungsi untuk menyimpan, pengendalian, versi, dan penerbitan dokumen tertentu seperti berita, manual operator, manual teknik, panduan penjualan, emasaran, dan brosur.

Teknik Implementasi

Teknologi Program

Web memiliki Teknologi web yang dikenal sebagai web server dan web browser.

•Web server

        - Berfungsi untuk melakukan service.

        - Web server yang ada saat ini adalah Microsoft IIS (Internet Information Service), Apache,

           Microsoft PWS (Personal Web Server), dan lain-lain.

        - Bahasa pemrograman web browser dikenal JavaScript, dan CSS yang dikeluarkan oleh W3C {World

          Wide Web Consortium).

        - Format yang digunakan sudah ada standar yang jelas yaitu HTML.

•Web browser

        - Berfungsi untuk memakai/meminta service.

        - Contoh dari Web Browser yaitu Microsofit IE (lnternet Explore), Netscape Navigator, Opera,

          Magellan, Mozilla Firefox, dan lain-lain.

        - Bahasa pemrograman di antaranya PHP, ASP, dan lain-lain.

  

Teknologi Client

•Perancangan aplikasi client server harus mempertimbangkan hal-hal sebagai berikut: 1. Banyaknya client di dalam sistem. 2. Apakah sistem menggunakan lebih dari satu DBMS. 3. Kebutuhan update aplikasi di masa mendatang.

Teknologi Server

•Salah satu fungsionalitas dari server adalah sebagai web server yang memungkinkan server tersebut mengelola beberapa website dan melayani browser dari klien yang mengakses halaman yang terdapat dalam website tersebut.

Teknologi Content

•Saat ini teknologi yang terkenal dan banyak digunakan adalah CMS.

•CMS merupakan singkatan dari Content Management System , suatu software yang berguna untuk memanipulasi (menambah, mengedit atau menghapus) content atau isi dari suatu situs web.

5 Fungsi Pengguna Web:

• Author Yang membangun isi atau content adalah author dengan kedudukan yang cukup penting karena suatu intranet tanpa content tidak punyai nilai apa-apa.
• Webmaster Peranannya dapat dikatakan sebagai komplimen dari seorang manajer jaringan.
• Administrator adalah individu yang bertanggung jawab terhadap proses manajemen dan kebijaksanaan dari isi (content) serta untuk membangun halaman-halaman dari perantara jasa (broker pages) ditempat sendiri (on-site) maupun pada direktori ataupun melalui perangkat bantu navigasi dilokasi luarnya (off-site).
• Publisher Isi atau content formal dari Intranet menjadi tanggung jawab dari Publisher.
• Editor Editor bertanggung jawab atas pembentukan dan perawatan content yang terkait dengan lingkup individual dari intranet.

Pertemuan 5 -- Pengujian (Testing)

Pengujian Aplikasi Web

Pengujian (Testing) adalah instrumen penting dalam pengembangan aplikasi web untuk mendapatkan produk yang berkualitas dan seperti yang diharapkan pengguna .

•Testing adalah sebuah aktivitas untuk mengevaluasi kualitas dari sebuah produk dan untuk memperbaiki produk dengan mengidentifikasi kerusakan dan masalahnya.

Kesalahan (Error) terjadi jika hasil dari jalannya testing tidak sama dengan hasil yang diharapkan.

•Error adalah perbedaan antara nilai atau kondisi yang dihitung, diobservasi, diukur dengan kenyataan, spesifikasi dan kebenaran teori (IEEE standard 610.12-1990).

Level Testing

•Unit Test

     -Merupakan pengujian unit terkecil seperti Classes, Web pages, dsb.

     - Pengujian yang berdiri sendiri

     - Dilakukan selama implementasi

•Integration Test

      Mengevaluasi interaksi unit terintegrasi yang di tes secara berbeda dan terpisah

•System Test

      - Merupakan testing yang komplit.

      - Sistem yang terintegrasi.

•Acceptance Test

     - Mengevaluasi sistem dalam organisasi dengan bantuan klien yang berada dalam lingkungan sistem

        yang dekat dengan lingkungan produksi.

     - Menggunakan kondisi dan data real.

•Beta Test

       Merupakan tes yang informal (tanpa rencana dan kasus) yang mempercayakan pada kreativitas

       pengguna yang potensial.

Pengujian Situs Web

 Penguji Situs Web dibagi 2

• Pengujian di Local Host (Sebelum mengupload situs web, dilakukan pengujian di server lokal terlebih dahulu.)
• Pengujian di Internet (Setelah diupload dilakukan pengujian untuk memastikan bahwa web telah siap untuk digunakan.)

Pengujian di Local Host

•Pengujian Usability

•Pengujian Sistem Navigasi (Struktur)

•Pengujian Graphic Design (Desain Visual)

•Pengujian Content

•Pengujian Compability

•Pengujian Loading Time

•Pengujian Functionality

•Pengujian Accesibility

•Pengujian Interactivity

 Spesifikasi Testing

• Error dalam konten sering ditemukan dengan perhitungan manual atau pengukuran organisasi, contoh proofreading.
• Menguji struktur hypertext, pastikan halaman ter-link dengan benar (bukan merupakan Broken Link).
• Estetika, sebagai subjective requirement
• Multi-platform delivery, sebagai karakteristik performance yang berbeda dari seperangkat device.
• Multilinguality dan Usability
• Ketidakdewasaan dan multidisiplin team sering mengakibatkan lemahnya penerimaan metodologi dan kesiapan melakukan Testing.
• Web aplikasi berisi komponen software yang berbeda, contoh web server, database, middleware, dan integrasi sistem, seperti ERP sistem, Content Management System, dsb, yang di sediakan oleh berbagai vendor dan diimplementasikan dengan berbagai teknologi yang berbeda.
• Kematangan dari berbagai metode Testing dan perangkatnya
• Perubahan yang dominan membuat aplikasi web lebih komplek

Pendekatan Testing

•Pendekatan Konvensional (Conventional Approaches)

           - Work Result (quality plan, test strategy, test plan, test case, test measurement, test

               environtment,test reports)

            - Rules (test manager, test consultant, test specialist, tool specialist)

•Agile Approaches

              - Quality goal

              - self organize of the team untuk membuat software yang sesuai dengan tujuan.

Conventional Approaches

Kegiatannya meliputi:

Planning

Meliputi Tujuan, Strategi testing umum, Rencana test untuk setiap level, Metode metrik dan pengukuran dan lingkungan testing.

Preparing

Mencangkup pemilihan teknik dan perangkat testing dan spesifikasi test case (termasuk test data).

Performing

Menyiapkan infrastruktur testing, jalannya test case dan evaluasi dan dokumentasi hasil test.

Reporting

Merupakan ringkasan dari hasil test dan membuat laporan tes.

Agile Approaches

• Agile Approaches berasumsi bahwa team akan menemukan solusi untuk masalah bersama dan tidak

   terduga (reliance on self-organization).

• Testing bukan sebuah aturan tapi kolaborasi dan penggunaan terbaik dari kapabilitas yang ada dalam

   sebuah tim.

• Testing adalah sebuah pengembangan aktifitas yang terintegrasi.

Kegiatan Agile Approaches meliputi:

•Pair Programming

•An on-site customer

•Continuous Integration

•Test-first Development