Filed under: Interaksi Manusia dan Komputer.
1. METODE SPESIFIKASI
Aset pertama dalam membuat perancangan adalah notasi yang baik untuk merekam dan mendiskusikan kemungkinan-kemungkinan.
· Spesifikasi dalam bahasa alami: cenderung bertele-tele, 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.
· 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.
2. MULTIPARTY GRAMMAR
a. Penggambaran interaksi dengan notasi seperti BNF (Backus-Naur Form).
b. 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
c. Pada multiparty grammar ada nonterminal yang diberi label untuk menyatakan pihak yang menghasilkan string (U: user; C: computer).
d. Contoh: Proses log-in
<Session> ::= <U: Opening> <C: Responding>
<U: Opening> ::= LOGIN <U: Name>
<U: Name> ::= <U: string>
<C: Responding> ::= HELLO [<U: Name>]
3. UML CLASS DIAGRAM
a. Web Class Diagram For E-Commerce Site
b. Web Application Stereotypes (Jim Conallen)
c. Stereotype asosiasi untuk Web Application Extension to UML:
· «link»
· «targeted link»
· «redirect»
· «submit»
· «build»
4. UML STATERCHART DIAGRAM
Staterchart Diagram for Robot Diagram
5. USER ACTION NOTATION (UAN)
a. Digunakan untuk mengatasi keanekaragaman dunia manipulasi langsung.
b. 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)
c. Contoh 1:
TASK: select an icon
User Actions Interface Feedback
~[icon] Mv icon!
M^
d. Contoh 2:
TASK: select an icon
User Actions Interface Feedback Interface State
~[file] Mv file!, forall(file!): file-! selected = file
~[x,y]* outline(file) > ~
~[trash] outline(file) > ~, trash!
M^ erase(file), trash!! selected = null
6. INTERFACE BUILDING TOOLS
a. Interface buiding tools disebut juga :
· Rapid Prototyper
· User Interface Builder
· User Interface Management System
· User Interface Development Environment
· Rapid Application Developer
b. Fitur interface-building tools:
- 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.
- 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.
- Dukungan perangkat lunak
· Meningkatkan produktivitas.
· Memberikan pemeriksaan kendala dan konsistensi.
· Memfasilitasi pendekatan tim.
· Memudahkan pemeliharaan.
c. Contoh Interface-Building Tools
· Design Tools
- Membuat gambaran awal dengan cepat penting di tahapan awal perancangan untuk:
o Menjajaki berbagai alternatif;
o Memungkinkan komunikasi dalam tim perancang;
o Menyampaikan kepada klien seperti apa bentuk produk nantinya.
- Beberapa contoh design tools:
o CAI software: Macromedia Authorware, IconAuthor, Quest.
o Multimedia construction tools: HyperCard, Macromedia Director, Macromedia Flash.
o Slide presentation software: Microsoft PowerPoint.
o Visual programming tools: Microsoft Visual Basic (sekarang dalam Visual Studio .NET), Borland Delphi.
o Web design tools: Macromedia Dreamweaver, Macromedia Fireworks.
· Software Engineering Tools
- Tcl/Tk:
#First make a menu button
menubutton.menu1 -text “Unix Commands” menu.menu1. -underline
#Now make the menu, and add the lines one at a time menu.menu1.
.menu1.m add command -label “List Files” -command {ls}
.menu1.m add command -label “Get Date” -command {date} .menu1.m add command -label “Start Calendar” -command
{xcalendar}
pack.menu1
- 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();
}
}
- JavaScript
<script language=”JavaScript” type=”text/javascript”>
<!–
function square(i)
{
return i * i;
}
document.write(‘The function returned:‘ + square(5) + ‘.’)//–>
</script>
Leave a Comment so far
Leave a comment
