畢業(yè)論文：《掌上路況》HTML5版本開發(fā)

題目： 《掌上路況》HTML5版本開發(fā)

院（系） 計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院　
專 業(yè) 　　 　軟件工程 　　　
屆 別 　　 　2012屆　

摘 要

隨著計(jì)算機(jī)性能的不斷提升和互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，用戶享受互聯(lián)網(wǎng)的方式也開始變化要求開始提高，很多的應(yīng)用變得可以直接以瀏覽器打開的方式使用，數(shù)據(jù)存儲(chǔ)在云端服務(wù)器，在更加的安全可靠的同時(shí)，也方便了用戶共享數(shù)據(jù)。在各種應(yīng)用不斷向網(wǎng)絡(luò)化轉(zhuǎn)變的同時(shí)， 一種新的技術(shù)標(biāo)準(zhǔn)也隨之誕生，它就是HTML5。HTML5 是近十年來(lái)互聯(lián)網(wǎng)標(biāo)準(zhǔn)一次巨大的飛躍，和曾經(jīng)的HTML版本不同，HTML5 不僅僅可以用來(lái)表示W(wǎng)eb內(nèi)容，它還有另外一個(gè)使命，那就是將Web變成一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，圖像、音頻、視頻和動(dòng)畫，以及同電腦的交互全部被標(biāo)準(zhǔn)化。也就是說(shuō)HTML5 是通過一個(gè)開放的標(biāo)準(zhǔn)和技術(shù)來(lái)實(shí)現(xiàn)一個(gè)沒有插件富客戶端，這個(gè)客戶端可以在個(gè)人計(jì)算機(jī)、移動(dòng)終端、手機(jī)和其他有網(wǎng)絡(luò)的地方輕松的運(yùn)行。所以此時(shí)研究并且大膽的實(shí)踐HTML5這個(gè)未來(lái)產(chǎn)品有著重要的意義。
課題內(nèi)容是《掌上路況HTML5版本開發(fā)》，該項(xiàng)目是廈門移動(dòng)“無(wú)線城市-掌上路況WAP網(wǎng)站開發(fā)”項(xiàng)目的延伸，希望開發(fā)一套基于HTML5標(biāo)準(zhǔn)的應(yīng)用程序，方便高端手持設(shè)備訪問�；贖TML5的應(yīng)用由于支持跨平臺(tái)遷移，可以比原生的App開發(fā)節(jié)省大量的開發(fā)資源，并且支持在線升級(jí)即刻生效，所以吸引了越來(lái)越多的關(guān)注。該項(xiàng)目希望在WAP版本的建設(shè)功能的基礎(chǔ)上，保持基本一致的功能，但是能夠給用戶提供更好的體驗(yàn)，為后續(xù)更多的高級(jí)和延伸功能做準(zhǔn)備。

關(guān)鍵詞：HTML5；Phonegap；掌上路況；百度地圖API


ABSTRACT

With the increasing development of the Internet technology and the constantly rising of the computer performance, users also begin to e
……（新文秘網(wǎng)http://m.120pk.cn省略1414字，正式會(huì)員可完整閱讀）……　
s, and supports online upgrades, effective immediately, it attracted more and more attention. The project on, remain basically the same functions, but can provide a better e*perience to users and to prepare for the follow-up to more advanced and e*tended and e*tended functionality.


keywords： HTML5， Phonegap， Handheld traffic， Baidu Maps API
目 錄
摘 要 II
ABSTRACT III
圖表目錄 V
表格目錄 V
1 引言 1
1.1 課題目的 1
1.2 課題意義 1
1.3 國(guó)內(nèi)外發(fā)展概況 2
1.4 本章小結(jié) 4
2 方案論證 5
2.1 需求分析 5
2.2 相關(guān)技術(shù)基礎(chǔ)簡(jiǎn)介 6
2.3 本章小結(jié) 13
3 系統(tǒng)設(shè)計(jì) 14
3.1 環(huán)境配置 14
3.2 模塊設(shè)計(jì) 14
3.3 主要功能介紹 15
3.4 本章小結(jié) 16
4 詳細(xì)設(shè)計(jì) 17
4.1 相關(guān)地圖API的使用 17
4.2 核心算法的設(shè)計(jì)與實(shí)現(xiàn) 17
4.3 本章小結(jié) 21
5 具體實(shí)現(xiàn) 22
5.1 主體框架的搭建 22
5.2 框架設(shè)計(jì) 23
5.3 細(xì)節(jié)功能 24
5.4 本章小結(jié) 25
結(jié)語(yǔ) 26
注釋 27
參考文獻(xiàn) 28
后記 29
圖表目錄
圖 2 1 Phonegap支持平臺(tái) 10
圖 2 2 Phonegap跨平臺(tái)性 11
圖 2 3 Phonegap如何調(diào)用API 12
圖 3 1 系統(tǒng)模塊功能設(shè)計(jì)圖 15
圖 5 1 主體框架 22
圖 5 2 www下的框架 22
圖 5 3 HTML5架構(gòu)圖 23
表格目錄

表格 4.1 Info 19
表格 4.2 Details 19
表格 4.3 Nodes 20
表格 4.4 Edges 20

1 引言

1.1 課題目的
《掌上路況HTML5版本開發(fā)》項(xiàng)目是廈門移動(dòng)“無(wú)線城市-掌上路況WAP網(wǎng)站開發(fā)”項(xiàng)目的延伸，希望開發(fā)一套基于HTML5標(biāo)準(zhǔn)的應(yīng)用程序，方便高端手持設(shè)備訪問�；贖TML5的應(yīng)用由于支持跨平臺(tái)遷移，可以比原生的App開發(fā)節(jié)省大量的開發(fā)資源，并且支持在線升級(jí)即刻生效，所以吸引了越來(lái)越多的關(guān)注。該項(xiàng)目希望在WAP版本的建設(shè)功能的基礎(chǔ)上，保持基本一致的功能，但是能夠給用戶提供更好的體驗(yàn)，為后續(xù)更多的高級(jí)和延伸功能做準(zhǔn)備
1.2 課題意義
從互聯(lián)網(wǎng)的誕生到現(xiàn)在，互聯(lián)網(wǎng)對(duì)人們的生活的影響在不斷地變化和加強(qiáng)，人們漸漸地開始習(xí)慣互聯(lián)網(wǎng)帶來(lái)的各類服務(wù)與應(yīng)用，并享受著它的便捷和豐富。與此同時(shí)隨著互聯(lián)網(wǎng)的用戶和開發(fā)者的增多，人們?nèi)?chuàng)造和完善它的速度也變的飛快，無(wú)論從技術(shù)層面還是應(yīng)用層面，新的模式和方法層出不窮，整個(gè)互聯(lián)網(wǎng)新陳代謝不斷加快，新的應(yīng)用和新的公司不斷地挑戰(zhàn)——_新的技術(shù)和新的模式，由于互聯(lián)網(wǎng)存在創(chuàng)業(yè)成本低、技術(shù)門檻卻相對(duì)較高等特點(diǎn)，大公司也不斷地推動(dòng)著新的技術(shù)，基于此來(lái)創(chuàng)建一定的技術(shù)壁壘，同時(shí)基于此建立全新的服務(wù)和技術(shù)。但是畢竟整個(gè)互聯(lián)網(wǎng)是一個(gè)開放的環(huán)境，大家需要一種標(biāo)準(zhǔn)，而不是一家獨(dú)大的競(jìng)爭(zhēng)下去，這樣就一定會(huì)失去民心，應(yīng)運(yùn)而生HTML5 這種更加新的標(biāo)準(zhǔn)和技術(shù)體系在不斷地革新中發(fā)展壯大。
HTML5 是近十年來(lái)Web標(biāo)準(zhǔn)最巨大的飛躍，和曾經(jīng)的版本不同，HTML5 并不僅僅用來(lái)表示W(wǎng)eb 內(nèi)容，它的使命是將Web 帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像和動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。盡管HTML5 的實(shí)現(xiàn)還有很長(zhǎng)的路要走，但HTML5 正在改變Web。另外，目前的互聯(lián)網(wǎng)不僅僅是傳統(tǒng)意義上面的互聯(lián)網(wǎng)，所有的傳統(tǒng)應(yīng)用和模式正在向著更加移動(dòng)和便捷發(fā)展，人們可能通過手機(jī)、平板電腦等各類移動(dòng)設(shè)備來(lái)獲取信息和使用更加豐富的應(yīng)用，如物理位置定位信息等新的數(shù)據(jù)采集和多點(diǎn)觸控、重力感應(yīng)等新的交互方式的應(yīng)用，未來(lái)必將也會(huì)改變?nèi)藗兩畹姆椒矫婷妗?br>HTML5 中也加入了以上各類新的元素和功能，同時(shí)也考慮到了非健全人事使用互聯(lián)網(wǎng)時(shí)可能帶來(lái)的問題[1] 。所以，研究HTML5 這種技術(shù)體系來(lái)嘗試做一些應(yīng)用是一個(gè)千載難逢的機(jī)遇，而基于這個(gè)變革的年代去使用類似的技術(shù)來(lái)創(chuàng)造更多新的應(yīng)用更是能夠改變這個(gè)世界的一次機(jī)會(huì)。
怎樣在智能手機(jī)(以及其他移動(dòng)設(shè)備)上將HTML5應(yīng)用程序作為本地程序運(yùn)行？雖然現(xiàn)在Web技術(shù)發(fā)展得相當(dāng)快，但是想要在瀏覽器上運(yùn)行一個(gè)幾兆大小的應(yīng)用程序還是非常困難的，因?yàn)闉g覽器的緩存是有限的。用戶必須通過打開一個(gè)鏈接訪問HTML5應(yīng)用程序，而不能像訪問本地應(yīng)用程序一樣，僅僅通過點(diǎn)擊一個(gè)圖標(biāo)就能得到想要的結(jié)果，尤其是當(dāng)移動(dòng)設(shè)備脫機(jī)以后，用戶幾乎無(wú)法訪問HTML5應(yīng)用程序。
　　PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。開發(fā)的程序?qū)⒉渴鹪谝粋€(gè)特定的操作系統(tǒng)上(如Android，IOS，Windows Phone…)，類似于在本地主機(jī)上運(yùn)行的Apache實(shí)例。
1.3 國(guó)內(nèi)外發(fā)展概況
HTML的發(fā)展歷經(jīng)了多個(gè)年代，但時(shí)間其實(shí)不過也在20年左右。1993年HTML首次以因特網(wǎng)草案的形式發(fā)布。20世紀(jì)90年代的人見證了HTML的大幅發(fā)展，從2.0版，到3.2版和4.0版，再到1999年的4.01版。隨著HTML的發(fā)展，W3C（萬(wàn)維網(wǎng)聯(lián)盟）掌握了對(duì)HTML規(guī)范的控制權(quán)。然而在快速發(fā)布了這四個(gè)版本之后，業(yè)界普遍認(rèn)為HTML已經(jīng)到了窮途末路，對(duì)Web標(biāo)準(zhǔn)的焦點(diǎn)也開始轉(zhuǎn)移到了*ML和*HTML上，HTML被放到了次要的位置。不過在此期間，HTML體現(xiàn)了頑強(qiáng)的生命力，主要的網(wǎng)站內(nèi)容還是基于HTML的。為能支持新的Web應(yīng)用，同時(shí)克服現(xiàn)有的缺點(diǎn)，HTML迫切需要添加新的功能，制定新的規(guī)范。
致力于將Web平臺(tái)提升到一個(gè)新的高度，一小組人在2004年成立了WHATWG 。他們創(chuàng)立了HTML5規(guī)范，同時(shí)開始專門針對(duì)Web應(yīng)用開發(fā)新的功能，這被WHATWG認(rèn)為是HTML中最薄弱的環(huán)節(jié)。Web2.0實(shí)至名歸，開創(chuàng)了Web的第二時(shí)代[2]。舊的靜態(tài)網(wǎng)站逐漸讓位于需要更多特性的動(dòng)態(tài)網(wǎng)站和社交網(wǎng)站，這些網(wǎng)站中的新功能數(shù)不勝數(shù)。2006年W3C又重新介入HTML，并于2008年發(fā)布了HTML5的工作草案。2009年，*HTML2工作組停止工作。2010年因?yàn)镠TML5能解決非常實(shí)際的問題，所以在規(guī)范還未定稿的情況下，各大瀏覽器廠家就已經(jīng)按耐不住了，開始對(duì)旗下產(chǎn)品進(jìn)行升級(jí)以支持HTML5的新功能。得益于瀏覽器的實(shí)驗(yàn)性反饋，HTML5規(guī)范也得到了持續(xù)的完善，HTML5以這種方式迅速融入到了對(duì)Web平臺(tái)的實(shí)質(zhì)性改進(jìn)中。到目前為止HTML5規(guī)范已經(jīng)以工作草案的形式發(fā)布了，但還不是最終版本，不過現(xiàn)在在移動(dòng)終端和Apple公司為主的產(chǎn)品的推動(dòng)下，HTML5已經(jīng)得到了廣泛的使用[3]。
HTML5草案的前身名為WebApplications1.0，是在2004年由WHATWG提出， ……（未完，全文共22082字，當(dāng)前僅顯示3972字，請(qǐng)閱讀下面提示信息。收藏《畢業(yè)論文：《掌上路況》HTML5版本開發(fā)》）