Cấu trúc và nội dung E-book

Hình 2.1. Cấu trúc của E-book

2.2.2. Nội dung E-book

- GIÁO KHOA: bao gồm các chương và các bài trong chương trình hĩa học hữu cơ lớp 11 (nâng cao). Tác giả chỉ thực hiện được 3 chương (chương 5, 6, 7) thuộc phần hiđrocacbon.

Trong mỗi chương gồm cĩ các bài học, nội dung mỗi bài học gồm cĩ:

+ Lý thuyết với cấu trúc và nội dung dựa trên sách giáo khoa hĩa học lớp 11 (nâng cao).

+ Phim thí nghiệm, mơ phỏng hĩa học về cơ chế phản ứng, hình ảnh minh họa,…nhằm tăng tính trực quan, hấp dẫn khi HS học E-book.

+ Phần tư liệu: cung cấp những kiến thức, nhũng hiện tượng hĩa học nhằm gắn liền nội dung bài học với thực tiễn cuộc sống.

+ Đúng / Sai: đưa ra những sai sĩt (S) thường gặp, khĩ nhận ra của HS và chỉnh sửa bằng những kiến thức đúng (Đ).

 Cung cấp hệ thống bài tập trong sách giáo khoa.

 Luyện tập: bao gồm các bài tập trong sách bài tập hĩa học 11 (nâng cao).

 Cơ chế: mơ phỏng cơ chế phản ứng hữu cơ giúp HS hiểu rõ hơn bản chất, quá trình diễn ra phản ứng và tạp thành sản phẩm.

 Bảng tuần hồn: được thiết kế với các nguyên tố hĩa học cĩ hình ảnh minh họa và các thống số như độ âm điện, to

nc… để HS tra cứu.

 Hướng dẫn: hướng dẫn giải các bài tập trong phần luyện tập.

- PHƯƠNG PHÁP GIẢI: cung cấp hệ thống các phương pháp giải tốn hữu cơ lớp 11 THPT gồm các dạng bài tập chuỗi, nhận biết, phương pháp giải tốn theo từng chủ đề (cĩ ví dụ minh họa và hướng dẫn giải).

- VUI HỌC: đây là phần mới được đưa vào E-book khơng chỉ giúp các em thư giãn sau những giờ học căng thẳng mà cịn giúp các em biết dùng nhữ ng cách tiếp cận thơng m inh, hĩm hỉnh, khiến những vấn đề hĩa học tưởng chừng như khơ khan, tẻ nhạt trở nên sinh động, lí thú. Phần này gồm các mục sau:

+ Hĩa học và cuộc sống: viết về những hiện tượng hĩa học nhằm xây dựng ý thức học đi đơi với hành, gắn lí thuyết với thực tiễn cuộc sống gồm:

 Những câu hỏi vì sao?

 Chuyện vui hĩa học.

 Thí nghiệm hĩa học vui.

 Mẹo vặt.

 Ứng dụng hĩa học.

+ Hĩa học và mơi trường: Gồm những thơng tin nĩng bỏng về vấn đề mơi trường đang diễn ra, gồm:

 Tình hình mơi trường.

 Ơ nhiễm mơi trường.

 Bảo vệ mơi trường.

+ Games: gồm một số games trí tuệ và vui nhộn giúp HS tự thư giãn sau những giờ học mệt mỏi.

- GIỚI THIỆU: giới thiệu về tác giả, liên hệ và hướng dẫn HS và GV cách sử dụng E- book.

2.3. Lựa chọn phần mềm thiết kế E-book 2.3.1. Adobe Flash CS3 Professional 2.3.1. Adobe Flash CS3 Professional

Adobe Flash (Macromedia Flash), hay cịn gọi một cách đơn giản là flash, được dùng để chỉ chương trình sáng tạo đa phương tiện (multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player.

Flash là cơng cụ để phát triển các ứng dụng n hư thiết kế các phần mềm mơ phỏng. Sử dụng ngơn ngữ lập trình ActionScript để tạo các tương tác, các hoạt cảnh trong phim. Điểm mạnh của flash là cĩ thể nhúng các file âm thanh, hình ảnh động. Người lập trình cĩ thể chủ động lập các điều hướng cho chương trình. Flash cũng cĩ thể xuất bản đa dạng các kiểu html, exe, jpg, …để phù hợp với cấc ứng dụng của người sử dụng trên web, CD, …

Ưu điểm lớn nhất của flash – với đồ họa vectơ – là kích thước file rất nhỏ. Thuận tiện cho việc truyền tải dữ liệu qua Internet.

Hình 2.2. Màn hình làm việc của Adobe Flash CS3 Professional

Hiện nay cĩ rất nhiều phần mềm thiết kế tập tin flash (.swf), các phần mềm này cĩ tính năng là dễ sử dụng, giúp cho người sử dụng thiết kế được các flash một cách đơn giản nhờ vào các hiệu ứng sẵn cĩ.

Các phần mềm như: Sothink SWF Quicker, SWF Text, Sothink SWF Easy để thiết kế banner, button, album ảnh…

2.3.2. Adobe Dreamweaver CS3

Dreamweaver là cơng cụ để thiết kế và phát triển web rất hiệu quả của Macromedia, cho phép xây dựng những trang web cĩ giao diện tuyệt vời. Vì Dreamweaver rất dễ sử dụng nên nĩ tạo ra mơi trường rất linh hoạt trong thiết kế web. Sẽ rất hữu ích nếu sử dụng thành thạo các ngơn ngữ lập trình web, nhưng với Dreamweaver, vẫn cĩ thể tạo được các website hấp dẫn mà khơng cần biết nhiều về HTML, JavaScript…Với Dreamweaver ta cĩ thể:

• Xây dựng trang chủ của E-book và các trang liên kết khác.

• Tạo các liên kết từ trang này đến các trang khác.

• Dễ dàng nhúng các sản phẩm của các chương trình thiết kế web khác như Flash, Fireworks, Shockwave, Generator, Authorwave …

• Tạo kiểu, bố trí nội dung trang.

• Cho phép người sử dụng chỉnh sửa trực tiếp HTML. Với Quick Tag Editor bạn cĩ thể nhanh chĩng bổ sung hoặc xĩa bỏ một HTML mà khơng phải thốt khỏi cửa sổ tài liệu. Chế độ soạn thảo trang web bằng HTML giúp chúng ta cĩ thể thiết kế trang trực tiếp bằng ngơn ngữ HTML.

• Dreamweaver cịn hỗ trợ các HTML Styles và Cascading Style Sheet giúp chúng ta định dạng trang web nhằm tăng tính hấp dẫn khi duyệt các trang web này.

Hình 2.3. Màn hình làm việc của Adobe DreamWeaver CS3

2.3.3. Một số phần mềm tiện ích khác

2.3.3.1. Phần mềm viết và vẽ cơng thức cấu tạo

Chương trình ChemOffice cĩ rất nhiều tính năng và hỗ trợ nhiều chương trình hĩa học khác. Trong ChemOffice chúng tơi sử dụng chủ yếu 2 chương trình:

- Chem3D Ultra 9.0: dùng để vẽ hoặc chuyển cơng thức dạng 2D sang 3D.

- ChemDraw Ultra 9.0: dùng để vẽ cơng thức cấu tạo (dạng 2D) của các chất vơ cơ và hữu cơ, từ cơng thức cĩ thể biết tên chất hoặc ngược lại, cĩ thể viết tên gọi của chất, sau đĩ ChemDraw cĩ thể tự vẽ cơng thức cấu tạo của chất.

2.3.3.2. Phần mềm chụp ảnh màn hình chuyên nghiệp với SnagIt 9

SnagIt là phần mềm chụp màn hình đã từng đoạt nhiều giải thưởng. Sử dụng SnagIt bạn cĩ thể chọn và chụp bất cứ thứ gì xuất hiện trên màn hình của bạn và sau đĩ cĩ thể dễ dàng chèn chữ, mũi tên hoặc hiệu ứng và lưu ảnh chụp thành 1 file rồi chia sẻ nĩ ngay lập tức bằng e-mail hoặc IM. Chụp và chia sẻ 1 bài báo, 1 bức ảnh hoặc 1 trang Web trực tiếp từ

màn hình của bạn. Hoặc bạn cĩ thể chụp và chia sẻ 1 phần của 1 ứng dụng đang trên PC của bạn. Chương trình tự động lưu lại thành 1 trong 23 định dạng file hoặc gửi tới máy in, e-mail hoặc tới clipboard. Sử dụng trình chỉnh sửa được tích hợp trong SnagIt để chỉnh sửa, ghi chú và tối ưu hĩa bức ảnh của bạn rồi dùng Catalog Browser để sắp xếp những file ảnh. Ứng dụng này nâng cao thành phẩm của bạn trong khi cĩ thể tạo nhanh những file trình diễn và file văn bản hồn thiện.

2.3.3.3. Phần mềm Adobe Photoshop CS3

Adobe Photoshop CS3 là 1 phần mềm hồn hảo trong việc chỉnh sửa hình ảnh. Adobe Photoshop CS3 được tăng cường thêm những tính năng mới gĩp phần tăng năng suất làm việc cũng như nâng cao tính tự động, với những cơng cụ chỉnh sửa hiệu quả, và phá vỡ mọi giới hạn.

Hình 2.4. Màn hình làm việc của Adobe Photoshop CS3

2.3.3.4. Phần mềm Total Video Converter

Total Video Converter (TVC) là một cơng cụ chuyển đổi các đ ịnh dạng file đa năng nhất hiện nay, TVC hỗ trợ chuyển đổi qua lại hơn 30 định dạng file phổ biến hiện nay (trong đĩ cĩ cả AAC và FLV mà rất ít các chương trình khác cĩ) và hỗ trợ cả các loại file âm thanh trong các game PC.

Vì Flash chỉ hỗ trợ chèn các file phim .flv nên chúng tơi dùng TVC để chuyển đổi các định dạng file phim thành định dạng file .flv để mang vào flash.

2.3.4.1. Ngơn ngữ HTML

HTML (hay Hypertext Markup Language – Ngơn ngữ liên kết siêu văn bản) là ngơn ngữ đánh dấu chuẩn dùng lập trình các tài liệu World Wide Web, tài liệu là các tập tin văn bản đơn giản.

Ngơn ngữ HTML dùng các tag (thẻ) hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browsers) cách hiển thị các thành phần của trang như text và graphics, v à đáp lại những thao tác của người dùng bởi các thao tác ấn phím và nhắp chuột. Hầu hết các Web browser, đặc biệt là Microsoft Internet Explorer và Netscape Navigator, nh ận biết các tag của HTML vượt xa những chuẩn HTML đặt ra.

Đối với những GV khơng chuyên trong lĩnh vực lập trình website với các ngơn ngữ lập trình cấp cao, thì việc chọn cho mình ngơn ngữ thiết kế web với HTML là giải pháp tốt nhất, bởi vì ngơn ngữ HTML dễ học, thiết kế đơn giản, dễ thay đổi cấu trúc web và phát triển website thật dễ dàng, đồng thời việc kết hợp HTML với các ngơn ngữ thiết kế web khác như CSS, Javascript và đồ họa sẽ làm cho website đẹp hơn, sinh động hơn.

2.3.4.2. Ngơn ngữ ActionScript

ActionScript (AS) là ngơn ngữ lập trình được xây dựng trong Flash, AS rất giống ngơn ngữ C++, Java, JavaScript …và được dựa trên tiêu chuẩn do ECMA (Europe Computer Manufactures Association) lập ra gọi là ECMAScript.

2.4. Phối hợp các phần mềm để thiết kế E-book

Hình 2.5. Giao diện trang Index.html

Tạo trang Index bằng chương trình DreamWeaver, nhằm mục đích cho người sử dụng chưa cài chương trình xem flas h cĩ thể download chương trình về sử dụng để xem được E- book.

Trước tiên: dùng Photoshop thiế t kế như trên, sau đĩ dùng cơng cụ Knife của Photoshop cắt web. Đối với các phần được link, tạo thêm 1 hình giống vậy để tạo hiệu ứng hover khi rê chuột vào.

Cắt xong tất cả nhúng vào DreamWeaver bằng cách Save for Web.

Trong vùng làm việc code của DreamWeaver ta sử dụng đoạn mã code sau: <head>

font-size:0px;

margin:0px;

border:0px;

}

img, div, input, bg { behavior: url("iepngfix.htc") } body{

background:url(bg.gif);

}

#contain{

width:1048px;

background:url(bg-main1.png) repeat-y;

padding-left:12px; margin:auto; } .main{ width:1024px; } </style> </head>

Để tạo hiệu ứng chữ đổi màu cho link, dùng code sau :

.flash-player{

width:624px;

height:195px;

background:url(Images/index_05.jpg) no-repeat;

cursor:pointer; } .flash-player:hover{ background:url(Images/index_05a.jpg); } .open{ width:624px; height:53px;

background:url(Images/index_06.jpg) no-repeat; cursor:pointer; } .open:hover{ width:624px; height:53px;

background:url(Images/index_06a.jpg) no-repeat;

} .left{ float:left; } Trong body gồm cĩ: <body>

</div>

</body>

 Tạo trang Home.html

- Dùng DreamWeaver nhúng trang flash intro.swf vào nhằm mục đích cho flash chạy ổn trên các trình duyệt, khơng bị co giãn.

<body>

AC_FL_RunContent( 'codebase','http://download.macromedia.com/

pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','1000','height','800','src ','intro','quality','high','pluginspage','http://www.adobe.com/shockwave/download/downl oad.cgi?P1_Prod_Version=ShockwaveFlash','movie','intro' );//end AC code

</script>

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v ersion=9,0,28,0" width="1000" height="800">

type="application/x-shockwave-flash" width="1000" height="800"></embed> </object>

</noscript>

</div> </div>

Hình 2.6. Giao diện trang intro.swf

Button Bắt đầu: link tới file start.swfđồng thời mở ra nội dung trang Giáo khoa. Để tạo các button, ta làm như sau:

- Trong Flash, nhấn tổ hợp phím Ctrl-F8 để tạo 1 symbol mới, trong bảng CreateNew Symbol ta chọn:

Hình 2.7. Đặt tên cho button trong của sổ Create New Symbol

Tại màn hình chính, gõ text Bắt đầu, để tạo hiệu ứng cho button khi rê chuột vào, nhấp F6, ta cĩ thể đồi font chữ, màu chữ và kích thước tùy ý. Sau đĩ nhấp vào Scene 1, tại Library, kéo và rê but_begin vào sân khấu. Nhấp chọn vào button Bắt đầu, nhấp F9để viết ActionScript cho button như sau:

Hình 2.8. Cửa sổ Actions – Nơi viết ActionScript trong flash on(release) { unloadMovieNum(1); loadMovieNum("start.swf",2); gotoAndStop(1); stopAllSounds(); }

Button on-off music: tắt mở nhạc, ta thực hiện tương tự, tại màn hình chính thay vì gõ text, ta nhấn tổ hợp phím Ctrl-R để mang các hình ảnh, icon vào sân khấu. Code cho các nút như sau:

Với nút off: on(release) {

stopAllSounds(); }

Với nút on: on(release) {

_parent.bgsound.gotoAndPlay(1); }

Trang start.swf: cĩ 4 đề mục chính của E -book. Gồm các button tương ứng với các đoạn code sau:

- Giáo khoa

on(release) {

unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("giaokhoa.swf",3); gotoAndPlay(“giaokhoa”);} - Phương pháp giải on(release) { unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("phuongphap.swf",3); gotoAndPlay(“phuongphap”);} - Vui học on(release) { unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("vuihoc.swf",3); gotoAndPlay(“vuihoc”);} - Giới thiệu on(release) { unloadMovieNum(4); unloadMovieNum(5); unloadMovieNum(6); loadMovieNum("tacgia.swf",3); gotoAndPlay(“tacgia”);}  Trang giaokhoa.swf

Hình 2.9. Giao diện trang giaokhoa.swf

- Tạo 3 chương thành 3 button

Button chương 5: Để vào thư mục chương 5.swf

on (release) {

loadMovieNum("giaokhoa/chuong5.swf",4); }

Button chương 6: Để vào thư mục chương 6.swf

on (release) {

loadMovieNum("giaokhoa/chuong6.swf",4); }

Button chương 7: Để vào thư mục chương 7.swf

on (release) {

loadMovieNum("giaokhoa/chuong7.swf",4); }

 Phối hợp các phần mềm để tạo file lythuyet.swf

Hình 2.10. Giao diện trang nội dung bài học

 Dùng phần mềm SWF Text để tạo các tiêu đề bài học

Đây là chương trình cho phép chúng ta t ạo những banner, tiêu đề với những hiệu ứng cĩ sẵn, và rất dễ sử dụng.

Hình 2.11. Màn hình làm việc của SWFText Movie: thay đổi kích thước cho file flash.

Background: tạo màu nền cho tiêu đề. Background Effect: tạo hiệu ứng cho nền. Text: thay đổi nội dung cho tiêu đề. Text Effect: tạo hiệu ứng cho tiêu đề. Font: chọn font, màu chữ và kích thước. Sound: chọn âm thanh.

Nút preview: xem trước file flash.

Khi chương trình được khởi động luơn cĩ 1 file .swf kèm theo để bạn cĩ thể xem trước những lựa chọn cho từng mục. Sau khi lực chọn các hiệu ứng thích hợp, ta nhấp vào Publish và lựa chọn Save flash movie, như vậy chúng ta đã cĩ 1 tiêu đề bài học với những hiệu ứng thật hấp dẫn.

Hình 2.12. Các tiêu đề được tạo bằng SWFText

 Sử dụng SnagIt và photoshop để cắt và chỉnh lí ảnh.

- Trong Flash khơng hỗ trợ cho chúng ta viết các cơng thức cấu tạo hữu cơ, do đĩ để đưa các cơng thức hĩa vào, chúng ta phải chuyển các c ơng thức thành các file ảnh để dưa vào flash.

Khởi động chương trình SnagIt, sẽ xuất hiện giao diện sau như hình 2.13.

Hình 2.13. Màn hình làm việc của SnagIt 9.0 Region: chụp từng vùng bằng cách rê và kéo chuột.

Window: chụp của sổ hiện hành. Fullscreen: chụp tồn màn hình. Scrolling window: chụp trang web.

Nếu các cơng thức và các file ảnh khơng được rõ nét, chúng ta phải chỉnh sửa lại các ảnh đĩ để được sắc nét hơn.

Trong PhotoShop, mở bức ảnh mà bạn muốn chỉnh sửa. Hình gốc:

Hình 2.14. Ảnh chưa được chỉnh sửa

- Cách tốt nhất và nhanh nhất để làm bức ảnh này sắc nét hơn là sử dụng hộp thoại Levels.

- Để mở hộp thoại Levels, vào menu Image > Adjustments > Levels (hay nhấn Ctrl-L)

Hình 2.15. Cách mở hộp thoại Levels

Hình 2.16. Hộp thoại Levels

- Để cho bức ảnh sắc nét hơn thì chúng ta phải tăng màu đen và giảm bớt màu trắng

Sách giáo khoa điện tử (E-book)

Lựa chọn phần mềm thiết kế E-book