bài tập lớn đề tài thiết kế website dạy học online

Điều này sẽ đòi hỏi không chỉ sự hiểu biết về các ngôn ngữ lập trình và công nghệ web mà còn kỹ năng thiết kế và tư duy về trải nghiệm người dùng UX để đảm bảo trang web dạy học online đ

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á KHOA: CÔNG NGHỆ THÔNG TIN

Lương Ngọc Nam Yêu cầu ghi đúng tên lơp hành chính

Bắc Ninh, năm 2023

BỘ GIÁO DỤC VÀ ĐÀO TẠO

KHOA: CÔNG NGHỆ THÔNG TIN

CÁN BỘ CHẤM 1

(Ký và ghi rõ họ tên)

CÁN BỘ CHẤM 2

(Ký và ghi rõ họ tên)

Chương 2 Ứng dụng xây dựng giao diện cho website 15

2.1 Giới thiệu website 15

2.1.1 Đối Tượng Sử Dụng 15

2.1.2 Mục Đích Sử Dụng 15

2.1.3 Các Điểm Nổi Bật Khác 16

2.2 Mô tả các chức năng chính của website 16

2.2.1 Chức Năng Quản Lý Khóa Học 16

2.2.2 Chức Năng Tương Tác Giữa Giảng Viên và Học Sinh 17

2.2.3 Thiết kế giao diện 18

2.2.4 Lập trình xây dựng giao diện: 32

Chương 3 Kết luận 54

3.1 Các Nội Dung Đã Đạt Được 54

3.2 Các Nội Dung Cần Cải Tiến 54

3.3 Bài Học Kinh Nghiệm 54

Phụ lục 55

MỞ ĐẦU

Môn học "Thiết kế Web" đóng vai trò quan trọng trong quá trình học tập và phát triển của em, những sinh viên của ngành Công nghệ thông tin Việc chọn đề tài "Thiết kế Website Dạy Học Online" là một quyết định được thúc đẩy bởi những nguyên do quan trọng

Thời đại số hóa đang đặt ra nhiều thách thức và cơ hội trong lĩnh vực giáo dục Sự gia tăng của internet và các thiết bị kết nối đã mở ra cánh cửa cho hình thức học tập trực tuyến, đặc biệt trong bối cảnh thế giới đang đối mặt với các thách thức về giới hạn vùng di dân Xây dựng một trang web dạy học online hiệu quả không chỉ giúp tạo điều kiện cho việc học tập linh hoạt mà còn tạo sự tương tác giữa giảng viên và học viên, cung cấp cơ hội học tập liên tục và thoải mái

Ngoài ra, việc lựa chọn đề tài này cũng nhằm mục tiêu áp dụng kiến thức đã học trong môn "Thiết kế Web" vào một dự án thực tế Em sẽ kết hợp sự hiểu biết về HTML, CSS, Bootstrap và jQuery để xây dựng giao diện người dùng thân thiện, dễ sử dụng và có tính năng tương tác Điều này sẽ đòi hỏi không chỉ sự hiểu biết về các ngôn ngữ lập trình và công nghệ web mà còn kỹ năng thiết kế và tư duy về trải nghiệm người dùng (UX) để đảm bảo trang web dạy học online đạt được mục tiêu của mình

Em cũng sẽ tập trung vào việc tạo ra một trải nghiệm học tập tốt cho người dùng và cung cấp các tính năng quản lý nội dung cho giảng viên Từ việc xây dựng giao diện trang web cho đến việc tạo tính năng tương tác, đề tài này sẽ đánh bại cơ hội để thực hành và áp dụng kiến thức của em một cách thực tế

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành và lòng biết ơn sâu sắc đến Thầy, Ths Nguyễn Đức Thiện - Giảng viên hướng dẫn của em trong suốt khoảng thời gian chúng em học môn "Thiết kế Web" Thầy đã đóng vai trò quan trọng và có ảnh hưởng lớn đối với quá trình học tập và sự phát triển cá nhân của em

Thầy không chỉ là một người hướng dẫn xuất sắc mà còn là một nguồn động viên và nguồn cảm hứng to lớn Sự hiểu biết sâu sắc của Thầy về lĩnh vực thiết kế web và các công nghệ liên quan đã giúp chúng em hiểu rõ hơn về những khía cạnh quan trọng của nó Thầy đã luôn sẵn sàng hỗ trợ và giải đáp mọi thắc mắc của em, đồng thời đưa ra những hướng dẫn chi tiết để chúng em tiến bộ

Quá trình thực hiện báo cáo cá nhân này đã đòi hỏi sự nỗ lực và cố gắng không ngừng của em Thầy đã tạo điều kiện và cung cấp hướng dẫn dưới dạng kiến thức và kỹ năng thực tế, giúp em áp dụng những gì đã học vào dự án này

Em không thể đánh giá đủ sâu về giá trị của sự hướng dẫn và sự ảnh hưởng của Thầy đối với quá trình học tập và phát triển cá nhân của em Chúng em rất biết ơn và trân trọng những bài học, sự kiên nhẫn và sự quan tâm mà Thầy dành cho chúng em trong suốt thời gian qua

Một lần nữa, em xin chân thành cảm ơn Thầy và hy vọng có thêm nhiều cơ hội học hỏi và được hướng dẫn bởi Thầy trong tương lai

Chương 1 Cơ sở lí thuyết về thiết kế Web 1.1 HTML

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu cơ bản sử dụng để xây dựng trang web Nó giúp em tạo nên các thành phần trên trang web, từ văn bản đến hình ảnh, liên kết và bảng Dưới đây, chúng em sẽ tìm hiểu về một số khái niệm cơ bản của HTML và cách sử dụng chúng

- HTML sử dụng hệ thống đánh dấu (emgs) để xác định loại nội dung trên trang, ví dụ: <p> cho đoạn văn bản, <img> cho hình ảnh, <a> cho liên kết - HTML là một tiêu chuẩn công nghiệp và hoạt động trên hầu hết các trình duyệt web Điều này đảm bảo rằng trang web em xây dựng có thể được truy cập từ hầu hết các thiết bị và trình duyệt

- HTML cho phép em nhúng các phương tiện đa dạng như hình ảnh, video, âm thanh và ứng dụng

❖ Nhược Điểm:

- Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động, lập trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP)

- Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer

- Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được emg mới Do đó, dù trong HTML document có sử dụng các emg này thì trình duyệt cũng không đọc được) - Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

❖ Sử Dụng HTML:

HTML sử dụng cú pháp đơn giản gồm các thẻ và thuộc tính để đánh dấu và cấu trúc nội dung trang web Dưới đây là một ví dụ đơn giản về HTML:

<!DOCTYPE html> <html>

<head>

<title>Trang Web Mẫu</title> </head>

<body>

<h1>Chào mừng bạn đến với trang web mẫu!</h1>

<p>Đây là một ví dụ về cách sử dụng HTML để tạo cấu trúc trang web.</p> <a href="https://example.com">Liên kết đến trang web mẫu</a>

</body> </html>

- Tách Biệt Nội Dung và Giao Diện: CSS cho phép em tách biệt nội dung (HTML) và giao diện (CSS) Điều này có nghĩa là em có thể thay đổi giao diện mà không cần thay đổi nội dung, và ngược lại Điều này tạo điều kiện thuận lợi cho việc bảo trì và quản lý trang web

- Khả năng tải trang nhanh chóng: Đăc trưng của CSS khi sử dụng là ít mã hơn Bởi thế mà thời gian tải xuống nhanh chóng, giúp tiết kiêm thời gian đáng kể Khi viết được một quy tắc CSS của một thẻ cụ thể và lúc này chúng em có thể áp dụng nó cho mọi lần xuất hiện tiếp theo của thẻ đó,

đồng thời hoàn toàn không cần tiến hành thay đổi thuộc tính của thẻ HTML

- Dễ dàng khi thực hiện bảo trì: Khi cần chúng em chỉ cần thay đổi một kiểu và mọi thành phần trong tất cả những website thì lúc này CSS sẽ hỗ trợ câp nhật hoàn toàn tự động

- Khả năng tương thích tốt: Khả năng tương thích với nhiều thiết bị cũng là

ưu điểm của CSS

❖ Nhược điểm

- Khá khó khăn cho người mới: CSS đa dạng và phức tạp, đặc biệt khó đối với người mới học lập trình Điều này làm cho việc tìm hiểu và sử dụng CSS trở nên khó khăn, đặc biệt với những cấp độ phức tạp

- Định dạng web có khả năng gặp rủi ro: CSS là hệ thống mở dựa trên văn bản, làm cho việc truy cập và chỉnh sửa dễ dàng Điều này tạo khả năng rủi ro cho định dạng tổng thể của web, đặc biệt khi có hành động hoặc sự cố xảy ra, cần phải xem xét và khắc phục lại các thay đổi

❖ Sử Dụng CSS:

Để sử dụng CSS, em cần định rõ các quy tắc CSS bằng cách xác định các thuộc tính và giá trị trong một tệp riêng biệt hoặc nhúng trực tiếp vào tệp HTML Ví dụ: h1 {

color: blue; font-size: 24px; }

/* Nhúng CSS trực tiếp vào HTML */ <style>

h1 {

color: blue; font-size: 24px; }

</style>

CSS đóng vai trò quan trọng trong việc tạo ra giao diện thú vị và chuyên nghiệp cho trang web của em Nó cung cấp sự linh hoạt trong việc tạo ra các trang web độc đáo và phù hợp với nhiều loại dự án

1.3 JAVASCRIPT

JavaScript (JS) là một ngôn ngữ lập trình phía client-side (mặt khách hàng) được sử dụng để tạo tính tương tác cho trang web Dưới đây là một số điểm quan trọng về JavaScript:

❖ Ưu điểm:

- Tính Tương Tác: JavaScript cho phép bạn thêm tính năng tương tác vào trang web Bạn có thể kiểm soát sự kiện như nhấn nút, di chuột, hoặc gửi biểu mẫu

- Giao Diện Người Dùng Đa Dạng: JavaScript kết hợp với HTML và CSS để tạo ra giao diện đa dạng và phong cách Điều này cho phép bạn tạo ra các trang web động và thú vị

- Xử Lý Dữ Liệu: JavaScript cho phép bạn xử lý dữ liệu trên trang web, từ việc lấy dữ liệu từ nguồn khác đến kiểm tra dữ liệu và hiển thị nó cho người dùng

- Thư Viện và Framework: JavaScript có nhiều thư viện và framework mạnh mẽ như React, Angular, và Vue.js giúp bạn phát triển ứng dụng phức tạp một cách nhanh chóng

❖ Nhược điểm:

- Bảo Mật: JavaScript chạy trên máy tính của người dùng, và do đó có thể dễ dàng bị lợi dụng để thực hiện các cuộc tấn công Điều này đòi hỏi các biện pháp bảo mật cẩn thận

- Phụ Thuộc vào Trình Duyệt: Một số tính năng JavaScript có thể hoạt động khác nhau trên các trình duyệt khác nhau, đòi hỏi thử nghiệm và kiểm tra kỹ lưỡng

- Tải Trang Web Chậm Hơn: JavaScript có thể làm tải trang web chậm hơn nếu không được quản lý cẩn thận Điều này có thể ảnh hưởng đến trải nghiệm người dùng

❖ Sử Dụng:

JavaScript có thể được sử dụng trực tiếp trong mã nguồn HTML hoặc nhúng từ các tệp ngoài Dưới đây là một ví dụ về việc sử dụng JavaScript để thực hiện một hộp thoại cảnh báo:

<!DOCTYPE html> <html>

<head>

<title>Ví dụ JavaScript</title> </head>

<body>

<button onclick="alert('Xin chào, đây là ví dụ JavaScript!')">Nhấn vào tôi</button>

</body> </html>

JavaScript giúp bạn tạo ra các chức năng phức tạp hơn như kiểm tra biểu mẫu, tạo đối tượng động, và giao tiếp với máy chủ để cập nhật dữ liệu trang web mà không cần tải lại trang

1.4 BOOTSTRAP

Bootstrap là một framework front-end mã nguồn mở phổ biến được sử dụng để phát triển giao diện web hiện đại, thân thiện với thiết bị di động và trình duyệt Bootstrap được tạo bởi Twitter và hiện nay được duy trì bởi cộng đồng lập trình

❖ Ưu điểm:

- Thiết Kế Đáp Ứng: Bootstrap cung cấp một lưới thiết kế đáp ứng (responsive grid system) giúp tạo ra các trang web hiển thị đẹp trên cả máy tính và thiết bị di động

- Thư Viện CSS: Bootstrap đi kèm với một bộ CSS đã được thiết kế sẵn, cho phép bạn tùy chỉnh giao diện của trang web một cách dễ dàng

- Thư Viện JavaScript: Bootstrap cung cấp các plugin JavaScript như carousel, modal, và tooltip để tạo các tính năng tương tác trên trang web - Tích hợp dễ dàng: Bootstrap có thể dễ dàng tích hợp với các framework và

thư viện khác như React, Angular, và Vue.js

- Cộng đồng lớn: Với một cộng đồng phát triển lớn và tài liệu hỗ trợ chi tiết, việc học và sử dụng Bootstrap trở nên dễ dàng hơn

Bootstrap cung cấp một loạt các class CSS và component để giúp bạn tạo giao diện web nhanh chóng Dưới đây là ví dụ sử dụng Bootstrap để tạo một nút (button) có kiểu (class) nút màu xanh:

<!DOCTYPE html> <html>

<head>

<title>Ví dụ Bootstrap</title>

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head>

1.5 JQUERY

jQuery là một thư viện JavaScript phổ biến được sử dụng rộng rãi để giúp quản lý và tương tác với các thành phần trên trang web một cách hiệu quả Với jQuery, việc thao tác với DOM (Document Object Model) và xử lý sự kiện trở nên dễ dàng và ngắn gọn hơn, mang lại trải nghiệm người dùng tốt hơn

thị, ẩn, thay đổi nội dung một cách mượt mà và thuận tiện

- Xử Lý Sự Kiện Tốt: jQuery cung cấp một cú pháp đơn giản và mạnh mẽ để xử lý sự kiện, giúp tăng tốc độ phát triển ứng dụng web

❖ Nhược điểm

- Kích thước và tốc độ: JQuery có thể có kích thước lớn đối với các ứng dụng web đơn giản, và việc tải nhanh có thể trở thành vấn đề đối với các dự án cần tối ưu về hiệu suất

- Khó khăn trong việc tùy chỉnh: Trong một số trường hợp, JQuery có thể làm cho mã nguồn khó hiểu hơn và khó khăn khi muốn tùy chỉnh một số tính năng phức tạp hoặc sâu

- Khả năng xung đột: JQuery có thể gây ra xung đột với các thư viện khác nếu chúng có chung chức năng hoặc cách thức hoạt động tương tự

- Hiệu suất: Trong một số trường hợp, việc sử dụng JQuery có thể làm giảm hiệu suất của ứng dụng web, đặc biệt khi có một lượng lớn mã JQuery được tải xuống

❖ Các tính năng chính

- Chọn Phần Tử (Selecting Elements): jQuery cho phép chọn phần tử HTML dễ dàng bằng cú pháp ngắn gọn, giúp thao tác với chúng một cách hiệu quả

- Xử Lý Sự Kiện (Event Handling): jQuery cung cấp cú pháp dễ dàng để thêm và quản lý các sự kiện, giúp tương tác trang web một cách linh hoạt - AJAX (Asynchronous JavaScript and XML): jQuery hỗ trợ gửi dữ liệu và nhận phản hồi từ máy chủ một cách bất đồng bộ, giúp cập nhật nội dung trang mà không cần tải lại trang

- Thay Đổi CSS (CSS Manipulation): jQuery cho phép thay đổi các thuộc tính CSS của phần tử, giúp điều chỉnh giao diện trang web một cách linh hoạt

❖ Sử Dụng:

Dưới đây là một ví dụ cơ bản về cách sử dụng jQuery để ẩn và hiện một phần tử khi nút được nhấn:

<!DOCTYPE html> <html>

<head>

<title>Ví dụ jQuery</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script>

$(document).ready(function(){ $("button").click(function(){ $("p").toggle();

}); }); </script> </head> <body>

<p>Đây là một đoạn văn bản.</p>

<button>Nút</button> </body>

</html>

Trong ví dụ này, jQuery được sử dụng để thêm tính năng "toggle" vào một đoạn văn bản, làm cho nó ẩn hoặc hiện khi nút được nhấn jQuery giúp giảm sự phức tạp của việc viết mã JavaScript và tạo ra các tương tác trang web dễ dàng hơn

1.6 ISOTOPE

Isotope là một thư viện JavaScript hỗ trợ sắp xếp, lọc và chọn các phần tử trong một giao diện web một cách linh hoạt và mạnh mẽ Nó được sử dụng rộng rãi để tạo hiệu ứng lọc và sắp xếp mượt mà cho các danh mục, bảng tin, và các ứng dụng tương tự

❖ Ưu điểm

- Đa năng và linh hoạt: Isotope cung cấp khả năng tùy chỉnh mạnh mẽ, giúp tạo ra các bố cục đa dạng và linh hoạt mà không cần phải viết nhiều mã nguồn

- Tương thích đa nền tảng: Isotope hoạt động tốt trên mọi trình duyệt phổ biến và thiết bị di động, đảm bảo trải nghiệm người dùng mượt mà trên mọi nền tảng

- Hiệu suất tốt: Isotope được tối ưu hóa để hoạt động mượt mà với tập hợp lớn các phần tử, giúp tăng hiệu suất và độ ổn định của trang web

- Khả năng xung đột: Isotope có thể gây ra xung đột với các thư viện JavaScript khác trong trường hợp tích hợp phức tạp, đòi hỏi kiểm soát kỹ thuật

Chương 2 Ứng dụng xây dựng giao diện cho website

2.1 Giới thiệu website

Website dạy học trực tuyến là một nền tảng giáo dục trực tuyến dành cho học sinh, sinh viên, và giáo viên Nó giúp người dùng dễ dàng truy cập các khóa học, tài liệu học tập, và tương tác với giảng viên từ bất kỳ đâu, bất kỳ lúc nào

2.1.3 Các Điểm Nổi Bật Khác

• Đa Dạng Hóa Hình Thức Học: Trang web cung cấp nhiều phương pháp học, từ video giảng dạy, bài giảng trực tiếp, tài liệu học tập đến bài kiểm tra trực tuyến

• Hệ Thống Đánh Giá: Giúp đánh giá kiến thức và tiến trình học tập của học sinh và sinh viên

• Giao Diện Dễ Sử Dụng: Giao diện thân thiện, dễ sử dụng, đảm bảo người dùng có trải nghiệm tốt nhất

• Hỗ Trợ Công Nghệ: Sử dụng công nghệ HTML, CSS, Bootstrap, JavaScript và jQuery để xây dựng nền tảng ổn định và hiệu quả

2.2 Mô tả các chức năng chính của website

• Tạo Khóa Học: Chức năng tạo khóa học là trái tim của nền tảng dạy học trực tuyến Nó mang tính quyết định cho cả giảng viên và người quản lý Giảng viên có khả năng tạo các khóa học mới dựa trên nội dung môn học mà họ đang giảng dạy Chức năng này cho phép họ đặt tên cho khóa học, cung cấp mô tả chi tiết về nội dung và mục tiêu học tập, lựa chọn môn học tương ứng, và thiết lập thời gian học tập cho từng khóa học Điều này giúp tạo ra các khóa học tùy chỉnh và phù hợp với nhu cầu cụ thể của học sinh

• Quản Lý Nội Dung Khóa Học: Sau khi tạo khóa học, giảng viên có thể dễ dàng thêm nhiều bài giảng, tài liệu học tập, video, và bài kiểm tra vào bên trong khóa học Họ có toàn quyền chỉnh sửa nội dung, xóa bỏ nội dung không cần thiết, và thiết lập thời gian học tập cho từng bài giảng Điều này giúp họ tổ chức nội dung học tập một cách logic và truyền đạt hiệu quả đến học sinh Ngoài ra, nó tạo sự linh hoạt cho việc cập nhật và điều chỉnh nội dung dựa trên tiến trình học tập và phản hồi từ học sinh

• Lên Lịch Học Tập: Một tính năng quan trọng khác trong quản lý khóa học là khả năng lên lịch học tập Giảng viên có thể dễ dàng thiết lập thời gian bắt đầu và kết thúc của mỗi khóa học, xác định tần suất học, và cho phép học sinh ghi danh vào các buổi học Thông qua giao diện dễ sử dụng, học sinh có thể

dễ dàng xem thời gian học tập và tự chọn lịch trình phù hợp với họ Điều này tạo sự linh hoạt cho việc học tập và cho phép học sinh tự quản lý thời gian • Ghi Danh và Học Tập: Với tính năng này, học sinh có thể dễ dàng ghi danh

vào các khóa học mà họ quan tâm Sau khi ghi danh, họ có quyền truy cập vào bài giảng trực tuyến qua video hoặc vào tài liệu học tập được cung cấp bởi giảng viên Học sinh có thể theo dõi tiến trình học tập của họ, xem thông tin chi tiết về từng buổi học, và thậm chí là lập kế hoạch học tập tương lai Điều này giúp học sinh tự quản lý học tập một cách hiệu quả và đảm bảo họ không bỏ lỡ bất kỳ nội dung nào trong khóa học

2.2.2 Chức Năng Tương Tác Giữa Giảng Viên và Học Sinh

Để đảm bảo hiệu suất học tập cao và tạo môi trường học tập trực tuyến chất lượng, trang web dạy học trực tuyến cung cấp nhiều chức năng tương tác giữa giảng viên và học sinh Dưới đây là một số tính năng quan trọng:

• Thảo Luận Theo Khóa Học: Học sinh có thể tham gia vào các diễn đàn thảo luận cụ thể cho từng khóa học Họ có khả năng tạo chủ đề thảo luận, đặt câu hỏi, chia sẻ ý kiến, và học hỏi từ các đồng học Điều này tạo môi trường trao đổi thông tin và ý kiến giữa học sinh, giảng viên và đồng học, giúp bổ sung kiến thức và thảo luận về các chủ đề quan trọng

• Giảng Viên Tham Gia: Giảng viên có khả năng tham gia vào các thảo luận, theo dõi hoạt động của diễn đàn, và giải đáp các câu hỏi của học sinh Việc tham gia chủ đạo của giảng viên trong diễn đàn thảo luận giúp xây dựng môi trường học tập trực tuyến đầy đủ sự tương tác và hỗ trợ Ngoài ra, giảng viên còn có khả năng đăng thông báo quan trọng và cung cấp tài liệu bổ sung qua diễn đàn

• Tạo Bài Kiểm Tra: Giảng viên có khả năng tạo bài kiểm tra trực tuyến với nhiều loại câu hỏi khác nhau, bao gồm trắc nghiệm, tự luận, và nhiều loại khác Họ có quyền đặt thời gian làm bài và số lần làm lại cho bài kiểm tra Điều này giúp tạo ra các bài kiểm tra đa dạng và thú vị cho học sinh, đồng thời cho phép tự động chấm điểm và cung cấp kết quả ngay sau khi hoàn thành bài kiểm tra

• Xem Kết Quả Ngay Lập Tức: Học sinh có khả năng làm bài kiểm tra trực tuyến và nhận kết quả ngay sau khi hoàn thành Điều này giúp giảng viên và học sinh theo dõi tiến trình học tập và đánh giá hiệu suất một cách nhanh chóng Ngoài ra, học sinh có thể xem lại các câu hỏi và đáp án, cải thiện kiến thức bản thân và chuẩn bị cho bài kiểm tra tiếp theo

• Gửi Thông Điệp: Học sinh có khả năng gửi tin nhắn trực tiếp tới giảng viên để đặt câu hỏi hoặc yêu cầu hỗ trợ Điều này giúp học sinh cảm thấy được chăm sóc và hỗ trợ trong quá trình học tập

• Chia Sẻ Tài Liệu: Học sinh có khả năng chia sẻ tài liệu, hình ảnh hoặc các tài liệu liên quan khác với giảng viên để đạt được sự hiểu biết tốt nhất Điều này hỗ trợ trong việc gửi bài tập, chia sẻ ví dụ, và tương tác một cách hiệu quả trong quá trình học

• Chat Trực Tuyến: Giảng viên và học sinh có khả năng kết nối trực tiếp thông qua chức năng chat trực tuyến Điều này giúp giảng viên giải quyết vấn đề và hỗ trợ học sinh một cách nhanh chóng Nó tạo ra một môi trường tương tác thời gian thực, cho phép giảng viên và học sinh trao đổi ý kiến, giải đáp thắc mắc, và tạo mối kết nối

2.2.3 Thiết kế giao diện

❖ Giao diện Trang chủ:

- Giao diện cho máy tính:

- Giao diện cho iPad:

- Giao diện cho Mobile:

• Mô tả chi tiết

Chức năng của giao diện Các trường thông tin Kịch bản sử dụng - Hiển thị thanh điều

hướng

- Lời chào đến người sử dụng

- Hiển thị các khóa học nổi bật

- Hiển thị giáo viên nổi bật

- Hiển thị các thể loại nổi bật

- Khóa Học Nổi Bật: Mỗi khóa học nổi bật sẽ có tiêu đề, hình ảnh minh họa, giáo viên, và nút "Chi Tiết" để xem thông tin chi tiết

- Top Giáo Viên: Mỗi giáo viên hàng đầu sẽ có hình ảnh, tên, chuyên môn

- Top Category: Danh sách các danh mục sẽ bao gồm tên danh mục

- Thanh Điều Hướng: Thanh điều hướng sẽ bao gồm các liên kết đến các trang quan trọng

- Người Dùng Xem Khóa Học: Người dùng có thể nhấn vào nút "Chi Tiết" để xem thông tin chi tiết về một khóa học nổi bật - Người Dùng Tìm Khóa Học Theo Danh Mục: Người dùng có thể chọn một danh mục từ danh sách "Top Category" để tìm kiếm khóa học thuộc danh mục đó

- Người Dùng Di Chuyển Đến Các Trang Quan Trọng Khác: Người dùng có thể sử dụng thanh điều hướng để di chuyển đến các trang như "Khóa Học," "Giáo Viên," "Danh Mục," "Đăng Nhập," và "Đăng Ký."

❖ Giao diện Trang Khóa Học:

Khi người dùng bấm vào nút “Xem thêm” ở khóa học nổi bật thì sẽ được chuyển hướng sang trang Khóa học

- Giao diện cho máy tính:

Giao diện cho iPad:

Giao diện cho Mobile:

• Mô tả chi tiết

Chức năng của giao diện Các trường thông tin Kịch bản sử dụng - Hiển thị danh sách các

khóa học với chi tiết và các tùy chọn xem chi tiết và thêm vào giỏ hàng

- Tiêu Đề Trang: Hiển thị tiêu đề của trang hiển thị khóa học

- Danh Sách Khóa Học: Liệt kê các khóa học với hình ảnh, tên khóa học - Thanh Điều Hướng

- Người Dùng Truy Cập Trang Khóa học: Người dùng truy cập trang và xem danh sách khóa học - Người dùng có thể xem chi tiết khóa học hoặc thêm khóa học vào

giỏ hàng khi họ chọn khóa học

- Người dùng nhấn nút để xem chi tiết khóa học và xem đầy đủ mô

tả, giá cả, và các tùy chọn khác

❖ Giao diện trang chi tiết khóa học:

Khi người dùng bấm vào khóa học ở trang khóa học thì sẽ được chuyển hướng sang trang Chi tiết khóa học

- Giao diện cho máy tính:

- Giao diện cho iPad:

- Giao diện cho Mobile:

• Mô tả chi tiết

Chức năng của giao diện Các trường thông tin Kịch bản sử dụng - Hiển thị chi tiết khóa học - Tiêu Đề Trang: Hiển thị

tiêu đề của trang chi tiết khóa học

- Hiển thị chi tiết khóa học như tên, hình ảnh, giá, mô tả, đánh giá

- Thanh Điều Hướng

- Người Dùng Truy Cập Trang Chi Tiết Khóa học xem thông tin chi tiết khóa học

- Người dùng có thêm khóa học vào giỏ hàng - Người dùng mua khóa học

❖ Trang web giới thiệu:

Khi người dùng bấm vào trang giới thiệu trên thanh điều hướng thì sẽ chuyển sang trang giới thiệu