Bài giảng Tương tác người máy: Chương 0 - Tổng quan về HCI tìm hiểu về các nội dung cơ bản và trọng tâm như sau: Thuật ngữ và khái niệm; Người dùng; Môi trường; Lĩnh vực liên quan; Chất lượng; Phương tiện và công cụ;... Mời các bạn cùng tham khảo chi tiết bài giảng tại đây!
Prepared by MSc Luong Manh Ba Tương tác người máy Human Computer Interaction - HCI Department of Software Engineering Faculty of Information Technology Hanoi University of Technology TEL: 04-8682595 FAX: 04-8692906 Email: cnpm@it-hut.edu HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Cấu trúc mơn học • 60 tiết LT+ đồ án mơn học + tập • Cần kiến thức CNTT, đồ hoạ, tâm lý nhận thức, cơng thái học • Cung cấp ngun lý chung tương tác người máy • Cung cấp kiến thức cần thiết để học môn chuyên ngành hẹp áp dụng vào thiết kế, xây dựng, đánh giá phần mềm HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Cấu trúc mơn học (tiếp) • Nội dung môn học: phần 10 chương I- Phần I Phần sở (foundation) gồm chương: Chương 0: Tổng quan HCI Chương I: Tâm lý nhận thức Con người giao tiếp xử lý Chương II: Nhân tố Máy tính tương tác người máy Chương III: Các dạng đối thoại tương tác người máy (Dialogue styles for HCI) HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Cấu trúc môn học (tiếp) II-Phần II Phân tích thiết kế giao tiếp người dùng (User Interface Analyse and Design) Chương IV: Các nguyên tắc vịng đời hình thiết kế giao tiếp Người dùng – Máy tính Chương V: Mơ hình GOM, Keytrock,… (GOM and Keytrock Models) Chương VI: Đặc tả yêu cầu người dùng phân tích nhiệm vụ Chương VII: Ký pháp đối thoại thiết kế HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Cấu trúc môn học (tiếp) III-Phần III Cài đặt đánh giá tương tác người dùng (Users Interface Implementation and Evaluation ) gồm chương: Chương VII: Hỗ trợ Cài đặt (Implementation) Chương VIII: Các kỹ thuật đánh giá phần mềm (Evaluation Techniques) • Đánh giá: Đồ án môn học + Bài tập HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Tài liệu tham khảo (Reference) [1] Jenny Preece et al: Human-Computer Interaction, Addison-Wesley, 1994 [2] Dix, Finlay, Abowd and Beale: Human -Computer Interaction (course and book), Prentice-Hall, second edition, 1993 (http: //www.hcibook.com/hcibook/toc.html) [3] Gary Perlman, Ohio State University: User Interface development (course), SEI Curriculum Module, 11-1989 HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Tài liệu tham khảo (tiếp) [4] C.Machgeels: Interfaces Humains- ordinateur (cours), Département Informatique, ULB, 2001-2002 [5] J.Coutas, Interface Home-ordinareur, Conception et réalisation, Dunod Paris 1990 (Bá) (Nghiêng hướng tâm lý khoa học nhận thức) [6] Andy Downton, Engineering the HumanComputer Interface , McGraw Hill 1992 [7] J.P.Menadier, l’Interface uilisateur pour une Informatique plus conviale, Dunod Paris 1991 [8] Sommerville, Software Engineering (chapter 17User Interface), Addison 1996 (BM) HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Ti liu tham kho (tip) [9] D tho đề cơng m«n häc HCI- PGS Nguyễn Văn Ba khoa CNTT [10] Bản đề cương HCI (Human Computer Interface -Hiệp hội CNPM ACM & IEEE ) course CS1 (Use Interface Design and Development) [11] W.Brener, R Zarnekow, H Witig: Software Intelligent Agents 1998 HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Chương 0: Tổng quan HCI 0.1 Thuật ngữ khái niệm 0.2 Người dùng 0.3 Môi trường 0.4 Lĩnh vực liên quan 0.5 Chất lượng 0.6 Phương tiện công cụ 0.7 Đầu vào 0.8 Đầu 0.9 Công cụ (Tools) HUT, Falt of IT © Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba 0.1 Định nghĩa khái niệm • • • • • HCI: Human-Computer Interaction CHI: Computer – Human Interaction IHO: Interaction Humains Ordinateur IHM: Interaction Homme Machine Tương tác người máy HUT, Falt of IT © Dept of SE, 2002 HCI - One 10 Prepared by MSc Luong Manh Ba Một số biến cố phương thức xử lý (tiếp) 5- ComponentEvent + Nguyên nhân: Di chuyển, định kích cỡ, dấu lại Component + Giao diện lắng nghe: ComponentListener + Phương thức xử lý : i)componentMoved(ComponentEvent e) ii)componentHidden(ComponentEvent e) iii)componentResized(ComponentEvent e) iv)componentShown(ComponentEvent e) HUT, Falt of IT © Dept of SE, 2002 HCI - One 37 Prepared by MSc Luong Manh Ba Một số biến cố phương thức xử lý (tiếp) 6- FocusEvent (mở rộng gói java.awt.ComponentEvent) + Nguyên nhân: Dời tiêu điểm đến/ khỏi thành phần : Component + Giao diện lắng nghe : FocusListener + Phương thức xử lý : i)focusGained(FocusEvent e) ii)focusLost(FocusEvent e) 7- TextEvent + Nguyên nhân:Thay đổi văn bản(JtextComponent) + Giao diện lắng nghe : TextListener HUT, Falt of IT © Dept of SE, 2002 HCI - One 38 Prepared by MSc Luong Manh Ba Một số biến cố phương thức xử lý (tiếp) + Phương thức xử lý : textValueChanged(TextEvent e) 8- KeyEvent + Nguyên nhân: Thả nhấn phím Component + Giao diện lắng nghe : KeyListener + Phương thức xử lý : i) KeyPressed(KeyEvent e) ii) KeyReleased(KeyEvent e) iii)KeyTyped(KeyEvent e) 9- MouseEvent + Nguyên nhân:Di chuyển chuột Component HUT, Falt of IT © Dept of SE, 2002 HCI - One 39 Prepared by MSc Luong Manh Ba Một số biến cố phương thức xử lý (tiếp) + Giao diện lắng nghe: có hai giao diện lắng nghe MouseListener MouseMotionListener + Phương thức xử lý - Với MouseListener : i) MousePressed(MouseEvent e) ii) MouseReleased(MouseEvent e) iii) MouseEntered(MouseEvent e) iv)MouseExited(MouseEvent e) v)MouseClicked(MouseEvent e) -Với MouseMotionListener : i) MouseDragged(MouseEvent e) HUT, Falt of IT © Dept of SE, 2002 HCI - One 40 Prepared by MSc Luong Manh Ba Một số biến cố phương thức xử lý (tiếp) ii) MouseMoved(MouseEvent e) 10- AdjustmentEvent + Nguyên nhân: Di chuyển JscrollBar + Giao diện lắng nghe : AdjustmentListener + Phương thức xử lý : adjustmentValueChanged(AdjustmentEvent e) 11- ListSelectionEvent + Nguyên nhân: Chọn khoản mục: Jlist + Giao diện lắng nghe: ListSelectionListener + Phương thức xử lý : ValueChanged(ListSelectionListener e) HUT, Falt of IT © Dept of SE, 2002 HCI - One 41 Prepared by MSc Luong Manh Ba Thiết kế vùng chứa • Các thành phần để thiết kế vùng chứa sau: Jframe, Jpanel, Japplet Với: - Jframe: tạo khung sở chứa thành phần Jpanel thành phần giao diện - Japplet: tạo tiểu trình chứa Jframe - Jpanel: thành phần trực tiếp dùng để biểu diễn nút, nhãn, văn bản, , đặt bám vào Jframe/Japplet Jpanel đặt lồng - Ngoài thành phần dùng để thiết kế, Swing cịn thừa kế trình quản lý thành phần giao diện (layout manager) nhằm đạt hiệu cao như: FlowLayout, GridLayout, GridBagLayout, BorderLayout, HUT, Falt of IT © Dept of SE, 2002 HCI - One 42 Prepared by MSc Luong Manh Ba Sơ đồ phân cấp Jframe HUT, Falt of IT © Dept of SE, 2002 HCI - One 43 Prepared by MSc Luong Manh Ba Lớp JrootPane (javax.swing.JrootPane) HUT, Falt of IT © Dept of SE, 2002 HCI - One 44 Prepared by MSc Luong Manh Ba Lớp quản lý bố cục HUT, Falt of IT © Dept of SE, 2002 HCI - One 45 Prepared by MSc Luong Manh Ba Một vài thí dụ dùng Swing để xây dựng giao tiếp UI H×nh 1: Cửa sổ soạn thảo HUT, Falt of IT â Dept of SE, 2002 HCI - One 46 Prepared by MSc Luong Manh Ba Thí dụ dùng Swing để xây dựng giao tiếp UI (tiếp) Hỡnh 2: Sử dụng jFileChooser HUT, Falt of IT © Dept of SE, 2002 HCI - One 47 Prepared by MSc Luong Manh Ba Thí dụ dùng Swing để xây dựng giao tiếp UI (tiếp) Hình 3: Sử dụng JColorChooser HUT, Falt of IT © Dept of SE, 2002 HCI - One 48 Prepared by MSc Luong Manh Ba Môi trường Swing thiết kế UI Thiết kế phím lệnh với Jbutton JToolBar HUT, Falt of IT © Dept of SE, 2002 HCI - One 49 Prepared by MSc Luong Manh Ba Một vài đoạn mã lệnh cho kiện void fileOpen() { if (!okToAbandon()) {return;} if (JFileChooser.APPROVE_OPTION == jFileChooser1.showOpenDialog(this)) { openFile(jFileChooser1.getSelectedFile().get Path()); } this.repaint(); } Đoạn mã lệnh cho kiện chọn Open Menu hay nhấn biểu tượng Open ToolBar HUT, Falt of IT © Dept of SE, 2002 HCI - One 50 Prepared by MSc Luong Manh Ba Mã lệnh cho thủ tục mở File void openFile(String fileName) { try {File file = new File(fileName); int size = (int)file.length(); int chars_read = 0; FileReader in = new FileReader(file); char[] data = new char[size]; while(in.ready()) { chars_read += in.read(data, chars_read, size - chars_read);} in.close(); jTextArea1.setText(new String(data, 0, chars_read)); this.currFileName = fileName; this.dirty = false; statusBar.setText("Opened"+fileName); updateCaption();} catch (IOException e) { statusBar.setText("Error opening "+fileName);}} HUT, Falt of IT © Dept of SE, 2002 HCI - One 51 ... SE, 200 2 HCI - One Prepared by MSc Luong Manh Ba Chương 0: Tổng quan HCI 0. 1 Thuật ngữ khái niệm 0. 2 Người dùng 0. 3 Môi trường 0. 4 Lĩnh vực liên quan 0. 5 Chất lượng 0. 6 Phương tiện công cụ 0. 7... Con người giao tiếp xử lý Chương II: Nhân tố Máy tính tương tác người máy Chương III: Các dạng đối thoại tương tác người máy (Dialogue styles for HCI) HUT, Falt of IT © Dept of SE, 200 2 HCI - One... Dept of SE, 200 2 HCI - One Prepared by MSc Luong Manh Ba Cấu trúc môn học (tiếp) • Nội dung mơn học: phần 10 chương I- Phần I Phần sở (foundation) gồm chương: Chương 0: Tổng quan HCI Chương I: Tâm