PDA

View Full Version : Cách tạo Ebook dạng dongping



Quocvuong82
27-02-2012, 05:04 PM
Có nhiều bác muốn chia sẻ cách làm ebook để tự làm, vậy nay tôi sẽ trình bày cách tạo các ebook (như những ebook mình đã làm để chia sẻ với các bác, do có khá nhiều vấn đề nên tôi sẽ trình bày từ từ, các bác đừng sốt ruột nhé.

Bước 1. Chuẩn bị game để làm ebook:
1. Định dạng game: UBB, đây là định dạng để trình bày bàn cờ động dongping, định dạng mà trang dpxq.com sử dụng. Để có các game ở định dạng này, có 2 nguồn chính, một là dữ liệu cờ trên trang dpxq.com hoặc bất cứ đâu có bàn cờ dạng dongping, cách lấy như sau:
http://i602.photobucket.com/albums/tt102/Quocvuong82/LaygameUBB.png

lúc này ta được một đoạn code UBB, đây chính là dữ liện một game


www_dpxq_com
500,350
9999259959990799848770999999995128999932405299999919994899999999
110514
2008-11-3 12:19:00
2008-11-3 12:19:00
B其他的杀着-第45局
844440304440303187813241403031305150
0
9
全局
慢棋
象棋谱大全-近现代残排局
象棋杀着大全
27其他类
0000-00-00

1910
973160
象棋谱大全
象棋谱大全
红胜
http%3A//dpxq.com/%0D%0Ahttp%3A//dpxq.com/hldcg/search/
www.dpxq.com


Một nguồn nữa cũng có thể lấy được code game dạng UBB chính là CCBridge, các bạn mở từng ván cờ ra và vào menu "Xuất dữ liệu", chọn Menuitem thứ 2, có chữ UBB ấy, ở đây tôi nói CCBridge đã việt hoá bởi "Đời mây trắng" ấy.
Tất nhiên đây là cách thủ công, sẽ mất khá nhiều thời gian.
Như vậy phần lấy game dạng UBB đã ok chưa các bác? bác nào còn thắc mắc chỗ nào thì cứ hỏi nhé.

Bước 2. Tạo các file html có bàn cờ động
Để tạo file ebook dạng chm thì chúng ta phải tạo ra các file html làm nội dung của ebook.
1. Các bác download (http://www.mediafire.com/?597fpqkqa6gv1b4) cái này về, giải nén ra được 2 file XQBase.htm và XQBase.js, file XQBase.js chính là file javascript để trình bày game UBB, cái này tôi đã việt hoá gần hết, nếu bác nào muốn lấy file triếng trung thì lên tiếng, tôi gửi cho. Các bác tạo một folder chứa các file html sẽ tạo (Chẳng hạn "Contents", gọi là thư mục gốc), trong folder này tạo một folder con, chẳng hạn "XQBase", copy 2 file vừa giải nén được vào folder con đó, vậy là khâu chuẩn bị đã OK, chuẩn bị làm web html nhé các bác.
2. Trong thư mục gốc, tạo một file Game01.html, dùng một trình soạn html nào đó, hay đơn giản là Notepad hoặc tốt nhất là Notepad++ mở file đó lên (tất nhiên là chưa có gì), chuyển sang chế độ Charset là "Encode in UTF-8", để đảm bào những comment của game không bị hỏng. (Xem hình dười, tôi hướng dẫn đối với Notepad++)

http://i602.photobucket.com/albums/tt102/Quocvuong82/Totepad.png
Sau đó các bác gõ vào nội dung như sau:

<html>
<body>
<div id="Game01" style="display:none;">
</div>
<iframe src="XQBase/XQBase.htm" name="name_Game01" id="id_Game01" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</body>
</html>

Trong thẻ div

<div id="Game01" style="display:none;">
</div>
Các bác chèn và giữa 2 dòng đó nội dung UBB (trong Bước 1 đã lấy được)
Nội dung được như sau:

<html>
<body>
<div id="Game01" style="display:none;">

www_dpxq_com
500,350
9999259959990799848770999999995128999932405299999919994899999999
110514
2008-11-3 12:19:00
2008-11-3 12:19:00
B其他的杀着-第45局
844440304440303187813241403031305150
0
9
全局
慢棋
象棋谱大全-近现代残排局
象棋杀着大全
27其他类
0000-00-00

1910
973160
象棋谱大全
象棋谱大全
红胜
http%3A//dpxq.com/%0D%0Ahttp%3A//dpxq.com/hldcg/search/
www.dpxq.com

</div>
<iframe src="XQBase/XQBase.htm" name="name_Game01" id="id_Game01" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</body>
</html>
Ghi lại, dùng trình duyệt mở file Game01.html lên và xem kết quá.
Phù, mệt quá, dần dần em sẽ giải thích kỹ hơn cách tạo file html này, giờ thì các bác luyện tập đi đã, chúc thành công!

Congaco_H1R5
27-02-2012, 05:57 PM
Được sự đồng ý của bạn Quocvuong82, toi coppy bài viết này thành 1 Topic riệng trong mục hướng dẫn chung .
Nếu các bạn có ý kiến trao đổi với tác giả thì xin comments trong tocpic này .
Bên Topic http://www.thanglongkydao.com/tai-lieu-tieng-viet/11433-ebook-giang-hoi-thai-p-dai-i-danh-cui-c-vai-bai-t-dai-i-bai-i-cuoi-c-chm-bai-n-coi-doi-ng-8.html#post200908 nên để làm nơi cập nhật các Ebook dạng này của bạn Quocvuong82

cyc
27-02-2012, 10:25 PM
Ghi lại, dùng trình duyệt mở file Game01.html lên và xem kết quá.
Phù, mệt quá, dần dần em sẽ giải thích kỹ hơn cách tạo file html này, giờ thì các bác luyện tập đi đã, chúc thành công!

Sau khi làm xong, dùng trình duyệt để mở file lên thì nó hiện ra thế này bác Quocvuong82:

mxq,1,0,1,1,0,38,40,-355,-26 1.50.500[/DhtmlXQiFrame]'>

Quocvuong82
27-02-2012, 11:20 PM
Sau khi làm xong, dùng trình duyệt để mở file lên thì nó hiện ra thế này bác Quocvuong82:

mxq,1,0,1,1,0,38,40,-355,-26 1.50.500[/DhtmlXQiFrame]'>

Bác có thể copy nội dung file Game01.html đó, đưa vào thẻ PHP trên diễn đàn để em xem được không? Có lẽ của bác bị sai cú pháp.

Quocvuong82
27-02-2012, 11:48 PM
Tiện đây, giải thích luôn một số điểm chính của file html:


<html>
<body>
<div id="Game01" style="display:none;">
</div>
<iframe src="XQBase/XQBase.htm" name="name_Game01" id="id_Game01" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</body>
</html>

Đây là file html rất đơn giản, các bác có thể tạo những file phức tạp, muốn chèn bàn cờ vào đâu cũng được, chèn bao nhiêu bàn cờ cũng được, chỉ cần tuân theo những quy tắc sau:

Thẻ div

<div id="Game01" style="display:none;">
</div>

Có hai điểm chú ý:
id=Game01, đây là id của game sẽ hiển thị trong thẻ iframe, tí sẽ nói sau
display:none, tức ;à thẻ này ở dạng ẩn, không cho hiện nội dung của nó, nội dung của nó sẽ được truy cập bằng Javascript vẽ bàn cờ (chỉ cần hiểu thế là được rồi).

Sau khi chèn nội dung game (UBB) vào trong thẻ div, tức là toàn bộ cái đoạn



...


sau dòng [/DhtmlXQ], chúng ta có thể chèn thêm 3 Option nữa:
1) 1.25.500
Cái này để điều chỉnh mức to nhỏ của bàn cờ (ví dụ 1.00.500 là bàn cờ nhỏ, 1.25.500 bàn cờ tương đối to, 1.45.500 là bàn cờ to
2) en
Cái này là tôi thêm vào, bình thường Script của dpxq.com nó chỉ có ký hiệu các nước đi bằng tiếng trung thôi,ở đây có những lựa chọn: en là tiếng anh (mặc định là en), cn là tiếng trung (giống của dpxq.com), vi là tiếng việt (không chuẩn lắm đâu), ja thì các nước đi với tên quân cờ là hình quân cờ (cũng không chính xác lắm đâu).
3) 1
Cái này để ẩn các nước đi hay hiện các nước đi, nếu không có hoặc nội dung trong thẻ này rỗng thì các nước đi sẽ hiện, nếu có nội dung thì các nước đi sẽ ẩn đi.
4) 0
Cái này để cài đặt lúc load ván cờ đã nhẩy đến "nửa nước đi" với số thứ tự được đưa ra là số trong cặp thẻ đó, nếu là 0 thì từ vị trí xuất phát.

Tiếp theo là cặp thẻ iframe

<iframe ...> ... </iframe>

Chú ý những thông số sau:

src="XQBase/XQBase.htm"
Đây chính là đường dẫn tới file XQBase.htm, trong này cũng phải có file XQBase.js

name="name_Game01" id="id_Game01"
Chú ý hai chữ in đậm: name="name_Game01" id="id_Game01
Hai cái này phải trùng với id trong thẻ div nói ở trên, và dùng các id khác nhau ta có thể trình bày nhiều bàn cờ trong một trang.

Quocvuong82
27-02-2012, 11:58 PM
Ví dụ, các bác chèn hai bàn cờ khác nhau như sau:


<html>
<body>
<div id="Game01" style="display:none;">

www_dpxq_com
500,350
9999259959990799848770999999995128999932405299999919994899999999
110514
2008-11-3 12:19:00
2008-11-3 12:19:00
B其他的杀着-第45局
844440304440303187813241403031305150
9
全局
慢棋
象棋谱大全-近现代残排局
象棋杀着大全
27其他类
0000-00-00

1910
973160
象棋谱大全
象棋谱大全
红胜
http%3A//dpxq.com/%0D%0Ahttp%3A//dpxq.com/hldcg/search/
www.dpxq.com


1.25.500
cn
5
</div>

<div id="Game02" style="display:none;">


www_dpxq_com
500,350
Cục thứ 002. Mã điệp át thị
适情雅趣
0000-00-00


卷一









[/DhtmlXQ_time]
[DhtmlXQ_black]





[DhtmlXQ_blacktime]
[/DhtmlXQ_time]
红胜




1433473949999969150028064664999929026041405099629909420338435863
141041301011304128200210202841301141504133214050155542525552415228585241695741525776524176554152554352414362505162435150435541525563524163715051715251526454
332140412142
20224130332140412142
红弃车马,炮胜
实战中残局






0


www.ccbridge.net


1.25.500
1
en
</div>

<iframe src="XQBase/XQBase.htm" name="name_Game01" id="id_Game01" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>
<p>
</p>
<iframe src="XQBase/XQBase.htm" name="name_Game02" id="id_Game02" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>

</body>
</html>

cyc
28-02-2012, 01:48 AM
Mình sử dụng Notepad, copy đoạn code sau:


<html>
<body>
<div id="Game01" style="display:none;">

www_dpxq_com
500,350
1327293949596967744763062646658610340230405082623112420324438399
第7题
未知
13436243474342524344525374721214724231414243342244455354432341216343544443733041737121206775141523534030533330407563242563821545594841328261
5356444130414333562663434152694726363323
5041428240504454534359483446274614548242
5040828053506343344254571013675513435543
6755121455433442
4241434531334535121474733353060541476947344235450220677530414515
30417434313443426281428281608262608162613433634340306181
504174343134434262504282
6270427270516361
弃车杀中卒,是夺取优势的一步妙着。如此时不吃中卒,改走车八退二,炮2进2,车八平六,车2进1,车二进一,炮5平3,局势复杂。
除此之外,还有三种走法,见变着。
进车准备平车抽将,如改走马三进四,炮2进2,马四进五,马4退5,红空头炮被兑,黑局势较优。
升炮巡河,随时准备兑换红空头炮,是黑方目前的最佳应手。
退马踩车,但红有炮五退一的妙解,黑局面反而难以收拾,如改走炮6进3(见变着)
红胜
红也占优
切忌走车五平八,否则黑马4退5反成黑优
红多兵得象占优
红优
红优
红得子占优
红大占优势
http%3A//www.dpxq.com/%0D%0Ahttp%3A//www.dpxq.com/hldcg/dhtmlxq/frame.htm
www.dpxq.com

</div>
<iframe src="XQBase/XQBase.htm" name="name_Game01" id="id_Game01" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</body>
</html>


Sau đó Save As lại vào Folder gốc, và thử mở bằng trình duyệt Google Chorme, thì nhận được dòng lệnh:


mxq,1,0,1,1,0,38,40,-355,-26
1.50.500[/DhtmlXQiFrame]'>

Quocvuong82
28-02-2012, 08:49 AM
@cyc: Bác đã tạo thư mục XQBase trong thư mục gốc và bỏ 2 filoe XQBase.js và XQBase.htm vào đó chưa? Tôi thử đoạn code đó thấy bình thường mà.

Quocvuong82
28-02-2012, 08:52 AM
@cyc: Mà tôi nhầm, mở bằng IE, Opera, Firefox thì bình thường mà mở bằng Google Chrome lại không được, không hiểu tại sao.

cyc
28-02-2012, 11:04 AM
@cyc: Mà tôi nhầm, mở bằng IE, Opera, Firefox thì bình thường mà mở bằng Google Chrome lại không được, không hiểu tại sao.

Okie, thử mở bằng trình duyệt khác ( ngoại trừ Google Chrome và IE ) thì okie.

Thank bro!

Quocvuong82
01-03-2012, 12:24 AM
Các bác đã thành thạo với việc tạo các file html chưa?

cyc
01-03-2012, 09:37 AM
Các bác đã thành thạo với việc tạo các file html chưa?

Chờ bác viết tiếp đây, lót gạch hóng :)

Quocvuong82
02-03-2012, 02:08 AM
Hôm nay vẫn còn bận quá, các bác đợi chút nhé, mai hoặc ngày kia em sẽ trình bày phần quan trọng còn lại.

Quocvuong82
03-03-2012, 11:48 PM
Để các bác phải chờ lâu quá, hôm nay rỗi rỗi tranh thủ hướng dẫn phần tạo ebook nhé.
Sau khi đã tạo được các file html làm nội dung của ebook, các bác cần chuẩn bị phần mềm, em hay dùng Pocket CHM Pro5.9, các bác có thể vào đây (http://www.box.com/public/jn6zmzyyo3) download bản portale, bản này dùng OK.
Sau khi có phần mềm, các bác chuẩn bị cho em như sau: Giả sử các file html đã chuẩn bị, các bác để trong thư mục contents, tạo một thư mục làm thư mục gốc tạo ebook, ví dụ: C:\Ebooks\Ebook1, copy thư mục contents vào thư mục gốc tạo ebook dó, tức là các file html sẽ nằm trong thư mục: C:\Ebooks\Ebook1\contents\. Giờ ta bắt đầu.
Bước 1: Tạo project
+ Khởi động Pocket CHM Pro 5.9
+ Chọn menu: File->New
+ Một hộp thoại hiện ra:

http://i602.photobucket.com/albums/tt102/Quocvuong82/PCHM.png
Có 3 mục
. Title: Cái này không quan trọng lắm vì nó không hiển thi được trong ebook
. Project file name: Cái này đặt thế nào thì tùy, ví dụ : Ebook1
. Project folder: Cái này các bác browser đến thư múc gốc sẽ chứa ebook lúc nãy (C:\Ebooks\Ebook1)., nhấn OK là xong bước 1.

Quocvuong82
04-03-2012, 12:00 AM
Bước 2: Thiết đặt Project (thuộc tính của ebook):
Vào menu Settings->HTML help->Properties, một hộp thoại hiện ra
Mục General, có mục Language là quan trọng, chọn như hình.

http://i602.photobucket.com/albums/tt102/Quocvuong82/HTMLhelpProperties.png
Các mục khác các bác có thể chọn tuỳ ý, thử để xem sự thay đổi.

Quocvuong82
04-03-2012, 12:25 AM
Bước 3: Tạo nội dung Ebook
Cửa sổ chính của chương trình được chia ra làm 2, như hình vẽ:

http://i602.photobucket.com/albums/tt102/Quocvuong82/PCHM1.png
Chú ý, bên trái có 2 tab quan trọng
+ Chọn Tab Contents, bên phải browser đến thư mục "contents", chọn các file html, kéo vào cửa sổ bên trái, lúc này Pocket CHM Pro sẽ tự động lấy "Title" của file html làm tên cho các trang trong file html, tuy nhiên nếu muốn có tiếng việt thì ta không thể dùng Title sẵn của file html được, Để có title tiếng Việt, các bác chuyển bộ gõ (Unikey) sang bảng mã "Unicode tổ hợp", với mỗi item trong danh sách "contents", nhấn "F2" và gõ lại nội dung, tất nhiên là nó không hiển thị nội dung rõ ràng ngay ở đây mà sau khi biên dịch ta mới thấy được tiếng việt.
+ Chọn Tab "File", bên cửa sổ bên phải, browser đến thư mục "contents", kéo toàn bộ thư mục con của thư mục "contents", (ví dụ "XQBase") vào phía bến trái, tức là "Files List", một hộp thoại hiện ra, chú ý chọn như sau:

http://i602.photobucket.com/albums/tt102/Quocvuong82/PCHM2.png
Nhấn OK.

Quocvuong82
04-03-2012, 12:30 AM
Bước 4: Compile Ebook thành định dạng chm
Vào menu Tools->Compile to CHM, một hộp thoại hiện ra, nhấn Compile
Enjoy!

cyc
04-03-2012, 01:39 AM
Thank bro, theo hướng dẫn của bro mình đã làm được.

Cơ mà, làm thế nào mình có thể chèn bình luận bằng Tiếng Việt trong quá trình tạo ebook nhỉ?

Quocvuong82
23-04-2012, 01:09 AM
Lâu nay bận quá nên ít có thời gian ghé diễn đàn, với những hướng dẫn ở trên các bác đã tạo được ebook nào chưa vậy, sao không thấy chia sẻ cho anh em?
Ở trên minh chỉ hướng dẫn hết sức cơ bản, nếu bác nào thạo một chút về HTML thì có thể tạo được nhiều kiểu ebook sáng tạo, đẹp mắt, thuận lợi cho việc nghiên cứu.

Quocvuong82
23-04-2012, 01:12 AM
Thank bro, theo hướng dẫn của bro mình đã làm được.

Cơ mà, làm thế nào mình có thể chèn bình luận bằng Tiếng Việt trong quá trình tạo ebook nhỉ?

Sorry bác Cyc vì câu hỏi để lâu quá không được giải đáp.
Đối với định dạng html bác có thể chèn cái gì vào tuỳ thích (ảnh, văn bản, flash, bàn cờ java...)
Còn nếu bác muốn chèn bình luận vào ngay trong bàn cờ dongping thfi bác dùng ccbrige để comment trong game ấy.

vivamosforever
26-05-2012, 02:44 PM
Bạn có bản cài đặt Pocket chn pro 5.9 không. Nếu có bạn hãy up len Mediafire cho mọi người down với.
Cái link bạn cho ở trên hình như không down được thì phải. Tôi tìm trên google mấy chỗ cũng chẳng down được.
Cảm ơn trước nhé.

tinhlahan702
28-07-2012, 12:53 AM
Bạn có bản cài đặt Pocket chn pro 5.9 không. Nếu có bạn hãy up len Mediafire cho mọi người down với.
Cái link bạn cho ở trên hình như không down được thì phải. Tôi tìm trên google mấy chỗ cũng chẳng down được.
Cảm ơn trước nhé.
Mình nghĩ bạn đang cần PowerCHM, nếu đúng thì bạn có thể down bằng link bên dưới:

Power CHM 2012.rar (http://www.mediafire.com/?6np6cntt3li2lyb)
Chúc bạn vui và làm được những Ebook hữu ích.
THÂN CHÀO.

voanhcoma
27-09-2012, 04:25 PM
Quocvuong82 cho mình hỏi la tai sao mình không thể mở được file Game01.html, toàn là báo không tìm thấy File "Firefox can't find the file at /C:/Users/DELLSTUDIO/Desktop/Contents/XQBase/XQBase/XQBase.htm" (mình để thư mục Contents ở Desktop). Trong khi đó vấn mở được file XQBase.html ở cùng thư mục hoặc copy nguyên toàn bộ nôi dung của file XQBase.html mở trên C++ vào file Game01.html mở trên C++ và save dưới dạng html thì vẫn mở được bình.
Mình dùng win 7 x64, file Game01.html mình tạo trên C++ và copy nguyên toàn bộ trong phần PHP code và save dưới dạng html thì lại không mở được (mở bằng IE9, Firefox 15 và Opera).
Máy tính của mình cài đầy đủ Java và fonts Trung Quốc rồi.
Phần PHP code: (Nguyên phần code Quocvuong82 đăng ở trang 1)
<html>
<body>
<div id="Game01" style="display:none;">

www_dpxq_com
500,350
9999259959990799848770999999995128999932405299999919994899999999
110514
2008-11-3 12:19:00
2008-11-3 12:19:00
B其他的杀着-第45局
844440304440303187813241403031305150
0
9
全局
慢棋
象棋谱大全-近现代残排局
象棋杀着大全
27其他类
0000-00-00

1910
973160
象棋谱大全
象棋谱大全
红胜
http%3A//dpxq.com/%0D%0Ahttp%3A//dpxq.com/hldcg/search/
www.dpxq.com

</div>
<iframe src="XQBase/XQBase.htm" name="name_Game01" id="id_Game01" width="500" height="350" frameborder="0" allowTransparency="true" bgcolor="transparent" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</body>
</html>

voanhcoma
27-09-2012, 06:07 PM
Bro nào có file htm hoặc html để tạo ebook dạng dongping cho tôi xin khoảng 10 file được không?
Cảm ơn.