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:
<Telephone book entry> ::= <Name> <Telephone
number>
<Name> ::= <Last name>, <First name>
<Last name> ::= <string>
<First name> ::= <string>
<string> ::= <character>|<character> <string>
<character> ::= A|B|C|...|W|X|Y|Z
<Telephone number> ::= (<area code><exchange> <local number>)
<area code> ::= <digit><digit><digit>
<exchange> ::= <digit><digit><digit>
<local number> ::= <digit><digit><digit><digit>
<digit> ::= 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> ::= <U: Opening> <C: Responding>
<U: Opening> ::= LOGIN <U: Name>
<U: Name> ::= <U: string>
<C: Responding> ::= HELLO [<U: Name>]
• 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
Shopping cart is
stored in Web
Session
1
0..1
<<link>>
<<link>>
<<link>>
{CategoryId} {FeaturedItemId}
0..n
0..n
spCatalog
spCart
spItem
<<Web Session>>
Session
0..n
<<build>>
1
<<link>>
{ItemId}
cpCatalog
<<link>> <<build>><<submit>>
<<build>>{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
<<link>>
<<Web Session>>
Session
spCheckout
<<build>>
cpCheckout
Checkout process
successful
<<redirect>>
spOrderSummar
y
<<build>>
<<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">
<!-function square(i)
{
return i * i;
}
document.write('The function returned:‘ +
square(5) + '.');
//-->
</script>
IMK Sesi 4
26/26