1 / 26

Alat Bantu Perangkat Lunak

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. Metode Spesifikasi.

kieran-bradshaw
Télécharger la présentation

Alat Bantu Perangkat Lunak

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Alat Bantu Perangkat Lunak Interaksi Manusia dan Komputer Sesi 4

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

  3. 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. IMK Sesi 4

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

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

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

  7. cpHome Shopping cart is 1 1 stored in Web .. .. 1 1 0 0 <<link>> Session <<link>> <<link>> {CategoryId} {FeaturedItemId} .. .. n n 0 0 0 0 .. .. n n spCart <<Web Session>> spCatalog spItem Session 0 0 .. .. n n <<link>> <<build>> <<submit>> <<build>> <<link>> <<build>> {action=Change Quantity} {action=Add,ItemId} {ItemId} 1 1 cpCatalog cpItem cpCart frmCartContent UML Class Diagram (Bagian Atas) Web Class Diagram for E-Commerce Site IMK Sesi 4

  8. cpCart <<link>> <<Web Session>> Session spCheckout cpCheckout <<build>> Checkout process successful <<redirect>> <<submit>> spOrderSummar cpOrderSummar frmCheckout <<build>> y y UML Class Diagram (Bagian Bawah) Web Class Diagram for E-Commerce Site IMK Sesi 4

  9. UML Class Diagram (Lanj.) • Web Application Stereotypes (Jim Conallen) Web Target Web Server Page Web HTML Form Web Frameset Web Client Page IMK Sesi 4

  10. UML Class Diagram (Lanj.) • Stereotype asosiasi untuk Web Application Extension to UML: • «link» • «targeted link» • «redirect» • «submit» • «build» IMK Sesi 4

  11. UML Statechart Diagram Statechart Diagram for Robot Transmission IMK Sesi 4

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

  13. User Action Notation (Lanj.) • Contoh 1: TASK: select an iconUser Actions Interface Feedback~[icon] Mv icon!M^ • Contoh 2: TASK: select an iconUser 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 IMK Sesi 4

  14. Interface-Building Tools (Lanj.) • Fitur interface-building tools: • Kebebasan antarmuka pemakai • Metodologi dan notasi • Rapid prototyping • Dukungan perangkat lunak IMK Sesi 4

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

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

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

  18. Interface-Building Tools (Lanj.) • Dukungan perangkat lunak • Meningkatkan produktivitas. • Memberikan pemeriksaan kendala dan konsistensi. • Memfasilitasi pendekatan tim. • Memudahkan pemeliharaan. IMK Sesi 4

  19. Contoh Interface-Building Tools • Design tools • Software engineering tools IMK Sesi 4

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

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

  22. Design Tools (Lanj.) IMK Sesi 4

  23. Design Tools (Lanj.) IMK Sesi 4

  24. 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 the lines one at a time menu.menu1.m .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 IMK Sesi 4

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

  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

More Related