跳到主要內容

簡易檢索 / 詳目顯示

研究生: 賴彥愷
Yan-Kai Lai
論文名稱: 組件化模板之行動網頁開發工具設計與實作
Design and Implementation of Mobile Web Creator with Componentized Templates
指導教授: 張嘉惠
Chia-Hui Chang
口試委員:
學位類別: 碩士
Master
系所名稱: 資訊電機學院 - 資訊工程學系在職專班
Executive Master of Computer Science & Information Engineering
論文出版年: 2018
畢業學年度: 106
語文別: 中文
論文頁數: 62
中文關鍵詞: 行動版網頁應用程式網頁資料擷取網頁模板網頁組件化
外文關鍵詞: Mobile Web Application, Web Data Extraction, Webpage Templates, Web Components
相關次數: 點閱:8下載:0
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 由於行動裝置的快速成長,人們使用行動裝置上網的習慣與日俱增。然而,現今還有許多的網站沒有加入Responsive Web Design等適合行動裝置的網頁設計,其原因可能歸咎於沒有資金或沒有人力。再者,製作行動版網站所需要的專業知識技術也遠比製作一般的電腦版網站還要高。這些沒有行動版的網站會讓使用者在行動裝置上操作困難,進而造成網站的曝光度下降和損失一些可能的商機。所以,擁有良好的行動版網站對於企業或機關是至關重要的。
    為了達到讓任何人在沒有程式背景的情況下都能夠快速且簡單的製作行動版網站,因此本篇論文提出了一個Mobile Web Creator工具,使用者只需要透過建立網站、選取網頁Template並設定資料就可以創建一個行動版網站。網頁的Template透過組件化的方式可以讓使用者動態地新增或刪除系統提供的Web Component以增加網頁的多樣化。不僅如此,此工具還結合了本實驗室所開發的Web Data ETL(Extract-Transform-Load) System,讓使用者可以在任何半結構化的網頁中擷取有利用價值的資料,並透過API Endpoint的串接顯示在自己的網頁中。當電腦版網站的管理者透過Mobile Web Creator工具製作行動版網站時,可以利用Web Data ETL System去擷取原始網站中半結構化的網頁資料,並串接已產生的API Endpoint將資料顯示在自己的行動版網頁中。如此一來,管理者只需要維護一份電腦版的網頁資料,就可以同步的顯示在兩個不同版本的網站中。


    Due to the rapid growth of mobile devices, people's habit of using mobile devices to access the Internet is increasing day by day. However, there are still many websites that do not have suitable design such as Responsive Web Design for mobile devices, and the reason may be due to lack of funds or manpower. Furthermore, creating a mobile website needs more expertise and programming skills than creating a desktop website. Lacking mobile version for websites will make it difficult for users to operate on mobile devices, which will decrease the exposure rate and lose enterprises some commercial possibilities. Therefore, it is very important for companies or organizations to have good mobile websites.
    In this paper we propose a Mobile Web Creator tool to enable anyone who has no programming knowledge to create a mobile website quickly and simply. Webpage templates can make users to dynamically add or delete pre-defined Web Components through componentized method, which increase the diversity of webpages. Not only to say, this tool is also combined with the Web Data ETL (Extract-Transform-Load) System developed by WIDM, allows users to extract useful data from any semi-structured webpages, and connects generated API endpoint to show data in mobile webpages. Using this tool to create a mobile website, the administrators of the desktop website can extract semi-structured webpages from the original website by the Web Data ETL System, and connect the API endpoint to show data in his mobile pages. In this way, the administrator only needs to maintain the data of desktop website which can be displayed in two different versions of the website synchronously.

    摘要 i Abstract ii 目錄 iii 圖目錄 iv 表目錄 vi 1. 緒論 1 2. 相關研究 5 3. 系統架構與設計 10 3.1 網站開發相關技術 11 3.2 Website Manager 12 3.3 Page Manager 13 3.4 Page Editor Renderer 13 3.5 Web Components Combiner 14 3.6 Page Production Renderer 17 3.7 Web Components 17 3.7.1 Static Components 18 3.7.2 Dynamic Components 28 3.8 Backend Server 31 3.8.1 Mobile Web Creator Database 34 4. 實驗討論 41 4.1 質性分析 41 4.2 量化分析 47 5. 結論 49 6. 未來工作 50 7. 參考文獻 51

    [1] Y.-A, Chou, C.-H, Chang (2018), “Web Data ETL System with Unsupervised Extraction”, 中央大學碩士論文.
    [2] Mohan, R., Smith, J. R., & Li, C. S. (1999). Adapting multimedia internet content for universal access. IEEE Transactions on Multimedia, 1(1), 104-114.
    [3] Xiao, X., Luo, Q., Hong, D., Fu, H., Xie, X., & Ma, W. Y. (2009). Browsing on small displays by transforming Web pages into hierarchically structured subpages. ACM Transactions on the Web (TWEB), 3(1), 4.
    [4] Nichols, J., Hua, Z., & Barton, J. (2008, October). Highlight: a system for creating and deploying mobile web applications. In Proceedings of the 21st annual ACM symposium on User interface software and technology (pp. 249-258). ACM.
    [5] Nichols, J., & Lau, T. (2008, January). Mobilization by demonstration: using traces to re-author existing web sites. In Proceedings of the 13th international conference on Intelligent user interfaces (pp. 149-158). ACM.
    [6] https://zh.wikipedia.org/wiki/XPath
    [7] Koehl, A., & Wang, H. (2012, December). m. Site: efficient content adaptation for mobile devices. In Proceedings of the 13th International Middleware Conference (pp. 41-60). Springer-Verlag New York, Inc..
    [8] Toyama, M. (1998, June). SuperSQL: an extended SQL for database publishing and presentation. In ACM SIGMOD Record(Vol. 27, No. 2, pp. 584-586). ACM.
    [9] Goto, K., & Toyama, M. (2016, July). Mobile web application generation features for SuperSQL. In Proceedings of the 20th International Database Engineering & Applications Symposium(pp. 308-315). ACM.
    [10] WordPress.com, https://wordpress.com/
    [11] Wix, https://www.wix.com/
    [12] Weebly, https://www.weebly.com/
    [13] React, https://reactjs.org/
    [14] Node.js, https://nodejs.org/
    [15] Imgur, https://imgur.com/
    [16] MongoDB, https://www.mongodb.com/
    [17] JSON Web Tokens, https://jwt.io/

    QR CODE
    :::