基于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,打造电子校园地图的服务平台,为使用者提供一个即时更新,使用方便的校内“指南针”。方便校园学生即时搜索地点信息,校园地图让大家的校园之旅更加便捷,构建校园良好的学习和生活氛围。
-
论文选题提纲样本【通用多篇】
以下是美丽的编辑为大伙儿整编的论文选题提纲范文样本【通用4篇】,希望对大家有所启发。论文选题提纲范文样本篇一四、选题参考范围及选题要求4(一)毕业论文选题注意事项4(二)毕业论文的选题参考方向4五、对学生的学习要求3六、成绩评定3七、毕业论文进度安排4...
-
安全论文(新版多篇)
每个人都曾试图在平淡的学习、工作和生活中写一篇文章。写作是培养人的观察、联想、想象、思维和记忆的重要手段。大家想知道怎么样才能写一篇比较优质的范文吗?问渠那得清如许,为有源头活水来,如下是可爱的编辑帮大伙儿找到的安全论文(最新8篇),仅供借鉴,希望对大家...
-
大学数学建模论文(推荐新版多篇
现代社会对数学应用的需要导致了全球范围内的数学教育改革,而数学建模是经济社会与数学教育相结合的重要发展的产物。问渠那得清如许,为有源头活水来,该页是勤劳的小编给大家收集的大学数学建模论文范文(推荐最新10篇。大学生数学建模论文篇一【关键词】数学建模...
-
语文论文【精品多篇】
语文论文篇一一、大学语文教育现状分析根据全国高校课程统计数据来看,语文作为我国学科教育的基础内容,是全国近30%大学的必修科目,且越来越多的高校正将语文修订为必修课,但正是这一门极其重要的课程,却处于尴尬境地:认可程度高,但学生普遍忽视其重要性;现代化水平低,...
相关文章
- 《Unit 5 What does he do? Part A Let’s learn》 教材分析与处理
- 基于安卓的个人记账管理APP设计与实现
- Love the public, start with me
- 六年级下册Unit7 Summer holiday plans教学设计
- 记发展中的教育<开拓进取求发展 锐意改革提质量>
- 教案<慈母情深>
- PEP四年级上册Unit2 My schoolbag Let’s spell 教学案例
- 会展企划书The Proposal of 2013 Macau Movie Exhibition
- 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教学设计