Đang tải... (xem toàn văn)
Bài báo cáo Tương tác người máy xây dựng hệ thống quản lý tin tức công nghệ gồm những nôi dung sau: Phân tích đặc điểm đối tượng người dùng, lĩnh vực hoạt động, bối cảnh xã hôi, văn hóa, tổ chức,... Phân tích đặc điểm môt trường hoạt động của chương trình (thiet bị phàn cứng HĐH,...) Các kiểu tương tác, một vài kịch bản, phân tích các tương tác đó theo mô hình (Norman hoặc khung tương tác) Thể hiện được quy trình thiết kế một chương trình hướng người dùng. Đưa ra các giao diện cho phần mềm
MỤC LỤC CHƯƠNG 1: MỞ ĐẦU .6 1.1 Đặt vấn đề .6 1.2 Mục tiêu nghiên cứu .6 1.3 Đối tượng phạm vi nghiên cứu .6 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu .6 1.3.2.1 Phạm vi kỹ thuật 1.3.2.2 Phạm vi người dùng 1.4 Phương pháp nghiên cứu .7 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Cơng cụ phân tích thiết kế hệ thống 2.2 Công cụ lưu trữ liệu 2.3 Công cụ xây dựng 2.3.1 PHP 2.3.2 MVC PHP 2.3.3 WampServer 2.3.4 Sublime Text 10 2.3.5 Bootstrap 10 2.3.6 jQuery 10 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG QUẢN LÝ TIN TỨC CÔNG NGHỆ 11 3.1 Hoạt động nghiệp vụ hệ thống cũ 11 3.2 Đặc tả yêu cầu 12 3.2.1 Đặc tả chức .12 3.2.1.1 Mô tả hoạt động nghiệp vụ hệ thống quản lý tin tức .12 3.2.1.2 Mục đích 12 3.2.1.3 Yêu cầu chức .12 3.2.1.4 Yêu cầu thiết kế .12 3.2.1.5 Đối tượng sử dụng 13 3.2.1.6 Đặc điểm tâm lý đối tượng 13 3.2.2 Đặc tả liệu .16 3.2.2.1 Mơ hình liệu mức quan niệm (CDM) 16 3.2.2.2 Mô hình liệu mức luận lý (LDM) .17 3.2.2.3 Mơ hình liệu mức vật lý (PDM) 17 3.2.3 Đặc điểm mơi trường hoạt động chương trình 18 CHƯƠNG 4: XÂY DỰNG HỆ THỐNG QUẢN LÝ TIN TỨC CÔNG NGHỆ 19 4.1 Sơ đồ phân rã chức .19 4.1.1 Sơ đồ phân cấp chức hệ thống 19 4.1.2 Sơ đồ phân cấp chức quản trị viên hệ thống 20 4.1.3 Sơ đồ phân cấp chức người đăng .20 4.1.4 Sơ đồ phân cấp chức người dùng bình thường (bạn đọc) 20 4.2 Mơ hình khung tương tác 21 4.2.1 Người dùng bình thường (bạn đọc) 21 4.2.2 Quản trị viên hệ thống 21 4.2.3 Người đăng 22 4.3 Quy trình thiết kế giao diện theo phương pháp hướng người dùng 23 4.4.1 Phân tích nhiệm vụ theo GOMS 23 4.3.2 Giao diện hệ thống 26 4.3.2.1 Giao diện đăng nhập 26 4.3.2.2 Giao diện người dùng bình thường (bạn đọc) 27 4.3.2.3 Giao diện quản trị viên hệ thống .28 4.3.2.4 Giao diện người đăng 28 4.3.2.5 Giao diện hệ thống cụ thể 29 a Trang quản lý viết 29 b Trang chỉnh sửa thông tin cá nhân 29 c Trang quản lý thẻ (tags) 30 d Trang quản lý quảng cáo 30 e Trang quản lý chuyên mục 30 f Trang quản lý nhân viên .31 g Trang quản lý thông tin website 31 4.3.3 Đánh giá tương tác hệ thống 31 4.3.3.1 Thiết kế trực quan .31 a Sự di chuyển mắt người dùng 31 b Cấu trúc phân cấp trực quan 32 c Sắp xếp văn hợp lý 32 d Tính dễ xem 32 4.3.3.2 Cách sử dụng khơng gian hình 32 4.3.3.3 Thời gian tải trang 32 4.3.3.4 Tính dùng 33 a Tính học .33 b Tính dễ sử dụng .33 c Tính linh động .33 d Tính cảm xúc 33 CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 34 5.1 Kết luận .34 5.1.1 Kết đạt 34 5.1.2 Khuyết điểm 34 5.2 Hướng phát triển 34 TÀI LIỆU THAM KHẢO .35 DANH MỤC HÌNH ẢN Hình 3.1 Mơ hình liệu mức quan niệm (CDM) 16 Hình 3.2 Mơ hình liệu mức luận lý (LDM) 17 Hình 3.3 Mơ hình liệu mức vật lý (PDM) 17 Y Hình 4.1 Sơ đồ phân rã chức hệ thống 19 Hình 4.2 Sơ đồ phân cấp chức quản trị viên hệ thống 20 Hình 4.3 Sơ đồ phân cấp chức người đăng 20 Hình 4.4 Sơ đồ phân cấp chức người dùng bình thường (bạn đọc) 20 Hình 4.5 Giao diện đăng nhập 26 Hình 4.6 Giao diện người dùng bình thường (bạn đọc) 27 Hình 4.7 Giao diện quản trị viên hệ thống 28 Hình 4.8 Giao diện người đăng .28 Hình 4.9 Trang quản lý viết 29 Hình 4.10 Trang chỉnh sửa thơng tin cá nhân 29 Hình 4.11 Trang quản lý thẻ (tags) 30 Hình 4.12 Trang quản lý quảng cáo 30 Hình 4.13 Trang quản lý chuyên mục .30 Hình 4.14 Trang quản lý nhân viên 31 Hình 4.15 Trang quản lý thông tin website .31 CHƯƠNG 1: MỞ ĐẦU 1.1 Đặt vấn đề Công nghệ thông tin ngành phát triển mạnh ngày ứng dụng rộng rãi nhiều lĩnh vực Cùng với xu hướng phát triển phương tiện truyền thông báo, radio… việc sử dụng internet ngày phổ biến Với bùng nổ thơng tin internet, vai trò trang thông tin điện tử trực tuyến trở nên quan trọng Khác với báo chí truyền thơng có giới hạn thời gian cập nhật tin tức, tờ báo trực tuyến cung cấp tiện lợi việc cập nhật phát hành thông tin Về phía người dùng, họ xem thơng tin lúc nơi Về phía người cung cấp thơng tin, nhà báo, họ dễ dàng cập nhật tin tức nhất, thời Một thể loại tin tức website mà nhiều người ý tin tức công nghệ Do đó, nhóm chúng em định chọn đề tài “ Xây dựng hệ thống quản lý tin tức công nghệ ” để phục vụ nhu cầu xem tin tức công nghệ người, website mang tên “Công Nghệ Việt” 1.2 Mục tiêu nghiên cứu Mục tiêu chung đề tài cung cấp thêm kênh thông tin nơi người dùng truy cập tra cứu xem thông tin liên quan đến tin tức công nghệ công nghệ, kiện, đánh giá, thủ thuật ứng dụng,…Mục tiêu cụ thể đề tài xây dựng hệ thống dạng website, hệ thống phải cho phép thực chức sau: - Quản lý người đăng viết - Quản lý viết - Quản lý menu - Tìm kiếm viết cơng nghệ, kiện, đánh giá,… - Cho phép truy cập đọc viết 1.3 Đối tượng phạm vi nghiên cứu 1.3.1 Đối tượng nghiên cứu Đối tượng nghiên cứu bao gồm người dùng bình thường có nhu cầu xem tin tức công nghệ (bạn đọc) quản trị viên website ( bao gồm người đăng quản trị viên hệ thống) 1.3.2 Phạm vi nghiên cứu 1.3.2.1 Phạm vi kỹ thuật Bất kỳ máy tính có kết nối internet lúc, nơi truy cập vào hệ thống với vai trò máy khách 1.3.2.2 Phạm vi người dùng Phạm vi người dùng phân chia theo phân quyền người sử dụng hệ thống: + Người quản trị hệ thống người sử dụng toàn chức hệ thống, tạo hay xóa người sử dụng khỏi hệ thống, quản lý viết, quản lý menu, … + Người đăng thêm, sửa, xóa viết + Người dùng truy cập tra cứu xem viết,… 1.4 Phương pháp nghiên cứu - Nghiên cứu qua việc đọc tài liệu, giáo trình liên quan nhằm xây dựng sở lý thuyết đề tài biện pháp cần thiết để giải vấn đề đề tài - Lấy ý kiến giáo viên để thiết kế chương trình phù hợp với yêu cầu thực tiễn, nội dung xử lý đáp ứng yêu cầu ngày cao người dùng - Triển khai hệ thống vào thực tế để kiểm tra tính khả dụng đề tài CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Cơng cụ phân tích thiết kế hệ thống Sybase Power Designer công cụ hỗ trợ đắc lực việc thiết kế mơ hình quan hệ, mơ hình CDM, PDM, ERD, ER,… phân tích thiết kế hệ thống thơng tin, với Sybase Power Designer tạo được: - Thiết kế Conceptual Data model (CDM) sơ đồ thực thể kết hợp - Phát sinh Physical Data Model (PDM) tương ứng DBMS chọn - Phát sinh kịch tạo CSDL DBMS đích - Phát sinh ràng buộc toàn vẹn tham chiếu (referential integrity triggers) chúng hổ trợ CSDL đích - Cho phép hiệu chỉnh in model - Phát sinh ngược lại Database application tồn - Định nghĩa thuộc tính mở rộng có đối tượng PDM 2.2 Cơng cụ lưu trữ liệu MySQL hệ quản trị sở liệu tự nguồn mở phổ biến giới nhà phát triển ưa chuộng trình phát triển ứng dụng Vì MySQL sở liệu tốc độ cao, ổn định dễ sử dụng, có tính khả chuyển, hoạt động nhiều hệ điều hành cung cấp hệ thống lớn hàm tiện ích mạnh Với tốc độ tính bảo mật cao, MySQL thích hợp cho ứng dụng có truy cập CSDL internet MySQL miễn phí hồn tồn bạn tải MySQL từ trang chủ Nó có nhiều phiên cho hệ điều hành khác nhau: phiên Win32 cho hệ điều hành dòng Windows, Linux,… MySQL ví dụ Hệ Quản trị Cơ sở liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL) MySQL sử dụng cho việc bổ trợ PHP, Perl, nhiều ngôn ngữ khác, làm nơi lưu trữ thơng tin trang web viết PHP hay Perl, 2.3 Công cụ xây dựng 2.3.1 PHP PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") ngơn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với ngôn ngữ khác nên PHP nhanh chóng trở thành ngơn ngữ lập trình web phổ biến giới 2.3.2 MVC PHP Mơ hình MVC (model, controller, view) mơ hình chuẩn cho ứng dụng web sử dụng nhiều ngày Mô hình MVC sử dụng lần Smalltalk, sau sử dụng phổ biến ngơn ngữ lập trình Java Hiện nay, có hàng chục PHP framework dựa mơ hình Mơ hình MVC viết tắt chữ Model, View, Controller Mô hình tách ứng dụng web làm thành phần đảm nhiệm chức tách biệt, thuận tiện cho việc xử lý bảo trì - Model: Chịu trách nhiệm quản lý liệu, lưu trữ truy xuất thực thể từ sở liệu mysql, sql server, postresSQL,… đồng thời chứa logic thực thi ứng dụng - View: Chịu trách nhiệm hiển thị liệu truy xuất từ model theo format theo ý đồ lập trình viên Cách sử dụng View tương tự module templates thường thấy ứng dụng web phổ biến WordPress, Joomla,… - Controller: trung gian, làm nhiệm vụ xử lý cho model view tương tác với Controller nhận request từ client, sau gọi model để thực hoạt động yêu cầu gửi View View chịu trách nhiệm format lại data từ controller gửi trình bày liệu theo định dạng đầu (html) 2.3.3 WampServer WampServer môi trường phát triển web hệ điều hành Windows Wamp viết tắt Window+Apache+MySQL+PHP phần mềm giả lập server giúp chạy website máy tính với đường dẫn http://localhost, phần mềm hồn tồn miễn phí Nó cho phép bạn tạo ứng dụng web với Apache, PHP MySQL Bên cạnh đó, PhpMyAdmin cho phép quản lý sở liệu dễ dàng WampServer có chương trình quản lý tiện lợi, cho phép chủ động bật tắt khởi động lại dịch vụ máy chủ lúc 2.3.4 Sublime Text Sublime Text trình soạn thảo văn thương mại dành cho Linux, MacOS X Microsoft Windows Với ưu điểm gọn nhẹ có mặt tảng phổ biến hổ trợ nhiều ngơn ngữ lập trình như: PHP, Javascript, Java, C, C+ + Giúp nhà phát triển dễ dàng sử dụng mà khơng cần phải làm quen phát triển sản phẩm nhiều tảng khác 2.3.5 Bootstrap Bootstrap framework phát triển Mark Otto Jacob Thornton Twitter với mục đích thiết kế website reponsive cách nhanh chóng dể dàng Bootstrap bao gồm HTML templates, CSS templates Javascript tạo có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Trong bootstrap có thêm plugin Javascript Giúp cho việc thiết kế reponsive bạn dễ dàng nhanh chóng 2.3.6 jQuery jQuery thư viện JavaScript đa trình duyệt thiết kế để đơn giản hóa lập trình phía máy người dùng HTML, phát hành vào tháng năm 2006 BarCamp NYC John Resig Được sử dụng 52% 10.000 truy cập nhiều trang web, jQuery thư viện JavaScript phổ biến sử dụng ngày jQuery cung cấp khả cho nhà phát triển để tạo plugins đầu trang thư viện JavaScript Điều cho phép nhà phát triển để tạo trừu tượng hóa mức độ thấp tương tác hình ảnh động, hiệu ứng tiên tiến vật dụng cao cấp, chủ đề Cách tiếp cận mơ-đun để thư viện jQuery cho phép tạo công cụ mạnh mẽ động web ứng dụng web 10 4.1.2 Sơ đồ phân cấp chức quản trị viên hệ thống Hình 4.2 Sơ đồ phân cấp chức quản trị viên hệ thống 4.1.3 Sơ đồ phân cấp chức người đăng Hình 4.3 Sơ đồ phân cấp chức người đăng 4.1.4 Sơ đồ phân cấp chức người dùng bình thường (bạn đọc) Hình 4.4 Sơ đồ phân cấp chức người dùng bình thường (bạn đọc) 20 4.2 Mơ hình khung tương tác 4.2.1 Người dùng bình thường (bạn đọc) Nhu cầu người dùng Đầu vào người dùng Đầu hệ thống Người dùng muốn xem tin Di chuyển chuột vào tin Hệ thống hiển thị nội dung tức công nghệ tức cần xem thông tin mà bạn đọc cần xem Người dùng muốn tìm Người dùng chọn Hệ thống hiển thị thông kiếm tin tức theo số tiêu tiêu chí nhập tin tìm thấy thơng chí tiêu đề, từ khóa,… vào để tìm kiếm báo khơng tìm thấy 4.2.2 Quản trị viên hệ thống Nhu cầu người dùng Đầu vào người dùng Đầu hệ thống Người dùng muốn đăng Nhập tên đăng nhập Thông báo đăng nhập nhập vào hệ thống mật vào phần đăng thành công không nhập thành công thơng tin đăng nhập khơng hợp lệ thơng báo sai thông tin nhập lại Người dùng muốn thay Click vào form sửa thông Nếu thông tin hợp lệ hiển đổi thông tin cá nhân tin cá nhân thị thông báo thay đổi thành công Ngược lại thông báo kiểm tra lại thông tin Người dùng muốn quản lý Click vào thông tin tương Hiển thị thông tin cá nhân nhân viên ứng với nhân viên để nhân viên xem thơng tin thao tác xóa, sửa Người dùng muốn quản lý Click vào link thêm, sửa, Hệ thống thêm, sửa, xóa viết xóa tùy theo yêu cầu vào CSDL theo yêu cầu, hiển thị tin tức trang Người dùng muốn quản lý Click vào link thêm, xóa Hệ thống hiển thị kết 21 danh mục sửa, mục tìm kiếm insert, update, tùy theo yêu cầu delete, tìm kiếm danh mục từ database; hiển thị bảng thông báo Người dùng muốn quản lý Click vào link thêm, xóa Hiển thị bảng thơng báo thẻ tags sửa, mục tìm kiếm theo yêu cầu tùy theo yêu cầu Người dùng muốn quản lý Click vào link thêm, xóa Hiển thị bảng thơng báo thơng tin website sửa, mục tìm kiếm theo yêu cầu tùy theo yêu cầu 4.2.3 Người đăng Nhu cầu người dùng Đầu vào người dùng Đầu hệ thống Người dùng muốn đăng Nhập tên đăng nhập Thông báo đăng nhập nhập vào hệ thống mật vào phần đăng thành công không nhập thành công thông tin đăng nhập không hợp lệ thơng báo sai thơng tin nhập lại Người dùng muốn thay Click vào form sửa thông Nếu thông tin hợp lệ hiển đổi thông tin cá nhân tin cá nhân thị thông báo thay đổi thành công Ngược lại thông báo kiểm tra lại thông tin Người dùng muốn quản lý Click vào link thêm, sửa, Hệ thống thêm, sửa, xóa viết xóa tùy theo yêu cầu vào CSDL theo yêu cầu, hiển thị tin tức trang Người dùng muốn quản lý Click vào link thêm, xóa Hiển thị bảng thơng báo thẻ tags sửa, mục tìm kiếm theo yêu cầu tùy theo yêu cầu 22 4.3 Quy trình thiết kế giao diện theo phương pháp hướng người dùng 4.4.1 Phân tích nhiệm vụ theo GOMS Quản trị viên hệ thống Goal: Quản lý nhân viên (người đăng bài) Mở máy tính Bật trình duyệt Vào website hệ thống Đợi hệ thống đáp ứng (hiển thị trang “Trang chủ”) Goal: Đăng nhập Chuyển trỏ đến “ Tên đăng nhập” mục đăng nhập Nhấp vào textbox “Tên đăng nhập” Nhập tên người dùng Gõ Enter để chuyển sang textbox “Mật khẩu” Gõ mật Nhấn chuột vào nút Đăng nhập gõ phím Enter Đợi hệ thống đáp ứng (hiển thị giao diện quản trị viên hệ thống) Goal: Quản lý nhân viên Di chuyển trỏ lên menu chọn “Quản lý nhân viên” Đợi hệ thống đáp ứng (hiện trang quản lý nhân viên) Goal: Thêm nhân viên Di chuyển trỏ vào nút “Thêm” trang quản lý nhân viên ấn chọn Đợi hệ thống đáp ứng (hiện trang thêm nhân viên với mục tên nhân viên, giới tính, ngày sinh,…cho phép người dùng nhập vào) Nhập thông tin vào mục tên nhân viên, giới tính, ngày sinh, Ấn nút "Thêm" để kết thúc công việc Đợi hệ thống đáp ứng (hiển thị trang "Quản lý nhân viên" với thông báo kết cuả việc thêm nhân viên) 23 Goal: Xóa nhân viên Xác định nhân viên cần xóa tài khoản Chọn tích vào vị trí nhân viên muốn xóa cột xóa Ấn nút xóa Đợi hệ thống đáp ứng thông báo kết Goal: Đăng xuất Di chuyển trỏ đến mục Thoát Nhấn chuột Người đăng Goal: Quản lý viết Mở máy tính Bật trình duyệt Vào website hệ thống Đợi hệ thống đáp ứng (hiển thị trang “Trang chủ”) Goal: Đăng nhập Chuyển trỏ đến “ Tên đăng nhập” mục đăng nhập Nhấp vào textbox “Tên đăng nhập” Nhập tên người dùng Gõ Enter để chuyển sang textbox “Mật khẩu” Gõ mật Nhấn chuột vào nút Đăng nhập gõ phím Enter Đợi hệ thống đáp ứng (hiển thị giao diện quản trị viên hệ thống) Goal: Quản lý viết Di chuyển trỏ lên menu chọn “Quản lý viết” Đợi hệ thống đáp ứng (hiện trang quản lý viết) Goal: Thêm viết Di chuyển trỏ vào nút “Thêm” trang quản lý viết ấn chọn Đợi hệ thống đáp ứng (hiện trang thêm viết với mục tên viết, tóm tắt, nội dung, từ khóa,…cho phép người dùng nhập vào) Nhập thông tin vào mục tên viết, tóm tắt, nội dung, từ khóa,… Ấn nút "Thêm" để kết thúc công việc Đợi hệ thống đáp ứng (hiển thị trang "Quản lý viết" với thông báo kết cuả việc thêm viết) Goal: Sửa viết Di chuyển trỏ vào mục "nhập thông tin kiếm viết" Nhập thông tin viết cần tìm, ấn tìm kiếm Đợi hệ thống đáp ứng (hiển thị kết tìm kiếm danh mục viết phù hợp với thông tin nhập vào) Chọn viết cần tìm danh mục Đợi hệ thống đáp ứng Di chuyển trỏ vào mục "sửa viết" ấn chọn Đợi hệ thống đáp ứng (hiện trang "sửa viết " với mục tên viết, tóm tắt, nội dung, từ khóa,…cho phép người dùng nhập vào) 24 Nhập thông tin cần sửa vào mục tên viết, tóm tắt, nội dung, từ khóa,…Người dùng ấn nút "Sửa" để kết thúc cơng việc Đợi hệ thống đáp ứng (hiển thị trang "quản lý viết" với thông báo kết cuả việc sửa thơng tin viết) Goal: Xóa viết Di chuyển trỏ vào mục "nhập thông tin kiếm viết" Nhập thơng tin viết cần tìm, ấn tìm kiếm Đợi hệ thống đáp ứng (hiển thị kết tìm kiếm danh mục viết phù hợp với thông tin nhập vào) Chọn viết cần tìm danh mục Đợi hệ thống đáp ứng Chọn tích vào vị trí viết muốn xóa cột xóa Ấn nút xóa Đợi hệ thống đáp ứng thông báo kết Goal: Đăng xuất Di chuyển trỏ đến mục Thoát Nhấn chuột 4.3.2 Giao diện hệ thống 4.3.2.1 Giao diện đăng nhập Hình 4.5 Giao diện đăng nhập - Khi người đăng đăng nhập vào hệ thống đăng nhập thành công chuyển sang giao diện dành riêng cho người đăng không thành công thông tin đăng nhập không hợp lệ thơng báo sai thơng tin nhập lại 25 - Khi quản trị viên hệ thống đăng nhập vào hệ thống đăng nhập thành công chuyển sang giao diện dành riêng cho quản trị viên hệ thống không thành công thông tin đăng nhập không hợp lệ thơng báo sai thơng tin nhập lại 4.3.2.2 Giao diện người dùng bình thường (bạn đọc) Hình 4.6 Giao diện người dùng bình thường (bạn đọc) - Trang nhóm tin tức hiển thị chi tiết viết chuyên mục: + Trang chủ: Nhóm tin tức hiển thị viết ngẫu nhiên, xem nhiều tuần công nghệ công nghệ, kiện, đánh giá, thủ thuật - ứng dụng + Cơng nghệ: Nhóm tin tức hiển thị viết chuyên mục công nghệ + Sự kiện: Những viết kiện + Đánh giá: Những viết đánh giá sản phẩm công nghệ + Thủ thuật - ứng dụng: Những viết chuyên thủ thuật - ứng dụng công nghệ 26 4.3.2.3 Giao diện quản trị viên hệ thống Hình 4.7 Giao diện quản trị viên hệ thống Quản trị viên hệ thống đăng nhập vào website quản lý viết, chỉnh sửa thông tin cá nhân, quản lý thẻ (tags), quảng cáo, chuyên mục, thông tin website, nhân viên, đăng xuất 4.3.2.4 Giao diện người đăng Hình 4.8 Giao diện người đăng Quản trị viên hệ thống đăng nhập vào website quản lý viết, chỉnh sửa thơng tin cá nhân, quản lý thẻ (tags), đăng xuất 27 4.3.2.5 Giao diện hệ thống cụ thể a Trang quản lý viết Hình 4.9 Trang quản lý viết b Trang chỉnh sửa thơng tin cá nhân Hình 4.10 Trang chỉnh sửa thông tin cá nhân 28 c Trang quản lý thẻ (tags) Hình 4.11 Trang quản lý thẻ (tags) d Trang quản lý quảng cáo Hình 4.12 Trang quản lý quảng cáo e Trang quản lý chuyên mục 29 Hình 4.13 Trang quản lý chuyên mục f Trang quản lý nhân viên Hình 4.14 Trang quản lý nhân viên g Trang quản lý thơng tin website Hình 4.15 Trang quản lý thông tin website 4.3.3 Đánh giá tương tác hệ thống 4.3.3.1 Thiết kế trực quan a Sự di chuyển mắt người dùng Người ta thấy có mối quan hệ mật thiết di chuyển mắt q trình xử lí thơng tin thu nhận qua việc dịch chuyển Thiết kế tốt dựa vào luồng dịch chuyển Con người có thói quen đọc từ trái sang phải từ xuống Do 30 trang web thiết kế phần quan trọng phía hình như: menu chức thiết kế dọc theo bên trái hình phần nội dung thơng tin trang hiển thị đoạn hình để đảm bảo người dùng thu nhận lượng thông tin nhiều b Cấu trúc phân cấp trực quan Việc cung cấp nhìn trực quan cho người dùng cấu trúc phân trang trang web ảnh hưởng đến việc thu lượm xử lí thơng tin người dùng web Steve Krug nói vai trò tính phân cấp trực quan sau: “Một cách tốt làm cho trang web bạn hiểu cách nhanh chóng phải đảm bảo phần trang web bố trí hợp lí, rõ ràng, sinh động, phần liên quan đến mục nào” Các kĩ thuật áp dụng: - Các phần quan trọng dùng kích thước lớn hơn, đậm phần khác như: Phần menu kích thước to màu sắc đậm, phần chức lớn nằm riêng có chữ đậm so với chức con, chức chọn hiển thị highlight - Sử dụng đường bao để chia cắt vùng trang web c Sắp xếp văn hợp lý Các văn cần xếp hợp lí để tạo khả đọc lướt Các lựa chọn lề văn Do phần hiển thị thơng tin lề trái d Tính dễ xem Trang web sử dụng phơng chữ Arial để tạo tính dễ đọc cho người dùng Các phần khác như: menu, chức năng, đường link, sử dụng màu sắc khác để thể tạo cảm giác dễ chịu cho người dùng 4.3.3.2 Cách sử dụng khơng gian hình Khơng gian hình thiết kế hợp lý sử dụng 60% cho nội dung trang web, 20% cho chức nằm bên trái hình 4.3.3.3 Thời gian tải trang Thời gian tải trang web tiêu chí quan trọng, Jakob Nielsel tông kết nghiên cứu cho người dùng ln đề nghị tăng tốc độ trang web Do để tăng tốc độ tải trang hệ thống thiết kế sử dụng ảnh khơng có nhiều quảng cáo 31 4.3.3.4 Tính dùng a Tính học Tính học thể qua thời gian cơng sức bỏ để đạt trình độ sử dụng định Tính học được thể qua tính chất sau : - Tính tổng hợp : Hệ thống cho phép người dùng tổng hợp kiến thức mà họ thu thông qua việc sử dụng hệ thống, từ xây dựng nguyên tắc kiến thức - Tính quen thuộc : Người dùng vận dụng kiến thức có từ trước để định xem phải làm tình - Tính khái quát : Người dùng khái quát quy luật kỹ để áp dụng vào trường hợp tương tự Hệ thống hỗ trợ cách hoạt động tương tự tình tương tự VD : Trong trang Admin, sau thêm viết, ta làm làm tương tự với việc thêm danh mục, thẻ (tags),… b Tính dễ sử dụng - Tính dễ sử dụng thể qua mức độ dễ mà nhiệm vụ hồn thành cách hiệu quả, khơng có lỗi Tính dễ dụng thể qua tính chất sau : - Tính quan sát được: Cho phép người dùng nhận biết trạng thái hệ thống, thiết kế hệ thống cho không hành động mà trạng thái nhìn thấy VD: Khi người dùng chưa đăng nhập, trạng thái người dùng lúc khách vãng lai, hệ thống hiển thị form đăng nhập cho người dùng c Tính linh động - Tính tùy biến : Cho phép hệ thống thích nghi với yêu cầu người dùng VD : Người dùng thay đổi thơng tin cá nhân d Tính cảm xúc Tính cảm xúc thể qua mức độ ưa thích thoải mái người sử dụng sử dụng hệ thống Điều thể chủ yếu tính thẩm mỹ giao diện CHƯƠNG : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết luận 5.1.1 Kết đạt 32 - Xây dựng thành công hệ thống quản lý tin tức công nghệ đáp ứng yêu cầu người sử dụng - Hệ thống có khả tùy biến với liệu khác - Website có giao diện thân thiện thuận tiện cho người sử dụng - Chức nhập quản lý thực logic đảm bảo cho liệu hợp lệ hoá cập nhật xác - Hệ thống phân quyền tính cho người dùng 5.1.2 Khuyết điểm - Do thời gian nghiên cứu khả hạn chế nên số ý tưởng chưa - thực Một số chức chưa hoạt động ổn định Chưa giải trọn vẹn vấn đề nảy sinh trình quản lý 5.2 Hướng phát triển - Tìm hiểu hồn thiện số chức chưa thực ứng dụng - Cải thiện tốc độ truy vấn, khả quản lý liệu tốt - Cải thiện độ xác tính ổn định áp dụng vào thực tế TÀI LIỆU THAM KHẢO [1] Lê Thị Hoàng Yến (2018), Bài giảng Tương tác người máy, Đại học Sư phạm Kỹ thuật Vĩnh Long [2] Lương Mạnh Bá (2005), Giáo trình Tương tác người-máy, Đại học Bách Khoa Hà Nội [3] Nguyễn Ngọc Nga (2016), Phân tích thiết kế hệ thống, NXB Khoa công nghệ thông tin - trường Đại Học Sư Phạm Kỹ Thuật Vĩnh Long [4] Nguyễn Ngọc Nga (2017), Lập trình web, NXB Khoa cơng nghệ thông tin trường Đại Học Sư Phạm Kỹ Thuật Vĩnh Long [5] Vũ Thị Hương Giang (2012), Bài giảng Nhập môn tương tác người-máy, Viện CNTT&TT, Đại học Bách khoa Hà Nội [6] https://freetuts.net/ 33 [7] https://www.w3schools.com/ 34