基于HTML移動終端平臺推送信息系統(tǒng)設(shè)計與實現(xiàn)【實用文檔】doc

基于HTML移動終端平臺推送信息系統(tǒng)設(shè)計與實現(xiàn)【實用文檔】doc文檔可直接使用可編輯，歡迎下載

題目:基于ＨＴML5移動終端平臺推送信息系統(tǒng)設(shè)計與實現(xiàn)基于HTML移動終端平臺推送信息系統(tǒng)設(shè)計與實現(xiàn)【實用文檔】doc文檔可直接使用可編輯，歡迎下載摘要目前，移動客戶終端的開發(fā)設(shè)計正處于興盛時期，當前的移動客戶終端的操作系統(tǒng)種類較多，但是主要的操作系統(tǒng)主要有IOS和安卓系統(tǒng)兩類，應(yīng)用程序的開發(fā)者通常是需要對這些操作系統(tǒng)分別進行應(yīng)用程序的設(shè)計，因此，跨平臺移動技術(shù)的開發(fā)以及應(yīng)用便成為了今日熱門的研究對象，怎樣能夠有效的提高開發(fā)的效率就成為值得研究的課題.傳統(tǒng)的開發(fā)程序中往往是需要對每一款操作系統(tǒng)分別進行開發(fā)，導(dǎo)致經(jīng)常出現(xiàn)重復(fù)性的工作，因此利用Web平臺進行跨平臺性的中間件誕生,但是在性能上經(jīng)常是有著一定的局限性。跟隨著目前互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，人們在信息獲取的途徑上也變得愈加豐富，移動客戶終端以成為現(xiàn)如今人們生活信息的主要來源。怎么樣能夠高速有效的進行信心推送在移動客戶終端上便成為了重要的研究方向。信息的推送技術(shù)早已存在，移動互聯(lián)網(wǎng)以及智能移動客戶終端普及之前，信息推送技術(shù)便已經(jīng)應(yīng)用在互聯(lián)網(wǎng)PC個性化制定信息等業(yè)務(wù)環(huán)境中。IOS以及安卓操作系統(tǒng)都各自有著特有的推送機制?？墒?如果使用跨平臺的開發(fā)方式，目前對于移動客戶端的信息推送機制怎么在跨平臺框架中實現(xiàn),使用統(tǒng)一的客戶端服務(wù)器對各類的移動終端的操作系統(tǒng)進行信息的推送還是缺少相應(yīng)的研究.為使用戶能在移動客戶終端上有著較好的體驗,本文提出了基于移動客戶終端風(fēng)格展示設(shè)計，此設(shè)計基于扁平化、相應(yīng)式、流式布局的風(fēng)格進行實現(xiàn)的,在技術(shù)上主要是是依靠CSS３和HTML5提供了多個的主題風(fēng)格，服務(wù)器端以及移動客戶終端相互之間使用了輕量級的數(shù)據(jù)格式ＪSOＮ.在設(shè)計中使用Ｗeb應(yīng)用經(jīng)過PhonｅGap和移動平臺進行無縫連接。在服務(wù)器端使用的是JavaEＥ框架框架技術(shù)，基于切面編程的思想進行設(shè)計整合，框架的構(gòu)建中層次分明。內(nèi)容管理系統(tǒng)中主要實現(xiàn)的功能是基于HTML5實現(xiàn)不同的頁面相應(yīng)，實現(xiàn)內(nèi)容管理界面之間的全屏訪問.信息推送服務(wù)主要是針對不同平臺使用了不同的推送標方案，推送的策略主要是是基于用戶和主題，用戶能夠制定出比較喜歡的主題，服務(wù)器端也能夠按照用戶的預(yù)覽內(nèi)容進行記錄得到用戶偏愛的主題，主動的向用戶進行推送。關(guān)鍵詞:ＨTＭL_5、移動應(yīng)用、推送系統(tǒng)、跨平臺ＡｂstraｃｔＡtｐrｅｓent,thｅdｅvｅlｏpmｅntanddesignｏfthｅmｏbiｌｅcliｅnttｅrmiｎａｌisinaperｉodofｐroｓperitｙ，tｈemobiｌeclienttｅｒmｉnaｌofthecurrenｔｏperatingｓｙsｔｅｍtｙｐｅｓ,bｕｔtheoperaｔiｎgsｙstｅmｔｈerearemaｉnlytwokiｎｄｓｏfIＯSａnｄＡndrｏｉdsystｅms,ａｐｐlicatｉondｅvｅlopersｏftenneeｄdesigninｔotheapｐｌｉcａt(yī)ionoftheseoperatiｎgｓyｓtemsothaｔcrossplaｔforｍmobiｌｅteｃｈnologyｔhedevelopｍｅntａndapplicationhａsbeｃomeａhotresearｃｈoｂｊｅctofｔoday，ｈowtｏefｆeｃｔｉvelyiｍprovｅtheefficieｎｃyｏfｄｅｖｅloｐmeｎtｈasbecomeａｔopicworthyｏfstudy。Thｅtraditｉoｎaldevelopmenｔproｇramｉsoftenrｅquiredforeａchoperaｔｉngｓyｓtemｗｅredeveｌoｐed，leadingtofrequentｒeｐeｔitiveｗoｒｋ，soｔｈeｕseofWeｂplａt(yī)formforcrosｓｐlatｆorｍmiddlewareｗasboｒn，ｂutｔheperfｏrmanceｉsｏftｅｎlｉｍited。WiththeｃontinuousｄｅvelopmentｏftｈｅIｎteｒnｅtｔecｈｎoｌogｙ,pｅoplehａvｅbｅcomemoｒｅandｍｏreaｂｕndanｔiｎthewayｏfinformａｔioｎacquisition,andｔhｅmｏbｉleｃｌiｅnttｅrminalhasbecoｍethemainsｏurceofpeoｐｌe'slifeinfｏｒmation。Ｈowｔoeffeｃｔiｖelｙｃaｒｒyｏuｔtｈecoｎfidenceinmoｂilｅｃliｅｎtteｒminalhasｂecoｍｅａnｉmｐortanｔreｓeａrchdiｒeｃｔiｏｎ。Inｆｏｒｍationｐusｈtecｈnoｌogyalreadｙeｘists,ｂefoｒｅｔｈｅｐｏｐularitｙｏfmobileIntｅrｎeｔandsmartｍobilecliｅｎtterｍiｎals，informatｉonpushtecｈnolｏgｙhasｂｅenａpplieｄintｈｅIntｅrnetＰCｐersoｎaliｚedinｆorｍationａndothｅrbuｓinesｓeｎvirｏnment.IＯSａndAｎdrｏiｄopeｒatiｎgsysteｍshａvｅtheirｏwnｕniｑuepushmｅchaｎisｍ。However,ifｔhｅuｓeoｆcrossplatform,ｔhｅmobileｃlieｎｔｉｎｆｏrmaｔiｏｎpusｈmeｃhaｎisｍhｏｗtoａchievecrossplaｔfoｒmｆramｅwoｒk,themobileｔｅｒminalｏpeｒatingsｙstｅmusingａｕｎifiｅｄｃliｅntservｅrforalｌｋindsofｉnfoｒmatｉｏnpuｓｈortｈｅlａckofcorｒespoｎdingrｅｓｅarch。Astheｕsercaｎhaveaｇoodｅxperienceｉｎthemobilｅｃlｉentｔerｍinal，ｔhｉspapｅrproposeｓtｈemobilｅｃlｉenttｅｒminａlｄisplａystｙledesigｎbasｅdoｎthiｓｄeｓigｎ,basedontｈeｆlat，ａｎdthecorresｐondingflowｌａｙｏｕｔｓtyletoａｃhiｅve，ｉｎｔechｎologｙｉｓmaiｎｌyrelyｏnCSＳ３ａndＨTMＬ5prｏvｉdeｓａnumberｏftｈｅmes,serverandthemｏbileｃｌieｎtｔermｉnalusesaｌiｇhtｗeighｔJSＯＮdatａformaｔｂｅtwｅen。InｔhｅｄeｓigｎoftheｕseoｆWｅbａppｌｉcaｔiｏnsthroughPhoneGａpandｍobileplatformfｏrseaｍlessconｎｅction。IｎｔhesｅｒｖｅrｓideiｓtheｕseofＪavaEEｆramewoｒkｔechnoloｇy,bａsedoｎtｈeｉdeaofprograｍmｉngtｏｃarryｏuttheiｎtｅgrａt(yī)iｏnoｆdesign，ｔｈｅfraｍeworkｏfｔｈeconｓtruｃtｉｏｎｏfaｃｌear。ContentmaｎagementsystｅmtｏachievetｈｅmａinｆuｎctｉonisｂａｓeｄｏnHTＭＬ5toachievedｉfｆｅrｅntpaｇｅｓcoｒresponｄingtoachieｖｅｆullｓｃreeｎacceｓsbｅｔweenthecｏntenterfaｃｅ.Informａｔioｎpｕshserviｃｅismａinlyfordｉfferentpｌａt(yī)ｆoｒmsｕsinｇdiffｅreｎｔstandardpｕsｈ，pusｈsｔratｅgyisthemainｔheｍeaｎｄtheｕsｅrｂａseｄoｎtheｕsercandeveｌopaｍoｒelovetｈemｅ，ｔｈｅseｒvercanｒeｃoｒduｓｅrprｅｆerencesinaccordancewiththethemepreｖｉewtｈecｏnｔｅntofｔhｅｕser，ｔｈeinitiaｔivｅtotheuｓerpuｓh．Keｙｗｏrds:HTMＬ_5,ｍｏｂilｅapｐｌicaｔion,ｐｕsｈsystem，crosspｌatform目錄TOC\o”1—3"\ｈ\u第一章緒論PａｇeRef_Ｔoc６８631３74\h7Ｈｙpｅrlink\l"_Toc68６313７5"1.１研究背景與研究意義ＰaｇeＲｅf＿Toc68631375\h７1．2國內(nèi)外研究現(xiàn)狀８631３76\h81．２。1移動終端系統(tǒng)研究現(xiàn)狀６３１３７7\ｈ８Hyperｌink\l”＿Tｏｃ68６31378"1.2.2跨平臺移動應(yīng)用發(fā)展現(xiàn)狀PagｅReｆ_Toc686313７8＼ｈ8Hyperliｎｋ\l”＿Tｏｃ6863137９"１。2.3HTMＬ5研究現(xiàn)狀PaｇeRｅf_Toc68631379\h９Hｙｐｅｒlｉｎk\l”_Ｔｏc686３13８０”１.3本文研究內(nèi)容PagｅReｆ_Toc6８6３1380＼h101。4本文組織架構(gòu)ＰaｇｅＲｅｆ_Toｃ686３13８1\h11Hypｅｒlinｋ\l”_Toc6８6313８２"第二章相關(guān)核心技術(shù)介紹ＰageＲef_Tｏc6８６313８2\h1１Ｈyｐerlink\l”_Toc６863１3８3”２．1HTML5技術(shù)介紹PageRｅf_Toｃ6８６３13８３\h１1Hyｐerlｉnk\l"_Toｃ6８631384"2．1．１HTＭL5簡介ＰaｇeRef_Tｏc686313８４\h11Hｙpeｒlink\l”_Ｔoc6８6３1385”2。１.2HTＭL５新特性ＰageRef＿Ｔoc6863１385\ｈ１１2．1.3HＴML5應(yīng)用前景１386\ｈ１22。2ＰhoneＧaｐ介紹ＰａｇeRef_Tｏc68631387\h１32。3JaｖaEE技術(shù)ＰagｅReｆ_Toc686３13８８\ｈ14Ｈyｐｅrlink\l”_Toｃ686３13８９＂2。4本章總結(jié)PaｇｅＲeｆ＿Toc68６３1389\h16Hyｐerlinｋ\l＂＿Toc６8631390"第三章移動客戶端設(shè)計及實現(xiàn)ＰageＲef_Tｏc68６31３90\h１7Hyperlｉnk\l＂_Ｔoc6８６３１391”3。1移動端風(fēng)格設(shè)計ＰageRef_Toc6863１391\h17Hyｐｅrlink\l”_Toc6８6３13９2＂3.2移動端內(nèi)容展示設(shè)計PageRef_Ｔoc6８6313９2\h2１３。3數(shù)據(jù)交互的實現(xiàn)PageＲef_Ｔoｃ6８63１3９3\h２63。3．1JSＯN數(shù)據(jù)格式PageRef_Ｔoc68６313９4\h263。3．2客戶端跨域請求方案ＰａｇｅRef＿Toc6863１３95\h２7Hｙｐerliｎk\l"_Ｔoｃ6８６3139６”3．4基于PｈoneＧap跨平臺移動端實現(xiàn)PagｅRef＿Ｔoｃ６86３1３9６\h2９Hyperlinｋ\l”_Ｔｏｃ68631397”3。4。1ＰhｏneGap平臺構(gòu)建PageRｅf＿Toc68６３1３９7\h29Ｈyperlｉnｋ\l"_Ｔoｃ６8631398”３．4。2PhoｎeGap跨平臺應(yīng)用PagｅＲef＿Tｏc６863１398\h3１３.5本章小結(jié)ＰaｇeRef_Toｃ6８631399\h32第四章推送系統(tǒng)設(shè)計和實現(xiàn)PageRef_Tｏc686314０0\h3２Hypｅrlｉｎk\l＂_Ｔｏc68６3１401”4。1系統(tǒng)服務(wù)端設(shè)計實現(xiàn)ＰagｅRef_Toc686314０1\ｈ324。1。1表現(xiàn)層設(shè)計與實現(xiàn)PageＲｅｆ_Toc686314０2\h32Hｙpeｒlinｋ\l＂＿Ｔoｃ68631403＂４．1.２業(yè)務(wù)邏輯層設(shè)計與實現(xiàn)ＰａgeRef＿Toc６863１４03\h３4４.1。3持久層設(shè)計與實現(xiàn)PagｅRｅf_Tｏc６８6３14０4\h35Hypeｒliｎk\l”_Toｃ6863１405＂４。2內(nèi)容管理系統(tǒng)設(shè)計與實現(xiàn)ＰageRｅｆ_Tｏc686３140５\h364.3管理界面設(shè)計８6３1406\h41Hｙperlink\l"_Ｔoc68６3１40７"4。３．1管理界面設(shè)計分析PageＲｅf＿Toc68631407\ｈ4１Hｙpｅrlinｋ\l”_Tｏc68631408"４。３。2管理界面設(shè)計風(fēng)格ＰａgeＲeｆ_Toc６8６314０8\ｈ424．３．3管理界面響應(yīng)設(shè)計PａgｅＲｅf_Toc68631４09\h４34.４本章小結(jié)ＰａgeRef＿Toc６863１４10\h45Ｈyperｌｉｎk\l”＿Toc686３1４11＂第五章推送服務(wù)設(shè)計ＰageRef_Tｏｃ6863141１\ｈ45Hyperｌink\l”＿Toｃ6８631４12”5.1推送信息技術(shù)分析及設(shè)計ＰageＲeｆ_Toc６8631412＼h４６Ｈyperlｉnｋ\l"＿Toc686３14１3＂５.1.1安卓系統(tǒng)推送ＰａgｅＲef_Toc6８63１41３＼h４6Hyperｌiｎk\l"_Tｏc68６31４14"5．１.２IOS系統(tǒng)推送PageReｆ_Tｏc686３1４14\h47Ｈｙpｅｒｌink\l"＿Toc68631４1５”5.2推送信息策略分析PaｇｅRｅf＿Toc68６31４15\ｈ47Hyperlink\l＂＿Tｏc6863141６”５．３推送信息服務(wù)的實現(xiàn)PageＲｅf_Toc6８631４1６\h48Ｈyperlｉnk\l"_Tｏc68631417”５.３．1推送信息流程ＰageＲeｆ_Ｔoｃ68６3１417＼h485。3．２推送信息服務(wù)核心程序PageRef_Ｔｏc68631418\h４９Hｙｐerlink\l"_Toc６8631419"5．4本章小結(jié)ＰagｅＲef_Tｏc68６314１9＼ｈ50第六章總結(jié)與愿望PａgｅReｆ＿Toc６86３1４２0\h51Hｙpeｒlｉｎk\l”_Ｔoc6８631421”6。１本文總結(jié)PａgeＲef＿Toc68631421\h5１６.2研究展望PａgeRｅｆ_Tｏｃ6８631422\h51第一章緒論１。１研究背景與研究意義當今國內(nèi)的互聯(lián)網(wǎng)行業(yè)的發(fā)展呈現(xiàn)出全新狀態(tài)，傳統(tǒng)形式的互聯(lián)網(wǎng)已成飽和趨勢,而正在崛起的正式發(fā)展飛速的移動互聯(lián)網(wǎng)。根據(jù)前瞻產(chǎn)業(yè)研究院所公布的數(shù)據(jù)顯示，目前在國內(nèi)使用移動客戶端進行互聯(lián)網(wǎng)訪問的用戶已經(jīng)超過五億。而且隨著移動終端設(shè)備的迅速增加，產(chǎn)品成本不斷降低，wｉfi無線網(wǎng)絡(luò)的覆蓋面積逐漸增加，移動終端設(shè)備持有率將會極速上升.在這樣互聯(lián)網(wǎng)格局改變的形勢下，人們在獲取互聯(lián)網(wǎng)信息的方式也在跟隨著發(fā)生該變.在傳統(tǒng)的互聯(lián)網(wǎng)時代,人們上網(wǎng)的形式多數(shù)都是通過PC計算機客戶端進行對預(yù)覽信息以及門戶網(wǎng)站獲取最新的時事新聞信息[1］。但是在當下,人們可以通=通過移動客戶端輕松地隨時獲取互聯(lián)網(wǎng)的時訊新聞,這與互聯(lián)網(wǎng)自身具有的特點有著不可分割的關(guān)系。移動終端設(shè)備的攜帶方面性、移動性能強的特點,使用戶能夠通過終端設(shè)備輕松方面的隨時獲取有效信息,時訊新聞等.因此本文目標是開發(fā)出一款基于移動客戶端的內(nèi)容管理系統(tǒng)，給用戶提供出便捷、靈活的獲取信息和新聞的方式.對于傳統(tǒng)的內(nèi)容管理系統(tǒng)，移動客戶終端內(nèi)容管理系統(tǒng)在開發(fā)上有著自身的難點，其原因是由目前移動設(shè)備的結(jié)構(gòu)狀況決定的。目前互聯(lián)網(wǎng)移動設(shè)備的種類很多,出現(xiàn)多種系統(tǒng)平臺共同存在的局面。使用較多的有IOS系統(tǒng)、Ａndroid系統(tǒng)、WiｎdowMｏbｉle系統(tǒng)都是基于不同的技術(shù)實現(xiàn)的,但是開發(fā)一款面向多系統(tǒng)兼容的移動客戶端內(nèi)容管理平臺需要對每一個系統(tǒng)平臺進行分別開發(fā),因此就會大大的降低了開發(fā)工作的效率。針對以上問題，經(jīng)過翻閱大量的文獻資料研究以及分析,決定選用基于HTＭL＿５技術(shù)的WebApp方式進行本系統(tǒng)的開發(fā)，HＴＭL_5的多種新的特性能夠有效的解決面對跨平臺開發(fā)瓶頸的問題，致使移動客戶端內(nèi)容管理系統(tǒng)能夠快速、高效的實現(xiàn)系統(tǒng)開發(fā).相對于當今比較流行的Ｎatｉve的開發(fā)方式,此移動終端內(nèi)容管理系統(tǒng)的實現(xiàn)具有以下方面的優(yōu)勢：跨平臺方面，同一個應(yīng)用程序，經(jīng)過一次開發(fā)，能夠在各個平臺兼容運行.傳統(tǒng)的系統(tǒng)開發(fā)方式的移動內(nèi)容管理系統(tǒng)，需要針對每一個系統(tǒng)平臺進行分別的開發(fā)。當下移動終端市場中的多種平臺共同存在，除了上文提到的IOS系統(tǒng)、Ａｎdroid系統(tǒng)、WindｏowsＰhoｎe系統(tǒng)，還有黑莓系統(tǒng)等等。移動終端系統(tǒng)內(nèi)容管理要想在多個平臺兼容運行,需要開發(fā)出多個應(yīng)用程序針對每個系統(tǒng)平臺。但是采用基于Wｅb方式開發(fā)的移動端內(nèi)容管理系統(tǒng)便能夠在不同的系統(tǒng)平臺中兼容的運行［2].系統(tǒng)云端的升級，使用原生的移動系統(tǒng)移動內(nèi)容管理系統(tǒng)中，有著缺陷，就是在程序發(fā)布的時候相對繁瑣。程序發(fā)布時,不僅是對一個應(yīng)用程序的修改，還要對更新版本的移動終端內(nèi)容管理系統(tǒng)上傳到這種的應(yīng)用商店中。比如:IＯS系統(tǒng)中的應(yīng)用程序需要先上傳到蘋果公司專用的AppStore平臺中,但是蘋果公司會對此移動應(yīng)用的上傳進行審核，這期間造成很多的不便.如果此應(yīng)用程序存在著漏洞，進行重新修改的話，程序重新的發(fā)布會更加的繁瑣。相比之下，云端的升級系統(tǒng)減少了這些缺陷，僅需要在服務(wù)器端進行更新，所有的使用者就能夠查到最新的版本.大大的減少了工作量。但是目前的ＨTＭＬ_5在移動客戶端的開發(fā)中的技術(shù)并不是很成熟的，在該系統(tǒng)開發(fā)過程中，還是存在著以下幾方面的挑戰(zhàn)。（１）性能的問題,致使基于Web訪問方式開發(fā)的移動客戶端內(nèi)容管理系統(tǒng)性能差的原因有多個,如本身開發(fā)技術(shù)問題、移動終端的硬件設(shè)備問題、瀏覽器的解析問題?，F(xiàn)在Web開發(fā)的性能上與nａt(yī)ive技術(shù)相比較有一定的差距，隨著移動設(shè)備產(chǎn)品的更新?lián)Q代，移動設(shè)備的硬件和瀏覽器的解析問題也在逐漸的消失。同時隨著技術(shù)的快速升級,輕量級、性能較好的HTML_５框架將會出現(xiàn)，自身的開發(fā)技術(shù)也在科技快速發(fā)展的今天也能順利的解決。(2)移動終端設(shè)備以及瀏覽器的差異性，目前移動終端設(shè)備的制造生產(chǎn)商，瀏覽器的開發(fā)商已經(jīng)對HTML＿５的支持還沒有完全的形成統(tǒng)一的協(xié)議標準,其產(chǎn)品對HTML＿５的支持程度也有著不同.這就對于基于HTML_5開發(fā)系統(tǒng)客戶端內(nèi)容管理系統(tǒng)的研發(fā)帶有著一定的挑戰(zhàn).(3)缺乏統(tǒng)一的實現(xiàn)標準,除了上文提到的移動設(shè)備，瀏覽器的差異性，其致使基于HTMＬ_5移動客戶端開發(fā)的主要問題是沒有統(tǒng)一的ＷeｂApp實現(xiàn)標準?，F(xiàn)在移動終端設(shè)備領(lǐng)域系統(tǒng)的多平臺性，針對不同的平臺需要設(shè)計不同的風(fēng)格，用戶能夠更加習(xí)慣的當前設(shè)備的交互，市場上Ｗeb應(yīng)用也在迅速的發(fā)展增加,使用者也會習(xí)慣于Weｂ應(yīng)用的交互習(xí)慣。經(jīng)過上述的介紹，HTML_5開發(fā)的移動客戶端的內(nèi)容管理系統(tǒng)有著較好的跨平臺性，能夠在很大程度上減少項目開發(fā)時為不同的操作系統(tǒng)版本匹配的工作量。然俄日性能較差，使用者體驗不能夠滿足的缺陷，在本文中設(shè)計的一個基于ＨTMＬ＿5移動客戶端跨平臺內(nèi)容管理系統(tǒng),在一定的程度上能夠改進系統(tǒng)的性能，保證其輕量級、跨平臺、高性能的特點。１．2國內(nèi)外研究現(xiàn)狀１．2．１移動終端系統(tǒng)研究現(xiàn)狀隨著移動互聯(lián)網(wǎng)的普及，網(wǎng)民更趨向于通過移動互聯(lián)網(wǎng)獲取新聞資訊［f６l?，F(xiàn)在移動內(nèi)容管理系統(tǒng)的主要形式新聞資訊客戶端和移動新聞門戶網(wǎng),新聞內(nèi)容管理仍是通過Web的方式.現(xiàn)在移動智能領(lǐng)域的移動應(yīng)用使用排行中,新聞資訊應(yīng)用僅次于即時通訊應(yīng)用。而移動網(wǎng)站的訪問排行的,新聞門戶網(wǎng)僅次于移動搜索網(wǎng)站.網(wǎng)民現(xiàn)在更習(xí)慣通過移動互聯(lián)網(wǎng)獲取新聞資訊，這與移動互聯(lián)網(wǎng)對新聞傳播方式密不可分.移動互聯(lián)網(wǎng)對新聞資訊的傳播高效、及時、迅速,新聞內(nèi)容豐富多樣。且對用戶針對性強,方便用戶互動交流?，F(xiàn)階段移動新聞資訊客戶端以及移動門戶主有以下特點:(1)內(nèi)容豐富、特色?，F(xiàn)階段互聯(lián)網(wǎng)新聞信息特點是新聞海量、迭代迅速。不同的用戶對新聞資訊的需求不同，各式各樣的移動新聞資訊客戶端應(yīng)運而生。各類門戶層出不窮，知名大型門戶網(wǎng)也在不斷推出新的產(chǎn)品。（2）內(nèi)容短小、精致。移動設(shè)備的特性,以及現(xiàn)階段生活節(jié)奏的加快,精致、概括性強的新聞資訊更容易吸引用戶的眼球。移動端的新聞資訊往往是通過縮減編輯后展現(xiàn)給用戶的。(3）信息靈活多樣。傳統(tǒng)、單向的信息己經(jīng)不能滿足現(xiàn)階段用戶的眼球，不同的熱點層出不窮。移動新聞必須適應(yīng)這樣變化,保持新聞信息靈活多樣。1.2．2跨平臺移動應(yīng)用發(fā)展現(xiàn)狀國外在移動端跨平臺開發(fā)領(lǐng)域方面起步較早，同時也有著相對完整的結(jié)構(gòu)體系，在這種具有領(lǐng)先地位的研究以及企業(yè)級別應(yīng)用中都是有所體現(xiàn)的。在2008年HTML_５草案的發(fā)布,是HTML_5新特性以及跨平臺移動客戶端研究開發(fā)提供了技術(shù)上的可能性。在這個基礎(chǔ)之上國內(nèi)以及國外有關(guān)于跨平臺開發(fā)移動客戶端方面做了大量的研究.PhoｎeＧap1．0產(chǎn)品于2011年7月底發(fā)布.其目的是讓開發(fā)者能夠使用傳統(tǒng)的Web技術(shù)開發(fā)；HTＭL_５、Javａscript、ＣSＳ開發(fā)支持不同的平臺的移動終端應(yīng)用程序,開發(fā)者能夠通過ＷｅbＡPＩ接口調(diào)用手機系統(tǒng)中核心功能，比如,照相機、GPＳ、文件、加速器、聯(lián)系人等等。其目前已經(jīng)支持市場中常見的智能手機系統(tǒng),Andｒoid系統(tǒng)、iｏs系統(tǒng)等［３］。另外,PhｏnｅGａp還提供了豐富的插件功能以供開發(fā)者進行調(diào)用。隨著ＨＴML＿5技術(shù)的快速發(fā)展，國外出現(xiàn)了大量的基于HTＭＬ_5移動應(yīng)用框架，例如EXT框架團隊所開發(fā)的ＫendoＵI,Ａｐｐfｒａmework是基于jＱueryＭoｂｉｌｅ所開發(fā)的等等?；贖TMＬ_5的跨平臺應(yīng)用開發(fā)目前在國外已經(jīng)被廣泛的應(yīng)用,并且增長速度非?？?，并且結(jié)構(gòu)體系也在逐漸的進行完善，在今后多元化的移動客戶端應(yīng)用的發(fā)展中,跨平臺應(yīng)用也會占有一席地位的。最近幾點，國內(nèi)的開發(fā)移動客戶端應(yīng)用主要還是以原生的系統(tǒng)開發(fā)為主，但是在近兩年內(nèi)出現(xiàn)了大量的互聯(lián)網(wǎng)公司，都在進行ＨTMＬ_５跨平臺上投入大量的研究。２0１４年6月在國內(nèi)第一個開源的跨平臺HTML_５前端的框架AmａzeＵI發(fā)布。AmazeUI是以移動客戶端優(yōu)先為理念，從小屏幕慢慢的發(fā)展到大屏幕之中，最后達到了適應(yīng)所有屏幕，致使互聯(lián)移動.2０１３年百度公司也推出了自己開發(fā)的LighｔApｐ，此應(yīng)用是一種不用下載，在瀏覽器中即搜即用的移動應(yīng)用。事實上，其實基于HTML_5的APＰＷeb化,功能是用戶在其官方網(wǎng)站首頁中點擊某個連接，就能夠進入到HTMＬ_５應(yīng)用之中,或者進入ＷEＢ站。此外一些是完全基于HTML_5的應(yīng)用如天氣應(yīng)用sun、DailyCoｓt等等，在其性能以及體驗上表現(xiàn)都比較好?？偠灾?跨平臺的移動終端應(yīng)用，其市場前景相對較好，但是基于HTMＬ＿5的ＷｅｂApｐ還是不夠成熟,在今后兩三年中WｅｂApp所占的市場份額會逐漸上升。然而ＮativeＡpp也不會退出市場，將會形成相互共存的時代，隨著HTＭL_5的發(fā)展,WｅbApｐ也會有著進一步的發(fā)展空間。１.2.３ＨTＭL５研究現(xiàn)狀HＴML_5技術(shù)自從誕生至今已有幾年的時間了，在這幾年的時間之中ＨTML_5的發(fā)展并不是非常順利的,對于HＴML＿5應(yīng)用需要從兩個方面進行考慮，一方面認為今后的Web是HTＭL_５的主要發(fā)展市場，另一方面認為HTML_5的缺陷和實際應(yīng)用中所保持的態(tài)度。最近幾年HTML_5雖然有著一些缺陷，但是長遠來看其發(fā)展還是有很大空間的。其主要能夠體現(xiàn)在以下幾個方面：ＨTML_5標準協(xié)議制度。在對HTML_5制定標準規(guī)范過程中，Ｗ３C組織的工作流程一般是:草案、最后修訂、候選推薦、建議推薦、推薦。到2014年10月，W3C組織宣布這一項推薦標準規(guī)范完成，這表明經(jīng)過幾年的HTMＬ_5的標準規(guī)范制定完成。自2008年，工作草案的發(fā)布以來,很多的互聯(lián)網(wǎng)公司對ＨTMＬ_5進行研究開發(fā)，同時也出現(xiàn)很多的問題,并且能夠及時的反饋出問題，致使HTML＿5的規(guī)范標準逐步的走向完善.瀏覽器的支持情況,移動終端設(shè)備的瀏覽器市場和桌面的瀏覽器市場有著很大的不同之處,目前移動客戶端主流的瀏覽器主要有AndroｉdBrowsｅ瀏覽器，Sａfari瀏覽器等都融入到HTＭL＿５研究當中,同時他們所占的市場份額也在不斷的增多。移動終端設(shè)備的瀏覽器對HTML_５的支持，是移動終端設(shè)備和ＨＴML_5相互之間雙贏的發(fā)展，都能得到有效的推廣，同時瀏覽器也會使更多的用戶對其青睞［4]。HTML_5對于移動設(shè)備系統(tǒng)開發(fā)平臺的訪問能力還在不斷的發(fā)展之中,目前與傳統(tǒng)的互聯(lián)網(wǎng)訪問系統(tǒng)相比，還是有著很多的性能缺陷.但是由于移動設(shè)備硬件的快速更新?lián)Q代,這個問題也隨之被順利的解決.比如201１年代20１3年本人以及身邊的同學(xué)就曾經(jīng)使用過單核的_52８M頻率的G8、單核1G的NexｕsOne、雙核1.２Ｇ的ＧａlａxySII，現(xiàn)在則是４核１．６Ｇ的NｏteII等移動設(shè)備。各種各樣的基于HTML_5的開源的框架、開發(fā)工具快速的出現(xiàn)，并且在其不斷的發(fā)展之中逐漸的完善.除了較老的SｅｎchaTouch9,ＰｈoneＧap、ｊQueｒyMobiｌe、ＬunｇoJS外，同時還出現(xiàn)了各種的Craｆtｙ,Ｃocｏｓ2d—ｈtm１5、limeＪS、ＧａｍeMake、Imｐaｃt等游戲的開發(fā)工具,Skeｌeｔｏｎ、ＧroundｗorｋCSS、Gumby等應(yīng)用程式的設(shè)計框架，大量的數(shù)據(jù)開發(fā)平臺。通常的情況下技術(shù)是在不斷的發(fā)展之中有需求的變化進步的，基于HTMＬ_5的各個技術(shù)的發(fā)展同時也表示了ＨＴＭL_5的需求也在不斷的增多。目前國內(nèi)的很多大型的互聯(lián)網(wǎng)公司也都在進行HTＭL＿5的研發(fā)當中，并且都推出了自己的移動平臺。比如說百度公司的WebAｐｐ平臺C1ｏｕdＡ，Ｆｉrefox的HTＭL＿５平臺FｉｒeｆｏxOS，Inteｌ的應(yīng)用移植工具ＡppPorter，任天堂的應(yīng)用開發(fā)框架ＮintenｄｏWebFｒameｗork等等.Ｆiash的開發(fā)商Ａdobe也在這上看到了HTＭL＿5的發(fā)展前景,并放棄了本身Flasｈ的移動客戶端產(chǎn)品，快速的投入到了HTＭL_5開發(fā)之中,并推出了很多的基于ＨTML＿5的開發(fā)工具,動畫制作工具，可視化編輯器等。ＫenｄoUI公司曾經(jīng)做過一個關(guān)于HＴMＬ_5的調(diào)查,根據(jù)此公司的調(diào)查數(shù)據(jù)表明,很多的Web開發(fā)者對于ＨTML_5的應(yīng)用前景是持有樂觀態(tài)度的，幾乎所有的Weｂ開發(fā)者已經(jīng)使用或者說正在使用HTML_5技術(shù)。Aｐpcelｅrａt(yī)or經(jīng)過調(diào)查發(fā)現(xiàn)其得到的結(jié)果與KenｄoUＩ公司調(diào)查的結(jié)果極度的相似.在國內(nèi)HTML＿5的技術(shù)也在成為研究的熱點，開源的HTＭＬ_5也保持著相對較好的人氣。很多機遇HＴML_５的應(yīng)用也在潛移默化的融入到人們的生活之中。目前我們能夠經(jīng)?？吹降膽?yīng)用主要有兩種形式,一種是傳統(tǒng)的互聯(lián)網(wǎng)站實現(xiàn)移動化。其中百度地圖就是推出了ＷAP版本,使用了HTML＿5的新特性進行地圖的定位功能。另外一種方式就是移動終端應(yīng)用中融合HTMＬ_5技術(shù)，比較有代表性的應(yīng)用主要有淘寶、新浪等等.總而言之，ＨTML＿5技術(shù)在不斷的發(fā)展中進行完善,以后將會得到更進一步的發(fā)展以及應(yīng)用.1。3本文研究內(nèi)容在本文中按照現(xiàn)階段的內(nèi)容管理方案的現(xiàn)狀，提出了基于HTML５技術(shù)的移動內(nèi)容管理系統(tǒng)的解決方案。本文主要從下面幾個內(nèi)容進行闡述的:本文基于ＨＴＭL5技術(shù)的跨平臺移動客戶終端內(nèi)容的實現(xiàn)展示.為了使移動平臺特性能夠滿足用戶要求，本文中提出了一種能夠適應(yīng)多種操作平臺的移動客戶終端風(fēng)格Fin。并且針對移動客戶終端和服務(wù)器端的數(shù)據(jù)交互，對跨平的實現(xiàn)作出了詳細的介紹。內(nèi)容系統(tǒng)服務(wù)器端的分析和實現(xiàn)，按照內(nèi)容管理服務(wù)器端，使用了較為輕量級的數(shù)據(jù)服務(wù)框架ＳＳH,并且設(shè)計出響應(yīng)式的界面管理程序，管理的人員能夠經(jīng)過不同的屏幕分辨率進行設(shè)備管理。信息推送服務(wù)的分析以及實現(xiàn).按照移動互聯(lián)網(wǎng)的內(nèi)容信息系統(tǒng)的現(xiàn)狀,提出的主題用戶推送策略，而且對于不用的客戶端進行相對應(yīng)的實現(xiàn)。1.4本文組織架構(gòu)本文內(nèi)容組織架構(gòu)如下：第1章，緒論,介紹了當前移動內(nèi)容管理方面的國內(nèi)以及國外的研究現(xiàn)狀研究背景以及意義，同時還介紹了基于HTML5跨平臺研究的意義和背景.針對移動內(nèi)容的管理系統(tǒng),跨平臺移動客戶終端互聯(lián)網(wǎng)和ＨTMＬ5的研究現(xiàn)狀逐步的進行分析，最后就是按照本文的研究內(nèi)容和組織架構(gòu)作出了闡述。第2章，對核心技術(shù)的分析,在本章中對于本文的核心的技術(shù)進行了系統(tǒng)的介紹和詳細的分析,其中主要包含有對HＴMＬ_5的簡介以及新特性分析,PｈoneGap的原理機制分析,核心技術(shù)分析。第3章，移動客戶端設(shè)計及實現(xiàn)，在本章中提出了跨平臺移動客戶端應(yīng)用內(nèi)容的風(fēng)格展示Ｆｉｎ,其次又提出了服務(wù)器端和輕量級的移動客戶終端進行數(shù)據(jù)交互實現(xiàn)方式，最后做出了移動平臺和WebApp進行無縫連接的解決方案。第4章，推送系統(tǒng)設(shè)計和實現(xiàn),對于內(nèi)容關(guān)系的服務(wù)，做出了一種高擴展以及低禍合等客戶服務(wù)器端架構(gòu)。與此同時,對內(nèi)容管理系統(tǒng)的對象實現(xiàn)模型進行了詳細的分析和實現(xiàn)，設(shè)計出面對多種屏幕的設(shè)備響應(yīng)式內(nèi)容管理界面。第_５章，推送服務(wù)設(shè)計,在本章中進行了信息推送的分析，并且提出解決方案以及相應(yīng)的推送政策。第６章，總結(jié)與展望。對全文進行了全面性的總結(jié),并根據(jù)現(xiàn)在發(fā)現(xiàn)趨勢提出了針對以后發(fā)展的設(shè)想。第二章相關(guān)核心技術(shù)介紹2.1HTMＬ5技術(shù)介紹2。1。１ＨＴＭL5簡介HTML是英文HｙpeｒTeｘtMａrkupLａnguage的縮寫,就是超文本標記語言,是網(wǎng)頁所構(gòu)成的文本標簽的組合。HTML_5是ＨTMＬ的下一代的標準，ＨTML_５是從廣義上講的，其實它是包含有CSS3、ｊaｖａＳcript、ＨTＭL_５等在內(nèi)的一套完整的Web開發(fā)技術(shù)組合。2．1．2HTＭL５新特性HＴML＿５基于HTML原有的標準上解決了很多的實際問題,并且做出了很多方面的改進，集成了SＶG技術(shù)內(nèi)容,而且增加了各種的特色標簽以及ＡPI，使HTML_5具備很多比較實用的新鮮的功能特點.地理位置HＴML_5技術(shù)新增加了ＧeｏｌｏｃaｔionＡＰI，可以使程序編程人員能夠在取得程序權(quán)限的情況下順利的獲取到瀏覽器使用者的全時的地理方位信息,允許程序開發(fā)人員在這個基礎(chǔ)之上給使用者提供更多的人性化的服務(wù),例如說LBＳ的相關(guān)服務(wù)等.2.數(shù)據(jù)存儲在使用HTML_5技術(shù)之前,很多的用戶客戶端數(shù)據(jù)主要的存儲方式是以Flａsh插件或者是coｏkie，但是以Flash插件為存儲方式的數(shù)據(jù)需要基于第三方插件的基礎(chǔ)之上，而cookie儲存的方式對存儲的數(shù)據(jù)量有著很大的限制，因此以上兩者都不是理想的數(shù)據(jù)存儲方式。HTML_5所推出的新的數(shù)據(jù)存儲方式主要有本地數(shù)據(jù)存儲以及WebＳQL數(shù)據(jù)庫存儲方式,這兩種存儲方式具有存儲空間較大,并且存儲空間相對獨立，接口豐富便捷等特點。WｅbSＱL數(shù)據(jù)庫方式是將所要存儲的數(shù)據(jù)已云數(shù)據(jù)庫的形式進行存儲的，使用SＱL數(shù)據(jù)庫進行數(shù)據(jù)的增加修改刪除等操作；本地存儲的方式主要是數(shù)據(jù)建值對的方式進行存儲的,一般有SessionSｔｏrage和LoｃaｌStｏｒage兩種，SesｓｉonStorage僅能用于一次的臨時對話存儲，LｏcalSｔorage則能夠用于永久的數(shù)據(jù)保存。3.多媒體播放〈<audio＞以及<viｄeｏ〉標簽的誕生，在很大程度上簡化了對多媒體內(nèi)容的處理,允許程序開發(fā)人員將音頻數(shù)據(jù)和視頻數(shù)據(jù)在網(wǎng)頁中嵌入開發(fā)，所以，在進行音頻文件和視頻文件的訪問時不需要第三方插件的支持就能夠?qū)崿F(xiàn),在很大程度上提高了獨立性。４.畫布在HTML_5中增加了包含有CanvasAPI的二維圖繪功能，讓程序開發(fā)員能夠通過編寫ＪaｖaScript的程序代碼在網(wǎng)頁中實現(xiàn)Caｎvas畫布的繪圖功能,并且具有多種多樣的特效處理功能。５.新標簽語義ＨTML_5中增加了各種各樣的新標簽功能。比如：〈ｆooter＞、＜hｅaｄer>等等標簽的出現(xiàn)，放棄了基于傳統(tǒng)的HＴML標準下的〈div〉標簽的通喲歐諾個表現(xiàn)形式,使得網(wǎng)頁中的標簽在名稱上具有更加豐富的語境，更加具體的描述，并且程序代碼的可讀性較高。新標簽的誕生在一定程度上化簡了網(wǎng)站的開發(fā)，同時方便了程序員在開發(fā)中對網(wǎng)站創(chuàng)建的過程。2。1.３HＴML5應(yīng)用前景HTMＬ＿5相比于上一代的HTＭＬ標準在其性能以及功能上都有較為明顯的提高，新增加了很多的功能特性，雖然現(xiàn)在HTML_5還存在著一些明顯的不足和缺陷，但是在應(yīng)用前景方面仍然還有很多的空間.首先，在移動端的開發(fā)研究方面,各個移動應(yīng)用系統(tǒng)平臺下的瀏覽器對于HTML_5的支持程度明顯的較高，而且還在不斷的提高中,因此移動端的網(wǎng)絡(luò)應(yīng)用現(xiàn)狀在很大程度上能夠得到有效的改善。其次，基于HＴＭL＿5技術(shù)，能夠?qū)ΜF(xiàn)在的操作系統(tǒng)內(nèi)容進行獨有的創(chuàng)新,用戶可以通過WeｂAｐp的形式進行App的獲取，并且不用再在本地下載安裝，比如:Gｏoｇle的ChromｅOＳ等。最后HTＭL_5技術(shù)具有的先天性的跨平臺優(yōu)勢,隨著Ｗeb技術(shù)應(yīng)用的功能以及性能上的不斷提高，互聯(lián)網(wǎng)云計算技術(shù)的快速發(fā)展以及日益增大，ＨTMＬ_5技術(shù)的跨平臺應(yīng)用優(yōu)勢將會有很大程度上的發(fā)展空間。2．2PｈoneGap介紹ＰｈoneGaｐ移動開發(fā)框架介紹伴隨著移動互聯(lián)網(wǎng)高度信息化的快速發(fā)展，市場中出現(xiàn)的移動終端智能化操作系統(tǒng)也隨之增多。自從2007年美國的蘋果公司發(fā)布第一代明星級別的移動終端設(shè)備Iｐhone,此設(shè)備是基于IOＳ操作系統(tǒng)，之后愈來愈多的基于智能操作系統(tǒng)的移動終端設(shè)備如雨后春筍般的出現(xiàn).然而當時的互聯(lián)網(wǎng)巨頭谷歌公司也在其后于2008年發(fā)布了基于Linux內(nèi)核的開源的智能移動終端設(shè)備操作系統(tǒng)，就是現(xiàn)在的安卓系統(tǒng)［５]。因為安卓操作系統(tǒng)具有免費性和開源性的特點，致使很多的手機生產(chǎn)制造商以及移動通信運營商也都在爭取加入到以谷歌公司為主要導(dǎo)向的開放式手持設(shè)備聯(lián)盟當中,他們共同出資投入技術(shù)性人才進行對安卓操作系統(tǒng)的開發(fā)以及改進。隨著安卓操作系統(tǒng)的快速崛起，移動智能終端設(shè)備領(lǐng)域開始了飛速的發(fā)展模式，同時智能手機使用者也在呈階梯式的增長。之后，美國微軟公司也發(fā)布了旗下的智能手機，此手機是基于WindｏwsＰｈｏnｅ為操作系統(tǒng)，黑莓公司也發(fā)布了B１aｃｋBerryOS智能手機,諾基亞發(fā)布了MｅｅGｏ操作系統(tǒng)的智能手機,韓國三星公司也發(fā)布了基于Ｂadａ操作系統(tǒng)的智能手機。正在眾多公司都在發(fā)布具有自己操作系統(tǒng)的智能手機的同時,出現(xiàn)了一個對于手機應(yīng)用開發(fā)的程序員面前的難題，就是他們所開發(fā)的一款應(yīng)用程序需要針對于每種操作系統(tǒng)都要重新開發(fā)設(shè)計,這樣才能實現(xiàn)對所有移動終端設(shè)備的全部覆蓋，然而面對于基于各種不同操作系統(tǒng)的應(yīng)用程序在其程序開發(fā)過程中的開發(fā)環(huán)境以及開發(fā)語言都是有著很大程度上的不同.比如：要想開發(fā)安卓操作系統(tǒng)的應(yīng)用程序,需要開發(fā)程序人員掌握Java語言，而WｉnｄoｗsMoｂilｅｙinｇ用程序的開發(fā)者們需要掌握的是Wｉndｏws系統(tǒng)下所用到的Ｃ#語言,然而要想開發(fā)IOS系統(tǒng)下的應(yīng)用程序，開發(fā)人員們需要掌握MacOSＸ系統(tǒng)下的O句ecｔive-C語言。這就給想開發(fā)出一個應(yīng)用程序的又覆蓋所有的智能手機操作系統(tǒng)來說是十分艱難的問題,同一個應(yīng)用程序需要兼容各種不同操作系統(tǒng)下的版本，這樣的開發(fā)效率很低，并且費時,費力。這時軟件開發(fā)界出現(xiàn)了一個叫做PhoｎeGaｐ框架的應(yīng)用，此應(yīng)用是針對程序開發(fā)人員提供的一個軟件多個操作系統(tǒng)兼容的問題,達到能夠一次程序的編寫就能夠全部兼容的目的,很好的滿足了程序開發(fā)人員的需求。PhonｅGap框架是基于ＣSS、JａvaＳcｒipt、HＴML等Web技術(shù)所創(chuàng)建的跨平臺的應(yīng)用程序開發(fā)框架.2００９年由Ｎｉtｏbi公司最先發(fā)布出的可以通過本地應(yīng)用程序進行開發(fā)語言和Web瀏覽接口之間的關(guān)聯(lián),實現(xiàn)了采用Weｂ技術(shù)進行程序的開發(fā),并且封裝成為能夠跨平臺使用的應(yīng)用程序，目前已經(jīng)被Adｏbｅ公司收購?，F(xiàn)在，PhoneGap框架所開發(fā)出的應(yīng)用程序已經(jīng)可以兼容市場上多數(shù)的移動客戶端智能操作系統(tǒng)的手機?；冢校鑟neGap框架所開發(fā)編制出的應(yīng)用程序經(jīng)過各個操作系統(tǒng)平臺上進行編譯然后所生成的具有獨立性的安裝程序之后,能夠得到與原生開發(fā)的應(yīng)用之間差距很小的用戶體驗.程序開發(fā)人員也能通過PhoneGap所提供的API進行無差異的調(diào)用，運行在不同操作系統(tǒng)中的硬件功能,軟件功能包括：振鈴、攝像頭、話筒、聽筒、地理位置等等。在使用PhoneGａp框架編寫智能手機終端應(yīng)用程序時，所用到的主要技術(shù)有CSＳ、ＨTML和JavａＳｃriｐt等，CSS技術(shù)和HTML技術(shù)在最近幾年都是有比較明顯的發(fā)展，特別是CSS3和HTML_５技術(shù)的提出以及不斷的發(fā)展和完善,并且出現(xiàn)了很多新的特性,比如HTＭL_5中的ｃanvas畫布,離線應(yīng)用、websockeｔAPＩ以及geolocａｔionAＰI,CSS3中全新增加的各種各樣的選擇器，都在一定程度上豐富了程序開發(fā)人員基于PhoneGaｐ框架進行開發(fā)選擇。2．ＰhoneGap框架開發(fā)的有點PｈoneGａp框架是一款非常優(yōu)越的跨平臺應(yīng)用，其優(yōu)點主要有以下幾個方面:免費、開源：PhoｎeGａｐ是完全開源的系統(tǒng)開發(fā)框架，任何人都可以通過互聯(lián)網(wǎng)進行免費的代碼獲取。協(xié)議的標準化：PhoｎeGａｐ框架采用的是W３C標準化技術(shù).方便維護：基于PhoneＧaｐ框架開發(fā)的應(yīng)用程序在不同的操作系統(tǒng)平臺上都有一套基于Web的程序代碼進行實現(xiàn),以便程序的開發(fā)以及系統(tǒng)的升級?？缙脚_能力強：PhonｅＧap框架支持安卓系統(tǒng)、IOＳ系統(tǒng)、ＷｉnｄoｗsPhoｎe系統(tǒng)、BlａckberryOS系統(tǒng)等移動平臺，能做到對其“ruｎevｅｒywhere，wrｉｔeoｎce”,能夠有效的提高應(yīng)用程序開發(fā)效率。3。PhｏneGａp移動開發(fā)框架運行機制經(jīng)過使用PhｏneGａp框架對移動客戶端的應(yīng)用程序開發(fā)一般有以下三大步驟:首先,選用JaｖaＳｃｒipt、CＳS3、HTMＬ_5等Wｅb技術(shù)進行移動客戶端應(yīng)用程序編寫，然后選用ＰhoneGap框架對已經(jīng)編寫好的代碼進行統(tǒng)一封裝:最后，將封裝好的程序代碼進行打包，然后能夠生成兼容各個智能操作系統(tǒng)平臺的安裝文件。PhoneGap框架是利用JavａＳcript在Ｗｅb開發(fā)中調(diào)用各種平臺的原生API時候能起到銜接作用，其實是將外部ＪavaScript調(diào)用轉(zhuǎn)化成為平臺原生ＡＰＩ調(diào)用。PhonｅGaｐ框架使應(yīng)用程序在開發(fā)以及使用過程中不在局限于原生語言之上，它使能Ｗeb技術(shù)所用的程序開發(fā)人員，能夠輕松的進行應(yīng)用程序的開發(fā),并且能夠經(jīng)過PｈoｎeGap框架滿足程序開發(fā)人員的跨平臺需求[6］.4.ＰhoneGap移動開發(fā)框架的不足就當下情況來看，雖然ＰhｏneGap框架在跨平臺領(lǐng)域中開發(fā)應(yīng)用程序取得了優(yōu)越的成績，同時也受到很多的程序開發(fā)者的青睞，但是，在用戶體驗等方面，還是存在著一些明顯的缺陷:執(zhí)行性能方面：在正常的運行過程中，基于ＰhoneGaｐ框架所開發(fā)的應(yīng)用程序運行時較為流暢,并能夠擁有很好的用戶體驗。但是當用戶對應(yīng)用程序進行高頻操作時,應(yīng)用程序會出現(xiàn)卡頓,反應(yīng)慢的現(xiàn)象。資源的占有和穩(wěn)定的應(yīng)用型方面：對于應(yīng)用程序的頻繁操作會使系統(tǒng)的反應(yīng)速度變慢，WebKit中的WebVｉew不能夠有效的釋放內(nèi)存,因此致使應(yīng)用程序占用系統(tǒng)內(nèi)存空間增大，在這樣的情況下，有可能造成應(yīng)用程序的癱瘓,并且出現(xiàn)應(yīng)用程序的閃退現(xiàn)象。提供的接口質(zhì)量以及數(shù)量的方面：PhoｎeGap框架所支持的API框架還遠不能夠達到原生的開發(fā)環(huán)境中提供的API多，其性能的表現(xiàn)也不如原生的好,同時也達不到原生系統(tǒng)中應(yīng)用程序的用戶體驗.2。3JａvａEE技術(shù)JaｖａＥE技術(shù)介紹JavaEE技術(shù)屬于Ｊava語言中企業(yè)級別的應(yīng)用技術(shù)，現(xiàn)在被廣泛的應(yīng)用在在企業(yè)開發(fā)平臺中,并且具有明顯的優(yōu)勢，JavaＥE技術(shù)所具有的獨特的開放性、穩(wěn)定性、安全性嚴格等特點使之成為了企業(yè)高信息化的首選。同時也被銀行、電信、證券公司、電子商務(wù)等行業(yè)都在大量的采用JaｖaEE技術(shù)組件信息化的平臺。典型的JavaＥE技術(shù)平臺是以企業(yè)級別的JavaＢeａn為核心的，正常情況下使用其運行的成本以及開發(fā)的成本都相對較高。目前被廣泛應(yīng)用的ＪaｖａEE平臺是SSH組合.這一組合是較為輕量級別的JavａEE平臺，具有高度的擴展性、可維護性、以及相對穩(wěn)定的性能。并且不需要EJB的支持就能夠在Web容器中運行.無論是輕量級別的SＳＨ組合框架，還是典型的ＪavaＥE框架，其結(jié)構(gòu)上大致都是分為以下幾個層：表現(xiàn)層：這一層是由JＳP頁面、Vｅlociｔy頁面、PＤF文檔等視窗組件構(gòu)成的，基本用于客戶端請求的收集，并且將其內(nèi)容在視窗中顯示出來?？刂破鲗樱涸搶邮怯梢恍┛刂破陂g組成的，這一層能夠?qū)⒖蛻舳税l(fā)送的信息請求進行攔截，并且能夠?qū)I(yè)務(wù)邏輯層進行調(diào)用的接口,將請求轉(zhuǎn)發(fā)給下面一層的接口中。根據(jù)其返回的結(jié)果,將結(jié)果傳送到表現(xiàn)層。業(yè)務(wù)邏輯層：這一層是由一系列的業(yè)務(wù)邏輯所構(gòu)成的對象.該層能夠?qū)崿F(xiàn)系統(tǒng)中業(yè)務(wù)邏輯的方法，并且向控制器層提供相應(yīng)的接口，能夠調(diào)用DAO層數(shù)據(jù)接口,并且將結(jié)果經(jīng)過業(yè)務(wù)邏輯方法處理后返回給控制器層.DAO層（數(shù)據(jù)訪問對象層）:這一層是由DAO組件構(gòu)成，這些DAO組件是經(jīng)過原子性等數(shù)據(jù)庫訪問形式實現(xiàn)的。領(lǐng)域?qū)ο髮?這一層是由一系列的傳統(tǒng)的Jａvａ對象構(gòu)成的，其中往往能夠?qū)崿F(xiàn)各自的業(yè)務(wù)邏輯實現(xiàn)的方法。2。JavaEＥ輕量級別框架Sprｉng框架Sｐrｉnｇ框架是從其誕生至今一直都處在不斷地發(fā)展以及改進之中,目前Sprｉng框架框架在JａvaEE框架中起著至關(guān)重要的作用。Spring框架完全是在具體的實踐中完成的,眾多的開發(fā)實踐步驟已經(jīng)實現(xiàn)了將某一特定的應(yīng)用部分留給開發(fā)者使用，為Java開發(fā)者提供出較為簡單的解決方案。其中主要包括技術(shù)控制核心，反轉(zhuǎn)的ＩＯC，SｐｒｉnｇMVC框架,能夠?qū)崿F(xiàn)聲明式事務(wù)管理AOP框架，以及多種與持久層組合的技術(shù)。并且貫穿了業(yè)務(wù)層、表現(xiàn)層、持久層.并且能夠與其他的框架進行完美整合。Sｐring框架有七個不同處，具有較好的定義子模塊組成：SpｒiｎgWeｂ、ＳｐｒｉｎgContext，、ＳpringDAＯ、SpringＡＯP、ＳpriｎｇCore、ＳpｒingORＭ、SｐrinｇMVC、SｐringCｏrｅ為主要的核心模塊，在使用Ｓpｒing框架時必須使用SpriｎgＣore模塊，Spｒｉng框架的各個模塊與ＳpｒingCore為基礎(chǔ)構(gòu)建的，并且每個子模塊都是相對獨立的，能夠進行單獨的使用或者是聯(lián)合的使用。其中面向切面的編程以及控制反轉(zhuǎn)是為了開發(fā)者使用的，并且使用率非常廣泛。對于AOP以及IOＣ的解析如下：AOP切面編程AＯP指的是切面編程，對于傳統(tǒng)上的編程思想一般都是面向?qū)Φ?，AOP則是面向一個切面。系統(tǒng)中經(jīng)常是根絕業(yè)務(wù)的劃分，將其分為多個組件，這些的組件有一部分相同的調(diào)用功能，如：事物、安全等.切面編程的思想就是將具有相同的功能進行提取,給所有的部件進行調(diào)用。也可以將AOP看成是其他業(yè)務(wù)組件上的覆蓋層。目前切面編程的實現(xiàn)主要有兩種形式，一種是靜態(tài)的代理類，這是需要進行自己創(chuàng)建代碼進行編譯實現(xiàn)的.另一種是動態(tài)的代理類，在運行中動態(tài)創(chuàng)建。這經(jīng)常需要借助于反射、CGLIB等技術(shù).總體來說，Sｐrinｇ框架具有以下特點：設(shè)計上入侵式較低，程序代碼污染小。（2)與服務(wù)器之間相互獨立，在Spriｎg框架的基礎(chǔ)上應(yīng)用,能夠保證RunAnｙwhere、WriteOｎcｅ。(3)Spring的依賴性,注入增強了一些組件的解禍性，減少了業(yè)務(wù)對象的復(fù)雜性。（４）Spｒiｎg框架的切面編程能夠集中式處理事務(wù)、日志、安全等通用業(yè)務(wù)，同時增強了服用性。（5）Sｐｒing框架的ORM和ＤAＯ能夠良好的支持第三方持久層的框架，降低了數(shù)據(jù)庫訪問的復(fù)雜性。（６）Spｒing框架在其開放程度上較高，開發(fā)者能夠任意的對Sｐring框架中的部分進行選擇，并且不需要依賴于Ｓpring框架。（2）控制反轉(zhuǎn)IOC在Spｒｉｎg框架中控制反轉(zhuǎn)還有另外的一個稱呼就是依賴注入，其意思都是比較相似的，控制反轉(zhuǎn)對象進行創(chuàng)建管理反轉(zhuǎn)到Sｐrinｇ容器之中,然而依賴對象是在組合引用的情況下有Ｓprinｇ容器創(chuàng)建并注入.能夠看出SpriｎgＩOＣ是一種對象管理器［７]。在實際應(yīng)用中一個對象對另一個對象進行引用,不是通過對象個創(chuàng)建而是基于SpｒｉｎｇＩOC更加容易。這樣的明顯特點就是實現(xiàn)對象之間的解禍。這樣有很明顯的方便性，一個系統(tǒng)能夠劃分為多個模塊,并且多個模塊可以由不同的開發(fā)者進行。IOＣ的工作模式是Ｂeaｎ工廠,依照Xml注解的配置,并且其是依賴新的一類反射動態(tài)，生成并且注入到需求類中。3.Ｈibｅｒｎａt(yī)e框架目前的Web開發(fā)語言多數(shù)都是以面向?qū)ο髮χ行乃枷?現(xiàn)在的數(shù)據(jù)庫也都是關(guān)系型數(shù)據(jù)庫。計算機語言對于對象的操作以及數(shù)據(jù)庫的操作所構(gòu)成的不一致性,因而致使了ORM的產(chǎn)生。OPM框架的數(shù)據(jù)庫主要是編程語言以及底層數(shù)據(jù)庫之間的橋梁。Ｈｉｂｅｒｎａt(yī)ｅ是的一種ORＭ框架,Hiｂerｎａt(yī)eAPI能夠為應(yīng)用程序?qū)?shù)據(jù)庫的訪問提供接口，其中可以分為幾種類型：提供數(shù)據(jù)庫訪問接口Ｓeｓsion,Tｒansaction,Qｕerｙ；提供對Hibｅrnate內(nèi)部事件攔截并做出相關(guān)回應(yīng)的接口；提供對Ｈｉbernate配置的Configｕratiｏn接口;用于對Ｈｉberｎaｔe進行擴展的接口,如IdeｎtiｆierＧenerａt(yī)oｒ,UseｒTyｐｅ和ＣoｍｐositeUserType接口。Hｉbｅｒｎate的內(nèi)部對JＴＡ、ＪNDI、JDBC實現(xiàn)了封裝形式。其中的JＤBC是數(shù)據(jù)底層間的數(shù)據(jù)庫訪問工具，而且用戶只需要對ＪDBC驅(qū)動安裝即可,就能夠通過Ｈibernａｔe進行底層數(shù)據(jù)庫間的訪問.然而，ＪavaEＥ框架和Hibeｒｎate的服務(wù)器應(yīng)用的相互繼承主要是通過JTA以及JNDＩ作為中間工具。２．４本章總結(jié)在本章中對于跨平臺的核心技術(shù)做出了簡單的介紹然后又按照PhoneGaｐ技術(shù)的運行原理和機制做了深刻的解析。其次，按照跨平臺的Ｗeb應(yīng)用技術(shù)的有關(guān)技術(shù)做出響應(yīng)式頁面的設(shè)計介紹.最后對服務(wù)器開發(fā)端做了輕量級的JaｖａEE開發(fā)框架簡單介紹。第三章移動客戶端設(shè)計及實現(xiàn)3.1移動端風(fēng)格設(shè)計Fin的設(shè)計風(fēng)格是本文中所提出的相關(guān)的設(shè)計理念,其中的核心思想主要是清晰，簡單,核心技術(shù)是ＣSS３以及HTML_5。在其設(shè)計理念中主要是基于當下較為流行的扁平化設(shè)計、響應(yīng)式設(shè)計、流式布局設(shè)計等，能夠根據(jù)不同的手機設(shè)計出不同的主體風(fēng)格,形成一套能夠適用于各個平臺的移動終端內(nèi)容風(fēng)格展示。3.1．1設(shè)計規(guī)范分析UI界面設(shè)計中黃金定律：永遠都是遵循同一套編程代碼規(guī)范。在ＦIN風(fēng)格中設(shè)計了能夠有效的保證程序代碼的高質(zhì)量、靈活性、穩(wěn)定性等，并且遵循以下設(shè)計規(guī)范。HTML規(guī)范:為每一個HTML頁面的頭一行添加具有標準模式的聲明，這樣可以使每一個瀏覽器都能夠保持一致的展現(xiàn)。語法方面，可以用空格鍵代替制表符；用雙引號來進行屬性的自定義;嵌套的元素應(yīng)當進行一次縮進；不省略可選結(jié)束標簽；不需要再自閉和的元素尾部添加斜線。為頁面匹配制定的ＩE版本，能夠通過metａ標簽進行實現(xiàn)。為使IE采用最新模式,通常情況下以ｅdgemode作為設(shè)置。為根元素指定相應(yīng)的屬性，為穩(wěn)定設(shè)置較為正確的語言，這就為語音合成以及翻譯工具做出了相應(yīng)的規(guī)則。根本的實用性，HTＭＬ相關(guān)標準以及語義需要遵守嚴格的規(guī)則,不能違背實用性的標準.提高代碼的可讀性，HＴＭL中的屬性必須遵循以下順序:class，ｉd，nａme，daｔａ-＊，src,for，type，ｈref，titｌe，aｌt,ａria－，rolｅ。（6）對于布爾型聲明屬性時，不進行賦值是可以的。（7）瀏覽器對于頁面的高校便捷的渲染方式進行判斷辦法近視對字符編碼的聲明。(8)盡可能的使用重構(gòu)和迭代進行編寫HTML代碼，減少父類元素的使用。CSS規(guī)范聲明順序方面:按照以下順序?qū)ο鄳?yīng)的屬性進行聲明分組：Positiｏｎing、Boｘｍｏｄel，Typogrａｐhｉc，Visuａ。在同時使用多個元素的時候,采用以下幾種代替的方法:一是用如Rails，Jekｙll或者其他的系統(tǒng)支持的功能，將ＣSS進行合并處理,二是用ＣSＳ處理器將幾個CSS文件進行合并，而且編譯成一個文件.特定的前綴屬性，要對其每個屬性都垂直。語法方面，制表符能夠用兩個空格進行代替；聲明的有括號為單獨的一行，以便代碼的閱讀，并每條聲明后，插入一個空格;將選擇器進行分組時,把單獨的選擇器獨立成行,常規(guī)做法是將聲明處的左括號前加空格；每行一條聲明能夠精確的獲取錯誤報告，最后一條聲明除外，每句的結(jié)束需要用分號,假如有些屬性需要用逗號進行分隔，那么需要在逗號后加一個空格;屬性值以及顏色值都小于1的情況下，通常是將小數(shù)的整數(shù)部分的0進行省略,十六進制數(shù)值采用小寫;保證代碼的統(tǒng)一性,選擇器中的屬性都要添加雙引號;避免0值單位.媒體查詢位置，不能講查詢位置以及有關(guān)的規(guī)則分開，以免造成遺忘。（6)如果有多條的樣式聲明，需分行聲明。如果僅有一條，就放在同一行中。（7）避免不必要的嵌套，程序中過多的嵌套會產(chǎn)生比必要的麻煩，只能在必須將樣式放到后面容器中時，才能夠使用嵌套。（8)<clink>標簽的使用要比＠ｉｍport指令反應(yīng)速度快，并且能夠有效的避免很多問題，因此盡量的使用<cｌiｎｋ＞標簽(9)避免過多的使用簡寫的聲明屬性，過多的使用簡寫的聲明會導(dǎo)致程序代碼的混亂，在讀程序的時候也是很難理解，因為會產(chǎn)生一些未知的錯誤。（1０）選擇器,盡量避免使用屬性的選擇器，避免很多層次的選擇器，這樣會影響瀏覽器的渲染能力。(１１）代碼組織，有一些代碼的組織規(guī)范，建議以組件進行劃分,把代碼進行分組。使用同一的空白符，在頁面中有多個CSS文件的形式進行劃分。（1２)注釋，注釋對于程序來說非常的重要，因此需要養(yǎng)成較好的注釋習(xí)慣，并確定其簡單易懂。同時還需要注意的是將代碼正確的注釋目的，進行傳遞的,同時也要盡量的避免不必要的注釋。（1３)clａss命名，與以往的額通用語言命名方式不同，CＳS中的class命名規(guī)則通常是小寫的英文字符或者是破折號.破折號主要用于命名空間。（1４）編輯器配置，編輯器也能設(shè)置一定的編輯規(guī)范,比如制表符代替兩個空格。3．1.2設(shè)計原則分析Ｆin風(fēng)格設(shè)計的原則是面向所有的移動客戶端內(nèi)容管理系統(tǒng)設(shè)計師和開發(fā)者們提供的完美的設(shè)計規(guī)范，使用的系統(tǒng)能夠適合各個移動操作系統(tǒng)平臺的特點，使用戶能夠更加容易的識別以及學(xué)習(xí)。同時其提供的組件能夠使開發(fā)者能夠降低成本。所以,要想進行移動客戶端應(yīng)用程序設(shè)計首先要學(xué)習(xí)各個操作系統(tǒng)的設(shè)計原則以及設(shè)計規(guī)范.各個平臺的設(shè)計原則如下表3-１所示。表3．１各個移動平臺設(shè)計原則通過上表內(nèi)容設(shè)計原則的比較能夠看出,這個操作系統(tǒng)在設(shè)計理念上都有著各自的最求，同時也存在設(shè)一定的一致性。從使用的經(jīng)驗來看，他們在很多的方面還是有著共同的設(shè)計特性的,也具備著各自的明顯的特點。隨著移動客戶端交互設(shè)計的發(fā)展,BｅｎShneｉｄerman也提出了交互設(shè)計領(lǐng)域中的幾條原則。如下:內(nèi)容優(yōu)先。對于移動設(shè)備來說,對于具有較小的屏幕空間來說,設(shè)計者需要以內(nèi)容為核心進行屏幕布局的合理。刪除多余無用信息,使用戶能夠習(xí)慣內(nèi)容信息。能夠有效的提高屏幕的利用率。為了觸摸進行設(shè)計,移動手機客戶端為重的觸摸操作代替了傳統(tǒng)的硬件敲擊,觸摸的靈活性更加方便一些,但是由于觸摸的準確度還沒有完全的理想情況下高、手機登移動設(shè)備的靈敏度缺陷等，所以需要對以上缺點進行相應(yīng)的規(guī)則進行完善?；谖覀儜?yīng)用的框架,組建成一套一致性較高的規(guī)范原則進行各種操作.觸摸界面應(yīng)該具有很好的易學(xué)性和引導(dǎo)性。多通道設(shè)計，在輸入以及輸出的方式上增加其他的形式，不但是文字,如:語音、圖片、視頻、震動等，都會給使用者帶來很好的體驗,有更加強烈的真實感。（4）流暢性，觸摸操作將會有一定的缺陷,比如說觸摸目標的不準確性，操作的不正確性,反饋延遲等特性。這些因素都能夠影響應(yīng)用程序的運行性能，盡量的確保避免這些缺陷確保應(yīng)用很好的流暢性。(5）易學(xué)性，界面應(yīng)該具有清晰,明白的特點，具有很好的引導(dǎo)性質(zhì)，通過圖表的隱喻或者是文字的提示給使用者提供了線索,讓使用者能夠更好的理解并去操作。(6）切入的輸入方式?？梢越?jīng)過使用二維碼的方式,滑動線等替代文字的輸入。（７）中斷設(shè)計，移動客戶端應(yīng)用具備網(wǎng)絡(luò)中斷、電量不足等異常的情況，因此在設(shè)計3.1.3扁平化風(fēng)格自從wiｎ8界面的誕生以來使用扁平化的設(shè)計，其設(shè)備風(fēng)格被廣泛的設(shè)計者所認同，同時也被更多的使用者所接受。目前的移動客戶端的設(shè)計者也有著更多的扁平化設(shè)計風(fēng)格，比如說IＯS7的界面圖標。所謂的扁平化設(shè)計其實就是講過去使用的虛擬效果，例如陰影、高光、采用簡單化、簡潔是界面看上去更加的扁平化.在扁平化設(shè)計過程中圖標的選擇和色彩的選擇調(diào)整特別的重要.設(shè)計出較好的扁平化風(fēng)格,對于每個設(shè)計師的理解都是不相同的,但是基本可以按照以下幾種原則：布局：能夠設(shè)置一定的視覺規(guī)范原則，使其布局具有一定的引導(dǎo)性。使使用者的眼光按照所設(shè)定的布局瀏覽到相應(yīng)的內(nèi)容。一致性:色彩，風(fēng)格等都具有一定的簡單易用性，又有美觀的效果，不會使用戶在視覺上有刺激的感覺，使用者會有舒適感。層次化,在一個界面中通常會有內(nèi)容重要性的差別,重要的內(nèi)容相對要重點的突出,相對于次要的內(nèi)容則需要普通的顯示?？梢允褂脤蛹墝⒋诵ЧM行實現(xiàn).例如說網(wǎng)站主頁的導(dǎo)航,相對于普通的內(nèi)容更加重要一些，因此可以將導(dǎo)航放到頂部,并且通過層次感進行達到視覺效果。對比，可以通過使用一些特定的元素進行顏色的對比，能夠起到較為好的效果。目標用戶，不同領(lǐng)域的網(wǎng)站通常是在不同的設(shè)計需求中。針對這樣的需求,分別的設(shè)計出相應(yīng)的風(fēng)格。如：政府部門的網(wǎng)站通常是以紅色為主,界面的管主要以淺顏色為主。反饋：當用戶進行一系列的操作時，需要通過一定的反饋告知使用者操作后的結(jié)果.如:當用戶點擊中導(dǎo)航欄中的某一點的時候，需要讓用戶知道次條目已被選中,可以使用加亮或者是其他的視覺效果進行實現(xiàn).降低復(fù)雜性,無論是什么樣的規(guī)范進行實現(xiàn)，都不能建立在加大用戶復(fù)雜性的基礎(chǔ)之上。視覺設(shè)計的再好，用戶操作起來不方便，也使用戶難以理解,同時也失去了用戶相應(yīng)的體驗。鼓勵探索,再設(shè)計方面不僅能考慮到新的用戶,但是還要考慮對老用戶進行設(shè)計的相應(yīng),老用戶通常是需要更高的需求，然而面對以上的需求可以通過使用一定的指引，讓老用戶能夠更高的體現(xiàn)相應(yīng)的功能。原型：不管是什么養(yǎng)的額設(shè)計都不能脫離最初設(shè)計需求,在設(shè)計之前需要對設(shè)計進行充分的探索以及嘗試.３.１．4流式布局設(shè)計分析ＣＳS在還有沒被廣泛的認可的時候，網(wǎng)頁的布局基本上是基于表格實現(xiàn)的，經(jīng)常是經(jīng)過百分比進行各個模塊的寬度設(shè)計，隨著之后的CSＳ也被廣大設(shè)計者認可時，設(shè)計者們?nèi)ハ蛴谑褂孟袼剡M行布局的，這樣的網(wǎng)頁布局設(shè)置通常是寬度固定的方式，經(jīng)常用的像素寬度是960,這樣的設(shè)計尺寸對于不同的屏幕顯示出來的效果也是不相同的。目前隨著ＨＴMＬ_5媒體查詢被廣泛的應(yīng)用,針對于不同的屏幕尺寸做相應(yīng)的效果.假如在使用屏幕固定寬度的設(shè)計，會針對于不同的設(shè)備做不用寬度的設(shè)計。因此，隨著設(shè)備的增加，開發(fā)者的工作量也會隨著增加.因此，需要一個對各個屏幕尺寸都兼容的設(shè)計.伊桑。馬科特在其發(fā)表的文章中指出,采用媒體查詢、流式布局以及彈性的圖片進行布局,盡管以上幾項技術(shù)不是非常的新穎,但是將幾項技術(shù)放到一塊設(shè)計便有了確實的創(chuàng)造性。這兩者之間構(gòu)成了響應(yīng)設(shè)計的核心.設(shè)計的一款響應(yīng)是的網(wǎng)頁，應(yīng)該遵循一些原則：計算百分比的時，可以通過目標的元素寬度上除上下文元素寬度得到。網(wǎng)頁的元素中，像內(nèi)容欄，側(cè)邊欄，同樣也可以根據(jù)上述公式得到百分比[8]?？梢允褂梦淖值脑O(shè)置ＥM進行文字的縮放，這樣網(wǎng)頁中的內(nèi)容就能夠根據(jù)頁面的變化為變化,也可以將bｏdy標簽設(shè)置成大小為１0０070,其文字都是較為相對單位EMO彈性圖片的布局,也能夠通過CSＳ中的maｘ—ｗiｄｔh屬性設(shè)置，這時的圖片可以對ｗｉdtｈ設(shè)置屬性，否則的設(shè)計縮放的效果都會消失，也可以對不同的屏幕尺寸設(shè)計不同的圖片的大小.３.１。5HＴＭLS與CＳS3響應(yīng)式頁面設(shè)計響應(yīng)式的頁面設(shè)計是利用ＣＳS３的媒體查詢等技術(shù)進行網(wǎng)頁的構(gòu)建，目前已經(jīng)被廣泛的應(yīng)用，并且已經(jīng)被廣泛的瀏覽器所支持，另外,要對于老版的瀏覽器InｔernｅtExplorer６，7和8進行兼容修復(fù)。媒體的查詢有媒體的特性媒體的類型條件進行表達式的組成，針對于不同的媒體通常是特性表達式會多一些?？梢杂糜诿襟w對特有的ｗidth,hｅｉght，colｏｒ等進行檢測。使用媒體查詢能夠達到不同的樣式的效果。在創(chuàng)建媒體查詢時，經(jīng)常用到的是設(shè)備的視口寬度以及屏幕寬度。另外媒體的查詢還能提供下一個特性：設(shè)備寬度,視口高度,視口寬度，設(shè)備的高度，電視掃描方式，檢測屏幕以及打印機分辨率等等.３.2移動端內(nèi)容展示設(shè)計３.2。1響應(yīng)式設(shè)計與實現(xiàn)目前的移動設(shè)備大致上可以分為兩大類,平板電腦和智能手機。平板電腦的屏幕尺寸相對于智能手機來說要大一些。雖然不同的平板電腦屏幕尺寸和不同的智能手機的屏幕尺寸都略有差異,但是我們能夠通過寬度設(shè)置作為UI風(fēng)格的劃分。因此在做相應(yīng)設(shè)計的時候,將UI使用的群體大致能夠分為兩類,窄屏幕移動終端設(shè)備以及寬屏幕移動終端設(shè)備。相對兩種的設(shè)備尺寸使用者的體驗也是不同的,使用者的交互習(xí)慣也是不相同的。對于移動設(shè)備展示應(yīng)用來說,屏幕小的設(shè)備依據(jù)的原則是內(nèi)容優(yōu)先，內(nèi)容列表或者是內(nèi)容信息應(yīng)該布滿屏幕，對于導(dǎo)航欄的信息將會用隱藏的方式將圖標隱藏，當點擊時能夠展現(xiàn)出來,同樣也可以通過向右滑動等將導(dǎo)航欄滑出.相對于屏幕設(shè)備較寬的設(shè)備來說,如果整個內(nèi)容都布滿屏幕列表，屏幕會表現(xiàn)的空曠，無力。這種情況應(yīng)該將導(dǎo)航欄固定在屏幕一邊，這樣不僅能夠方便閱讀，還能增加屏幕美觀性。將屏幕寬度設(shè)置為876像素以上的設(shè)備大多數(shù)為平板電腦級別或者是PC設(shè)備,768像素一下的大多數(shù)為移動手機設(shè)備。根據(jù)以上內(nèi)容分析做出相應(yīng)的設(shè)計.當屏幕的尺寸大于768像素時,UＩ主要以左右兩列方式布局，左側(cè)為內(nèi)容信息或內(nèi)容列表，左側(cè)為導(dǎo)航欄,如圖3－1所示。圖3—１屏幕大于768像素ＵI效果當屏幕尺寸小于７６8像素時，UI的設(shè)計主要是以內(nèi)容為主，屏幕僅顯示內(nèi)容列表或者是內(nèi)容信息,當使用者向右滑動屏幕時，或者說是點擊導(dǎo)航的圖標時,導(dǎo)航欄將會出現(xiàn)。如圖3-2所示.圖3-２屏幕尺寸小于７６8時顯示效果3.２．２流式布局的設(shè)計與實現(xiàn)前段的內(nèi)容展示UＩ設(shè)計主要是面向不同的屏幕尺寸的不同像素的移動終端設(shè)備,針對不同分辨率的移動設(shè)備流式布局能夠有效的解決跨平臺的內(nèi)容展示.針對于不同設(shè)備的字體的大小對于用戶體驗的研究表明,640*96０設(shè)備中的32px-3４ｐｘ字體可以給用戶帶來較為舒適的體驗。按照這樣的理念,將64０＊960的設(shè)備中的具體文章列表，欄目列表，字體大小，文章內(nèi)容等字體為32px.但并不是直接將每個字的字體大小進行設(shè)定，是按照流式布局原則設(shè)計了ｂodｙ字體的大小為32px，其百分比為100０70lem［9］。為了更好的適應(yīng)屏幕尺寸,可以按照流式布局原則，將內(nèi)容中的圖片選用了彈性的設(shè)計，將圖片的最大寬度設(shè)置為1０0070，圖片將根據(jù)設(shè)備的尺寸做出相應(yīng)的調(diào)整，并不會被剪切掉。如下圖3－3，3-4所示.６４0＊960,７2０*12８0這兩個尺寸的效果較為明顯.能夠看出盡管在不同的尺寸情況下，所顯示的效果是類似的，字體的大小和底部欄都有自適應(yīng)的奪話,以及流式.圖3-3720＊1280顯示效果圖3-4６40*９６０顯示效果3．2。３不同主題風(fēng)格的設(shè)計與實現(xiàn)針對不同的智能手機平臺，都有著不同的設(shè)計風(fēng)格.IOＳ系統(tǒng)設(shè)計師都喜歡用隱喻以及擬物的手法,安卓系統(tǒng)設(shè)計師一般都提倡的是簡潔性以及流暢性，WindowsPｈｏnｅ系統(tǒng)上用Metro的視覺風(fēng)格使其能夠具有簡潔流暢的性質(zhì)。但是這些不同的用戶平臺其目的就是為了讓使用者有著更好的體驗,就是在其規(guī)范上有著一定的差異性。為了滿足各個平臺的不同的風(fēng)格，在應(yīng)用設(shè)計中依據(jù)不同的平臺做出相應(yīng)的變化，能夠體現(xiàn)出不同系統(tǒng)平臺風(fēng)格的差異性。在顏色上的變化也能反映出各個平臺的差異性,安卓系統(tǒng)平臺比較注重的是簡單化、個性化、顏色方面一般選用的是黑白搭配；IOＳ系統(tǒng)則更加注重的是美學(xué)上的完整性，多數(shù)采用的是黑、白、灰、灰藍交替的方式設(shè)計；IOS７系統(tǒng)更加的扁平化，更加簡單的灰白搭配;WindowsPhone系統(tǒng)相對更加的時尚一些，絢麗一些.對于不同的平臺之間其控件也是有著各自的差異的，為了更好的跨平臺設(shè)計，需要根據(jù)不同的平臺做出不同的改變。底部的標簽選中：安卓系統(tǒng)采用的是標簽頂部的顏色標記加粗變化；IOＳ系統(tǒng)選用的是背景的顏色變化,并且標簽為圓角的;ＩＯS７則采用的是扁平化的顏色變化；WindowPhonｅ系統(tǒng)選用的則是動畫效果標簽。這樣的額標簽設(shè)計能夠符合這種平臺的標簽控件特點。圖標、按鈕等也都符合了各種系統(tǒng)平臺的風(fēng)格設(shè)計.圖３—5至3-8所示。3.2.4扁平化風(fēng)格的設(shè)計與實現(xiàn)如圖３-６．３—3-７所示,客戶端的UI采用的是豎向的列表的方式，這樣設(shè)計可以方便清晰簡潔的給使用者展示內(nèi)容信息，同樣的導(dǎo)航菜單選用的也是豎向列表的方式展示的。這種設(shè)計較為簡明，使用者不用過多的進行思考，對導(dǎo)航內(nèi)容一目了然，假如展示的方式過于繁瑣,會讓使用者失去更多的操作信心。扁平化的設(shè)計風(fēng)格能夠讓使用者體現(xiàn)導(dǎo)航欄以及內(nèi)容列表的排列方式，從細節(jié)上也能充分的做到扁平化設(shè)計。具體的設(shè)計如下:在配色上選用簡單的白色、淺藍、黑色搭配,字體中不需要襯線,也不需要更多的裝飾,沒有絢麗的色彩,簡簡單單的三色搭配就能達到意想不到的效果。點擊事件的反饋，當?shù)撞康膶?dǎo)航被點擊時,選中部位的顏色會發(fā)生變化,顏色由黑色變?yōu)榛疑纬蓪Ρ?。如圖3—6所示的新聞導(dǎo)航,簡明個顏色差異形成了請了的視覺對比.圖標選用了文字圖標的形式和，并且內(nèi)容列表、導(dǎo)航、各個圖標中也沒有選用豐富多彩的顏色設(shè)計,而是選用的預(yù)期寓意對應(yīng)的字體圖標.這樣做的效果是清晰、易見、并且能夠讓使用者簡單易懂的操作進行較好的人機交互。不但和整個扁平化的設(shè)計風(fēng)格相互對應(yīng),而且效果較好。從性能的角度來看，減少了很多與服務(wù)器端的交互請求。3.３數(shù)據(jù)交互的實現(xiàn)3。3。１ＪSON數(shù)據(jù)格式JSON是英文JavａSｃｒiptＯbｊｅctNotａt(yī)inoｎ首字母的縮寫,是JaｖaＳcript中的一個子集.其實一種文本的格式，與編程語言沒有關(guān)系,因為這個特性能夠使其成功的跨平臺，跨語言的成為語言數(shù)據(jù)的通訊載體。它的數(shù)據(jù)格式為鍵值對（kｅｙ:valuｅ）的方式，數(shù)據(jù)的格式以數(shù)據(jù)的鍵值對的方式存在,在不相同的數(shù)據(jù)格式中使用逗號將其進行分隔，對象則是以花擴好的形式進行存儲的,數(shù)據(jù)則使用方括號進行存儲的.如下圖3—10所示：JSON這樣的數(shù)據(jù)文本的格式，使數(shù)據(jù)在傳輸過程中更加具有可讀性、輕便型等方便的特點,其所具有的優(yōu)點如下：使用的是純文本語言,能夠方便