CHƯƠNG 0 TỔNG QUAN về HCI

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 Prepared by MSc Luong Manh Ba Định nghĩa (tiếp) • Không có định nghĩa xác Tuy nhiên dùng hai định nghĩa: • Định nghĩa Tập trình, đối thoại hành động, qua ND người sử dụng tương tác với MT (Backer & Buxton, 1987) • Định nghĩa Là lĩnh vực liên quan đến thiết kế, đánh giá cài đặt Hệ thống MT tương tác cho người sử dụng nghiên cứu tượng xảy (ACMSIGCHI 1992) HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Định nghĩa vai trò HCI (tiếp) Vai trò HCI: Tạo Hệ Thống an toàn sử dụng (Usability) Hệ Thống chức Usability: Là khái niệm trong HCI hiểu làm cho HT dễ học dễ dùng HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba 0.2 Người dùng • Trước đây: - Là kỹ thuật viên, chuyên gia • Hiện nay: Đa dạng - Người dùng đầu cuối (có kiến thức tin học) - Các kỹ thuật viên, chuyên gia - Yêu cầu đòi hỏi cao HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba 0.3 Môi trường làm việc • Trước đây: - Máy tính lớn, không nối mạng - Người sử dụng máy tính người thao tác, điều khiển máy tính - Môi trường: văn dạng text • Ngày : - Máy tính cá nhân, mạng, internet - Môi trường: đa dạng, văn bản, đồ hoạ, trực quan HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba 0.4 Lĩnh vực liên quan • Trước : Phương pháp tính • Ngày nay: - Phương pháp tính, tính toán ký hiệu, Soạn thảo Văn bản, xử lý đồ hoạ, hình ảnh, âm thanh, đa phương tiện - §an quyện liệu, lệnh kết ⇒ Đối thoại (Dialogue), HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba 0.4 Lĩnh vực liên quan (tiếp) thành phần chính: Môi trường, Con người, Máy tính Quá trình phát triển (ACM SIGCHI 1992) HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Môi trường (Use and Context) • Sử dụng mà máy tính cung cấp gọi “ứng dụng” Tổ chức xã hội, công việc, kinh doanh tương tác với ứng dụng • Lĩnh vực ứng dụng (Application Area): phân loại ứng dụng ứng dụng đặc biệt - cá nhân, nhóm - giao tiếp hướng văn - giao tiếp hướng truyền thông - Môi trường thiết kế, lập trình, CAD/CAM - Trợ giúp trực tuyến, điều khiển HT liên tục • Sự thích nghi Người-Máy HUT, Falt of IT  Dept of SE, 2002 HCI - One Prepared by MSc Luong Manh Ba Con người • Mục đích: Hiểu người Bộ xử lý thông tin  Cảm nhận  Lưu trữ (các loại nhớ)  Xử lý • Ngôn ngữ, giao tiếp tương tác  Các sắc thái ngôn ngữ: cú pháp , ngứ nghĩa  Các mô hình hình thức ngôn ngữ • Công thái học  Bố trí điều khiển, quan hệ  Nhận thức người giới hạn,… 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 29 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 30 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 31 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 32 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 33 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 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 34 Prepared by MSc Luong Manh Ba Sơ đồ phân cấp Jframe HUT, Falt of IT  Dept of SE, 2002 HCI - One 35 Prepared by MSc Luong Manh Ba Lớp JrootPane (javax.swing.JrootPane) HUT, Falt of IT  Dept of SE, 2002 HCI - One 36 Prepared by MSc Luong Manh Ba Lớp quản lý bố cục HUT, Falt of IT  Dept of SE, 2002 HCI - One 37 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 chÝnh HUT, Falt of IT  Dept of SE, 2002 HCI - One 38 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 39 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 40 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 41 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 42 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 43 [...]... như: FlowLayout, GridLayout, GridBagLayout, BorderLayout, HUT, Falt of IT  Dept of SE, 200 2 HCI - One 34 Prepared by MSc Luong Manh Ba Sơ đồ phân cấp của Jframe HUT, Falt of IT  Dept of SE, 200 2 HCI - One 35 Prepared by MSc Luong Manh Ba Lớp JrootPane (javax.swing.JrootPane) HUT, Falt of IT  Dept of SE, 200 2 HCI - One 36 ... GUI trung tâm • Để giới thiệu về Swing ta có thể quy về các thành phần chính như sau : - JComponent là lớp trên của tất cả các thành phần Swing lightweight, bản thân nó thì được thừa kế từ lớp Container trong sơ đồ phân cấp đồ hoạ Java HUT, Falt of IT  Dept of SE, 200 2 HCI - One 18 Prepared by MSc Luong Manh Ba Sơ đồ phân cấp của Swing HUT, Falt of IT  Dept of SE, 200 2 HCI - One 19 Prepared by MSc... máy tính Kiến trúc đối thoại HUT, Falt of IT  Dept of SE, 200 2 HCI - One 11 Prepared by MSc Luong Manh Ba Qui trình phát triển • • • • • Bao gồm thiết kế và kỹ thuật Các tiếp cận thiết kế Kỹ thuật và công cụ cài đặt Kỹ thuật đánh giá Hệ thống mẫu và Case studies HUT, Falt of IT  Dept of SE, 200 2 HCI - One 12 Prepared by MSc Luong Manh Ba 0. 5 Chất lượng • Trước đây: Trạng thái ứng xử đúng với dữ liệu... thiện, sinh động, dễ dùng HUT, Falt of IT  Dept of SE, 200 2 HCI - One 13 Prepared by MSc Luong Manh Ba 0. 6 Phương tiện và công cụ • Hai thành phần cơ bản:  Con người và máy tính  Phương tiện: đối thoại => Muốn làm tương tác phải Hiểu đối tượng & Con người Y/c Hoạt động T/L Đối thoại HUT, Falt of IT  Dept of SE, 200 2 Trao đổi giữa các môđun HCI - One 14 Prepared by MSc Luong Manh Ba Phương tiện và... Dept of SE, 200 2 HCI - One 27 Prepared by MSc Luong Manh Ba Một số biến cố và phương thức xử lý (tiếp) vii)windowDeactivated(WindowEvent e) 4- ContainerEvent + Nguyên nhân: Bổ sung hoặc loại bỏ thành phần khỏi vật chứa + Giao diện lắng nghe: ContainerListener + Phương thức xử lý : i)componentAdded(ContainerEvent e) ii)componentRemoved(ContainerEvent e) HUT, Falt of IT  Dept of SE, 200 2 HCI - One 28... giao diện được sử dụng bởi các thành phần văn bản HUT, Falt of IT  Dept of SE, 200 2 HCI - One 23 Prepared by MSc Luong Manh Ba Thiết kế các thành phần giao diện với Swing • Chương trình đồ hoạ Java được điều khiển bởi biến cố Khi chương trình vận hành tức là tương tác với ND thì tất mọi biến cố chi phối việc thi hành chương trình Biến cố phát sinh từ các tác động bên ngoài của con người như: bấm... thiệu khoảng 10 tiết; nếu không thì chỉ cần nêu khoảng 1 tiết HUT, Falt of IT  Dept of SE, 200 2 HCI - One 15 Prepared by MSc Luong Manh Ba Thành phần Swing của JBuilder • Java là NNLT hướng đối tượng, ra đời 5 /1995 do nhóm chuyên gia đứng đầu là James Goshing thuộc công ty Sun Microsystems thiết kế Năm 1991 lấy tên là Oak, năm 1995 chính thức lấy tên Java, và được thiết kế lại để xây dựng chương trình... cho AWT HUT, Falt of IT  Dept of SE, 200 2 HCI - One 17 Prepared by MSc Luong Manh Ba Thành phần Swing (tiếp) • Swing chỉ thay thế UI như Button, Textfield, TextArea; Một số thành phần khác: Graphics, Color, Font, FontMetrics, LayoutManager vẫn nhờ AWT Nó thừa kế các lớp trong thư viện AWT • Các thành phần Swing có tên gọi kèm theo tiếp đầu ngữ J, gồm trên 2 50 lớp Swing là giải pháp toàn diện để thiết... nó được gọi từ EventListenerList HUT, Falt of IT  Dept of SE, 200 2 HCI - One 24 Prepared by MSc Luong Manh Ba Thiết kế các thành phần giao diện với Swing (tiếp) • Khi nhận được biến cố phát sinh do tác động lên các đối tượng nguồn thì đối tượng lắng nghe (listener) đã được đối tượng nguồn đăng ký trước sẽ nhận và xử lý biến cố dựa theo chương trình đã lập Giữa đối tượng nguồn và đối tượng lắng nghe... ứng dụng Internet Ngoài ứng dụng Web, Java còn có đủ đặc tính lập trình để thiết kế chương trình ứng dụng độc lập • Độc lập với hệ nền, do vậy có thể chạy trên bất cứ máy tính nào có hệ điều hành hỗ trợ Java Virtual Machine • Là ngôn ngữ có tính phân tán với khả năng nối mạng cài sẵn HUT, Falt of IT  Dept of SE, 200 2 HCI - One 16 Prepared by MSc Luong Manh Ba Thành phần Swing (tiếp) • Các bản Java ... of IT  Dept of SE, 200 2 HCI - One 40 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, 200 2 HCI - One 41 Prepared... internet - Môi trường: đa dạng, văn bản, đồ hoạ, trực quan HUT, Falt of IT  Dept of SE, 200 2 HCI - One Prepared by MSc Luong Manh Ba 0. 4 Lĩnh vực liên quan • Trước : Phương pháp tính • Ngày nay: - Phương... cấp đồ hoạ Java HUT, Falt of IT  Dept of SE, 200 2 HCI - One 18 Prepared by MSc Luong Manh Ba Sơ đồ phân cấp Swing HUT, Falt of IT  Dept of SE, 200 2 HCI - One 19 Prepared by MSc Luong Manh Ba Java