基於HTML5的新農大APP設計與實現
基於HTML5的新農大APP設計與實現
譚奎 新疆農業大學 新疆維吾爾自治區烏魯木齊市 830091
摘要:隨著智慧手機的普遍,同學們使用網路地圖的頻率高於使用傳統地圖的頻率。為了文中設計和實現了一種基於HTML5的新農大APP設計與實現。該系統技術包括:HTML5,JavaScript,CSS。利用移動裝置手勢事件庫,實現基本事件和基本手勢,使用者可在移動端上體驗原生Android系統操作。該方案具有可擴充套件性強、相容性強、檢視化可操作、簡單易用、推廣價值高等優點,不僅能夠有效提升使用者體驗,更可保障智慧手機的相容性。
關鍵詞:移動WebAPP 相容性 HTML5 使用者體驗
0引言
隨著國家對我校教育的重視以及對我校教育的增加,學校的招生規模越來越大。在原來教育規模上的一對多發展為多處辦學,學校新建了樓宇。為了方便廣大同學更快熟悉校園環境,更快了解校園路線,建立校園地圖服務系統顯然是個快捷方便的選擇。本系統的開發,為新入學的學生提供一個方便快捷的生活方式。由於農大校園較大,有一些比較偏僻的樓宇,在校外還有校醫院等。新同學找不到教學樓,導致上課遲到的情況。因此這個系統只為了方便學生找到目標建築物,成為一個實用的校園導航系統,為學生提供一個便捷的生活環境,同時也為宣揚校園文化有一定幫助。當前的導航服務特點較為極端,無法彰顯出本校的風采,也不能採集完整的資訊。所以在本專案中我們著重究以校內地圖導航為載體,對校內的學院,教學樓等資訊有全面的描述。本專案將設計實現出具有瀏覽功能的校園電子地圖並加以圖文介紹。實現的基本功能有(1)地圖的移動:可以迅速鎖定目的地。(2)地圖的縮放:方便使用者觀察目的地的周邊情況和學校環境的具體情況。(3)校園資訊簡介:向用戶顯示圖文資訊。
前期準備
製作該設計首先需要收集校園的相關資料,將平面的地圖進行處理整合。此外需要針對實地場景進行拍攝,並且將照片進行處理,便於後期製作圖文資料。由於校園較大,使得資料量巨大,需要對整體校園進行區域劃分。按照各學院分佈情況,蒐集資料。
1系統整體結構設計
1.1 手勢縮放功能與移動功能的實現
縮放:transformStyle='scale('+eVal+') rotate(' + teVal + 'deg)';
拖動:$("left", + ev.x)("top", + ev.y);
1.2校園資訊展示方式
結合下拉選單與模態框,將各類資訊進行分類展示。
模態框:
//下拉選單
學院簡介
<selectname="inv_payee"id="ECS_INVPAYEE" onchange="show(ons[ctedIndex]e);"
//資訊展示
lementById("modal")lay = "";var img = new Image();
= "";var imgContainer = lementById("addimage");
ndChild(img);;var data = {};}
2介面UI設計
background-image:url(img/background.png);background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
//對下拉選單設計
style="background:#28A745;color:#FFFFFF; height: 30px; border-radius: 10px; border:3px solid #ccc; margin-top:20px;width: 45%; text-align: center;display: block;
//對按鈕的設計
background: #3498db;border-radius: 28px;color: #ffffff;font-size: 4px;padding: 12px 30px
該系統的流程是:利用JS的響應事件來關聯到地圖的相關操作。通過使用H5+Downloader可以在第一次使用此係統時將圖片資源下載到本地路徑中。在以後的使用中可以直接從本地獲取,加快訪問速度。我們在對圖片的載入中做了動態載入處理,下載時對成功失敗進行判定,HTML和CSS負責下拉框及其樣式,JS中的模態框用來顯示點選後的響應具體頁面。當用戶點選選項框時,先彈出模態框,在模態框中將所選的圖片物件傳入div容器,再將使用者所選圖文資訊展示出來。
3結束語
本文設計了基於HTML5的新農大APP,這種將校園地圖數字化的實現,結合了傳統地圖的樣式,藉助移動端Web APP,打造電子校園地圖的服務平臺,為使用者提供一個即時更新,使用方便的校內“指南針”。方便校園學生即時搜尋地點資訊,校園地圖讓大家的校園之旅更加便捷,構建校園良好的學習和生活氛圍。
-
環保論文(新版多篇)
環境保護問題論文篇一關鍵詞:資源與環境保護;研討式教學;探索;實踐中圖分類號:G642.4文獻標誌碼:A文章編號:1674-9324(2014)19-0196-02近十年來,我國在科學發展觀的指引下取得了飛快的發展和驚人的進步,在轉變經濟增長模式,發展迴圈經濟,建設資源節約、環境友好型社會等方面...
-
碩士論文致謝【通用多篇】
經典的碩士畢業論文致謝篇一時光飛逝,轉眼間就到了研究生畢業的時刻了,隨著離校日期的臨近,這篇學位論文也即將完成。從開題到現在論文的順利完成,都離不開導師和同學們熱心的幫助。本篇論文是在我的老師xxx教授的親切關懷和細心指導下完成的,從選擇課題到完成論文,x...
-
貨幣銀行學論文精品多篇
金融學貨幣銀行研究論文:《高校學生貨幣銀行學學習模式》篇一一、引言《中共中央關於制定國民經濟和社會發展第十一個五年規劃的建議》中特別強調深入實施科教興國戰略和人才強國戰略,“堅持教育優先發展”,“增強高校學生的創新和實踐能力”,“發展現代教育”,...
-
食品營養與健康論文精品多篇
食品營養與健康的研究論文篇一目前所在:海珠區年齡:21戶口所在:江西國籍:中國婚姻狀況:未婚民族:漢族培訓認證:未參加 身高:156cm誠信徽章:未申請 體重:人才測評:未測評我的特長:求職意向人才型別:在校學生應聘職位:其它類:不限工作年限:1職稱:求職型別:兼職可到職日期:隨時月薪...
相關文章
- PEP四年級上冊Unit2 My schoolbag Let’s spell 教學案例
- 記發展中的教育<開拓進取求發展 銳意改革提質量>
- 會展企劃書The Proposal of 2013 Macau Movie Exhibition
- 基於安卓的個人記賬管理APP設計與實現
- 六年級下冊Unit7 Summer holiday plans教學設計
- 教案<慈母情深>
- Love the public, start with me
- 《Unit 5 What does he do? Part A Let’s learn》 教材分析與處理
- Unit 1 How tall are you?Part B Let’s try & Let’s talk 教學設計
- Unit 6 How many? Part ALet’s learn & Let’s chant教學設計