Android vs EPUB                           Cd Chen                  http://www.cdchen.idv.tw/12年12月21⽇日星期五
陳永昇 (Cd Chen)               A                http://www.cdchen.idv.tw/   b                                            o   ...
⼤大綱                • ⾏行動 App 的基礎觀念                • EPUB 的介紹                • WebView 元件                • 實作 EPUB Reader12...
我假設您已經...                • 熟悉 Java 程式語⾔言                • 具備 Android 開發的經驗12年12月21⽇日星期五
⾏行動 App 的基礎觀念12年12月21⽇日星期五
什麼是⾏行動 App??12年12月21⽇日星期五
12年12月21⽇日星期五
12年12月21⽇日星期五
http://www.appleoutsider.de/2012/04/27/q12012-pc-vendor-marketshare/12年12月21⽇日星期五
http://mrpogson.com/tag/market-share/12年12月21⽇日星期五
http://wpcdn3.padgadget.com/wp-content/uploads/2012/07/evercore-120716-550x283.jpeg12年12月21⽇日星期五
⾏行動 App 類型12年12月21⽇日星期五
12年12月21⽇日星期五
Web-Page App        Native App           • Web 2.0           • Web Service           • HTML 5              • JSON-RPC     ...
12年12月21⽇日星期五
MVC 設計模式12年12月21⽇日星期五
12年12月21⽇日星期五
EPUB12年12月21⽇日星期五
淺談電⼦子書格式12年12月21⽇日星期五
優點          缺點                             市佔率⾼高     無中⽂文⽀支援                   azw       ⽀支援語⾳音    僅⽀支援 Kindle            ...
什麼是 EPUB??12年12月21⽇日星期五
• Electronic                  Publication                • 國際數位出版論壇                  (IDPF, International                 ...
EPUB 優點                • 免費且開放                • 可重新排版與可重新縮放的字型                • ⽀支援⾏行列圖⽚片                • 嵌⼊入式 Metadata  ...
EPUB 的版本                • 2007/09 - EPUB Release                • 2009/08 - Start EPUB Working                • 2010/07 - ...
EPUB 2 vs EPUB 3                      功能               技術                ‣⽀支援多媒體格式        ‣增加對 HTML5/CSS3                ‣...
EPUB 格式12年12月21⽇日星期五
• ZIP 壓縮檔                • 附檔名可使⽤用 .epub 或 .zip12年12月21⽇日星期五
EPUB 三種層級                • XHTML ⽂文件 (XHTML Document)                • 套件檔 (Package Files)                • 容器檔 (Container...
XHTML ⽂文件                • EPUB 的內容                • 類似 (幾乎相同) HTML                • EPUB3 可使⽤用 HTML512年12月21⽇日星期五
http://slides.html5rocks.com/12年12月21⽇日星期五
套件檔                • /mimetype                 • ⼀一定為 application/epub+zip                • /DIR/NAME.opf                 ...
容器檔                • META-INF/container.xml                • 儲存電⼦子書檔案的架構                 • 檔案路徑、DRM 宣告、...12年12月21⽇日星期五
EPUB 製作⼯工具12年12月21⽇日星期五
商業軟體                • Adobe InDesign                • IGP: Digital Publisher                • Apple Pages                •...
OpenSource                • Sigil                • Booktype                • calibre12年12月21⽇日星期五
轉換程式                • Word2EPUB                • ePub Maker                • DocBook12年12月21⽇日星期五
WebView12年12月21⽇日星期五
WebView 的介紹12年12月21⽇日星期五
•   Android 內建的簡易版瀏覽器                •   ⽀支援 HTML5 / CSS3 / JavaScript                •   可⾃自定瀏覽器的使⽤用介⾯面                • ...
使⽤用⽅方法                • 設定 AndroidManifest.xml                • 配置 layout 檔                • 撰寫程式                • 執⾏行與測試1...
設定                • 需開啟下列權限:                 • android.permission.INTERNET        <manifest ... >            <uses-permiss...
配置 Layout  <?xml version="1.0" encoding="utf-8"?>  <WebView      xmlns:android="http://schemas.android.com/apk/  res/andro...
撰寫程式12年12月21⽇日星期五
WebView                • android.webkit.WebView                • 重要 API                 • loadData()                 • loa...
WebView (cont)                • 導覽 (Navigation) API                 • canGoBack() / goBack()                 • canGoForwar...
• 取得 WebView 物件                • 指定網⾴頁瀏覽的設定 (Optional)                • 組態⾴頁⾯面處理的⽅方法 (Optional)                • ⾃自定使⽤用介⾯面...
取得 WebView 物件                WebView webView = (WebView)                    findViewById(R.id.webView)12年12月21⽇日星期五
變更瀏覽器的設定  WebSettings settings =      webView.getSettings();  settings.setSupportZoom(true);  settings.setBuiltinZoomContr...
WebSettings                • android.webkit.WebSettings                • 存取 WebView 的組態資料                • 重要 API         ...
組態⾴頁⾯面處理⽅方法       webView.setWebViewClient(           new WebViewClient() {               // ...           });12年12月21⽇日星期五
WebViewClient                • android.webkit.WebViewClient                • ⾃自定⾴頁⾯面的處理⽅方法                • 重要 API        ...
⾃自定使⽤用介⾯面       webView.setWebChromeClient(           new WebChromeClient() {               // ...           });12年12月21⽇日...
WebChromeClient                • android.webkit.WebChromeClient                • 定義使⽤用介⾯面的事件處理                • 重要 API    ...
指定網址或本地資料    網址    webView.loadUrl(        “http://www.niceStudio.com.tw”);    本地資料    webView.loadData(        “<h1>Hello...
JavaScript 整合12年12月21⽇日星期五
• WebView 可與 JavaScript 整合                • ⽅方式                 • WebChromeClient.onjsXXX()                 • JavaScript ➞...
JavaScript ➞WebView                • WebView 可註冊 JavaScript 函數的處理                 器 (Handler)                • 步驟         ...
<a href=”#” onclick=”android.say(‘hi’)” />                                                              HTML              ...
WebView➞JavaScript                • WebView 可直接呼叫網⾴頁中的                 JavaScript 函數       webView.loadUrl(“javascript:cha...
實作 EPUB Reader12年12月21⽇日星期五
Why??                • 實作私有的 DRM                • 實作特殊的效果或功能12年12月21⽇日星期五
實作⽅方法                • Bottom-Up                • 利⽤用現成的 OpenSource Project12年12月21⽇日星期五
FBReader                • Free & OpenSource                • Android 平台著名的 Reader                • http://www.fbreader.org...
取得原始程式碼                • 從官網下載                 • http://www.fbreader.org/FBReaderJ                • 使⽤用 Git 下載            ...
準備                • Android SDK >= 1.6                • Android NDK >= r4b                • Apache Ant >= 1.7.0           ...
編譯                1. 在專案⺫⽬目錄中建⽴立 local.properties 檔                   sdk.dir=<DIR>                   ndk.dir=<DIR>       ...
擴充 FBReaderJ                • <PROJECT>/src/org/geometerplus/                  android/fbreader/12年12月21⽇日星期五
Q&A12年12月21⽇日星期五
Upcoming SlideShare
Loading in...5
×

Android vs e pub

1,339

Published on

這是我於 2012/12/19 在高苑科技大學介紹 Android 與 EPUB 的投影片,煩請各位前輩先進指正。

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,339
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Android vs e pub

  1. 1. Android vs EPUB Cd Chen http://www.cdchen.idv.tw/12年12月21⽇日星期五
  2. 2. 陳永昇 (Cd Chen) A http://www.cdchen.idv.tw/ b o 學歷:國⽴立台中科技⼤大學 u 經歷: t 聯成電腦講師 恆逸資訊講師 現職: 乃師實業技術總監 證照: RHCE / LPIC / NCLP MCSA / MCSE OCPJP / OCPJWCD TCSE / NSPA12年12月21⽇日星期五
  3. 3. ⼤大綱 • ⾏行動 App 的基礎觀念 • EPUB 的介紹 • WebView 元件 • 實作 EPUB Reader12年12月21⽇日星期五
  4. 4. 我假設您已經... • 熟悉 Java 程式語⾔言 • 具備 Android 開發的經驗12年12月21⽇日星期五
  5. 5. ⾏行動 App 的基礎觀念12年12月21⽇日星期五
  6. 6. 什麼是⾏行動 App??12年12月21⽇日星期五
  7. 7. 12年12月21⽇日星期五
  8. 8. 12年12月21⽇日星期五
  9. 9. http://www.appleoutsider.de/2012/04/27/q12012-pc-vendor-marketshare/12年12月21⽇日星期五
  10. 10. http://mrpogson.com/tag/market-share/12年12月21⽇日星期五
  11. 11. http://wpcdn3.padgadget.com/wp-content/uploads/2012/07/evercore-120716-550x283.jpeg12年12月21⽇日星期五
  12. 12. ⾏行動 App 類型12年12月21⽇日星期五
  13. 13. 12年12月21⽇日星期五
  14. 14. Web-Page App Native App • Web 2.0 • Web Service • HTML 5 • JSON-RPC • CSS 3 • XML-RPC • JavaScript • SOAP • ... • Streaming • ... HTML / HTTP12年12月21⽇日星期五
  15. 15. 12年12月21⽇日星期五
  16. 16. MVC 設計模式12年12月21⽇日星期五
  17. 17. 12年12月21⽇日星期五
  18. 18. EPUB12年12月21⽇日星期五
  19. 19. 淺談電⼦子書格式12年12月21⽇日星期五
  20. 20. 優點 缺點 市佔率⾼高 無中⽂文⽀支援 azw ⽀支援語⾳音 僅⽀支援 Kindle mobi / prc ⽀支援度廣 無中⽂文⽀支援 檔案輕巧 無精密排版 lrf 翻⾴頁快速 中⽂文⽀支援差 精確排版 檔案⼤大 pdf 中⽂文⽀支援佳 翻⾴頁慢12年12月21⽇日星期五
  21. 21. 什麼是 EPUB??12年12月21⽇日星期五
  22. 22. • Electronic Publication • 國際數位出版論壇 (IDPF, International Digital Publishing Forum)12年12月21⽇日星期五
  23. 23. EPUB 優點 • 免費且開放 • 可重新排版與可重新縮放的字型 • ⽀支援⾏行列圖⽚片 • 嵌⼊入式 Metadata • ⽀支援 DRM • ⽀支援 CSS • ⽀支援 影⾳音內容12年12月21⽇日星期五
  24. 24. EPUB 的版本 • 2007/09 - EPUB Release • 2009/08 - Start EPUB Working • 2010/07 - EPUB 2.0.1 Draft • 2010/09 - EPUB 2.0.1 Release • 2011/10 - EPUB 3.0 Release (Current)12年12月21⽇日星期五
  25. 25. EPUB 2 vs EPUB 3 功能 技術 ‣⽀支援多媒體格式 ‣增加對 HTML5/CSS3 ‣⽀支援數學格式 的⽀支援 ‣⽀支援複雜本⽂文內容 ‣⽀支援嵌⼊入字型 ‣⽀支援⽂文字朗讀 ‣⽀支援 SVG 圖檔 ‣⽀支援⾮非羅⾺馬⽂文字 ‣⽀支援 MathML ‣⽀支援 DAISY 有聲書12年12月21⽇日星期五
  26. 26. EPUB 格式12年12月21⽇日星期五
  27. 27. • ZIP 壓縮檔 • 附檔名可使⽤用 .epub 或 .zip12年12月21⽇日星期五
  28. 28. EPUB 三種層級 • XHTML ⽂文件 (XHTML Document) • 套件檔 (Package Files) • 容器檔 (Container Files)12年12月21⽇日星期五
  29. 29. XHTML ⽂文件 • EPUB 的內容 • 類似 (幾乎相同) HTML • EPUB3 可使⽤用 HTML512年12月21⽇日星期五
  30. 30. http://slides.html5rocks.com/12年12月21⽇日星期五
  31. 31. 套件檔 • /mimetype • ⼀一定為 application/epub+zip • /DIR/NAME.opf • 作者、發⾏行者、... • /DIR/NAME.ncx • 電⼦子書的組織架構 (章節、段落、...)12年12月21⽇日星期五
  32. 32. 容器檔 • META-INF/container.xml • 儲存電⼦子書檔案的架構 • 檔案路徑、DRM 宣告、...12年12月21⽇日星期五
  33. 33. EPUB 製作⼯工具12年12月21⽇日星期五
  34. 34. 商業軟體 • Adobe InDesign • IGP: Digital Publisher • Apple Pages • QuarkXPress • oXygen XML Editor12年12月21⽇日星期五
  35. 35. OpenSource • Sigil • Booktype • calibre12年12月21⽇日星期五
  36. 36. 轉換程式 • Word2EPUB • ePub Maker • DocBook12年12月21⽇日星期五
  37. 37. WebView12年12月21⽇日星期五
  38. 38. WebView 的介紹12年12月21⽇日星期五
  39. 39. • Android 內建的簡易版瀏覽器 • ⽀支援 HTML5 / CSS3 / JavaScript • 可⾃自定瀏覽器的使⽤用介⾯面 • 可定義內容處理的⽅方式 • 可組態執⾏行時期的設定 • 可與 Server 端的 JavaScript 互動12年12月21⽇日星期五
  40. 40. 使⽤用⽅方法 • 設定 AndroidManifest.xml • 配置 layout 檔 • 撰寫程式 • 執⾏行與測試12年12月21⽇日星期五
  41. 41. 設定 • 需開啟下列權限: • android.permission.INTERNET <manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest>12年12月21⽇日星期五
  42. 42. 配置 Layout <?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com/apk/ res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" />12年12月21⽇日星期五
  43. 43. 撰寫程式12年12月21⽇日星期五
  44. 44. WebView • android.webkit.WebView • 重要 API • loadData() • loadUrl() • zoomIn() / zoomOut()12年12月21⽇日星期五
  45. 45. WebView (cont) • 導覽 (Navigation) API • canGoBack() / goBack() • canGoForward() / goForward() • canGoBackOrForward() / goBackOrForward()12年12月21⽇日星期五
  46. 46. • 取得 WebView 物件 • 指定網⾴頁瀏覽的設定 (Optional) • 組態⾴頁⾯面處理的⽅方法 (Optional) • ⾃自定使⽤用介⾯面 (Optional) • 指定網址或本地資料12年12月21⽇日星期五
  47. 47. 取得 WebView 物件 WebView webView = (WebView) findViewById(R.id.webView)12年12月21⽇日星期五
  48. 48. 變更瀏覽器的設定 WebSettings settings = webView.getSettings(); settings.setSupportZoom(true); settings.setBuiltinZoomControls(true); settings.setJavaScriptEnabled(true);12年12月21⽇日星期五
  49. 49. WebSettings • android.webkit.WebSettings • 存取 WebView 的組態資料 • 重要 API • setJavaScriptEnabled() • !! ALL !!12年12月21⽇日星期五
  50. 50. 組態⾴頁⾯面處理⽅方法 webView.setWebViewClient( new WebViewClient() { // ... });12年12月21⽇日星期五
  51. 51. WebViewClient • android.webkit.WebViewClient • ⾃自定⾴頁⾯面的處理⽅方法 • 重要 API • onPageXXX() / onFormResubmission() • onLoadResource() / onReceivedError() / onReceivedHttpAuthRequest()12年12月21⽇日星期五
  52. 52. ⾃自定使⽤用介⾯面 webView.setWebChromeClient( new WebChromeClient() { // ... });12年12月21⽇日星期五
  53. 53. WebChromeClient • android.webkit.WebChromeClient • 定義使⽤用介⾯面的事件處理 • 重要 API • onProgressChanged() • onReceivedXXX() / onjsXXX() • onCloseWindow()12年12月21⽇日星期五
  54. 54. 指定網址或本地資料 網址 webView.loadUrl( “http://www.niceStudio.com.tw”); 本地資料 webView.loadData( “<h1>Hello World!!</h1>”);12年12月21⽇日星期五
  55. 55. JavaScript 整合12年12月21⽇日星期五
  56. 56. • WebView 可與 JavaScript 整合 • ⽅方式 • WebChromeClient.onjsXXX() • JavaScript ➞ WebView • WebView ➞ JavaScript12年12月21⽇日星期五
  57. 57. JavaScript ➞WebView • WebView 可註冊 JavaScript 函數的處理 器 (Handler) • 步驟 • 撰寫類別與⽅方法 • 在 WebView 註冊處理器12年12月21⽇日星期五
  58. 58. <a href=”#” onclick=”android.say(‘hi’)” /> HTML Activity public class WebViewActivity extends Activity { class JavaScriptHandler { public void say(String word) { Toast.makeText(context, word, Toast.LENGTH_LONG).show(); } } public void onCreate(Bundle bundle) { super.onCreate(bundle); webView = (WebView) findViewById(R.id.wv); webView.addJavaScriptInterface( new JavaScriptHandler(), “android”); } }12年12月21⽇日星期五
  59. 59. WebView➞JavaScript • WebView 可直接呼叫網⾴頁中的 JavaScript 函數 webView.loadUrl(“javascript:changeColor(‘red’)”); Activity <script type=”text/javascript”> HTML function changeColor(c) { ... } </script>12年12月21⽇日星期五
  60. 60. 實作 EPUB Reader12年12月21⽇日星期五
  61. 61. Why?? • 實作私有的 DRM • 實作特殊的效果或功能12年12月21⽇日星期五
  62. 62. 實作⽅方法 • Bottom-Up • 利⽤用現成的 OpenSource Project12年12月21⽇日星期五
  63. 63. FBReader • Free & OpenSource • Android 平台著名的 Reader • http://www.fbreader.org/ • ⽀支援的格式 • EPUB / HTML / FictionBook / Plucker / PalmDoc / TCR / RTF / ...12年12月21⽇日星期五
  64. 64. 取得原始程式碼 • 從官網下載 • http://www.fbreader.org/FBReaderJ • 使⽤用 Git 下載 • git://github.com/geometer/FBReaderJ.git12年12月21⽇日星期五
  65. 65. 準備 • Android SDK >= 1.6 • Android NDK >= r4b • Apache Ant >= 1.7.0 • Cygwin >= 1.7 (Windows Only)12年12月21⽇日星期五
  66. 66. 編譯 1. 在專案⺫⽬目錄中建⽴立 local.properties 檔 sdk.dir=<DIR> ndk.dir=<DIR> 2. Windows: ndk-build -> ant release Unix / MacOS X: ant package12年12月21⽇日星期五
  67. 67. 擴充 FBReaderJ • <PROJECT>/src/org/geometerplus/ android/fbreader/12年12月21⽇日星期五
  68. 68. Q&A12年12月21⽇日星期五
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×