Web 2.0在這幾年已變成一股流行的趨勢。許多Web 2.0的系統, 像是Wikipedia或者 是Youtube等,透過使用者的分享以及傳播的力量,使得網際網路上的資訊越來越豐富。近 年來行動裝置技術正在蓬勃發展,許多手持裝置出現到市場中,如iPhone、iPad、Android phone、Android pad等。尤其是iPad的推出,帶起了全世界使用「電子書」的風潮,一個 如書本大小的螢幕尺寸,電子化的內容,讓人們在不同環境中的閱讀更加方便。
然而,實用的資訊通常都散佈在各個網站上,當使用者透過手持裝置來瀏覽WWW的 時候,將會面臨到難以瀏覽以及難以尋找資訊的困境;因此,如何能更有效率的集中知識, 並且提供更友善的使用者介面,讓手持裝置不管在任何時間與地點都可以獲取到這些實用的 資訊,變成一個重要的課題。
基於這樣的想法,本研究計畫使用Book-on-Demand的機制,彙整來自各個不同的網 站內容,產生電子書的呈現方式,讓人們可以透過手持裝置,輕易的進行閱讀這些內容。我 們系統使用的技術包含了HTML 5、CSS 3、JQuery,綜合出「網路應用程式」的概念,建 立出一個具有更加互動性、以及高品質的電子書閱讀體驗,不僅僅是在電腦上,透過手持裝 置也能夠進行體驗。我們希望這樣的Book-on-Demand的機制可以在更多的地方被應用,像 是eLearning、以及電子刊物產業。

Web 2.0 trend is popular for several years. Many Web 2.0 system, such as “Wikipedia”, “Youtube”, etc., have very rich contents through the sharing and spreading by the users of social networks. Recently, mobile technologies are booming, which brings many handheld devices to the market, such as iPhone, iPad, Android phone, Android pad, etc. Especially iPad, it brings global people to use “eBook”, a “book size” of device, is more suitable for people to read information in many circumstances.
However, useful information on the web is usually separated among different web pages. When a user navigates WWW using handheld devices, he may confront a situation that very hard to navigate the web pages or hard to find useful information. Therefor, how to collect useful information in an efficiency way, and to provide a friendly user interface in handheld devices so that people can access these information anytime and anywhere
is becoming a important topic.
Based on this idea, this Thesis propose a Book-on-Demand mechanism to collect the rich contents from WWW and generate an eBook presentation style in handheld devices for people who can read the contents very easily. Our system uses technology include HTML 5, CSS 3, and JQuery, which is called “Web Application”, to build an eBook presentation style content which can provide better interactive functions and high quality reading experiences not only for PC, but also for handheld devices. We hope that this Book-on-Demand mechanism can be applied in many applications such as eLearning and digital content industries.

[1] Yuehui Yu, Lei Ning, Weizhong Liu(2009) - Combining HTML 5 with MVC Framework to Simplify Real-Time Collaboration for Web Development
[2] Ethan Marcotte(2010) - Responsive Web Design
[3] Constantine Mantratzis, Steve Cassidy(2005) - DOM-Based XHTML Document Structure Analysis Separating Content from Navigation Elements
[4] Steven J. Vaughan-Nichols(2010) - Will HTML 5 Restandardize the Web?
[5] Lauren Wood(1999) - PROGRAMMING THE WEB: The W3C DOM Specification
[6] Yu Ping, Kostas Kontogiannis, Terence C. Lau(2004) - Transforming Legacy Web Applications to the MVC Architecture
[7] Jeremy Keith(2010) - HTML5 for Web Designer
[8] Mark Pilgrim(2010) - HTML5 Up and Running
[9] Thomas Burkert(2011) - Professional Web Design Volume 2
[10] Matthew David(2010) - HTML5 - Designing Rich Internet Applications
[11] Jonathan Stark(2010) - Building iPhone Apps with HTML, CSS, and Javascript
[12] Maximiliano Firtman(2010) - Programming the Mobile Web
[13] BEAR BIBEAULT, YEHUDA KATZ(2010) - jQuery in Action second edition
[14] David Flanagan(2011) - JQuery Pocket Reference
[15] Rachel Andrew, Kevin Yank(2008) - Everything You Know About CSS Is Wrong!
[16] Shelly Powers(2010) - Javascript Cookbook
[17] Eric Meyer(2011) - Smashing CSS
[18] JQuery - “Write Less, Do More”, Available at: http://jquery.com/
[19] Wikipedia - “Web application”, Available at: http://en.wikipedia.org/wiki/Web_application
[20] Smash Magazine - “Responsive Web Design: What It Is and How To Use It”, Available at: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
[21] Smash Magazine - “Adaptive CSS-Layouts: New Era In Fluid Layouts?”, Available at: http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
[22] W3C - “HTML5, A vocabulary and associated APIs for HTML and XHTML”, Available at: http://www.w3.org/TR/html5/
66
[23] W3C - “Document Object Model (DOM)”, Available at:
http://www.w3.org/DOM/
[24] S.C. Chen - Simple HTML DOM, Available at:
http://simplehtmldom.sourceforge.net/
[25] W3C - “RSS 2.0 Specification”, Available at:
http://feed2.w3.org/docs/rss2.html
[26] Wikipedia - “RSS”, Available at:
http://en.wikipedia.org/wiki/RSS
[27] Wikipedia - “E-Book”, Available at:
http://en.wikipedia.org/wiki/E-book
[28] W3C, “CSS”, Available at:
http://www.w3.org/Style/CSS/
[29] 圖 2-1 Web 2.0,圖片來源:http://blog-you.com
[30] 圖 2-2 Web 2.0的重要元素,圖片來源:IBM
[31] 圖 2-3 RSS Logo,圖片來源:Wikipedia
[32] 圖 2-4 RSS所帶來之便利性,圖片來源:http://www.socializeyourcause.org
[33] 圖 2-5 HTML 5 Logo,圖片來源:W3C
[34] 圖 2-6 CSS 3 Logo,圖片來源:W3C
[35] 圖 2-7 JQuery Logo,圖片來源:http://jquery.com/
[36] 圖 2-8 3 tier架構,圖片來源:www.acunetix.com
[37] 圖 2-9 Responsive Web Design的概念在不同裝置上有不同的顯示模式,圖片來源: http://www.alistapart.com/articles/responsive-web-design/
[38] 圖 2-10 Apple iPhone 4,圖片來源:www.apple.com
[39] 圖 2-11 Apple iPad 2,圖片來源:www.apple.com
[40] 圖 2-12 Amazon Kindle,圖片來源:taiwan.cnet.com