Phân tích thiết kế giao diện website tin tức

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG _♣ _ BÀI THẢO LUẬN Môn: Giao diện người máy LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Giáo viên : Nguyễn Thị Linh NHÓM Đề tài: Phân tích thiết kế giao diện website tin tức * Danh sách thành viên nhóm : Nguyễn Đình Hưng Hồng Ngọc Hà Lâm Văn Tùng Lê Tuấn Phong Đặng Xuân Quyết LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com MỤC LỤC A/-Ý TƯỞNG Trang B/-PHẦN MỀM HỖ TRỢ Trang C/-GIAO DIỆN _Trang I/- Giao Diện Trang Chủ _Trang 3 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com II/-Giao Diện Trang Chuyên Mục Trang III/-Giao Diện Trang Bài Viết Trang IV/-Giao Diện Trang Tìm Kiếm _Trang V/-Giao Diện Trang Đăng Ký Và Đăng Nhập Trang 10 D/- TÀI LIỆU THAM KHẢO _Trang 15 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com A/- Ý TƯỞNG : Thiết kế giao diện website phù hợp cho trường đại học Các tin tức, thông báo đưa lên cho sinh viên đối tượng khác quan tâm truy cập tìm hiểu LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com B/-PHẦN MỀM HỖ TRỢ :  Emeditor 11  Adobe Photoshop 7.0  Macromedia Dreamweaver  Firefox C/-Các trang website thiết kế bao gồm : 1/- Trang chủ 2/-Trang chuyên mục 3/-Trang viết 4/-Trang tìm kiếm 5/-Trang đăng ký đăng nhập I/- GIAO DIỆN TRANG CHỦ LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Ấn tượng người dùng ghé thăm website banner thiết kế đơn giản ấn tượng trang web hiển thị tên trường logo trường bên trái , ngày thàng góc nhỏ bên phải, ngồi cịn có phần đăng nhập dành cho thành viên website, phần đăng ký cho người dùng muốn làm thành viên website Kích thước banner phù hợp banner to, rộng, hút ý người đọc Nội dung banner phù hợp với Nội dung website màu sắc chủ đạo màu xanh da trời phù hợp với đối tượng hướng tới sinh viên Dưới banner phần menu ngang có chữ trắng xám giúp người xem dễ nhìn chọn lựa phần muốn truy cập Dưới phần menu phần hiển thị thông tin có website : LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Phần giúp người đọc chọn nhanh tin phát hành web, tin cịn có hình ảnh minh họa kích thước to, rõ ràng, ảnh tiêu để tóm tắt Bên phải phần gồm 10 tin cập nhật mớ i Sau đến phần hiển thị viết chuyên mục, cho hiển thị /1 chuyên mục Mỗi chuyên mục ghi tên dễ nhìn viết có ảnh minh họa, tiêu đề tóm tắt nội dung LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Bên phải gồm có phần tìm kiếm, video giới thiệu,slide ảnh quảng cáo  Phần Tìm Kiếm Được thể bên phải, thiết kế đơn giản bắt mắt, nút ấn bật bên cạnh gõ từ cần tìm kiếm  Phần video giới thiệu LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Giới thiệu Trường giúp người lần đầu truy cập tìm hiểu đơi nét trường  Phần slide ảnh giới thiệu Đưa lên ảnh hoạt động bật trường 10 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Ghi thông tin liên hệ, giúp người dùng dễ dàng liên hệ có ý kiến xây dựng đóng góp cho trang web Ngoài giao diện trang chủ, người dùng click link liên kết đến viết chuyển vào phần viết II/- GIAO DIỆN TRANG CHUYÊN MỤC Khi người dùng click vào tên chuyên mục trình duyệt load tới trang chuyên mục 12 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Có thiết kế tương tự trang chủ, nhiên thay hiển thị viết nhiều chuyên mục trang thể viết chuyên mục mà người dùng quan tâm truy cập III/- GIAO DIỆN TRANG BÀI VIẾT Phần trọng tâm trang nội dung chi tiết viết, tiêu đề thể , bên cạnh tên người đăng thời gian đăng, viết chi tiết 13 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Tiếp theo viết hiển thị viết hơn, giúp tru cập dễ dàng không thời gian quay lại trang chủ hay trang chuyên mục Tương tự phần viết khác phần bên phải trang hiển thị tiêu đề ảnh thu nhỏ số viết khác có trang web : IV/- GIAO DIỆN TRANG TÌM KIẾM 14 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Đối với website tính tím kiếm điều khơng thể thiếu, giúp người xem dễ dàng tìm kiếm nội dung muốn Để tìm kiếm người dùng gõ cụm từ cần tìm vào text box bên phải tất trang website Ô Text box nhập cụm từ mà người dùng cần tìm Ví dụ, cần tìm kiếm từ Việt Nam Sau click vào nút cạnh bên phải text box Sau người dùng Click chuyển đến trang tìm kiếm Ở trang hiển thị số lượng viết phù hợp với cụm từ cần tìm, tiêu đề viết ảnh minh họa, tóm tắt viết phù hợp Khi người dùng muốn truy cập cần click vào tiêu đề viết để xem nội dung đầy đủ viết 15 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Từ khóa có màu đỏ, dễ nhìn, bên trái số lượng kết tìm được, bên danh sách viết tìm phù hợp với từ khóa V/- GIAO DIỆN TRANG ĐĂNG KÝ VÀ ĐĂNG NHẬP Trước tiên phần đăng nhập có hai text box để người dùng gõ tên mật truy cập Trang sử dụng dành cho người dùng đăng ký tên truy cập website 16 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Nút sử dụng người dùng điền đủ thông tin truy cập Nút để người dùng xóa nhanh thơng tin nhập giúp tiết kiệm thời gian người dùng muốn nhập lại Khi người dùng chưa đầy đủ thông tin cần thiết (tên đăng nhập mật khẩu) click nút có thông báo để nhắc nhở : 17 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Thông báo để trống ô mật Thông báo để trống ô Tên đăng nhập 18 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Cịn người dùng muốn xóa nhanh thông tin nhập click nút thông tin nhập bị xóa Trước click nút 19 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Sau click nút thơng tin xóa nhanh người dùng nhập lại Trong trường hợp người dùng nhập tên đăng nhập mật khơng trùng khớp sau click nút có thơng báo thể chữ màu đỏ in đậm bên cạnh trái hình ảnh cảnh báo : Trong trường hợp đăng nhập thành cơng có thơng báo đươc thể màu xanh in đậm hình ảnh mang ý nghĩa thành công 20 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Đối với người sử dụng chưa có tên đăng nhập muốn đăng ký thành viên website, sau truy cập link đăng ký chuyển đến trang đăng ký thành viên Giao diện xét chung giống trang đăng nhập nhiên có nhiều trường cần điền Form đăng ký thành viên 21 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Thông báo nhắc nhở người dùng chưa nhập đầy đủ thông tin cần thiết việc đăng ký mà click nút Bên canh nút nút để người dùng xóa thông tin nhập, giúp tiết kiệm thời gian nhập lại cần thiết 22 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com Cũng giống trang đăng nhập, có lỗi hiển thị người dùng sử dụng tên đăng nhập tồn sở liệu : Cịn đăng ký thành cơng có thông báo hiển thị việc đăng ký xong diễn thành cơng : Ví dụ đăng ký tài khoản có tên đăng nhập test123 mật giaodiennguoimay Sau đăng ký thành cơng, người dùng qay lại trang đăng nhập để đăng nhập vào hệ thống 23 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com 24 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com D/-TÀI LIỆU THAM KHẢO : 25 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com  Simple Css Standard Edition (Bản Tiếng Việt)  Ngôn Ngữ Lập Trình PHP  Sử Dụng PHP & MySql Trong Thiết Kế Web Động  Tiêu chuẩn thiết kế web World Wide Web Consortium (W3C) 26 LUAN VAN CHAT LUONG download : add luanvanchat@agmail.com ...Giáo viên : Nguyễn Thị Linh NHÓM Đề tài: Phân tích thiết kế giao diện website tin tức * Danh sách thành viên nhóm : Nguyễn Đình Hưng Hoàng Ngọc Hà Lâm Văn Tùng... VAN CHAT LUONG download : add luanvanchat@agmail.com A/- Ý TƯỞNG : Thiết kế giao diện website phù hợp cho trường đại học Các tin tức, thông báo đưa lên cho sinh viên đối tượng khác quan tâm truy... Trang III/ -Giao Diện Trang Bài Viết Trang IV/ -Giao Diện Trang Tìm Kiếm _Trang V/ -Giao Diện Trang Đăng Ký Và Đăng Nhập