Cấu trúc E-Book

Trang chủ của E-Book bao gồm 7 đề mục cùng cấp. Từ trang chủ, người dùng cĩ thể truy xuất đến bất cứđề mục nào.

Hình 2.1. Các đề mục của trang chủ

2.4.1.1. Phương thức hoạt động của trang chủ

Điều khiển hoạt động của 7 đề mục là các tập tin flash định dạng .swf được thiết kế sẵn ngay trong trang chủ.

51

- Khi mở chương trình, file home.swf sẽ lấy dữ liệu file gioithieu.swf mang nội dung giới thiệu sơ lược về EBook.

- Khi người dùng nhấn tùy ý một trong bảy thẻ cĩ sẵn (Giới thiệu, Luyện tập giúp trí nhớ, Bài tập tự luận, Bài tập trắc nghiệm, Thư giãn, Bảng tuần hồn, Phim tư liệu), chương trình sẽ lấy nội dung của file swf tương ứng với thẻđược nhấn để

thể hiện ra màn hình.

- Trong file luyentaptrinho.swf đã thiết lập sẵn các lệnh để thể hiện nội dung các file bai0_lt.swf đến bai7_lt.swf (đặt trong thư mục “luyentap”) tương ứng với bài 01 đến bài 07.

- Trong file baitaptuluan.swfđã thiết lập sẵn các lệnh để thể hiện nội dung các file bai0_lt.swf đến bai5_lt.swf (đặt trong thư mục “bt_tuluan”) tương ứng với bài 01 đến bài 05 và đường dẫn đến các file html nội dung từ bài 06 đến bài 17.

- Trong file baitaptracnghiem.swf cũng đã thiết lập sẵn các lệnh để thể hiện nội dung các file HTML được thiết kế sẵn, tương tự cho file thugian.swf.

2.4.1.2. Ý tưởng thiết kế

Trang chủ cần được thiết kế sinh động nhằm mang lại cảm giác mới lạ, tránh sựđơn điệu, nhàm chán. Thiết kế sao cho phát huy được hết các yếu tốđặc trưng của EBook mà sách in thường khơng cĩ được.

Hình 2.3. Giao diện của trang chủ

52 1. Giới thiệu; 2. Luyện tập giúp trí nhớ; 3. Bài tập tự luận; 4. Bài tập trắc nghiệm; 5. Thư giãn; 6. Bảng tuần hồn; 7. Phim tư liệu.

2.4.1.3. Thể hiện ý tưởng bằng Adobe Photoshop CS3, CS4 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

Trình tự các bước thiết kế:

- Thiết kế giao diện tổng thể bằng Photoshop, các hình ảnh được lấy từ

Internet.

- Thiết kế banner bằng Photoshop (hình ảnh) và Flash CS3 (chuyển động).

Hình 2.4. Thanh banner

- Dùng Photoshop chuẩn bị các hình ảnh cần thiết để sử dụng như hình nền, các hình text tựa đề.

53

- Trên các layer, chèn các hình ảnh đã chuẩn bị vào, sử dụng các kỹ thuật của Flash như MotionTween và Mask Layer để tạo được các hiệu ứng xuất hiện và biến mất như mong muốn.

- Thiết kế menu các thẻ bấm bằng Photoshop (hình ảnh) và Flash CS3 (lập trình).

Hình 2.6. Thanh menu

- Tạo 1 MovieClip cĩ kích thước 900*368px, cĩ tên là loader và cĩ instance name là loader0 tương ứng với thẻ “giới thiệu”.

- Thực hiện các thao tác tương tự cho 06 thẻ cịn lại và thay đổi tên instance name của movieclip loader lần lượt như sau “loader1”, “loader2”, “loader3”, “loader4”, “loader5”, “loader6”.

- Viết mã lệnh vào các thẻ để tải được nội dung các file SWF vào movieclip loader như sau:

54

* Thẻ “Giới thiệu” (adsbygoogle = window.adsbygoogle || []).push({});

loader0.loadMovie("gioithieu.swf"); loader1.unloadMovie("luyentaptrinho.swf"); loader2.unloadMovie("baitaptuluan.swf"); loader3.unloadMovie("baitaptracnghiem.swf"); loader4.unloadMovie("thugian.swf"); loader5.unloadMovie("bangtuanhoan.swf"); loader6.unloadMovie("phimtulieu.swf"); * Thẻ “Luyện tập giúp trí nhớ” loader0.unloadMovie("gioithieu.swf"); loader1.loadMovie("luyentaptrinho.swf"); loader2.unloadMovie("baitaptuluan.swf"); loader3.unloadMovie("baitaptracnghiem.swf"); loader4.unloadMovie("thugian.swf"); loader5.unloadMovie("bangtuanhoan.swf"); loader6.unloadMovie("phimtulieu.swf"); *Thẻ “Bài tập tự luận” loader0.unloadMovie("gioithieu.swf"); loader1.unloadMovie("luyentaptrinho.swf"); loader2.loadMovie("baitaptuluan.swf"); loader3.unloadMovie("baitaptracnghiem.swf"); loader4.unloadMovie("thugian.swf"); loader5.unloadMovie("bangtuanhoan.swf"); loader6.unloadMovie("phimtulieu.swf"); *Thẻ “Bài tập trắc nghiệm” loader0.unloadMovie("gioithieu.swf"); loader1.unloadMovie("luyentaptrinho.swf"); loader2.unloadMovie("baitaptuluan.swf"); loader3.loadMovie("baitaptracnghiem.swf");

55 loader4.unloadMovie("thugian.swf"); loader5.unloadMovie("bangtuanhoan.swf"); loader6.unloadMovie("phimtulieu.swf"); *Thẻ “Thư giãn” loader0.unloadMovie("gioithieu.swf"); loader1.unloadMovie("luyentaptrinho.swf"); loader2.unloadMovie("baitaptuluan.swf"); loader3.unloadMovie("baitaptracnghiem.swf"); loader4.loadMovie("thugian.swf"); loader5.unloadMovie("bangtuanhoan.swf"); loader6.unloadMovie("phimtulieu.swf");*Thẻ “Bảng tuần hồn” *Thẻ “Bảng tuần hồn” loader0.unloadMovie("gioithieu.swf"); loader1.unloadMovie("luyentaptrinho.swf"); loader2.unloadMovie("baitaptuluan.swf"); loader3.unloadMovie("baitaptracnghiem.swf"); loader4.unloadMovie("thugian.swf"); loader5.loadMovie("bangtuanhoan.swf"); loader6.unloadMovie("phimtulieu.swf"); *Thẻ “Phim tư liệu” loader0.unloadMovie("gioithieu.swf"); loader1.unloadMovie("luyentaptrinho.swf"); loader2.unloadMovie("baitaptuluan.swf"); loader3.unloadMovie("baitaptracnghiem.swf"); loader4.unloadMovie("thugian.swf"); loader5.unloadMovie("bangtuanhoan.swf"); loader6.loadMovie("phimtulieu.swf");

56

2.4.2. Cấu trúc trang “Giới thiệu” 2.4.2.1. Ý tưởng thiết kế 2.4.2.1. Ý tưởng thiết kế

Trang “Giới thiệu” được tạo ra nhằm mục đích giới thiệu tổng quát về

EBook. Về cấu trúc, trang gồm 2 mục:

Hình 2.8. Cấu trúc trang “Giới thiệu”

 Mục “Mởđầu” nêu ra cho người đọc những điểm nổi bật của EBook, tầm quan trọng của việc dùng EBook để ơn luyện kiến thức về cromsắtđồng.

 Mục “Cách dùng” hướng dẫn cho HS đường lối học với EBook sao cho đạt hiệu quả cao nhất.

Hình 2.9. Giao diện của trang “Giới thiệu”

2.4.2.2. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

57

Hình 2.10. Thiết lập các layer cho trang “Giới thiệu”

- Action Layer dùng để viết các mã lệnh điều khiển.

- Frame Layer dùng đểđặt tên cho các frame làm cơ sở cho việc hiển thị nội dung từng frame, ta đặt tên các frame lần lượt là “f1”, “f2”, “f3”.

- Layer “back_button” dùng để chứa thẻ “Quay về” trang nội dung chính. - Layer “button” chứa các thẻ dẫn đến các nội dung, các thẻ cĩ tên lần lượt là bt_01, bt_02 .

- Layer “gioithieu” chứa hình ảnh thiết kế cho mục giới thiệu.

58

(b)

Hình 2.11. Layer “content” chứa 2 nội dung cần thể hiện mục: “Giới thiệu” (a) và “Cách dùng” (b)

- Vào frame 01 của Action Layer, sử dụng đoạn code sau để điều khiển các thành phần làm việc đúng chức năng và trùng khớp với nhau.

Hình 2.12. Đoạn code dùng điều khiển hoạt động của layer “content”

2.4.3. Trang “Luyện tập giúp trí nhớ” 2.4.3.1. Ý tưởng thiết kế 2.4.3.1. Ý tưởng thiết kế

Trang “Luyện tập giúp trí nhớ” cĩ chức năng liệt kê tất cả các bài học cĩ trong mục này, giúp cho người đọc nắm bắt được nội dung một cách tổng quát nhất. Người đọc cĩ thể chuyển đổi nhanh chĩng nội dung của các bài với thao tác bấm chuột đơn giản.

59

Hình 2.13. Giao diện của trang “Luyện tập giúp trí nhớ”

2.4.3.2. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

- Thiết kế các chức năng trang “Luyện tập giúp trí nhớ” bằng Flash.

Hình 2.14. Thiết lập các layer cho trang “Luyện tập giúp trí nhớ”

- Action Layer dùng để viết các mã lệnh điều khiển. - Layer “text” chứa tiêu đề “Luyện tập giúp trí nhớ”. (adsbygoogle = window.adsbygoogle || []).push({});

- Từ layer “bt0” đến “bt7” chứa 07 nút nhấn liên kết đến 07 file SWF đã thiết kế sẵn cĩ tên tương ứng lần lượt là “bai0_lt.swf” đến “bai7_lt.swf” được đặt trong thư mục “luyentap”.

60

- Sử dụng lệnh loadMovie cho các nút nhấn là tiêu đề các bài để làm hiện nội dung các bài và lệnh unloadMovie để làm ẩn nội dung của file “luyentaptrinho.swf”.

Hình 2.15. Đoạn code để làm ẩn nội dung của file “luyentaptrinho.swf”

2.4.4. Trang “Bài tập tự luận” 2.4.4.1. Ý tưởng thiết kế 2.4.4.1. Ý tưởng thiết kế

Trang “Bài tập tự luận” cũng cĩ chức năng liệt kê tất cả các bài học cĩ trong mục này, nhằm mục đích giúp cho người đọc nắm bắt được nội dung một cách tổng quát nhất. Cĩ thể chuyển đổi nhanh chĩng nội dung của các bài với thao tác đơn giản. Nếu cĩ nhiều nội dung tựa bài so với màn hình thể hiện, sẽ cĩ chức năng cuộn màn hình để thấy được nội dung các bài phía dưới.

61

Hình 2.16. Giao diện của trang “Bài tập tự luận”

2.4.4.2. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

- Thiết kế các chức năng trang “Bài tập tự luận” bằng Flash

Hình 2.17. Thiết lập các layer cho trang “Bài tập tự luận”

- Action Layer dùng để viết các mã lệnh điều khiển.

- Layer “msk” dùng để chứa 01 movieclip cĩ instance name là “msk” kích thước 900x370, cĩ chức năng chỉ cho phép xem nội dung trong vùng kích thước này, vùng nội dung bên ngồi kích thước này sẽ khơng thấy được.

- Layer “content” chứa 1 movieclip cĩ instance name là “content” chứa nội dung (là các tựa bài trong phần “Bài tập tự luận”).

62

năng giúp người dùng điều khiển nội dung bên trong lên xuống tùy theo nhu cầu xem nội dung.

- Vào frame 1 của Action Layer, sử dụng đoạn code sau để điều khiển các thành phần làm việc đúng chức năng và trùng khớp với nhau (code sưu tầm trên internet).

Hình 2.18. Đoạn code dùng điều khiển các thành phần của trang “Bài tập tự luận”

- Sử dụng các lệnh sau:

* Lệnh loadMovie cho các nút nhấn là tiêu đề các bài để làm hiện nội dung các file SWF đã được thiết kế sẵn (bai0_lt.swf đến bai5_lt.swf)

* Lệnh unloadMovie để làm ẩn nội dung của file “Bài tập tự luận”.

* Lệnh getURL để làm hiện nội dung các file HTML (6.html đến 17.html).

2.4.5. Trang “Bài tập trắc nghiệm” 2.4.5.1. Ý tưởng thiết kế 2.4.5.1. Ý tưởng thiết kế

Trang “Bài tập trắc nghiệm” mang nội dung chính của 03 bài “Crom”, “Sắt”, “Đồng”, cần được thiết kếđẹp, cơ đọng, thể hiện được nội dung chính của các tựa bài, tránh cảm giác nhàm chán với nội dung đơn điệu.

63

Hình 2.19. Giao diện của trang “Bài tập trắc nghiệm”

2.4.5.2. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

- Thiết kế các chức năng trang “Bài tập trắc nghiệm” bằng Flash

Hình 2.20. Thiết lập các layer cho trang “Bài tập trắc nghiệm”

- Action Layer dùng để viết các mã lệnh điều khiển. (adsbygoogle = window.adsbygoogle || []).push({});

- Layer “button” chứa các nút dẫn đến các nội dung, các nút cĩ tên lần lượt là bt_01, bt_02, bt_03, bt_04, được lập trình dẫn đến các file HTML thiết kế sẵn trong thư mục The3 .

- Layer “tracnghiem” chứa hình ảnh thiết kế cho mục Bài tập trắc nghiệm. - Vào frame 01 của Action Layer, sử dụng đoạn code sau để điều khiển các

64

thành phần làm việc đúng chức năng và trùng khớp với nhau.

Hình 2.21. Đoạn code dùng điều khiển các thành phần của trang “Bài tập trắc nghiệm”

2.4.6. Trang “Thư giãn” 2.4.6.1. Ý tưởng thiết kế 2.4.6.1. Ý tưởng thiết kế

Trang “Thư giãn” được thiết kế tương tự như trang “Bài tập trắc nghiệm”:

Hình 2.22. Giao diện của trang “Thư giãn”

2.4.6.2. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

65

Hình 2.23. Thiết lập các layer cho trang “Thư giãn”

- Action Layer dùng để viết các mã lệnh điều khiển.

- Layer “button” chứa các nút dẫn đến các nội dung, các nút cĩ tên lần lượt là bt_01, bt_02, bt_03, bt_04 được lập trình dẫn đến các file HTML thiết kế sẵn trong thư mục The4 .

- Layer “thugian” chứa hình ảnh thiết kế cho mục Thư giãn.

- Vào frame 01 của Action Layer sử dụng đoạn code sau để điều khiển các thành phần làm việc đúng chức năng và trùng khớp với nhau.

Hình 2.24. Đoạn code dùng điều khiển các thành phần của trang “Thư giãn”

2.4.7. Trang “Bảng tuần hồn”

Chứa đựng những thơng tin cần thiết và hình ảnh về các nguyên tố hĩa học phù hợp với nhu cầu tra cứu của HS phổ thơng. Đây là một phần mềm sưu tầm

66

Hình 2.25. Bảng tuần hồn các nguyên tố hĩa học

2.4.8. Trang “Phim tư liệu” 2.4.8.1. Ý tưởng thiết kế 2.4.8.1. Ý tưởng thiết kế

Trang “Phim tư liệu” cĩ chức năng tương tự như trang “Luyện tập giúp trí nhớ”.

Hình 2.26. Giao diện của trang “Phim tư liệu”

2.4.8.2. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngơn ngữ kịch bản)

67

Hình 2.27.Thiết lập các layer cho trang “Phim tư liệu”

- Action Layer dùng để viết các mã lệnh điều khiển.

- Frame Layer dùng đểđặt tên cho các frame làm cơ sở cho việc hiển thị nội dung từng frame, ta đặt tên các frame lần lượt là “f1”, “f2”đến “f12”, mỗi frame mang 1 nội dung phim tương ứng.

- Layer “back_bt” dùng để chứa nút “Quay về” trang nội dung chính. - Layer “button” chứa các nút dẫn đến các nội dung, các nút cĩ tên lần lượt là bt_01, bt_02 đến bt_12 .

- Layer “content” chứa 12 nội dung cần thể hiện là 12 phim tương ứng. (adsbygoogle = window.adsbygoogle || []).push({});

Hình 2.28. Một video clip phim hĩa học

- Sử dụng lệnh gotoAndStop đểđiều khiển đến các phim cần xem.

68

2.5. Nội dung của EBook 2.5.1. Hệ thống lý thuyết 2.5.1. Hệ thống lý thuyết

Hệ thống lý thuyết của EBook bao gồm 7 bài. Tất cả 7 bài đều được đặt trong trang “Luyện tập giúp trí nhớ”.

Hình 2.30. Sơđồ hệ thống lý thuyết của EBook

So với SGK hiện hành, hệ thống lý thuyết của EBook cĩ những cải tiến như

sau:

Đưa thêm bài “Nguyên tố chuyển tiếp” nhằm mục đích giới thiệu những nét chung nhất, khái quát nhất về tính chất của các nguyên tố chuyển tiếp, giúp cho HS dễ tiếp cận với kiến thức mới khi chuyển sang học các bài về chất cụ thể.

 Các bài học tiếp theo được trình bày một cách cĩ hệ thống, ngắn gọn, cốt yếu cho HS dễ nhớ. Ở một số tính chất chúng tơi mạnh dạn minh họa bằng phương trình hĩa học. Việc đưa thêm phương trình hĩa học vào bài học khơng đi ngược lại chủ trương “giảm tải” của Bộ Giáo dục, vì mục đích của nĩ là giúp cho HS dễ hiểu bài, khơng buộc các em phải thuộc các phương trình hĩa học đã đưa thêm vào.

69

Hình 2.31. Giao diện của phần “Tĩm tắt lý thuyết”

2.5.2. Hệ thống câu hỏi và bài tập 2.5.2.1. Câu hỏi luyện tập

Hệ thống câu hỏi luyện tập là một trong những điểm mạnh và mới so với các EBook được xuất bản trước đây. Tác dụng của việc luyện tập sau mỗi bài học mới cĩ thể thấy là:

 Giúp GV kiểm tra được mức độ hiểu bài của HS, phát hiện ra những thơng tin mà các em nhận thức khơng đúng hoặc lệch lạc để kịp thời điều chỉnh lại.

 Giúp HS cĩ cơ hội thử thách những kiến thức mới vừa lĩnh hội được qua việc trả lời những câu hỏi luyện tập. Đối diện với câu hỏi luyện tập đồng nghĩa với các em đứng trước tình huống “cĩ vấn đề”. Nếu trả lời đúng, vượt qua được chướng ngại về nhận thức, HS sẽ cĩ hưng phấn để tích cực giải quyết câu hỏi tiếp theo. Ngược lại, nếu trả lời sai hoặc khơng trả lời được thì việc tham khảo đáp án sẽ giúp cho HS cĩ thêm kinh nghiệm học tập.

 Sau khi luyện tập, hầu hết HS đều hiểu và nhớ bài.

Tuy nhiên, cĩ một thực tế chúng ta đều thấy là thời lượng GV làm việc trên lớp lúc nào cũng cĩ giới hạn. Luơn luơn tồn tại mâu thuẫn giữa lượng kiến thức cần truyền đạt với số tiết dạy được phân bổ. Mặt khác, dù cho GV áp dụng phương pháp dạy học nào đi nữa để cá thể hĩa việc học của HS trên lớp đều khĩ cĩ thể phát huy

70

tối đa tác dụng của nĩ. Hệ thống câu hỏi luyện tập ở nhà cho HS chưa bao giờ trở

nên cần thiết như thế, và EBook này được ra đời xuất phát từ nhu cầu bức bách trên.

Hệ thống câu hỏi luyện tập được bố trí trong trang “Luyện tập giúp trí nhớ” bao gồm các loại:

Hình 2.32. Giao diện của phần “Luyện tập giúp trí nhớ”

 Câu hỏi ngắn: cĩ tác dụng kiểm chứng lại những điểm lý thuyết đã học xem HS cĩ hiểu đúng khơng. Loại câu hỏi này tương tự như hình thức truy bài đầu giờ

hoặc củng cố bài cuối giờ mà GV thường áp dụng.

 Câu hỏi về phương trình phản ứng: giúp HS luyện khả năng nhớ phương trình hĩa học cĩ trong bài học.

 Câu hỏi “Tìm chỗ sai của một phương trình hĩa học”: cĩ tác dụng uốn nắn những hiểu biết lệch lạc của HS, giúp HS tránh những sai lầm khi giải bài tập cĩ liên quan đến phản ứng đang xét.

 Câu hỏi “Đúng-sai”: là một dạng của bài tập trắc nghiệm khách quan, giúp HS rà sốt lại kiến thức nhanh chĩng.

 Câu hỏi “Sơđồ phản ứng”: giúp HS nhận ra mối quan hệ giữa các chất khảo sát, từđĩ hiểu được qui luật biến đổi giữa chúng. Loại câu hỏi này cũng gĩp phần