Phan 2. Xây dựng hệ thống “Lớp học vật lý phố
2.3. Tiến hành xây dựng theo tiến trình đã phác thảo
2.3.2. Thiết kế giao điện cho website “Lớp học vật lý phổ thông"
Cộng đồng Moodle có sẵn rất nhiều kiểu giao điện, Trong giới hạn của mô- dun giao diện, nó chỉ có thé giúp ta có được các hệ thong mau, các định dạng cho
các kiểu chit trong hệ thông. Như vậy, người dùng Moodle và sử dung giao diện Moodle phái tự thiết kế lại trên cơ sớ tìm hiểu các yêu cầu tương ứng với mục dich sử dụng đẻ có hướng xảy dựng một giao diện đỏ họa hớp lý va tìm hiểu cau trúc mã nguồn của giao diện mẫu sử dụng kết hợp với giao diễn chuẩn của Moodle đẻ thiết
kế cho mình một giao điện phù hợp.
Đối với những người ứng dung Moolde, chi nên đừng lại ở mức độ sử dung
một giao diện có sẵn, đương nhiên là hiệu quả trang web không cao. Mức độ thir 2
là chỉnh sửa một giao điện mẫu lại dựa trên các yêu cầu của Moodle để xảy dựng
cho minh một giao điện phù hợp nhất. Mức độ cao nhất trong phát triển giao điện 1a tự phát triển cho minh một giao điện riêng dựa trên các yêu cầu chung cho việc xây
dựng giao điện của Moodle. Trong dé tai nay, tôi dừng lại ở cuối mức độ 2.
Muốn sử dụng giao điện Moodle nao, đủ la tự xây dựng hay chỉnh sửa. đều
lam theo các bước:
+ Chuẩn bị mã nguồn và các tập tin cần thiết trong một thư mục với tên là
tên của bộ giao diện đó.
+ Dua thư mục đó lên thư mục lang trong mã nguồn của Moodle trên may
chủ
+ Vào Admin/Appearance/Themes/Themes Selector (Quản trị/Bẻ ngoai/Cac
mau nên/Lựa chọn bộ mau giao điện), lựa chọn các bộ giao điện trong danh sách ma
minh chọn.
http:⁄clearning | .thuvienvatly.com/theme/index.php
2.3.2.1. Tìm hiểu cấu trúc giao diện cúa Moodle
Mỗi giao điện cúa Moodle phải có các thành phan sau trong chung một thư
TỤC:
pix!
Phần 2: Xây dung hệ thông “Lop học wit lì phổ thong”
config.php favicon.ico footer.html
header.html styles.php
styles_color.css styles_fonts.css styles_layout.css styles_moz.css
ô Thư mục pix
Chita các hình ảnh vả icon được sử dụng trong giao diện Moodle.
ô Tập tin conlig.php
Tập tin này quy định cách làm việc đổi với các CSS (Cascade style sheet) va
cách hoạt động giữa chúng với nhau.
ô Tập tin favicon.ico
Đây là một icon nhỏ sẽ xuắt hiện bên cạnh địa chỉ trang trong trình duyệt
web,
ô Tập tin header.hưnl va footer.html
Hai tập tin nay quy định logo của hệ thông, các liên kết nhanh (breadcrumb navigation), menu chuyên mục (jumpto menu), ...nói chung là những gì muốn xuất hiện trên đầu (header) vả cuỗi (footer) của các trang web,
ô Tập tin styles.php
Phân 3: Xây dựng hệ thẳng “Lớp học vật lý phố thong”
Tập tin này được gọi trong header.html, làm nhiệm vụ là cầu nối với các CSS. Nếu chỉnh sửa theme thì không can phải sửa tập tin nảy.
+ Các tập tin Cascade style sheet
styles_color.css
styles_fonts.css styles_layoulcss styles_moz.css
Cascade style sheet (CSS): la các tập tin quy định tat cả các định dạng font, mau sắc, định dang hyperlink, định dang bảng (mau, khung,...).... Các định dạng
nảy thông qua tập tin config.php, tập tin style.php vả header,php ma hoạt động với nhau.
Tập tín styles_moz.css quy định các thiết lập đặt biệt cho trình duyệt Mozilla
- Firefox.
Việc chỉnh sửa giao điện đa sé là chính sửa mã nguồn trong các tập tin nảy.
Ngoài ra con có các thành phan phụ khác nhưng không ảnh hưởng quan
trọng tới tac dụng của giao điện.
Phan trên chỉ là các thành phan can có trong một giao diện Moodle. Nguyên tắc hoạt động cúa giao điện trong Moodle rat phức tạp trong giới hạn luận văn, tôi không ban đền,
Tôi xảy dựng giao điện cho “LHVL” dựa trên nguyên tắc thiết kế giao diện
Moodle và giao điện mẫu clouds
2.3.2.2. Thiết kế giao điện cho “Lớp hge vat lý”
a. Thiết kế CSS
Các tập tin CSS có nhiệm vụ rat quan trọng, đặt biệt là tập tin
styles_color.php.
Phan 2: Xây dung hệ thẳng “Lap học vật lý phố thông ”
Thiết lập các thông số mau, các hình nẻn,...cho các đối tượng trên hệ thống bằng cách xảy dựng và chỉnh sửa mã nguồn tập tin này dya trên ngôn ngữ thiết kế
CSS. Đoạn mã này đải vả phức tạp nên tôi không đưa vào đây.
Kết qua thu được các mau và hình nên cho các khối, các liên kết, các trạng thái liên kết,... như trên hệ thông “LHVL” đang chạy trên internet.
b. Thiết kế các hình ảnh đưa vào thư mục pix
Thư mục pix, trong đó có các thư mục con chứa một loạt các hình ảnh cho
các đôi tượng trong Moodle
Fi vero
Hình 2-12: Logo ở bến trái trang đấu
Hình 2-13: Logo ở bên trái cdc trang con
Hinh 2-15; Logo ở bên phải cde trang con
¢. Thiết kế các hình ảnh đưa vào thư mục sitepix
Tôi tạo thư mục sitepix năm trong thư mục gốc của mã Moodle trên máy chủ
chứa các hình ảnh cho phan nội dung trang dau để chứa ca hình ảnh hiển thị trên
trang nảy, va là một phan trong giao diện đỏ họa. Trong Moodle các thông tin trên
Phan 2: Xây dựng hệ thong “Lop học vật lý pho thông ”
trang đầu là một nội dung được tạo ra bằng một mô-đun chức năng, do đó, các tập tin sẽ được liên kết thông qua tập tin file.php với một biến Id được cấp sẵn. Việc truy vấn này phức tạp. Do đó, t6i cho liên kết trực tiếp tới các tập tin nảy bằng các
đoạn mã HTML.
Đây là các tập tin cần thiết, sau khí tạo xong, đưa tất cả vào thư mục sitepix
trên máy chủ.
Hình 2-20: Đoạn flash đầu trang
d. Thiết kế tập tin header.html và footer.html
Bước này sử dụng các hình anh đã thiết ké, lết hợp với CSS, dùng ngôn ngữ HTML va PHP dé xây dựng giao diện da trang (header.html) và cuối trang
(footer.hanl), tạo ra giao điện của “LHVL”, Doan mã xin không đưa vào đây mà chi
trình bảy kết quả.
Khi chạy trên trình duyệt, ta sẽ được:
Phan 2: Xây dung hệ thông “Lớp học vật lt phố thong”
Py Rea
Lop os Vật Wy abd mrtg: “To
Hinh 3-21: Header trang chính
Ce [ee vex teerrct ranean y2 Asserv #6 Os ied - ry
ằộ L2
vir W
[Aarne Che “anh may khúa seeằ APD sà
Hình 2-22: Header trang con
Hinh 2-23; Footer trang chính va trang con
e. Thiết kế nội dung trang chính
Trang chính chứa các liên kết tới các thành phan chính của “LHVL”. Trang chính được thiết kế dé người dùng vào trực tiếp lựa chọn minh muốn. giao diện phải
lôi kéo, đặc sắc, liên kết tiện lợi.
Muốn thiết kế được phan nội dung chính của trang chính, ta phải bật chức năng Include a topic section (Bao gồm chủ đẻ) trong phan Front page settings (Thiết
lap trang chinh).
Vao Admin/Front Page/Front Page settinges (Quan tn/Trang chinh/Thiét lap
trang chính).
http:/eleaming Ì thuvienvatly.com/admin/settings, php?section=frontpagesettings Bật tùy chon Include a topic section
Include stopic section [*]
ATS CLOW Ss
F selected, a topic section wil be displayed on the site's front page.
Phan 2: Xây dựng hệ thong “Lop học vật lý pho thông ”
Bây giờ, trở lại trang chính. bật chức năng chính sửa lên bằng cách cliek chuột vào nút “Tum editing onTM hoặc nút “Bat chế độ chỉnh sửa” (tùy ngôn ngữ sử
dung) Sử dụng mô-đun tạo một nhân (label) đề tạo nội dung trên trang chính, dùng mã HTML dé soạn thio trong trình soạn thao WYSIWYG cba Moodle với chế độ chỉnh sửa HTML. Dùng ngôn ngữ HTML đẻ thiết kế phan nội dung khi chạy trên
trình duyệt như sau:
=
Hưởng dẫn Các chức năng của lớp học
Hướng dẫn đẳng kỉ và đăng nhập ỉ Hỗ tợ tổ chức một khúa học vat ti
Hướng dẫn xác nh Sn tài khoắn Nơi học tảo, trao đỗi của Gv, HS
Hướng din tham qi3 khổ+ hee Xem êm
Hướng dan dénh cho Giáo viên
Xam thêm
Liên hệ: Tramrieuphuggmail.com hoặc YIM: Trieupiu0§
Hình 2-24: Kết quá trên trình duyệt phần nội dung chính trên trang chính
Phần 2: Xây dung hệ thông “Lop học wit lì phổ thong”