NGHIÊN CỨU VÀ TRIỂN KHAI HỆ THỐNG DẠY HỌC TRỰC TUYẾN TRÊN NỀN TẢNG CÔNG NGHỆ MOODLE

Thiết kế Swing GUI trên giao diện được trình bày trực quan cho phép kéo và thả các thành phần cần thiết vào một khung hình, sau đó tiếp tục với các tính năng JLabels, JButtons, JTextFiel

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

BÁO CÁO TỔNG KẾT

ĐỀ TÀI KHOA HỌC VÀ CÔNG NGHỆ CẤP TRƯỜNG

NGHIÊN CỨU VÀ TRIỂN KHAI HỆ THỐNG

DẠY HỌC TRỰC TUYẾN TRÊN NỀN TẢNG

CÔNG NGHỆ MOODLE

Mã số: T2019 – 06 – 133

CHỦ NHIỆM ĐỀ TÀI: THS NGUYỄN VĂN PHÁT

BÁO CÁO TỔNG KẾT

ĐỀ TÀI KHOA HỌC VÀ CÔNG NGHỆ CẤP TRƯỜNG

NGHIÊN CỨU VÀ TRIỂN KHAI HỆ THỐNG DẠY HỌC TRỰC TUYẾN TRÊN NỀN TẢNG

CÔNG NGHỆ MOODLE

Mã số: T2019 – 06 – 133

Xác nhận của cơ quan chủ trì đề tài Chủ nhiệm đề tài

(ký, họ và tên, đóng dấu) (ký, họ và tên)

ĐÀ NẴNG, 08/2020

MỞ ĐẦU .1

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 3

1.1 Phần mềm 3

IDE NetBean 7.4 3

Hệ quản trị cơ sở dữ liệu MySQL 4

Hệ quản trị cơ sở dữ liệu MariaDB 4

Moodle 7

1.2 Công nghệ 11

Những điểm khác và nổi bật của HTML5 và CSS3 11

Công nghệ Responsive 21

Công nghệ Web PHP MVC 29

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 36

2.1 Phân tích bài toán 36

2.2 Phân tích các chức năng 36

Quản lý tài khoản 36

Quản lý môn học 36

Quản lý câu hỏi 36

Xem kết quả 36

Tra cứu thông tin 37

Thông báo 37

Nhắn tin 37

2.3 Sơ đồ USECASE 37

Danh sách các Actor và hành động của từng Actor 37

Sơ đồ UseCase của hệ thống 39

Sơ đồ UseCase ứng với tác nhân Giảng viên 40

2.4 Sơ đồ hệ thống tuần tự 43

Sơ đồ quản lý thành viên 43

Sơ đồ tuần tự đăng ký môn học 44

2.5 Sơ đồ dữ liệu 44

Sơ đồ dữ liệu của khóa học 44

Sơ đồ dữ liệu của tài khoản User 45

CHƯƠNG 3 TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 46

3.1 Cơ sở hạ tầng triển khai 46

IIS windows 46

Site bindings windows 46

3.2 Thiết kế giao diện 47

Trang chủ của hệ thống 47

Trang đăng nhập hệ thống 47

Trang quản trị hệ thống 48

Trang quản lý thành viên 48

Trang quản trị khóa học 50

Trang quản lý Module 52

Trang quản lý Máy chủ 52

Trang các chức năng của Giảng viên 53

Trang các chức năng của Sinh viên 53

3.3 Sơ đồ chức năng hệ thống 54

Chức năng của quản trị viên 54

Chức năng của giảng viên 55

Chức năng của sinh viên 55

3.4 Đánh giá kết quả 55

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 57

TÀI LIỆU THAM KHẢO 58

Hình 1.1 Phiên bản Moodle được sử dụng 8

Hình 1.2 Kiến trúc hạ tầng của Moodle 8

Hình 1.3 So sánh giữa HTML4 với HTML5 12

Hình 1.4 Màn hình của các thiết bị 23

Hình 1.5 Navigation Menus - Dạng Dropdown cho màn hình nhỏ 29

Hình 1.6 Sơ đồ MVC 29

Hình 2.1 Sơ đồ UseCase của hệ thống 39

Hình 2.2 Sơ đồ UseCase ứng với tác nhân Giảng viên 40

Hình 2.3 Sơ đồ UseCase ứng tới tác nhân Sinh viên 40

Hình 2.4 Sơ đồ UseCase Tra cứu thông tin 41

Hình 2.5 Sơ đồ UseCase Thông báo 41

Hình 2.6 Sơ đồ tuần tự quản lý thành viên 43

Hình 2.7 Sơ đồ tuần tự đăng ký môn học 44

Hình 2.8 Sơ đồ dữ liệu của khóa học 44

Hình 2.9 Sơ đồ dữ liệu của quản lý tài khoản 45

Hình 3.1 Dịch vụ IIS 46

Hình 3.2 Handler mappings 46

Hình 3.3 Trang chính 47

Hình 3.4 Trang đăng nhập hệ thống 47

Hình 3.5 Trang quản trị hệ thống 48

Hình 3.6 Trang quản lý thành viên 48

Hình 3.7 Trang xem danh sách thành viên 49

Hình 3.8 Trang quản lý hồ sơ cá nhân 49

Hình 3.11 Quản lý các trương mục 51

Hình 3.12: Trang tạo môn học 51

Hình 3.13 Trang quản lý module 52

Hình 3.14 Trang quản lý Máy chủ 52

Hình 3.15 Trang chức năng của Giảng viên 53

Hình 3.16 Trang chức năng của Sinh viên 53

Hình 3.17 Sơ đồ chức năng tổng quát 54

Hình 3.18 Sơ đồ chức năng quản trị viên 54

Hình 3.19 Sơ đồ chức năng của Giảng viên 55

Hình 3.20 Sơ đồ chức năng sinh viên 55

MỞ ĐẦU

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực đề tài

Hiện nay trên thế giới có nhiều chương trình dạy học trực tuyến, bao gồm hỗ trợ người dùng việc đăng ký tham gia khóa học cũng như đăng ký tham gia học trực tuyến Tuy nhiên, đối tượng đăng ký tham gia phải nằm trong tổ chức hay trong lĩnh vực hoạt động giáo dục hoặc đối tượng sử dụng hình thức trả phí (thanh toán trực tuyến) thì mới được cấp mã để đăng ký tham gia khóa học hoặc đăng ký học trực tuyến Như vậy, việc ứng dụng sẽ hạn chế đối tượng đăng ký tham gia hơn

Hình thức dạy học trực tuyến là hình thức dạy học đã được sử dụng phổ biến và

là hình thức có tính khoa học và thuận tiện cao nên đang được chọn một trong những

là hình thức dạy học tại các trường Đại học và Cao đẳng Tuy nhiên, khi triển khai còn nhiều hạn chế do chưa áp dụng các công nghệ mới vào việc ứng dụng và triển khai trên hệ thống nên kết quả đạt được như chưa mong muốn Vì vậy, cần phải xây dựng Hệ thống dạy học trực tuyến trên nền tảng công nghệ Moodle

2 Tính cấp thiết khi chọn đề tài

Hiện nay, tại trường Đại học Sư phạm Kỹ Thuật – ĐHĐN, việc tổ chức và quản

lý dạy học còn nhiều hạn chế do áp dụng đổi mới công nghệ thông tin còn chậm, giảng viên chưa áp dụng nhiều công nghệ vào trong hoạt động dạy học Tôi đề xuất nghiên cứu và triển khai “Nghiên cứu và triển khai hệ thống dạy học trực tuyến trên nền tảng Moodle” hỗ trợ tốt hơn cho giảng viên và sinh viên trong hoạt động dạy học

3 Mục tiêu đề tài

- Nghiên cứu công nghệ Web PHP MVC

- Cài đặt và cấu hình Moodle trên hệ thống Windows Server

- Xây dựng giao diện cơ bản

- Tổ chức quản trị hệ thống: tạo tài khoản quản lý, giảng viên và sinh viên

- Tổ chức quản lí khóa học: tạo mới, cập nhật các module hỗ trợ hoạt động dạy học

4 Đối tượng và phạm vi nghiên cứu

- Đối tượng nghiên cứu là cán bộ giảng dạy và sinh viên

5 Phương pháp nghiên cứu

- Nghiên cứu công nghệ PHP MVC, MySQL và Responsive

6 Đặc tả phần mềm

- Tất cả các chức năng của phần mềm phải được ủy quyền, phân quyền

- Ứng dụng có thể sử dụng ở bất kì vị trí nào khi có kết nối internet

- Ứng dụng xây dựng với ngôn ngữ PHP 5.4, quản trị cơ sở dữ liệu MariaDB,

sử dụng công nghệ HTLM5, CSS3, Moodle 3.8 và Responsive

7 Nội dung và kết cấu báo cáo

Báo cáo gồm 3 phần: Mở đầu, nội dung, kết luận Phần nội dung gồm 3 chương:

- CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

- CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

- CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Phần mềm

IDE NetBean 7.4

Netbeans IDE là phần mềm IDE miễn phí được tạo ra bởi Sun Microsystems và Netbeans IDE được phát triển mới mục đích ban đầu chủ yếu để giúp các lập trình viên xây dựng ứng dụng Java tuy nhiên sau đó nó đã được mở rộng để hỗ trợ sử dụng cho phát triển các ứng dụng PHP, C, C++ và HTML5 (bao gồm Javascript và CSS) Giao diện NetBeans IDE là một bộ sưu tập các cửa sổ Thiết kế Swing GUI trên giao diện được trình bày trực quan cho phép kéo và thả các thành phần cần thiết vào một khung hình, sau đó tiếp tục với các tính năng JLabels, JButtons, JTextFields để chỉnh sửa văn bản trực tiếp tại chỗ

NetBean IDE tạo liên kết với các bộ máy thông tin lớn như Amazon, Facebook, Google và các trang web phổ biến khác giúp bạn đi sâu tìm hiểu các chức năng của chúng Đồng thời chương trình còn cho phép kéo thả một chức năng từ các dịch vụ này vào một dữ liệu của ngôn ngữ PHP và viết tất cả các mã cần thiết cho bạn biết các chức năng dịch vụ web từ các bộ máy này

NetBeans IDE hổ trợ gỡ lỗi trên máy chủ thuộc hệ thông mạng nội bộ và hỗ trợ từ xa, chương trình sẽ cung cấp cho bạn các hiển thị và thông báo chi tiết dưới dạng bảng biểu trong một cửa sổ riêng biệt NetBean IDE cung cấp tính năng mới như tìm kiếm nhanh (QuickSearch), tự động biên dịch, hỗ trợ cho web framework (Hibernate, Spring, JSF, JPA), trình ứng dụng máy chủ GlassFish và cơ sở dữ liệu

NetBean IDE được chia thành nhiều gói khác nhau để người dùng có thể tải về từng phần, tiết kiệm dung lượng, tùy theo nhu cầu của mình Ví dụ như, lập trình PHP thì hãy tải gói HTML 5 & PHP để máy tính vẫn có thể chạy êm mượt và tốc độ cao

Các tính năng chính của phần mềm:

• Công cụ lập trình phần mềm, thiết bị di động, máy tính để bàn

• Hỗ trợ các ngôn ngữ Python, Ruby, JavaScript, Groovy, C / C + +, và PHP

• Chức năng kéo thả câu lệnh và văn bản vào giao diện chương trình

• Thử nghiệm xây dựng giao diện đồ họa

• Gỡ lỗi mạng nội bộ và từ xa

• Giao diện trực quan, dể sử dụng

Hệ quản trị cơ sở dữ liệu MySQL

MySQL 5.5 là một hệ thống quản lý cơ sở dữ liệu quan hệ nhanh và dễ dàng để

sử dụng MySQL đang được sử dụng cho nhiều công việc kinh doanh từ lớn tới nhỏ MySQL được phát triển, được công bố, được hỗ trợ bởi MySQL AB, là một công ty của Thụy Điển MySQL trở thành khá phổ biến vì nhiều lý do:

• Mã ngồn mở và một chương trình rất mạnh mẽ Sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL

• Làm việc trên nhiều Hệ điều hành và với nhiều ngôn ngữ như PHP, PERL, C, C++, Java, …

• Rất thân thiện với PHP, một ngôn ngữ rất đáng giá để tìm hiểu để phát triển Web

• Hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơn nữa trong một bảng Kích cỡ file mặc định được giới hạn cho một bảng là 4 GB, nhưng bạn có thể tăng kích cỡ này (nếu hệ điều hành của bạn có thể xử lý nó) để đạt tới giới hạn lý thuyết là 8 TB

• Có thể điều chỉnh Giấy phép GPL mã nguồn mở cho phép lập trình viên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể của họ

• Tùy chọn “tái tạo bán đồng bộ” (semi-synchronous replication), giúp đảm bảo cho giao dịch CSDL chỉ hoàn thành sau khi dữ liệu sao lưu đã được tạo ra

• MySQL 5.5 cũng sẽ hỗ trợ phương pháp chuẩn ANSI/ISO SQL tên là Signal/Resignal (dùng để trả về lỗi của các thủ tục SQL); cú pháp phân chia (partitioning syntax) cũng được cải thiện; thêm nhiều hỗ trợ cho XML; có nhiều lỗi được sửa cùng một số thay đổi khác

Hệ quản trị cơ sở dữ liệu MariaDB

MariaDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở (DBMS), được hỗ trợ về

theo Giấy phép Công cộng GNU Sự phát triển được dẫn dắt bởi một số nhà phát triển ban đầu của MySQL, những người đã tách nó ra do lo ngại về việc mua lại bởi Tập đoàn Oracle vào năm 2009 MariaDB được dẫn dắt bởi Michael “Monty” Widenius, developer hàng đầu về MySQL

Vào tháng 12 năm 2012, Michael Widenius, David Axmark và Allan Larsson đã công bố việc thành lập một quỹ giám sát sự phát triển của MariaDB Năm 2019 đến nay, Kaj Arnö tham gia với tư cách là Giám đốc điều hành và Eric Herman là Chủ tịch hội đồng quản trị

MariaDB có thể cài đặt trên các hệ điều hành Linux CentOS, Ubuntu và Window MariaDB được phát triển nhằm thay thế công nghệ cơ sở dữ liệu MySQL, vì thế nó tương thích và cho một hiệu suất cao hơn so với MySQL

MariaDB có các phiên bản cho các hệ điều hành khác nhau: Windows, Linux, với các gói cài đặt tar, zip, MSI, rpm cho cả 32bit và 64bit Hiện tại phiên bản mới nhất của MariaDB là 10.5

Nó cung cấp hỗ trợ cho cả dữ liệu nhỏ nhiệm vụ xử lý và nhu cầu của doanh nghiệp Nó nhằm mục đích trở thành một sự thay thế cho MySQL chỉ yêu cầu gỡ cài đặt MySQL đơn giản và cài đặt MariaDB MariaDB cung cấp các tính năng tương tự của MySQL và hơn thế nữa

1.1.3.1 Các tính năng chính của MariaDB

• Tất cả MariaDB đều theo GPL, LGPL hoặc BSD

• MariaDB bao gồm nhiều lựa chọn công cụ lưu trữ, bao gồm cả hiệu suất cao công cụ lưu trữ, để làm việc với các nguồn dữ liệu RDBMS khác

• MariaDB sử dụng một ngôn ngữ truy vấn chuẩn và phổ biến

• MariaDB chạy trên một số hệ điều hành và hỗ trợ nhiều loại ngôn ngữ lập trình

• MariaDB cung cấp hỗ trợ cho PHP, một trong những phát triển web phổ biến nhất ngôn ngữ

• MariaDB cung cấp công nghệ cụm Galera

MariaDB Platform là giải pháp cơ sở dữ liệu mã nguồn mở hoàn chỉnh dành cho doanh nghiệp Nó có tính linh hoạt để hỗ trợ khối lượng công việc giao dịch, phân tích và kết hợp cũng như các mô hình dữ liệu quan hệ, JSON và kết hợp Và nó có khả năng mở rộng để phát triển từ cơ sở dữ liệu và kho dữ liệu độc lập sang SQL được phân phối đầy đủ để thực hiện hàng triệu giao dịch mỗi giây và thực hiện phân tích tương tác, đặc biệt trên hàng tỷ hàng

1.1.3.2 Các ưu điểm nổi trội

• MariaDB hiện cung cấp kiểm tra đặc quyền nhanh hơn nhiều cho các thiết lập với nhiều tài khoản người dùng hoặc nhiều cơ sở dữ liệu

• Lệnh FLUSH SSL mới cho phép tải lại chứng chỉ SSL mà không cần khởi động lại máy chủ

• Sao chép nhanh hơn và an toàn hơn: Cam kết nhóm cho nhật ký nhị phân Điều này làm cho nhiều thiết lập sử dụng bản sao và nhiều bản cập nhật nhanh hơn gấp 2 lần

• Cải tiến cho hệ thống con IO không đồng bộ InnoDB trên Windows

• Chỉ mục cho công cụ MEMORY (HEAP) nhanh hơn Theo một thử nghiệm đơn giản, INSERT nhanh hơn 24% cho chỉ mục số nguyên và nhanh hơn 60% cho chỉ mục trên cột CHAR (20) Đã sửa trong MariaDB 5.5 và MySQL 5.7

• Cải thiện hiệu suất của các chuyển đổi bộ ký tự (và loại bỏ các chuyển đổi khi chúng không thực sự cần thiết) Cải thiện tốc độ tổng thể là 1-5% (theo sql-bench) nhưng có thể cao hơn đối với các tập kết quả lớn có tất cả các ký tự trong khoảng 0x00-0x7f

• Một số cải tiến tốc độ khi máy khách kết nối với MariaDB Nhiều cải tiến đã được thực hiện trong MariaDB 10.1 và MariaDB 10.2

• Có một số cải tiến đối với mã DBUG để làm cho việc thực thi mã nhanh hơn khi gỡ lỗi được biên dịch nhưng không được sử dụng

• Việc sử dụng công cụ lưu trữ Aria, cho phép các truy vấn phức tạp nhanh hơn (các truy vấn thường sử dụng bảng tạm thời dựa trên đĩa) Công cụ lưu trữ Aria được

sử dụng cho các bảng tạm thời bên trong, giúp tăng tốc khi thực hiện các lựa chọn phức tạp Aria thường nhanh hơn đối với các bảng tạm thời khi so sánh với MyISAM

vì Aria lưu trữ dữ liệu hàng trong bộ nhớ và thông thường không phải ghi các hàng tạm thời vào đĩa

• Bộ thử nghiệm đã được mở rộng và hiện chạy nhanh hơn nhiều so với trước đây, mặc dù nó thử nghiệm nhiều thứ hơn

1.1.3.3 Các điểm tương đồng với MySQL

- MariaDB là một bản thay thế nhị phân, tương thích ngược của MySQL Điều này có nghĩa là:

• Tệp dữ liệu và tệp định nghĩa bảng (.frm) tương thích với hệ nhị phân

• Tất cả các API khách hàng, giao thức và cấu trúc đều giống hệt nhau

• Tất cả tên tệp, mã nhị phân, đường dẫn, cổng, ổ cắm, v.v phải giống nhau

• Tất cả các kết nối MySQL hoạt động không thay đổi với MariaDB

• Gói mysql-client cũng hoạt động với máy chủ MariaDB

- Trong hầu hết các tình huống thực tế phổ biến, MariaDB phiên bản 5.x.y sẽ hoạt động giống hệt như MySQL 5.x.y, MariaDB tuân theo phiên bản MySQL, tức là

số phiên bản được sử dụng để cho biết phiên bản MySQL nào mà nó tương thích

Moodle

Moodle là một hệ thống quản lý học tập (Learning Management System - LMS

hoặc còn gọi là Course Management System hoặc VLE - Virtual Learning Environment) mã nguồn mở (do đó miễn phí và có thể chỉnh sửa được mã nguồn), cho phép tạo các khóa học trên mạng Internet hay các website học tập trực tuyến Moodle (Môi trường học động hướng đối tượng theo mô-đun) được thành lập vào năm 1999 bởi Martin Dougiamas Đến nay, 240 quốc gia đã đăng ký với 158.000 trang web, 29.000.000 khóa học, 225.000.000 tài khoản người dùng và 495.000.000 bài đăng trên diễn đàn

Moodle nổi bật là thiết kế hướng tới giáo dục, dành cho những người làm trong lĩnh vực giáo dục Moodle rất dễ dùng với giao diện trực quan, giáo viên chỉ mất một thời gian ngắn để làm quen và có thể sử dụng thành thạo Giáo viên có thể tự cài và nâng cấp Moodle Moodle phù hợp với nhiều cấp học và hình thức đào tạo: phổ thông,

Do thiết kế dựa trên module nên Moodle cho phép bạn chỉnh sửa giao diện bằng cách dùng các theme có trước hoặc tạo thêm một theme mới cho riêng mình

Moodle phát triển dựa trên PHP (Ngôn ngữ được dùng bởi các công ty Web lớn như Yahoo, Flickr, Baidu, Digg, CNET) có thể mở rộng từ một lớp học nhỏ đến các trường đại học lớn trên 50 000 sinh viên Moodle với các database mã nguồn mở như MySQL, PostgreSQL, Microsoft SQL Server, MariaDB, hoặc Oracle

Hình 1.1 Phiên bản Moodle được sử dụng

1.1.4.1 Cấu trúc hệ thống

• Moodle is programmed by PHP programming language, the database is managed by MySQL, Micsrosoft SQL Server, MariaDB, Oracle WebServer can be deployed with WebServer, Apache, IIS

3.9 33%

3.8 28%

3.7 8%

3.6 7%

3.5 8%

3.4 4%

3.3 2%

khác 10%

- Cơ sở hạ tầng cần thiết để xây dựng LMS, bao gồm:

• Các khóa học và hoạt động: Các khóa học được tổ chức thành các loại phân cấp

Có các hoạt động và tài nguyên trong mỗi khóa học

• Người dùng: Để tham gia khóa học, người dùng cần đăng ký với 2 vai trò nhất định (Giảng viên và Học viên)

• Đăng ký khóa học: Đăng ký người dùng tham gia khóa học

• Chức năng của người dùng: Các vai trò, khả năng và quyền được hệ thống cấp cho người dùng để thực hiện các hành động trong khóa học và hệ thống

• Tiện ích bổ sung: Quản lý hồ sơ người dùng Người dùng đăng ký các khóa học

và nhóm; họ có quyền truy cập hạn chế vào hệ thống

• Nâng cấp Moodle: Moodle đảm bảo máy chủ Server có thể cài đặt và cập nhật phiên bản mới nhất

• Nhật ký và thống kê trong Moodle: Hệ thống cung cấp các biểu đồ, số liệu thống

kê của hệ thống trong quá trình hoạt động

1.1.4.2 Các module quan trọng

• Các plugin trong Moodle thuộc các loại cụ thể Một plugin xác thực và một mô-đun hoạt động sẽ giao tiếp với lõi Moodle bằng cách sử dụng các API khác nhau, được điều chỉnh cho phù hợp với loại chức năng mà plugin cung cấp Tuy nhiên, chức năng chung cho tất cả các plugin (cài đặt, nâng cấp, quyền, cấu hình, ) được xử lý nhất quán trên tất cả các loại plugin

• Hoạt động và tài nguyên: các thành phần cơ bản tạo nên khóa học và công cụ quan trọng nhất Các plugin này nằm trong thư mục mod của Moodle

• Chủ đề: Phong cách và hình ảnh tổng thể của các cấp độ của trang web có thể được thay đổi và cập nhật bằng cách chọn một chủ đề cụ thể

• Định dạng khóa học: định dạng khóa học trong thư mục khóa học với một chuỗi các hoạt động

• Các plugin xác thực: có chức năng kiểm soát thông tin người dùng như: tên, mật khẩu

• Các plugin đăng ký: thực hiện đăng ký và chức năng tuyển sinh trong các khóa

1.1.4.3 Ưu điểm của dạy học trực tuyến trên nền tảng Moodle

- Phần mềm có tính cấu hình cao: Hệ thống dạy học trực tuyến Moodle là một phần mềm mã nguồn mở, Moodle thay đổi liên tục hàng năm, với những cải tiến đặc biệt được tích hợp trong các phiên bản mới nhất, từ cộng đồng các nhà phát triển trên toàn thế giới Vì các yêu cầu về học tập / đào tạo và phát triển thay đổi các mục tiêu của tổ chức, Moodle cho phép thực hiện các chỉnh sửa đối với phần mềm Thêm các plugin Moodle cần thiết, chủ đề hoặc bất cứ thứ gì

- Sử dụng ngôn ngữ lập trình PHP: PHP được biết đến với việc triển khai và thực hiện dễ dàng Điều đó có nghĩa là ngôn ngữ này mở đường hoàn hảo cho các khả năng

và chức năng mở rộng vô tận trong tương lai Tính linh hoạt của nó có thể chạy trên mọi nền tảng như Linux, Unix, Windows, macOS và thậm chí trên Ubuntu mới đã khiến PHP trở thành lựa chọn ưu tiên để viết phần mềm Moodle LMS

- Các plugin: Thư mục plugin Moodle có khoảng 1601 plugin và chúng được tải xuống 366,6K lần Những tiện ích bổ sung này cung cấp cho chúng ta sự linh hoạt tuyệt vời; bất cứ khi nào bạn muốn nâng cao LMS của mình, bạn có thể thêm chúng Hơn nữa, một số tiện ích bổ sung cho Moodle có sẵn trên thị trường Các plugin chẳng hạn như - Edwiser RemUI, H5P, Congrea, Poodll, LearnerScript, v.v Các plugin như vậy sẽ không chỉ mang lại lợi thế cho nó so với các LMS khác mà còn biến nó thành một sự thay thế tuyệt vời

- Cộng đồng chuyên môn toàn cầu: Moodle có một mạng lưới mạnh mẽ gồm 88 đối tác và hàng trăm triệu người dùng, nhà phát triển, quản trị viên, giáo viên, v.v trên khắp thế giới Không có LMS nào khác có mạng lưới chuyên nghiệp đã cam kết như vậy ngoại trừ Moodle LMS

- Tính linh hoạt của loại đánh giá: Moodle cung cấp nhiều loại đánh giá khác nhau: bảng câu hỏi, câu đố, bài tập, đánh giá loại âm thanh và video, v.v tất cả đều miễn phí

- Các công cụ học phân tích: Với mục đích học tập phân tích, có nhiều công cụ phân tích và báo cáo có sẵn cho Moodle LMS Một số trong số chúng, như LearnerScript, thuộc về họ Moodle

- Hệ thống phản hồi: Nó giúp hiểu khóa học, giảng viên / giáo viên, phương pháp

sư phạm của giảng viên đang hoạt động như thế nào, mà nếu không thì không thể biết

được Phản hồi trong Moodle nhằm mục đích nâng cao chất lượng trong hoạt động dạy và học

• SVG, canvas và những hình dạng vector đều được hỗ trợ bởi HTML5, khi HTML nếu muốn sử dụng hình vector chỉ có thể dùng nó trong một công nghệ khác như, Flash, VML và silver light

• HTML5 sử dụng web SQL databases, application cache để lưu dữ liệu tạm, trong khi đó, HTML chỉ có cache của trình duyệt được dùng cho mục đích này

• Một khác biệt nữa giữa HTML và HTML5 đáng nhắc đến là HTML không cho phép JavaScript chạy trong web browser (thay vì vậy nó chạy trong interface thread của browser), trong khi đó HTML5 hỗ trợ hoàn toàn cho JavaScript để chạy nền (nhờ vào JS web worker API của HTML5)

• HTML5 không dựa trên SGML, cho phép nó tăng luật parsing, có thể tương thích mạnh mẽ hơn

• Trong HTML5, inline MathML và SVG có thể được dùng trong văn bản nơi mà không được hỗ trợ trong HTML

• Một số elements lỗi thời đã bị loại bỏ hoàn toàn là: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt

• HTML5 hỗ trợ nhiều loại điều khiển form, ví dụ: ngày giờ, email, số lượng, khoảng, số điện thoại, URL, tìm kiếm, vâng vâng

• Có nhiều element được giới thiệu trong HTML Một vài trong số chúng là quan trọng nhất: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video

Cách định nghĩa dựa trên vị trí :first-child, :last-child, :nth-child(an+b),

:first-of-type, :last-of-:first-of-type, :nth-of-:first-of-type, :nth-last-of-type

Hue có giá trị [0, 360], 0 = red, 120 = blue, 240 = green

Saturation, và Lightness có giá trị [0%, 100%]

Alpha là thông số cuối được thêm vào cách RGB và HSL quyết định đến độ

trong suốt của đối tượng hiển thì, có giá trị từ [0,1], do vậy có thể tạo ra những element trong suốt rất dễ dàng

Ưu điểm của HSL hơn RGB là nó là trực quan hơn rất nhiều: có thể đoán những màu sắc mà bạn muốn, và sau đó tinh chỉnh Nó cũng dễ dàng hơn để tạo ra bộ màu sắc phù hợp (bằng cách giữ cho màu sắc giống nhau và khác nhau nhẹ nhàng / bóng tối,

và độ bão hòa)

background Thiết lập tất cả các thuộc tính về background

background-clip Khai báo một khu vực dành để Painting trong

Background background-

background-position: left top, left top;

background-repeat: no-repeat, repeat;

padding: 75px;

}

Có thể xác định các kích cỡ khác nhau cho các hình ảnh khác nhau được sử dụng trên một nền bởi sử dụng thuộc tính background-size Cú pháp như sau:

o Boder Radius

boder-top-left-radius Xác định hình dạng của các đường

viền góc trên bên trái

boder-top-right-radius Xác định hình dạng của các đường

viền góc trên bên phải

border-bottom-left-radius Xác định hình dạng của các đường

viền góc dưới bên trái

border-bottom-right-radius Xác định hình dạng của các đường

viền góc dưới bên phải

Ví dụ:

Kết quả:

#multibackground {

background: url( /css/imalges/logo.png) left top no-repeat,

url( /css/images/boarder.png) right bottom no-repeat,

url( /css/images/css.gif) left top repeat;

background-size: 50px, 130px, auto;

}

#boder-radius { border: 2px solid red;

o Boder Images

border-image Một thuộc tính viết tắt để thiết lập tất cả các thuộc tính border-image

border-image-outset Chỉ định giá trị khu vực ảnh viền vượt ra ngoài vùng giới hạn của

vùng bao border-image-repeat Chỉ định ảnh viền nên được lặp đi lặp lại, tròn hoặc kéo dài

border-image-slice Được sử dụng để cắt Border Image thành các miếng mỏng

border-image-source Chỉ định đường dẫn tới hình ảnh để sử dụng như đường viền

border-image-width Chỉ định độ rộng của ảnh-viền

o Text

CSS3 bổ sung một số thuộc tính thường được sử dụng trong CSS3:

text-align-last Căn chỉnh dòng văn bản cuối cùng

text-emphasis Được sử dụng để nhấn mạnh phần văn bản nào đó

text-overflow Được sử dụng để xác định xem cách để báo cho người dùng biết

rằng có phần nội dung bị tràn ra khỏi khối mà không được hiển thị

word-break Được sử dụng để ngắt dòng dựa vào từ

word-wrap Được sử dụng để ngắt dòng và bao vào trên dòng tiếp theo

o Transform 2D / 3D

Cho phép xoay, kéo dãn, kéo nghiêng, phóng to các thành phần trên trang

Bảng dưới liệt kê một số giá trị thường được sử dụng trong 2D Transforms:

matrix(n,n,n,n,n,n) Được sử dụng để định nghĩa Matrix Transforms (dạng tịnh

tiến theo ma trận) với 6 giá trị translate(x,y) Được sử dụng để tịnh tiến phần tử theo trục x và trục y

translateX(n) Được sử dụng để tịnh tiến phần tử theo trục x

translateY(n) Được sử dụng để tịnh tiến phần tử theo trục y

scale(x,y) Được sử dụng để thay đổi độ rộng và chiều cao của phần tử

scaleX(n) Được sử dụng để thay đổi độ rộng của phần tử

scaleY(n) Được sử dụng để thay đổi chiều cao của phần tử

rotate(angle) Được sử dụng để quay phần tử dựa trên một góc (angle)

skewX(angle) Được sử dụng để định nghĩa Skew Transforms (dạng tịnh tiến

đối xứng lệch) cùng với trục x skewY(angle) Được sử dụng để định nghĩa Skew Transforms cùng với trục y Bảng dưới liệt kê các phương thức được sử dụng để gọi 3D Transform trong CSS3:

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Được sử dụng để tịnh tiến phần tử bởi sử dụng

16 giá trị của một ma trận translate3d(x,y,z) Được sử dụng để tịnh tiến phần tử theo trục x,

trục y và trục z translateX(x) Được sử dụng để tịnh tiến phần tử theo trục x translateY(y) Được sử dụng để tịnh tiến phần tử theo trục y translateZ(z) Được sử dụng để tịnh tiến phần tử theo trục z

scaleY(y) Được sử dụng để Scale Transform theo trục z rotateX(angle) Được sử dụng để Rotate Transform theo trục x rotateY(angle) Được sử dụng để Rotate Transform theo trục y rotateZ(angle) Được sử dụng để Rotate Transform theo trục z

hình ảnh hoặc tag (animation) animation-

mode

Xác định kiểu cho các phần tử khi các chuyển động không chạy (Khi nó dừng lại , hoặc khi nó bị trễ)

animation-iteration-count Xác định số lần một chuyển động được thực hiện

animation-name Xác định tên của @keyframes animation

Bảng các thuộc tính:

transition Một thuộc tính viết tắt để thiết lập cho 4 thuộc tính chuyển

đổi transition-property Xác định tên của thuộc tính CSS trong hiệu ứng của quá

trình chuyển đổi(none, width, height, all) transition-duration Xác định bao nhiêu giây hoặc mili giây một hiệu ứng chuyển

đổi hoàn thành transition-timing-

function Xác định đường cong tốc độ của hiệu ứng chuyển đổi

transition-delay Xác định khi nào hiệu ứng chuyển đổi sẽ bắt đầu

o Multi Column

Sắp xếp văn bản dưới dạng cấu trúc một bài báo

Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3:

column-count Được sử dụng để đếm số cột mà phần tử nên được phân chia thành column-fill Được sử dụng để xác định cách fill dữ liệu vào cột

column-gap Được sử dụng để xác định khoảng trống giữa các cột

column-rule Được sử dụng để xác định một số qui tắc

rule-color Được sử dụng để xác định qui tắc màu cho cột

rule-style Được sử dụng để xác định qui tắc style cho cột

rule-width Được sử dụng để xác định độ dày của đường nét

column-span Được sử dụng để xác định span giữa các cột

appearance Cho phép người dùng làm cho các phần tử như là các phần tử UI box-sizing Cho phép người dùng cố định các phần tử trên một khu vực

icon Được sử dụng để cung cấp Icon trên một khu vực

resize Được sử dụng để resize kích cỡ của phần tử trên một khu vực

outline-offset Được sử dụng để vẽ đằng sawu Outline

nav-down Được sử dụng để di chuyển xuống khi người dùng nhấn nút mũi

tên trỏ xuống trên bàn phím nav-left Được sử dụng để di chuyển sang trái khi người dùng nhấn nút mũi

tên trỏ sang trái trên bàn phím nav-right Được sử dụng để di chuyển sang phải khi người dùng nhấn nút mũi

tên trỏ sang phải trên bàn phím nav-up Được sử dụng để di chuyển lên khi người dùng nhấn nút mũi tên

Ví dụ: Sử dụng resize để thay đổi kích thước

đường viền

Vẽ một đường bên ngoài đường viền phần tử

Công nghệ Responsive

1.2.2.1 Khái niệm Responsive Web Design

Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và

phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí

kích thước và chiều của màn hình thiết bị

Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm

flexible grid, responsive image và CSS media query Khi người dùng chuyển từ máy

tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù

hợp với kích thước màn hình và kịch bản xử lý

1.2.2.2 Những khái niệm cơ bản trong thiết kế web đa nền tảng responsive:

• Thiết kế dạng lưới linh hoạt (Grid Based): Khái niệm này đã tồn tại từ lâu, thiết

kế dựa theo nguyên tắc cơ bản là canh đều Tập hợp các phần tử hiện thị nội dung

border : 1px solid black ;

outline: 1px solid red ;

/* Move the outline 15px away from

cục trang thiết kế có rất nhiều mẫu : 1-3-1 Columns ; 1-2-1 Columns; 1-2-1 Columns; 1-4 Columns; 1-3-2 Columns…

• Ngôn ngữ đánh dấu HTML5: Phiên bản kế tiếp của HTML 4.01 do tính chất khả

mở và phù hợp nên thế giới công nghệ tiếp tục phát triển lên HTML5, ngôn ngữ đánh dấu này chúng ta đã tiếp cận nó từ lâu khi thế giới internet phát triển đến ngày nay

• Bảng kiểu định dạng CSS3: Là bảng kiểu định dạng phiên bản kế tiếp của CSS2

được W3C và cộng đồng công nghệ phát triển Vai trò của nó hỗ trợ xử lý định dạng cho trang HTML được thẩm mỹ đẹp hơn khi thể hiện thông tin trên các trình duyệt như font chữ, màu chữ, kiểu nền, phối màu, các định dạng dữ liệu đa phương tiện media queries…

• Nền tảng Frameworks JavaScript: là ngôn ngữ kịch bản được dùng để thực thi

tập các tác vụ nào đó cho ứng dụng web Ngôn ngữ này được xử dụng áp dụng phổ biến và được giới công nghệ phát triển thành các nền tảng Frameworks khác nhau như: AngularJS, Modernizr, jQuery, and jQuery Mobile…

Cơ chế hiển thị của Web responsive

Khi nhận một yêu cầu vào website do người dùng gửi tới, máy chủ chứa website sẽ gửi trả trang web với nội dung giống nhau đến tất cả các thiết bị Tuy nhiên máy chủ chứa website sẽ phân tích xem người dùng đang sử dụng loại thiết bị gì và trình duyệt web gì và dựa vào đó gửi xuống một file trình bày kiểu (style sheet) tương ứng File style sheet này sẽ quyết định việc hiển thị nội dung web theo cách phù hợp nhất với màn hình của thiết bị và khung nhìn khiến cho người dùng có được một trải nghiệm thân thiện nhất

Điều chỉnh độ phân giải màn hình

Các thiết bị mới đang được phát triển mỗi ngày và mỗi thiết bị này có thể xử lý các biến kích thước, chức năng và ngay cả màu sắc khác nhau Một số thích dùng màn hình nhỏ, một số dùng màn hình to, có người thích dùng theo chiều dọc và có người thích dùng chiều ngang Như chúng ta biết từ sự phổ biến của điện thoại thông minh iPhone, iPad và các dòng điện thoại Android khác có thể chuyển đổi từ dọc sang ngang theo ý thích của người dùng

Độ phân giải màn hình thường gặp: 320px, 480px, 600px, 768px, 900px, 1200px, 1680px, 1050px … có thể xếp thành các cặp như: 320 x 480, 1024 x 768, 1680 1050

Hình 1.4 Màn hình của các thiết bị

Các ưu điểm của công nghệ responsive trong thiết kế website

• Một công nghệ thiết kế website đã được áp dụng khá phổ biến và rộng rãi, được đánh giá cao bởi giao diện đẹp, tính tiện dụng

• Một trong những tiêu chí được cỗ máy tìm kiếm Google đánh giá và xếp hạng websie trên công cụ tìm kiếm

• Thiết kế website công nghệ responsive giúp website có khả năng tương thích cao trên nhiều thiết bị trình duyệt có độ phân giải màn hình khác nhau mà không lo bị

bể màn hình hay mất nội dung

• Với một website responsive chạy trên các nền tảng khác nhau,bạn có thể tiết kiệm được tối đa thời gian cho mình và cho cả khách hàng Thay vì với 2 phiên bản web khác nhau (mobile và pc), bạn cần phải thay đổi riêng biệt cho cả 2

1.2.2.3 Các kỹ thuật trong Responsive Web Design

• RWD Viewport:

Viewport là khu vực có thể nhìn thấy của người dùng trong một trang web Chế độ

xem khác nhau với thiết bị và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình

máy tính

• Khai báo thẻ Meta viewport

Trước tiên bạn cần đặt thẻ này vào cặp <head> trên trong mã HTML của

website

o thẻ meta viewport này còn có các giá trị như:

o width: thiết lập chiều rộng của viewport

o device-width: Chiều rộng cố định của thiết bị

o height: thiết lập chiều cao của viewport

o device-height: Chiều cao cố định của thiết bị

o initial-scale: Thiết lập mức phóng to lúc ban đầu, giá trị là 1 nghĩa là không

phóng to, và khi giá trị được thiết lập thì người dùng không thể phóng to

vì nó đã được cố định

o minimum-scale: Mức phóng to tối thiểu của thiết bị với trình duyệt

o maximum-scale: Mức phóng to tối đa của thiết bị với trình duyệt

o user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no

• RWD Media Queries

• Viết CSS cho chiều rộng và chiều cao của thiết bị

Sử dụng thẻ truy vấn @media trong CSS3 (@media query) như sau:

<meta name="viewport" content="width=device-width, initial-scale=1">

body { background: #fff;

Đoạn code trên dùng để thiết lập breakpoint cho toàn bộ thiết bị (all – media type) và

có chiều rộng cố định tối đa là 320px (max-width – media features), 320px tương ứng với kích thước chiều rộng của màn hình iPhone

• Danh sách các kích thước màn hình thiết bị

Khi viết CSS cho giao diện Responsive, việc quan trọng nhất là phải nắm được kích thước màn hình của các loại điện thoại thông dụng để có thể viết CSS được như ý và chắc chắn nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị thông dụng Đa phần một dự án bạn chỉ cần tạo các breakpoint CSS như sau:

o max-width: 320px (điện thoại di động, hiển thị chiều dọc)

o max-width: 480px (điện thoại di động, hiển thị chiều ngang)

o max-width: 600px (máy tính bảng, hiển thị chiều dọc)

o max-width: 800px (máy tính bảng, hiển thị chiều ngang)

o max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)

o max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)

o min-width: 1025px (từ size này trở lên là danh cho desktop thông thường)

• Khái niệm Mobile-First

Mobile-first nghĩa là tên một quy trình thiết kế mà chúng ta sẽ bắt đầu thiết kế cho giao diện ở điện thoại trước và sử dụng điện thoại làm nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng, desktop, retina,…

Đặc điểm của quy trình mobile-first là chúng ta chỉ sử dụng media features là min-width Code có dạng như sau:

/* Dành cho điện thoại */

@media all and (min-width: 320px) { <span style="line-height: 1.5;">}</span>

/* Dành cho máy tính bảng chiều dọc */

@media all and (min-width: 600px) { }

/* Dành cho máy tính bảng chiều ngang */

@media all and (min-width: 1024px) { }

o Dễ dàng trong việc triển khai và quản lý, nâng cấp sau này

o Tránh các lỗi hiển thị trên điện thoại do việc tùy biến từ CSS ở desktop

• RWD Images

• Sử dụng thuộc tính Width

Nếu Width được thiết lập 100% thì hình ảnh sẽ co dãn theo chiều dọc

• Sử dụng thuộc tính Max – Width

Nếu max – width được thiết lập 100% thì hình ảnh sẽ được co dãn nhưng kích thước không lớn hơn kích thước ban đầu của nó

img {

max-width : 100% ;

height : auto ; }