giao dien nguoi may 2019_07_11

1 MỤC LỤC PHẦN I: GIỚI THIỆU CHUNG VỀ TƯƠNG TÁC NGƯỜI - MÁY .6 CHƯƠNG I: GIỚI THIỆU VỀ TƯƠNG TÁC NGƯỜI - MÁY .6 1.1 Nhu cầu thiết kế thay đổi công nghệ 1.2 Thách thức HCI 1.3 Đích HCI 1.4 Mục đích HCI 1.5 Các thành phần HCI .7 CHƯƠNG II: CON NGƯỜI .8 2.1 Giới thiệu 2.2 Các kênh vào - 10 2.2.1 Thị giác .11 2.2.2 Thính giác 20 2.2.3 Xúc giác .22 2.2.4 Sự chuyển động 23 2.3 Bộ nhớ 24 2.3.1 Bộ nhớ ngắn hạn 24 2.3.2 Bộ nhớ dài hạn 27 CHƯƠNG III: MÁY TÍNH .29 3.1 Các thiết bị nhập 29 3.1.1 Các thiết bị nhập chuẩn 29 3.1.2 Các phương pháp nhập tự chọn 29 3.2 Các thiết bị xuất 31 3.3 Bộ nhớ 31 3.3.1 Bộ nhớ ngắn hạn 31 3.3.2 Bộ nhớ dài hạn 32 CHƯƠNG IV: TƯƠNG TÁC 37 4.1 Các mơ hình tương tác 37 4.1.1 Chu trình thực - đánh giá 37 4.1.2 Khung tương tác 39 4.2 Các khung HCI 40 4.3 Tương quan người – môi trường 41 4.3.1 Sắp xếp điều khiển hiển thị 41 4.3.2 Môi trường vật lý tương tác 42 4.3.3 Các vấn đề sức khoẻ 43 4.3.4 Sử dụng màu sắc 44 4.4 Một số phong cách giao diện .45 4.4.1 Giao diện lệnh 45 4.4.2 Menu 46 4.4.3 Ngôn ngữ tự nhiên 46 4.4.4 Đối thoại truy vấn đối thoại kiểu hỏi /trả lời 47 4.4.5 Form – fill bảng tính 47 4.4.6 WIMP 48 4.4.7 Point click 48 PHẦN II: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 49 CHƯƠNG V: GIỚI THIỆU CHUNG VỀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 49 5.1 Khái niệm giao diện người dùng 49 5.2 Tại cần thiết kế giao diện 50 5.3 Các quy tắc thiết kế giao diện người dùng 51 5.3.1 Hướng dẫn tương tác chung .51 5.3.2 Hướng dẫn việc hiển thị thông tin 52 5.3.3 Hướng dẫn việc vào liệu 53 CHƯƠNG VI: CÁC HOẠT ĐỘNG PHÁT TRIỂN PHẦN MỀM 56 6.1 Công nghệ phần mềm 56 6.2 Vòng đời cổ điển 57 6.3 Làm mẫu 59 CHƯƠNG VII: THIẾT KẾ GIAO DIỆN .61 7.1 Các mơ hình người dùng thiết kế giao diện .61 7.1.1 Các mơ hình kĩ thuật-xã hội 61 7.1.2 Phương pháp luận hệ thống phần mềm 65 7.1.3 Thiết kế hợp tác 67 7.1.4 Các mơ hình nhận thức .69 7.1.5 Mô hình phân cấp mục đích nhiệm vụ 70 7.1.5.2 CCT 75 7.2 Quy trình thiết kế hướng người dùng .79 7.2.1 Pha phân tích 80 7.2.2 Pha thiết kế 82 7.2.3 Pha đánh giá .82 7.2.4 Những ưu điểm quy trình phát triển hướng người dùng .83 7.3 Quy trình thiết kế hướng nhiệm vụ 83 7.3.1 Xác định mục đích sử dụng hệ thống người sử dụng 85 7.3.2 Lựa chọn nhiệm vụ .86 7.3.3 Sao chép .87 7.3.4 Phân tích nhiệm vụ .88 7.3.5 Mơ hình hố nhiệm vụ 91 7.4 Thiết kế giao diện Website 94 7.4.1 Thiết kế dạng menu .95 7.4.2 Thiết kế giao diện trang thông tin 101 7.4.3 Thiết kế giao diện form, thông báo 102 7.4.4 Thiết kế phối hợp biểu tượng, màu sắc, hình ảnh 103 CHƯƠNG 8: PHÁT TRIỂN MẪU THIẾT KẾ VÀ ỨNG DỤNG .107 8.1 Các mẫu thiết kế hướng đối tượng 107 8.1.1 Khái niệm Mẫu thiết kế .107 8.1.2 Mẫu thiết kế hướng đối tượng GoF (Gang of Four) 108 8.1.3 Mẫu thiết kế cho ứng dụng web .109 8.1.4 Thư viện lớp cho ứng dụng web dựa mẫu thiết kế 113 8.2 Mẫu thiết kế Ajax 114 8.2.1 Các trang Web có sử dụng AJAX .118 8.2.2 Một số mẫu thiết kế sử dụng Ajax 119 TÀI LIỆU THAM KHẢO .124 PHẦN I: GIỚI THIỆU CHUNG VỀ TƯƠNG TÁC NGƯỜI - MÁY CHƯƠNG I: GIỚI THIỆU VỀ TƯƠNG TÁC NGƯỜI - MÁY 1.1 Nhu cầu thiết kế thay đổi công nghệ Để bán nhiều, máy tính cần thiết kế tốt nữa, tiến đến máy tính tiện dùng có tri thức Các nhà tâm lý, xã hội học trí tính phức tạp hệ thống tính tốn hầu hết giao diện người dùng với máy tính nghèo nàn D.Norman cho hai nguyên tắc đảm bảo giao diện tốt là: - Tính hiển hiện: người dùng cần thể đối tượng thể rõ ràng - Tính tác động: tính tự đề xuất chức có 1.2 Thách thức HCI Trong chục năm qua, với kiến thức hạn chế người ta cảm thấy có nhiều yêu cầu thiết kế giao diện hiệu Thiết kế HCI thách thức công nghệ phát triển nhanh, tốc độ phát minh, môi trường mạng, mạng tích hợp số ISDN Hai thách thức quan trọng là: - Cách tồn chung với thay đổi công nghệ - Cách đảm bảo thiết kế cho HCI tốt cho công nghệ Thơng qua q trình tương tác với máy điện thoại, thao tác nối đường, chuyển thông tin, ngắt đường truyền… người ta thấy cần thiết giao diện tương tác đời sống 1.3 Đích HCI Đích việc nghiên cứu HCI cho hệ thống dùng an tồn Đích tóm tắt phát triển hay cải thiện tính an tồn, tiện dụng hiệu hệ thống có máy tính, hệ thống có nghĩa gồm mơi trường lí thuyết hệ thống Tính tiện ích nhằm vào chức hệ thống, điều làm Việc cải thiện tính hiệu yếu tố tự thân Để có giao diện sử dụng tốt, đặc tả HCI cần: - Hiểu hết nhân tố, tâm lí, thực tiễn, tổ chức nhân tố xã hội Điều cho phép xác định cách thao tác tạo điều kiện cho cơng nghệ có hiệu - Phát triển cơng cụ kĩ thuật để người thiết kế đảm bảo hệ thống máy tính phù hợp với hoạt động người dung máy - Đạt tương tác an toàn, hiệu thuật ngữ tương tác người – máy tương tác nhóm 1.4 Mục đích HCI - Mô tả HCI: thông qua cách mô tả ta biết phần nội dung bên - HCI quan trọng việc phát triển công nghệ - HCI liên quan đến hiệu suất, an toàn người sử dụng 1.5 Các thành phần HCI - HCI thuộc đa lĩnh vực - Các lĩnh vực hỗ trợ: công nghệ, triết học, ngôn ngữ học… - Mơ hình khái niệm HCI - Thiết kế HCI 1.6 Các chuẩn HCI - Tổ chức tiêu chuẩn quốc tế ISO kết hợp với tổ chức quốc gia BSI(Anh), ANSI(Mỹ), DIN(Đức) cho đời tiêu chuẩn áp dụng cho thiết kế tương tác người máy với số hiệu tiêu chuẩn ISO9241 - Viện tiêu chuẩn vương quốc Anh cấp chứng “Nhãn diều hâu” sản phẩm có tương tác người máy tốt Đối với sản phẩm cấp chứng có ưu cạnh tranh thị trường Mặt khác, pháp lí, theo luật Anh Châu Âu người thiết kế giao diện tồi bị kiện tòa Và tương lai luật trở thành luật ISO thiết kế tương tác người máy - Chuẩn SI6HCI1992 Mỹ Mỹ đề xuất CHƯƠNG II: CON NGƯỜI 2.1 Giới thiệu Trong chương giới thiệu qua số vấn đề tương tác người máy Chúng ta bắt đầu với người, nhân vật trung tâm nghiên cứu hệ thống tương tác Con người, hay gọi người sử dụng, tất cả, đối tượng mà hệ thống máy tính thiết kế để trợ giúp cho họ Do đó, hợp lý đặt yêu cầu người sử dụng lên thứ tự ưu tiên hàng đầu Trong chương này, xem xét qua lĩnh vực tâm lý học người theo quan điểm tâm lý học nhận thức Điều dường khơng liên quan đến thiết kế xây dựng hệ thống máy tính tương tác, thực không Để thiết kế cho đó, cần biết khả hạn chế người đó, biết gây khó khăn cho người sử dụng làm cho người sử dụng khơng có khả sử dụng sản phẩm Việc biết khả giới hạn người giúp biết dễ dàng cho người sử dụng, để trình thiết kế tập trung vào đặc điểm Chúng ta xem xét qua khía cạnh tâm lý học nhận thức liên quan đến việc sử dụng hệ thống máy tính: Cách người tiếp nhận thơng tin xung quanh họ, cách người lưu trữ thông tin, xử lý thông tin giải vấn đề cách họ xử lý đối tượng theo cách tự nhiên Trong giáo trình này, tập trung nghiên cứu khía cạnh liên quan đến tương tác người máy Cụ thể xem xét người sử dụng cách tập trung vào lĩnh vực mà quan tâm nhất, cách đưa mơ hình đơn giản xử lý người Có nhiều mơ hình đưa ra, nhiên xem xét đến mơ hình có ảnh hưởng lớn Năm 1983, Card, Moran Newell đưa mơ hình xử lý người, cách nhìn đơn giản hoá xử lý người trình tương tác với máy tính (hình vẽ 1.1) Mơ hình bao gồm hệ thống con: hệ thống tiếp nhận dùng để xử lý kích thích giác quan từ bên ngoài, hệ thống vận động dùng để điều khiển hành động, hệ thống nhận thức đưa xử lý cần thiết để kết nối với hai hệ thống Mỗi hệ thống có nhớ xử lý riêng, trường hợp rõ ràng độ phức tạp hệ thống khác phụ thuộc vào độ phức tạp nhiệm vụ mà hệ thống thực Mơ hình bao gồm số nguyên tắc hoạt động để điều khiển hành vi hệ thống điều kiện định Bộ nhớ dài hạn Bộ nhớ làm việc Lưu trữ hình ảnh Lưu trữ âm Bộ xử lý tiếp nhận Bộ xử lý nhận thức Bộ xử lý vận động Hình 1.1: Mơ hình xử lý thơng tin người (Card, Moran Newell, 1983) Ở đây, xem người sử dụng hệ thống xử lý thơng tin để có tương đương nhiều mặt chức so với hệ thống máy tính thơng thường Thơng tin đầu vào lưu trữ xử lý, cho thông tin đầu Do đó, thảo luận đến thành phần hệ thống này: đầu vào-đầu ra, nhớ, trình xử lý Đối với người, hệ thống xử lý thơng tin thơng minh, trình xử lý bao gồm giải vấn đề, học, và, mắc lỗi Mơ hình rõ ràng đơn giản hố mơ hình thực tế, nhớ xử lý bắt buộc tất mức, mơ hình xử lý người Tuy nhiên, mơ hình cách tiếp cận hợp lý để hiểu cách thông tin xử lý hệ thống người Con người, khơng giống máy tính, chịu ảnh hưởng tác nhân từ bên môi trường xã hội tổ chức cần phải biết tác nhân ảnh hưởng Tuy nhiên, tại, bỏ qua nhân tố tập trung vào khả xử lý thông tin người Chúng ta quay trở lại xem xét đến ảnh hưởng xã hội tổ chức Chương Trong chương này, tìm hiểu kênh vào-ra người, giác quan quan phản ứng Những kênh liên quan đến số trình xử lý mức thấp Tiếp theo, tìm hiểu nhớ người cách hoạt động chúng Sau tìm hiểu cách người thực việc giải vấn đề phức tạp, cách họ học tích lũy kĩ năng, họ lại bị mắc lỗi Cuối cùng, tìm hiểu vài điều giúp ích trình thiết kế hệ thống máy tính 2.2 Các kênh vào - Tương tác người với giới bên xảy thông tin tiếp nhận gửi qua: đầu vào đầu Trong tương tác với máy tính, người sử dụng nhận thơng tin từ đầu máy tính, phản hồi lại cách gửi thơng tin đến đầu vào máy tính - đầu người sử dụng trở thành đầu vào máy tính ngược lại Kết là, việc sử dụng thuật ngữ đầu vào đầu gây nên nhầm lẫn mức độ bỏ qua khác biệt chúng tập trung vào thân kênh Sự bỏ qua thích hợp, tương tác kênh cụ thể đóng vai trò chủ yếu đầu vào đầu ra, sử dụng vai trò khác Ví dụ, thị giác sử dụng chủ yếu việc nhận thông tin từ máy tính, sử dụng để cung cấp thơng tin cho máy tính cách định vị điểm cụ thể hình Đầu vào người chủ yếu xuất thông qua giác quan đầu xuất thông qua điều khiển vận động quan phản ứng kích thích Có giác quan chính: thị giác, thính giác, xúc giác, vị giác khứu giác Trong số đó, giác quan giác quan quan trọng tương tác người máy Hiện tại, vị giác khứu giác khơng đóng vai trò quan trọng tương tác người máy, chúng khơng có vai trò hệ thống máy tính thơng thường, chúng có vai trò hệ thống chuyên dụng (ví dụ, mùi vị dùng để đưa cảnh báo hỏng hóc, hoạt động bất thường xẩy ra) Tuy nhiên, thị giác, thính giác xúc giác đóng vai trò trung tâm Tương tự vậy, có nhiều quan phản ứng kích thích, bao gồm chi, ngón tay, mắt, đầu hệ thống phát âm Khi tương tác với máy tính, ngón tay đóng vai trò chủ yếu, thơng qua việc đánh máy hay điều khiển chuột, đối thoại, mắt vị trí đầu sử dụng Tưởng tượng sử dụng máy tính cá nhân với chuột bàn phím Ứng dụng mà ta sử dụng có giao diện đồ hoạ, với thực đơn, biểu tượng cửa sổ Khi tương tác với hệ thống này, bạn nhận thông tin chủ yếu qua việc nhìn từ xuất hình Tuy nhiên, bạn nhận thơng tin tai: ví dụ, máy tính phát tiếng kêu bíp bạn mắc lỗi Xúc giác tham gia vào trình để bạn có cảm nhận bạn làm: phím có nhấn hay khơng chuột có di chuyển hay khơng Trong ví dụ này, thị giác thính giác khơng trực tiếp tham gia vào q trình gửi thơng tin, chúng sử dụng để nhận thông tin từ nguồn thứ ba (ví dụ, từ sách, hay lời nói người khác) sau lại chuyển thơng tin đến máy tính Trong phần này, tìm hiểu qua thành phần tương tác Trước tiên, xem xét vai trò hạn chế giác quan sau xem xét đến điều khiển vận động tay 2.2.1 Thị giác Thị lực người hoạt động phức tạp với tầm nhìn hạn chế, nhiên, người bình thường nguồn tiếp nhận thơng tin chủ yếu Chúng ta phân chia cách tương đối trình tiếp nhận thị giác thành giai đoạn: tiếp nhận tự nhiên kích thích từ mơi trường bên ngồi, xử lý phân tích kích thích Mặt khác, đặc điểm vật lý mắt hệ thống thị giác có số điểm khơng thể nhận biết người Bên cạnh đó, khả diễn dịch xử lý thị giác cho phép hình ảnh xây dựng từ thơng tin không đầy đủ Chúng ta cần hiểu giai đoạn chúng ảnh hưởng đến khả tiếp nhận thị giác người bình thường, điều ảnh hưởng trực tiếp đến cách thiết kế hệ thống máy tính Chúng ta bắt đầu cách xem mắt tiếp nhận kích thích vật lý, sau xem xét trình xử lý thị giác 2.2.1.1 Mắt người Thị giác bắt đầu với ánh sáng Mắt cấu cho phép tiếp nhận ánh sáng biến đổi thành lượng điện Ánh sáng phản chiếu từ đối tượng giới ảnh đối tượng ghi lại ảnh ảo nằm phía mắt Các tiếp nhận kích thích mắt biến đổi thành tín hiệu điện chuyển tới não Mống mắt Dịch nước Giác mạc Con Võng mạc Thuỷ Dịch thuỷ tinh thể tinh thể Dây chằng Hố mắt Điểm mù Hình 1.2: Mắt người Mắt có nhiều thành phần quan trọng (xem hình 1.2) xem xét chúng cách chi tiết Giác mạc thủy tinh thể phía trước mắt hội tụ ánh sáng thành hình ảnh sắc nét nằm phía mắt, võng mạc Võng mạc nhạy sáng chứa hai loại tế bào tiếp nhận ánh sáng: tế bào hình que tế bào hình nón Tế bào hình que tế bào nhạy sáng cho phép nhìn điều kiện thiếu ánh sáng Tuy nhiên, chúng khơng có khả phân giải chi tiết nhỏ bị lệ thuộc vào độ bão hoà ánh sáng Điều giải thích lí lại rơi vào tình trạng mù tạm thời từ phòng tối ánh sáng: tế bào hình que kích hoạt bị bão hoà ánh sáng đột ngột (Tiếp nhận đủ ánh sáng, tiếp nhận thêm) Các tế bào hình nón khơng hoạt động chúng bị chặn tế bào hình que Do tạm thời khơng thể nhìn Mỗi mắt có khoảng 120 triệu tế bào hình que chủ yếu nằm viền võng mạc Do tế bào hình que chi phối nhìn ngoại biên Các tế bào hình nón tiếp nhận kích thích thứ hai mắt Chúng không nhạy sáng tế bào hình que tiếp nhận nhiều ánh sáng Có loại tế bào hình nón, loại nhạy cảm với bước sóng ánh sáng khác Điều cho nhìn thấy màu Mắt có khoảng triệu tế bào hình nón, chủ yếu tập trung hốc mắt, vùng nhỏ võng mạc chứa hình ảnh Võng mạc chủ yếu nơi chứa tế bào tiếp nhận ánh sáng, ngồi võng mạc có điểm mù, nơi nối dây thần kinh thị giác với mắt Điểm mù khơng có tế bào hình nón tế bào hình que, nhiên hệ thống thị giác 10 nhiên, mẫu hỗ trợ đương nhiên ngơn ngữ lập trình script công nghệ Web tiên tiến 8.1.3 Mẫu thiết kế cho ứng dụng web Mẫu thiết kế tiêu biểu đóng vai cho quan trọng công nghệ phát triển ứng dụng Web mẫu MVC (Model-View-Controller) Mẫu có ý tưởng xuất phát từ mẫu Observer Gamma cộng Thực từ cuối năm 70, trước mẫu GoF công bố, ý tưởng triển khai thành công cho thư viện đồ họa ngơn ngữ lập trình Smalltalk Tuy nhiên, mẫu Observer đề xuất để giải việc trình bày liệu cho ứng dụng truyền thống máy đơn, mẫu MVC dùng để thiết lập kiến trúc ứng dụng Web Mơ hình tổng thể mẫu MVC trình bày hình 8.1 Chú ý mũi tên đứt nét có ý nghĩa “có thể truy xuất” “biết thông tin về”: View Controller truy xuất lẫn nhau, biết thông tin Model; nhiên Model truy xuất đến View Controller Theo mơ hình này, thành phần ứng dụng Web tổ chức tách biệt thành phần: Model (mơ hình bên trong), View (hiển thị bên ngồi), Controller (bộ điều khiển nhập xuất cập nhật phần hiển thị) Nhờ tách biệt ba khía cạnh mà mẫu MVC giải nhiều vấn đề nảy sinh phát triển ứng dụng Hình 8.1 Mơ hình tổng thể mẫu MVC - Mơ hình (Model): đối tượng biểu diễn thông tin nghiệp vụ bên ứng dụng xây dựng Đối tượng bao bọc thành phần liệu phương 108 thức liên quan đến ứng xử Khi phát triển lớp đối tượng này, người lập trình quan tâm cài đặt xử lý hay tiến trình tác nghiệp ứng dụng mà không cần quan tâm đến chúng hiển thị thiết bị xuất hay lấy vào từ thiết bị nhập - Hiển thị bên (View): thành phần liên quan đến giao diện người dùng Người sử dụng “thấy” đối tượng nghiệp vụ bên ứng dụng nhờ phần hiển thị (tức View) Đối tượng hiển thị dạng trang HTML, hộp chọn (listbox), hay danh sách chọn dạng (tree view)… - Bộ điều khiển (Controller): đảm nhiệm việc cập nhật phận hiển thị (View) cần thiết Bộ điều khiển nhận liệu nhập từ người dùng, truy xuất thông tin cần thiết từ mô hình (Model), cập nhật thích hợp phần hiển thị (View) Giao diện với người sử dụng phần mềm thiết lập nhờ tương tác qua lại giữ View Controller: hai phận phần trình bày bên ngồi đối tượng biểu diễn bên Người sử dụng biết đối tượng bên thơng qua phần bên ngồi View Controller Trong mơ hình MVC, tách biệt phần trình bày (View Controller) khỏi phần biểu diễn (Model) yếu tố quan trọng góp phần nâng cao chất lượng thiết kế phần mềm Yếu tố khắc phục vấn đề thảo luận phần trước: tách biệt mã nguồn liên quan đến nghiệp vụ ứng dụng mã nguồn giao diện người dùng, tạo chế để tránh mã hóa cứng trùng lặp mã nguồn, sửa đổi mô hình khơng ảnh hưởng dây chuyền đưa đến việc sửa đổi nhiều phần giao diện người dùng bên Ứng dụng phát triển mở rộng: với mơ hình có nhiều hình thức giao tiếp bên ngồi với người sử dụng (trình duyệt Web, giao tiếp dòng lệnh, hiển thị đồ họa…) Hầu hết công nghệ hỗ trợ phát triển ứng dụng Web đại sử dụng mơ hình MVC để định hướng cho người phát triển phần mềm Web thiết kế ứng dụng dễ mở rộng bảo trì sau Hình 8.2 trình bày thể mơ hình MVC cho cơng nghệ JSP (JavaServer Pages), mũi tên hình hướng thông điệp hay liệu Chu yêu cầu từ máy khách bao gồm bước sau 109 Hình 8.2: Thể mẫu MVC cơng nghệ JSP • Bước (Request): từ máy khách, người sử dụng thực thao tác phát sinh yêu cầu đến điều khiển (Controller servlet) máy chủ Web; • Bước (Create): điều khiển (Controller servlet) tạo hay nhiều đối tượng JavaBean; • Bước (Forward): điều khiển (Controller servlet) chuyển điều khiển đến hiển thị (View – JSP); • Bước (Extract): hiển thị (View – JSP) trích thơng tin từ đối tượng JavaBean; • Bước (Response): hiển thị (View – JSP) gởi thông tin (trang HTML) máy khách để hiển thị trình duyệt Web Trong bước bước 5, đối tượng JavaBean giao tiếp với hệ thống lưu trữ liệu (hệ thống tập tin sở liệu máy chủ Web) để truy cập thông tin cần thiết Mẫu MVC thể nhiều cách khác tùy thuộc vào người thiết kế tùy thuộc vào yêu cầu thực tiễn Hình 8.3 mô tả mẫu Page controller Bộ điều khiển trang (Page controller) sử dụng giao thức HTTP (trực tiếp hay gián tiếp) để chọn đối tượng nghiệp vụ (Model) hiển thị thích hợp (View), hiển thị sử dụng thông tin từ đối tượng nghiệp vụ để tạo trang 110 HTML gởi máy khách Mẫu Page controller cài đặt cách dùng chương trình script (như CGI script hay servlet) trang server Hình 8.3 Mẫu Page controller Hình 8.4: Mẫu Front controller Trường hợp điều khiển cần phải xử trí nhiều yêu cầu đa dạng cho trang Web, mẫu Front controller thường sử dụng (hình 8.4) Mẫu cấu trúc gồm phần: thẻ Web (web handler) lệnh thay đổi vào lúc thực thi Thẻ Web đón nhận yêu cầu từ máy chủ Web, tùy theo yêu cầu mà định lệnh thực (nhờ tận dụng chế đa hình) Mẫu Front controller cài đặt lớp đối tượng thay dùng trang server Các mẫu nói trên, đặc biệt mẫu MVC, sử dụng thông dụng mức độ thiết lập kiến trúc ứng dụng Web Ngồi có mẫu giải vấn đề cụ thể hơn, xuất trình xây dựng ứng dụng Web Chẳng hạn mẫu Abstract form đề xuất mơ hình tổng qt cho bảng nhập liệu, sử dụng để tạo bảng nhập liệu cho nhiều ứng dụng khác Mẫu Remote Authenticator/Authorizer cung cấp chế kiểm tra quyền truy cập hệ thống hợp lệ 8.1.4 Thư viện lớp cho ứng dụng web dựa mẫu thiết kế Một số hệ thống thư viện lớp (được gọi class framework) phát triển dựa kiến trúc MVC nhằm hỗ trợ cho người phát triển ứng dụng Web Bảng 8.1 giới thiệu số framework tiêu biểu cho công nghệ phát triển Web Java Hầu hết hệ thống mã nguồn mở, tải để sử dụng Tác giả N Ford trình bày cách súc tích hệ thống hóa cách khai thác framework để xây dựng ứng dụng Web Bảng 8.1.Các framework cho ứng dụng web 111 8.2 Mẫu thiết kế Ajax AJAX (tiếng Anh: “Asynchronous JavaScript and XML” – nghĩa “JavaScript XML không đồng bộ”) nhóm cơng nghệ phát triển web sử dụng để tạo ứng dụng web động hay ứng dụng giàu tính Internet (rich Internet application) Từ Ajax ông Jesse James Garrett đưa dùng lần vào tháng nãm 2005 để kỹ thuật này, hỗ trợ cho Ajax có chương trình duyệt từ 10 nãm trước Ajax kỹ thuật phát triển web có tính tương tác cao cách kết hợp ngơn ngữ: * HTML (hoặc XHTML) với CSS việc hiển thị thơng tin * Mơ hình DOM (Document Object Model), thực thông qua JavaScript, nhằm hiển thị thông tin động tương tác với thông tin hiển thị * Đối tượng XMLHttpRequest để trao đổi liệu cách không đồng với máy chủ web (Mặc dù, việc trao đổi thực với nhiều định dạng HTML, văn thường, JSON chí EBML, XML ngơn ngữ thường sử dụng) * XML thường định dạng cho liệu truyền, định dạng dùng, bao gồm HTML định dạng trước, văn (plain text), JSON EBML Giống DHTML, LAMP hay SPA, Ajax tự công nghệ mà thuật ngữ mơ tả việc sử dụng kết hợp nhóm nhiều công nghệ với 112 Trong thực tế, công nghệ dẫn xuất kết hợp dựa Ajax AFLAX xuất Ưu điểm * Trong nhiều trường hợp, trang web chứa nhiều nội dung thông thường trang Nếu sử dụng phương pháp truyền thống, nội dụng phải nạp lại toàn với yêu cầu Tuy nhiên, sử dụng Ajax, ứng dụng web yêu cầu cho nội dung cần thiết phải cập nhật, giảm lượng lớn băng thơng thời gian nạp trang * Việc dùng yêu cầu không đồng (asynchronous request) cho phép giao diện người dùng ứng dụng hiển thị trình duyệt giúp người dùng trải nghiệm tương tác cao, với nhiều phần riêng lẻ * Việc sử dụng Ajax làm giảm kết nối đến server, mã kịch (script) style sheet phải yêu cầu lần Nhược điểm * Các trang web tạo động không ghi vào lưu lịch sử lướt web trình duyệt, nút “back” (quay lui) trình duyệt tác dụng quay lại trang thái trước trang sử dụng Ajax, thay vào quay lại trang web trước mà người dùng ghé thăm Để khắc phục dùng IFrame không hiển thị để gây thay đổi lịch sử trình duyệt thay đổi phần neo URL (bằng mã a #) chạy Ajax theo dõi thay đổi * Việc cập nhật trang web động gây khó khăn cho người dùng việc bookmark (đánh dấu địa u thích) trạng thái ứng dụng Cũng có khắc phục cho vấn đề này, số sử dụng mã xác định đoạn (fragment identifier) URL (phần URL sau dấu ‘#’) để lưu vết, cho phép người dùng đánh dấu quay lại trạng thái ứng dụng * Do hầu hết web crawler không thực thi mã JavaScript, ứng dụng web cung cấp phương thức thay để truy cập nội dung thông thường truy cập Ajax, phép máy tìm kiếm lập mục chúng 113 * Bất kỳ người dùng có trình duyệt khơng hỗ trợ Ajax hay JavaScript, đơn giản bị vô hiệu hóa JavaScript, đương nhiên khơng thể sử dụng Ajax Tương tự, thiết bị điện thoại di động, PDA, thiết bị đọc hình (screen reader) khơng hỗ trợ JavaScript hay đối tượng XMLHttp yêu cầu Ngoài ra, thiết bị đọc hình sử dụng Ajax khơng đọc xác nội dung động * Chế độ same origin policy (chế độ gốc đơn điệu) khơng cho phép sử dụng Ajax thơng qua tên miền, W3C có đồ án sơ thảo phép điều * Việc thiếu chuẩn Ajax đồng nghĩa với việc khơng có nhiều chọn lựa thực tiễn tốt để kiểm tra ứng dụng Ajax Các công cụ kiểm thử cho Ajax thương không hiểu mơ hình kiện, mơ hình liệu giao thức Ajax Một yếu tố giao diện người dùng tốt khả nhìn thấy trạng thái hệ thống Người dùng cần phải thơng báo diễn đằng sau thao tác họ cho dù có thực mong muốn họ hay không Các ứng dụng web ngày sử dụng AJAX cho phép người dùng cập nhật phần trang lúc mà tải lại toàn trang AJAX mang lại đáp ứng tương đối khả tương tác với người dùng ứng dụng cho máy tính để bàn 114 Hình 8.5: So sánh ứng dụng web truyền thống web ứng dụng Ajax Trong ứng dụng Web truyền thống, người dùng có cần thay đổi liệu trang Web, yêu cầu thay đổi gửi server dạng HTTP request (hay gọi postback), server xử lý yêu cầu gửi trả lại trang HTML khác thay trang cũ Qui trình mơ tả nhấp-chờ tải lại (click-wait-andrefresh): ví dụ người dùng sau nhấn nút “Submit” trang Web phải chờ server xử lý xong tiếp tục cơng việc Ngược lại, ứng dụng AJAX, người dùng nhấn chuột, gõ phím liên tục mà khơng cần chờ đợi Nội dung tương ứng với hành động người dùng gần hiển thị vào vị trí cần thiết (đáp ứng gần tức thời) trang Web không cần phải refresh lại toàn nội dụng 115 8.2.1 Các trang Web có sử dụng AJAX Hình 8.6: Bản đồ Google map online Sự hồi sinh Ajax vài tháng gần phần nhờ ứng dụng cải tiến Google trình xây dựng đồ online Trước đây, sơ đồ thường tĩnh: người xem bấm vào mũi tên trái, đợi vài giây để trang web tải nội dung dịch chuyển hình ảnh sang trái Quá trình lặp lặp lại cách chậm chạp gây khó chịu cho nhiều người Với Google Maps, người dùng kéo đồ theo hướng nào, xem khu vực nhanh chóng, phóng to, thu nhỏ dễ dàng kéo trượt Ajax Một ví dụ khác dịch vụ web mail Khách hàng, sau xem nội dung, bấm vào phím giao diện muốn xóa thông tin Máy chủ mail từ xa nhận lệnh phản hồi lại với trang bỏ phần bị xóa Yahoo thử nghiệm giao diện sử dụng công nghệ Ajax Khi ta xóa mục đó, Ajax cấu hình lại trang tức mà khơng cần đợi phản hồi Hơn nữa, mở thơng điệp để đọc, trình duyệt hiển thị nội dung, người sử 116 dụng biết tiêu đề thư không cần phải lãng phí thời gian nhân đơi liệu tải xuống Hãng dịch vụ trực tuyến lớn giới xây dựng cơng cụ Ajax nhanh chóng cập nhật thơng tin khách hàng lựa chọn sân bay, chuyến bay, thời gian Hãng AOL, quan chủ quản CNN.com, bắt đầu sử dụng Ajax từ mùa hè qua, cho phép khách hàng xếp lại, chọn hiển thị chuyển đổi album ảnh với vài thao tác nhấn chuột Tuần trước, công ty MarketWatch (Mỹ) định cung cấp tin bao gồm trích dẫn chứng khốn cập nhật liên tục giây, với màu xanh đỏ nhấp nháy giá dao động Microsoft ứng dụng Ajax cập nhật Hotmail xây dựng chương trình hỗ trợ phát triển Ajax Cơng nghệ thay XAML cho phép nhiều ứng dụng phong phú hoạt động trình duyệt Nhưng khơng Ajax, chạy máy tính Windows Tuy vậy, Ajax chưa thể thực tất thứ Những ứng dụng phụ thuộc nhiều vào máy tính cố định Photoshop Adobe không xuất sớm trình duyệt Ngay Google phải tạo phần mềm đồ desktop (Google Earth) yêu cầu tải chương trình để hiển thị hình ảnh 3D thực số tính cải tiến khác Hơn nữa, ứng dụng web đòi hỏi phải liên tục kết nối với Internet, khiến công việc trở nên khó khăn bị gián đoạn 8.2.2 Một số mẫu thiết kế sử dụng Ajax Giao diện form đăng ký sử dụng Ajax để kiểm tra thơng tin username email xem có bị trùng database hay không Ngay sau nhập xong 117 username hay email, hệ thống phản hồi cho biết tài khoản tồn hay chưa, mà không cần nhấn nút Submit truyền thống Hình 8.7: Form liên hệ Google map Một Form liên hệ AJAX cửa sổ đồ Google hỗ trợ đánh dấu thơng tin Nó hoạt động với nhiều địa điểm Một địa email khác cho tất vị trí cấu hình Nếu bạn vào vị trí đồ, cửa sổ thông tin với biểu mẫu liên lạc mở đồ tải 118 Hình 8.8: W2 Ajax Contact Form for WordPress W2 Ajax Contact Form for WordPress giải pháp hoàn chỉnh để tạo biểu mẫu liên lạc AJAX WordPress Được thiết kế để tạo plugin linh hoạt, sản phẩm cung cấp tính đầy đủ kinh điển, tùy chỉnh thơng qua giao diện settings plugin 119 Hình 8.9: Ajax Filters Ajax Filters cho phép khách hàng tìm kiếm sản phẩm theo thơng tin chi tiết: màu sắc, kích thước, loại sản phẩm…tạo điều kiện dễ dàng việc tiếp xúc mua sắm trực tuyến Hình 8.10: Giao diện giỏ hàng sử dụng Ajax 120 Woocommerce có chế độ người dùng nhấn nút thêm sản phẩm vào giỏ hàng: load trang sử dụng công nghệ Ajax Mặc định woocommerce kích hoạt lựa chọn Ajax cho nút add to cart bên hình ảnh đại diện cho sản phẩm 121 TÀI LIỆU THAM KHẢO [1] Lương Mạnh Bá, Tương tác người máy, Nhà xuất Khoa học kỹ thuật, 2008 [2] Đặng Văn Đức, Bài giảng tương tác người máy, NXB Khoa học kỹ thuật, 2009 [3] Đỗ Trung Tuấn, Giao diện người máy, NXB Giáo dục, 2007 [4] Nguyễn Văn Lân (Chủ biên), Phương Lan (Hiệu đính), Kỹ Thuật Xây Dựng Ứng Dụng ASP.NET - Tập 2, NXB Lao động - Xã hội, 2008 [5] Nguyễn Văn Lân (Chủ biên), Phương Lan (Hiệu đính), Kỹ Thuật Xây Dựng Ứng Dụng ASP.NET - Tập 3, NXB Lao động - Xã hội, 2008 122 ... THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 49 CHƯƠNG V: GIỚI THIỆU CHUNG VỀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG 49 5.1 Khái niệm giao diện người dùng 49 5.2 Tại cần thiết kế giao diện... vụ 91 7.4 Thiết kế giao diện Website 94 7.4.1 Thiết kế dạng menu .95 7.4.2 Thiết kế giao diện trang thông tin 101 7.4.3 Thiết kế giao diện form, thông báo ... trở trước giao tiếp máy thiết bị ngoại vi thông qua bảng mạch giao tiếp - thường gọi card IO (input - output), tức chuột, ổ cứng, ổ mềm, máy in, joystick, nối vào Ðể hoạt động, ổ cứng giao tiếp