Người dùng có thể xem danh sách truyện đang theo dõi, tìm kiếm theo tên truyện, và chuyển trang giữa các danh sách dài.. Khi người dùng bấm và nút lưu truyện hay đánh dấu bộ truyện đó sẽ
Trang 1HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
-BÁO CÁO CÁ NHÂN THIẾT KẾ WEB CƠ BẢN
Giảng viên: Vũ Thị Tú Anh
Đề tài: Thiết kế chức năng web đọc truyện online Sinh viên thực hiện:
Hoàng Anh Trung - B22DCPT298
Nhóm: 7
Lớp: Thiết kế web cơ bản - nhóm 02
Trang 2LỜI NÓI ĐẦU
Lời đầu tiên, em xin được gửi lời cảm ơn tới những người đã giúp đỡ em trong quá trình thực hiện đề tài này khi đang học bộ môn Thiết kế web cơ bản
Em xin cảm ơn giảng viên bộ môn - cô Vũ Thị Tú Anh đã cung cấp lượng kiến thức cần thiết và những kinh nghiệm trong việc thiết kế web để thực hiện đề tài
Em xin gửi lời cảm ơn tới các thành viên của nhóm 07 đã cùng thực hiện đề tài với em, hỗ trợ em về mảng kiến thức và kĩ thuật trong quá trình thiết kế website, đặc biệt gửi lời cảm ơn tới bạn Nguyễn Tùng Dương đã hết mình vì công việc, năng nổ trong tất cả mọi quá trình thực hiện dự án, giúp cho công việc được diễn
ra suôn sẻ
Trang theo dõi truyện được xây dựng nhằm hỗ trợ người dùng quản lý các bộ truyện yêu thích một cách dễ dàng Người dùng có thể xem danh sách truyện đang theo dõi, tìm kiếm theo tên truyện, và chuyển trang giữa các danh sách dài Thiết kế tập trung vào giao diện đơn giản, trực quan và dễ sử dụng
Đây là một trong những đề tài về web đầu tiên mà em làm nên có thể sẽ không thể tránh khỏi những thiếu sót Em mong cô và các bạn có thể đóng góp thêm ý kiến để em hoàn thiện hơn về kinh nghiệm và kỹ năng trong quá trình thiết kế một trang web tới cho người dùng đại chúng
Em xin chân thành cảm ơn!
Trang 31 Mục đích của từng trang, từng chức năng
Khi người dùng bấm vào một bộ truyện sẽ chuyển tới trang xem chi tiết của bộ truyện đó
Trang 4Trong đó có chức năng lưu truyện Khi người dùng bấm và nút lưu truyện hay
đánh dấu bộ truyện đó sẽ được chuyển tới danh sách theo dõi truyện của người
dùng
Trang web được thiết kế nhằm cung cấp thông tin và quản lý danh sách truyện đang theo dõi cho người dùng Các chức năng chính bao gồm:
● Hiển thị danh sách các truyện đang theo dõi
Trang 5● Xóa truyện khỏi danh sách theo dõi.
● Tìm kiếm truyện theo tên hoặc sắp xếp theo ngày thêm
● Nút chuyển trang
Trang 6- Di chuyển qua lại giữ các trang danh sách.
-2 Phân tích sự sắp xếp của các thành phần trên trang
Các thành phần trên trang được bố trí hợp lý để tối ưu hóa trải nghiệm người dùng:
1 Thanh điều hướng (Navbar): Được đặt cố định ở đầu trang, giúp người dùng
dễ dàng truy cập các trang chính
2 Khu vực tìm kiếm và danh sách: Danh sách truyện được trình bày theo chiều dọc với hình ảnh minh họa và thông tin chi tiết, thuận tiện cho việc duyệt và tìm kiếm
Trang 73 Nút phân trang: Được đặt dưới danh sách, hỗ trợ chuyển đổi giữa các trang một cách trực quan
4 Footer: Các thông tin về bản quyền, điều khoản dịch vụ, hướng dẫn sử dụng, chính sách bảo mật…
3 Chức năng hiển thị thông tin/số liệu
Hệ thống hiển thị thông tin truyện (tên, chương mới nhất) sử dụng dữ liệu được cấu hình trong HTML Hiện tại giao diện chỉ bao gồm:
● Danh sách các truyện với thông tin cơ bản (tên truyện, chương mới nhất)
Trang 8● Giao diện tìm kiếm với thanh nhập liệu và bộ lọc sắp xếp.
4 Chức năng cập nhật thông tin/số liệu
Các chức năng cập nhật dữ liệu (như xóa truyện) được thực hiện thông qua nút 'x' trên giao diện
5 Đánh giá khối lượng thiết kế
Khối lượng thiết kế giao diện được đánh giá ở mức 0.5, với tổng cộng 6-7 chức năng bao gồm:
● Hiển thị danh sách truyện
● Tìm kiếm và lọc truyện
● Xóa truyện khỏi danh sách
● Phân trang và điều hướng
- Hình ảnh thiết kế giao diện sử dụng figma
Trang 96 Thiết kế chức năng 1: Hiển thị danh sách truyện
● Mục đích của chức năng:
Hiển thị các truyện mà người dùng đang theo dõi, bao gồm thông tin về tên truyện, chương mới nhất, và hình ảnh minh họa
● Giao diện của chức năng:
Sử dụng thẻ HTML <ul> để tạo danh sách các mục Mỗi truyện được hiển thị trong thẻ <li> với hình ảnh (<img>), tên truyện (<a>), và thông tin
Trang 10chương mới nhất.
● Hoạt động của chức năng:
Danh sách truyện được định nghĩa trong HTML và định dạng bởi CSS (class category-item) Các truyện có thể được xóa bằng nút x đi kèm mỗi mục
Trang 117 Thiết kế chức năng 2: Phân trang
● Mục đích của chức năng:
Giúp người dùng di chuyển giữa các trang chứa danh sách truyện dài, đảm bảo trải nghiệm mượt mà khi theo dõi
● Giao diện của chức năng:
Phân trang được thiết kế với các nút điều hướng và số trang hiện tại (sử dụng class next-page)
Trang 12● Hoạt động của chức năng:
Khi nhấn vào các nút điều hướng, người dùng sẽ được chuyển đến trang tiếp theo hoặc trước đó Giao diện thay đổi dựa trên file HTML
(follow1.html, follow2.html)
8 Thiết kế chức năng 3: Tìm kiếm
● Mục đích của chức năng:
Hỗ trợ người dùng tìm kiếm nhanh các truyện mà họ đang theo dõi, dựa trên tên truyện
Trang 13● Giao diện của chức năng:
Sử dụng một hộp tìm kiếm (<input>) đi kèm nút tìm kiếm (<button>)
● Hoạt động của chức năng:
Người dùng nhập tên truyện vào ô tìm kiếm, sau đó nhấn nút để thực hiện tìm kiếm Hiện tại, tính năng tìm kiếm được giả lập, chưa tích hợp
backend
KẾT LUẬN
Trang 14Qua việc xây dựng trang web, em đã học được cách tổ chức HTML, CSS, để nghiên cứu và thiết kế giao diện chức năng khoa học Các chức năng cơ bản đã khá hoàn thiện Tuy nhiên, trong quá trình làm việc cũng gặp một số khó khăn vì đây là lần đầu em làm phần html css nên phần thiết kế vẫn chưa tối ưu và cũng chưa hiện thực hết được ý tưởng