Ngơn ngữ lập trình

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; (adsbygoogle = window.adsbygoogle || []).push({});

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> (adsbygoogle = window.adsbygoogle || []).push({});

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. (adsbygoogle = window.adsbygoogle || []).push({});

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

Hình 2.17. Điều chỉnh điểm màu đen trong hộp thoại Levels Và chúng ta được kết quả:

Hình 2.18. Ảnh sau khi được chỉnh sửa

 Sử dụng Total Video Converter để chuyển định dạng các file phim - Khởi động chương trình Total Video Converter, sẽ xuất hiện giao diện sau:

Flash chỉ hỗ trợ cho định dạng phim .flv, đối với các đinh dạng khác, chúng ta khơng thể chèn trực tiếp vào flash được. Phần mềm Total Video Converter sẽ chuyển các định dạng khác thành file.flv.

Nhấp vào button New Task→ Import files→ hộp thoại Open hiện ra → chọn file phim cần chuyển đổi → nhấp Open.

Click chọn FLV Video → nhấp Convert Now để thực hiện việc chuyển đổi.

 Sử dụng Swf Easy hoặc Swf Quicker để tạo Album ảnh, button, banner. Khởi động chương trình Swf Easy sẽ xuất hiện giao diện như hình 2.20.

Hình 2.20. Màn hình làm việc của Swf Easy

Để tạo Album ảnh, click chọn Album, tạo banner bảng nút Banner, tạo button bằng nút Navigation Buttons. Ta lựa chọn các kiểu album, banner, buttons thích hợp.

 Sử dụng Flash để tạo nội dung cho từng mục

Trong một bài học cĩ nhiều mục nhỏ, mỗi mục sẽ link đến từng nội dung tương ứng. Do đĩ, chúng tơi dùng flash dể tạo nội dung cho từng mục.

Đầu tiên, chúng ta tạo 1 file flash mới, sau đĩ nhấp Ctrl F7. Bảng Components hiện ra, click chọn User Interface → ScrollPane, kéo và rê ScrllPane vào màn hình. (adsbygoogle = window.adsbygoogle || []).push({});

Hình 2.21. Kéo và rê ScrollPane vào màn hình

- Click chọn cơng cụ Free Trasform để canh chỉnh kích thước của ScrollPane tương ứng với khung nội dung bên tay phải.

- Nhấn Ctrl-F8 để tạo 1 movie clip, bảng Create New Symbol hiện ra:

Hình 2.22. Cửa sổ Create New Symbol

- Movie Clip bai39-I-1 sẽ nằm bên Library, click chuột phải chọn Movie clip bai39-I-1 nằm bên Library (nếu khơng xuất hiện Library, nhấp Ctrl-L), chọn Edit.

- Sau đĩ, ta đưa nội dung bài học (đã được soạn bên Word vào bằng cách Copy và Paste).

Đặt tên cho Movie là tên đề mục của bài học (ví dụ: Bài 39-I-1). Type: Movie clip. Click chọn: Export for ActionScript

+ Nếu cĩ tư liệu bài học là các file hình ảnh, ta nhấp Ctrl-R, chọn đường dẫn đến file để đưa hình ảnh vào nội dung..

+ Nếu tư liệu là file flash.swf, chúng ta đưa file flash.swfvào flash như sau Tạo 1 button minh họa để link đến file flash minh họa, ví dụ:

Trên thanh Timeline, chọn 1 frame, ví dụ frame số 10, click chuột phải, chọn Insert Blank Keyframe.

Tạo 1 Scrollpane bằng với kích thước file flash minh họa. Nhấn Shift-F7 để mở bảng Component Inspector

Hình 2.23. Hướng dẫn nhúng file.swf vào chương trình flash

Tại Value, ta viết tên của file fl ash.swf cần đưa vào, và file flash này phải nằm chung với thư mục của file nội dung chúng ta đang làm thì file flash này mới hiển thị.

Trên thanh Timeline, click vào frame 10 và viết ActionScipt cho frame này:

stop();

Tại frame này, ta tạo một nút Back

để quay về với ActionScript:

on (release){

gotoAndPlay(1); }

+ Nếu tư liệu là phim minh họa, ta làm như sau: Chuyển đổi định dạng file phim thành .flv

Tạo 1 button minh họa cho file phim cần đưa vào. Ví dụ:

Trên thanh Timeline, chọn 1 frame, ví dụ frame số 10, click chuột phải, chọn Insert Blank Keyframe.

Nhấp Ctrl-F7để mở bảng Component, chọn Video→ kéo và rê FLVPlayback vào, ta sẽ cĩ hình như sau:

Hình 2.24. Kéo và rê FLVPlayback vào màn hình

Nhấn Shift F7 để mở bảng Component Inspector. Trong thẻ Parameters ta chọn các thơng số sau:

Hình 2.25. Điền các thuộc tính trong bảng Component Inspector contentPath: tên của file phim cần đưa vào

Trên thanh Timeline, click vào frame 10 và viết ActionScript cho frame này: stop();

Tại frame này, ta tạo một nút Back

để quay về phần nội dung với ActionScript: on (release){

gotoAndPlay(1); } (adsbygoogle = window.adsbygoogle || []).push({});

- Như vậy ta đã tạo xong 1 file nội dung với hình ảnh, mơ phỏng hĩa học, phim minh họa cho mục nội dung đĩ.

 Tạo file chuong5.swf

- Sau khi đã cĩ đẩy đử tư liệu, nội dung, các tiêu đề, banner đã làm, chúng ta sẽ ghép nối các file này vào file chuong5.swf để link đến.

- Tạo một file flash với tên là chuong5.swf

- Trong 1 chuong cĩ nhiều bài, tro ng 1 bài cĩ nhiều nội dung nhỏ như: lý thuyết, bài tập, tư liệu, đúng sai. Do đĩ, chúng ta sẽ tạo mới nhiều scene cho file chuong5 này:

Hình 2.26. Tạo các Scene trong 1 file flash

- Trong Library, ta nên tạo các folder tương ứng để dễ dàng quản lý các tư liệu, để tạo 1 folder mới, nhấp vào biểu tượng trong Library. Ta lần lượt tạo các folder như sau:

Hình 2.27. Thư viện (library) trong flash - Giao diện của Scene ly thuyet:

Hình 2.28. Giao diện của Scene ly thuyet

- Đầu tiên, trang trí giao diện bằng các hình ảnh tạo được trong photoshop.

- Tạo một ScrollPane để đưa file tiêu đề.swf vào (kích thước scrollPane bằng với kích thước của tiêu đề đã làm bằng chương trình SWF Text).

- Menu các mục của bài học được tạo bằng các Symbol là button.

- Nội dung bên phải là 1 ScrollPane (kích thước tương ứng với kich thước của ScollPane nội dung đã tạo)

- Tạo 1 button để trở về danh sách các bài học.

- Tạo 3 icon là 3 button để link đến các Scene: bai tap, tu lieu, dung sai

- Trên thanh Timeline, click phải chuột, chọn keyframe1, chọn Copy Frames. Tại frame 5, click phải chuột và chọn Paste Frames, tương tự ở Frame 10, 15…; số frame được paste băng với số đề mục nhỏ của mỗi bài.

- Sau khi hồn thành xong 1 bài, ta làm tương tự cho các bài cịn lại của chương 5. - Mang nội dung vào mỗi mục bằng cách:

+ Mở file nội dung.fla (ví dụ fie bai33-I-1.fla). Tại library của file này, nhấp Ctrl A → Ctrl C và dán vào folder bai 33 trong libray của chuong5.swf. Thực hiện tương tự cho các file bai33-I-2…

+ Tại frame của mục cần link đến, click chọn ScrollPane của phần nội dung bên tay phải và điền tên của movie clip tại Value của contentPath (ví dụ: bai33-I-1).

Tiêu đề bài học

Nội dung của từng mục Menu các mục

+ Thực hiện tương tự cho các frame cịn lại.

- Các button là các đề mục sẽ link đến nội dung tương ứng, chỉ cần gọi đúng frame nĩ đang đứng với đoạn code sau:

on(release) {

gotoAndPlay(thứ tự frame);}

- Các button: Tư liệu, Bài tập, Đúng Sai (ở từng bài học của Scene ly thuyet) sẽ link đến Scene tương ứng. Chỉ cần gọi đúng frame nĩ đang đứng và scene là cĩ thể link được đến file mình muốn gọi đến

on(release) {

gotoAndPlay(“tên scene”, thứ tự frame);} Button Tư liệu: link tới frame chứa nội dung của nĩ

on (release) {

gotoAndPlay ("tu lieu",1);} Button Bài tập: link tới frame chứa nội dung của nĩ (adsbygoogle = window.adsbygoogle || []).push({});

on (release) {

gotoAndPlay ("bai tap",1); } Button Đúng sai: link tới frame chứa nội dung của nĩ

on (release) {

gotoAndPlay ("dung sai",1);}

- Button màu xanh : Click để trở về danh sách các bài học .

on (release) {

gotoAndPlay ("danh sach bai hoc",1); }

- Đối với các Scene cịn lại (tu lieu, dung sai, bai tap) chúng ta cùng thực hiện tương tự. + Scene tu lieu cĩ giao diện 2.29.

Hình 2.29. Giao diện Scene tu lieu + Scene dung sai cĩ giao diện như hình 2.30

Hình 2.30. Giao diện Scene dung sai Bên tay trái là các link tới các bài học liên quan.

Nút back để quay về Scene ly thuyet của bài học tương ứng. + Scene bai tapcĩ giao như hình 2.31.

Hình 2.31. Giao diện Scene bai tap + Scene danh sach bai hoc cĩ giao diện như hình 2.32.

Hình 2.32. Giao diện Scene danh sach bai hoc Tạo các button link đến các bài học

Lần lượt đưa các link đến vị trí frame của bài học đĩ rồi gọi nĩ ra (các bài khác cũng

Mục lục