Alat Bantu Perangkat Lunak. Interaksi Manusia dan Komputer Sesi 4

Alat Bantu Perangkat Lunak Interaksi Manusia dan Komputer Sesi 4

Topik Bahasan  Metode spesifikasi 

Multiparty Grammar  Unified Modeling Language (UML)  User Action Notation (UAN)

 Interface-building tools 

Design tools  Software-engineering tools IMK Sesi 4

2/26

Metode Spesifikasi  Aset pertama dalam membuat perancangan adalah notasi yang baik untuk merekam dan mendiskusikan kemungkinan-kemungkinan.   

Spesifikasi dalam bahasa alami: cenderung berteletele, samar-samar, dan membingungkan. Bahasa formal dan semiformal: efektif untuk bahasa perintah. Menu-tree structures: menunjukkan tata letak menu. Tidak menunjukkan seluruh aksi yang mungkin. IMK Sesi 4

3/26

Metode Spesifikasi (Lanj.) 

UML class diagram: hubungan antar-elemen sistem. Lebih baik daripada menu-tree.  UML Statechart diagram: sesuai untuk sistem interaktif.  User action notation (UAN): notasi pendekatan untuk pengembangan sistem manipulasi langsung.

IMK Sesi 4

4/26

Multiparty Grammar  Penggambaran interaksi dengan notasi seperti BNF (Backus-Naur Form).  Contoh BNF: ::= ::= , ::= <string> ::= <string> <string> ::= | <string> ::= A|B|C|...|W|X|Y|Z ::= (<area code><exchange> ) <area code> ::= <exchange> ::= ::= ::= 0|1|2|3|4|5|6|7|8|9 IMK Sesi 4

5/26

Multiparty Grammar (Lanj.)  Pada multiparty grammar ada nonterminal yang diberi label untuk menyatakan pihak yang menghasilkan string (U: user; C: computer).  Contoh: Proses log-in <Session> ::= ::= LOGIN ::= ::= HELLO []

• Multiparty grammar efektif untuk rentetan perintah berorientasi teks yang berulang-ulang dipertukarkan, seperti pada terminal bank. IMK Sesi 4

6/26

UML Class Diagram (Bagian Atas) Web Class Diagram for E-Commerce Site

cpHome

1

0..1

Shopping cart is stored in Web Session

<>

<> <> {CategoryId} {FeaturedItemId} 0..n

0..n

spCatalog

spCart

spItem

<<Web Session>> Session

0..n <> 1

<> {ItemId}

cpCatalog

<> <><<submit>> <>{action=Add,ItemId} {action=Change Quantity}

cpItem

IMK Sesi 4

cpCart

frmCartContent

7/26

UML Class Diagram (Bagian Bawah) Web Class Diagram for E-Commerce Site

cpCart

<> <<Web Session>> Session spCheckout

<>

cpCheckout

Checkout process successful <>

spOrderSummar y

<>

<<submit>>

cpOrderSummar y

IMK Sesi 4

frmCheckout

8/26

UML Class Diagram (Lanj.)  Web Application Stereotypes (Jim Conallen) Web Server Page

Web Target

Web Client Page

Web Frameset

IMK Sesi 4

Web HTML Form

9/26

UML Class Diagram (Lanj.)  Stereotype asosiasi untuk Web Application Extension to UML:     

«link» «targeted link» «redirect» «submit» «build»

IMK Sesi 4

10/26

UML Statechart Diagram

Statechart Diagram for Robot Transmission

IMK Sesi 4

11/26

User Action Notation (UAN)  Digunakan untuk mengatasi keanekaragaman dunia manipulasi langsung.  Simbol-simbol UAN:         

~[icon] : bergerak menuju icon ~[x,y] : menuju koordinat (x,y) Mv : tombol mouse ditekan M^ : tombol mouse dilepas icon! : icon di-highlight icon-! : icon kembali normal icon! : icon berkedip icon > ~ : icon bergerak mengikuti kursor * : dapat berulang ( 0 kali) IMK Sesi 4

12/26

User Action Notation (Lanj.)  Contoh 1: TASK: select an icon User Actions ~[icon] Mv M^

Interface Feedback icon!

 Contoh 2: TASK: select an icon User Actions ~[file] Mv ~[x,y]* ~[trash] M^

Interface Feedback Interface State file!, forall(file!): file-! selected = file outline(file) > ~ outline(file) > ~, trash! erase(file), trash!! selected = null

IMK Sesi 4

13/26

Interface-Building Tools (Lanj.)  Fitur interface-building tools: 

Kebebasan antarmuka pemakai  Metodologi dan notasi  Rapid prototyping  Dukungan perangkat lunak

IMK Sesi 4

14/26

Interface-Building Tools  Interface-building tools disebut juga:     

Rapid Prototyper User Interface Builder User Interface Management System User Interface Development Environment Rapid Application Developer

IMK Sesi 4

15/26

Interface-Building Tools (Lanj.)  Kebebasan antarmuka pemakai     

Memisahkan perancangan antarmuka dari program internal. Memungkinkan strategi multiple user-interface. Memungkinkan dukungan multi-platform. Memberi peranan arsitek antarmuka pemakai. Menegakkan standar. IMK Sesi 4

16/26

Interface-Building Tools (Lanj.)  Metodologi dan notasi   

Mengembangkan prosedur perancangan. Menemukan cara berbicara tentang perancangan. Melakukan manajemen proyek.

 Rapid prototyping   

Mencoba gagasan dengan sangat dini. Uji, revisi, uji, revisi, …. Mengikutsertakan end users, manajer, pelanggan. IMK Sesi 4

17/26

Interface-Building Tools (Lanj.)  Dukungan perangkat lunak 

Meningkatkan produktivitas.  Memberikan pemeriksaan kendala dan konsistensi.  Memfasilitasi pendekatan tim.  Memudahkan pemeliharaan.

IMK Sesi 4

18/26

Contoh Interface-Building Tools  Design tools  Software engineering tools

IMK Sesi 4

19/26

Design Tools  Membuat gambaran awal dengan cepat penting di tahapan awal perancangan untuk: 

Menjajaki berbagai alternatif;  Memungkinkan komunikasi dalam tim perancang;  Menyampaikan kepada klien seperti apa bentuk produk nantinya. IMK Sesi 4

20/26

Design Tools (Lanj.)  Beberapa contoh design tools:     

CAI software: Macromedia Authorware, IconAuthor, Quest. Multimedia construction tools: HyperCard, Macromedia Director, Macromedia Flash. Slide presentation software: Microsoft PowerPoint. Visual programming tools: Microsoft Visual Basic (sekarang dalam Visual Studio .NET), Borland Delphi. Web design tools: Macromedia Dreamweaver, Macromedia Fireworks. IMK Sesi 4

21/26

Design Tools (Lanj.)

IMK Sesi 4

22/26

Design Tools (Lanj.)

IMK Sesi 4

23/26

Software Engineering Tools  Tcl/Tk: #First make a menu button menubutton.menu1 -text "Unix Commands" menu.menu1.m -underline 0 #Now make the menu, and add time menu.menu1.m .menu1.m add command -label command {ls} .menu1.m add command -label {date} .menu1.m add command -label command {xcalendar}

the lines one at a "List Files" "Get Date" -command "Start Calendar" -

pack.menu1 IMK Sesi 4

24/26

Software Engineering Tools (Lanj.)

 Java: class Test { public static void main(String[] args) { for(int i = 0; i < args.length; i++) System.out.print(i == 0 ? args[i] : " " + args[i]); System.out.println(); } }

IMK Sesi 4

25/26

Software Engineering Tools (Lanj.)  JavaScript <script language="JavaScript" type="text/javascript">

IMK Sesi 4

26/26