企业动态 技术分享 行业动态

基于HTML5与CSS3高校互联网移动端网站优化

2017-11-14分享
针对互联网与移动终端技术的不断发展,人们对移动设备的需求不断增加,原有的Web标准已不再适应移动 端,原有高校网站在移动端已不能提高用户体验。以传统PC网站开发为基础,为实现与利用代码的复用性,文章使用基于移 动设备的HTML5与CSS3和jQuery Mobile等技术,构建了一个移动端网站’让其能够得到多种终端的支持,同时提出了一种 使用该技术提升高校网站在移动端的内容、应用架构和服务模式的解决方案。
0.引言
由于移动互联网技术的发展和移动智能设备的普及,很 多用户开始选择在移动端进行浏览、娱乐和学习。据谷歌 2012第一季度与市场调研机构IPSOS (益普索)对关于人们如 何使用智能设备进行全世界范围的调查,得到的信息包括对移 动设备手机的普及和使用情况记录的一些相关数据。人们利用 智能设备进行对互联网的使用,包括对资源的搜索及视频的 搜索、移动商务、移动广告和人们的社交网络与网络学习等。 截止目前,中国智能手机的使用率已达到90%,它已经在人们 的生活中扮演着一个重要角色,为此,人们对智能设备的依 赖程度也随之增加,其中约64%的用户每天都会用智能手机 访问互联网。在办公室时、乘坐公共交通工具时、在餐馆时或 在回家路上等,超过50%的使用者每天都会使用智能移动设 备对互联网进行至少一次访问,主要行为包括对搜索引擎的 使用,对电子邮件的收发,登录社交网站等,越来越多的用户 将在未来更加频繁的使用智能手机访问互联网。
随着移动终端(智能手机)的不断扩增和使用,显然PC 机终端(开发)不能满足市场需求,越来越多的用户,特别是 在校学生大多都选择使用移动浏览器如Safari,UC,Opera, Chorme等上网娱乐、办公。许多丰富的网页内容将在移动浏览器端显示,它支持www标准协议,其中主要采用两种布 局来显示PC网站的内容:①通过对网页的放大或缩小来显 示;②通过自适应手机屏幕宽度,将PC版传统网站进行重新 布局,利用手机出现的滚动条,对网页内容进行查看,但是 这样显示的内容将会被打乱,而布局也随之变得混乱。面对 这种情况,假如摒弃传统PC版网站的资源,重新开发新的 移动设备端网站,就需要投人更多的时间、精力、金钱等开 发成本,其中对人力、资源的浪费是巨大的。该设计在不变 动PC版网站相关业务及数据访问的基础上,提出一个基于 CSS3+HTML5+jQuery Mobile的新移动技术实现平台的开发 创建,对HTML5相关核心技术等的导人,让移动端平台的建 立实现跨平台有了新的思路。
1.设计思路
本设计继续沿用现在主流的MVC三层架构思想进行修 改设计,即将该程序分为三个层次,分别是显示层、业务层和 数据持久层。
(1)界面层:负责显示用户界面;
(2)业务层:根据用户需要的业务处理相关业务逻辑关系;
(3)数据持久层:对数据库的访问交互,例如查询数据、 插人、删除和修改数据库中的数据。
该方案只增加一个与PC显示层同层的移动设备界面层, 不改变传统网站的业务逻辑层和数据持久层,其应用程序架 构如图1所示。
其中,网页显示主要放在移动界面端,页面显示由.aspx 文件管理,内容包含jQuery Mobile和前端开发,微软自带的 服务器端控件等,后台使用C#语言编程,通过调用相应的业 务功能逻辑层实现功能。移动设备界面层如图2所示。

2.移动开发环境搭建
开发工具:Visual Studio 2010 或者 Visual Studio2012 ;
操作系统:Windows 7旗舰版;
月艮务器:Internet Information Services ;
数据库:Microsoft SQL Server 2008 R2 ;
开发语言:C#。
3.核心技术和关键代码分析
3.1HTML5 技术
HTML5是基于HTML 4.01和XHTML 1.0标准的最新 HTML版本,由WHATWG在2004年提出,被W3C组织于 2007年接纳。2008年1月22日公布了 HTML5的第一份正式 草案,但HTML5仍处于完善之中,其中HTML5.1是在2016 完成的。目前为止,很多浏览器都已经开始支持HTML5,譬 如Safari,Chrome以及火狐浏览器等。
HTML5包含了像<nav>,<footer>这一类新的元素和 属性标签,有利于搜索引擎的结果优化,在小屏幕设备上使 用支持更方便,增强了互动性,减少了不必要的开发成本。 HTML5标签中的header, footer,dialog等使开发者更容易地 创建文档并帮助文档改善。其中Canvas绘图提升了移动平台 的绘图能力,并逐渐被各种浏览器所兼容。HTML5新元素的特性如表1所列。

3.2jQuery Mobile 技术
jQuery Mobile是一个在线应用于智能手机与平板电脑的 Website前端开发框架,同时jQuery mobile也是基于jQuery 以及jQuery UI类库之上的开发框架,它提供一个UI接口系 统,让前端开发人员可以简单方便的使用。该框架可以创建出 网站以及WebApp所需要的UI组件,包括对话框、工具栏及 各种风格的表单元素等,其优点是拥有轻量化、可访问性以及 渐进增强特性,以提高用户的体验。
在使用该技术时,我们应该在<head>区域段中加人 <meta>标签设定viewport,告诉浏览器显示页面尺寸的大小 以及能否控制缩放,可自动根据用户所使用的浏览器显示相关 页面。标签定义如下:
<meta name="viewport"content="width=device-width, initial-
scale=1">
下面是一个实例介绍:
(1)引入函数库:
〈script type="text/javascript"src="scripts/jquery-1.8.0.min.js"></ script>
〈script type="text/javascript"src="scripts/jquery.mobile- 1.1.1.min.js"></script>
<link href="content/jquery.mobile-1.1.1.min.css"rel="stylesheet type="text/javascript type="text/css"/>
(2)简单的网页基本组成:
<div data-role="page">
<div data-role= “header” >
表头
</div>
<divdata-role= “content” >
网页内容 </div>
<div data-role= “footer” >
表尾
</div>
</div>
3.3CSS3 技术
CSS是1994年哈坤利本人提出的,那时他与伯特•波斯 合作,在一起设计浏览器的同时开展了 CSS的设计工作。之后, CSS便作为第一个含有层叠意识的语言,对很多开发者、作 者、读者等放出很大的空间,使得他们对设计的实现效益得 以提高。且于1994在芝加哥的一次会议上向人们展出了 CSS, 不久之后,两人便开始筹划,成立技术小组,随后CSS技术 于1996年完成,并在次年12月份CSS作为第一本公开版本 被出版。最后在1998年W3C管理下推出CSS2.1版本。它是CSS2的升级版本,在原来的基础上增加了一些功能。
CSS被称为层叠样式表,在网页界面中可以很轻松的使 用。它的特性主要概括为以下四点:
(1)分离网页的表示层和结构层,让它们彼此都不会受 到对方的影响;
(2)对很多网页的外观实现同时更改;
(3)缩减网页文件的大小;
(4)对网页的响应速度以及加载速度等方面起到了向上 的作用。
使用CSS3时需引人如下脚本及层叠样式表:
<script type="text/javascript"src="Js/jquery-1.6.4.js"></script> <script type="text/javascript"src="Js/jquery.mobile-1.0.1.js"> 〈/script〉
<link rel="stylesheet" href="CSS/jquery.mobile-1.0.1.css" type="text/css"〉</link>
4.结语
借助原网站代码的二次开发,增加一个移动界面端显示,
为了能够使该平台支持不的移动设备和浏览器,利用HTML5 和CSS3等技术实现跨平台以提高用户的交互体验,利用众多 浏览器端都可以支持HTML5的趋势,让传统模式网站转向 HTML5。对于传统网站,使用 HTML5+CSS3+jQuery Mobile 新技术的开发平台创建方法更容易。利用HTML5和CSS3等 新移动Web标准,可以实现用户借助移动设备访问高校互联 网并提供更为友好的服务的功能,同时借助传统模式在应用 架构方面进行创新,使得在任何平台、地点、时间都能够通 过移动终端对网站进行访问,阅读任何内容。
 
 
在线咨询
上海园丁鸟网络科技有限公司 备案号:沪ICP备17046445号-1 友情链接:响应式织梦模板 织梦主机 织梦模板   
在线客服
热线电话

扫一扫 加我微信