基于移动平台的校园生活导航服务网站开发

许锐思

摘要：智能手机的普及和移动互联网的搭建，促进者浏览器和网站的发展，基于移动平台的网站开发也越来越热门。传统的WAP网站在不断发展，适应性更强的HTML5网站也应运而生。在基于移动开发平台的校园服务导航网站开发中，采用新技术和开发工具更是时代所趋。

关键词：手机网站；HTML5；移动平台

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）05-0287-02

Development of Campus Life Navigation Service Website based on Mobile Platform

XU Rui-si

（The Department of Information Science & Technology， Guangdong University of Foreign Studies South China Business College， Guangzhou 510545， China）

Abstract：The popularity of smart phones and mobile Internet to build， promote the development of the browser and website. Web development which bases on mobile platform is becoming more and more popular. The traditional WAP site is development in the continuous， more and more adaptive HTML5 site also came into being. In the development of campus service navigation website based on mobile platform， the new technology and the development tools are the trend of the times.

Key words：mobile web site； HTML5； mobile platform

1 引言

近年来，随着移动互联网的蓬勃发展和智能手机的普及，手机网民的数量在不断增长，基于3G技术的网络应用也越来越多。基于手机小巧、功能强、性能好、使用方便的特性，用户们都喜欢随身携带，甚至用手机办公、兼职，例如现在较为流行的“刷单”工作，网上交易，炒股等。由此可见，手机是个很好的信息传播媒介。在大学这个科学前沿地，大部分师生都使用手机来浏览信息和相互通信交流。因此，建立一个基于移动平台的校园生活导航服务网站，会更有利于学生、老师之间的交流，同时也会方便了学生去了解学校的最新动态。

2 基于移动平台的校园生活导航服务网站开发的需求

校园是我们学生学习生活的地方，对于新生来说，熟悉新环境是他们入学的第一要事。虽然许多学校信息，师生们都可以在学校的官网上查看到，但这并不便于师生们随时随地了解学校的资讯。而基于移动平台的校园生活导航服务网站却可以很方便地为师生们提供他们所需要的信息，只要他们有一台智能手机，能够联网。

对学校来说，基于移动平台的校园生活导航服务网站还能减少学校发布信息所需要的人力、物力，有利于学校活动信息的发布，同时也方便了学校对信息的收集和管理。

3 手机网站的发展

首先，我们要了解一下手机网站，手机网站就是手机能访问的网站。更准确地说，它是面向手机用户为方便手机访问而建立的网站，也被称为WAP网站。

WAP是一种向移动终端提供互联网内容和先进增值服务的全球统一的开放式协议标准，它是简化了的无线Internet协议。

WAP网站与web网站最明显的区别就在于Web网站包含的文字、图像等信息量都比较多，页面文件比较大，通常在10K以上，而WAP网站的页面比较简洁，页面文件较小。正如：手机腾讯网首页也只有 9KB左右，腾讯网的普通网页就大于100KB。

WAP网站可分为WAP1.X和WAP2.0网站。

WAP1.X功能简单、界面粗糙， 而基于WAP2.0开发的手机网站在功能、界面显示、动态性和交互性等方面已经能够和普通网站相媲美了。WAP2.0的手机网站可以在电脑上直接用浏览器访问，而WAP1.X的网站，需要模拟器或者给浏览器安装相应的插件才能访问。比如：Firefox安装WMLBROWSER插件才可访问WAP1.X的手机网站。

WAP1.X是最初专门用WML语言开发的一个脚本，它功能简单，页面形式主要是文字，受当时的网速、带宽和手机硬部件的限制，不能采用CSS样式，在颜色的选择上也只有文字的黑色和连接的蓝色，页面的背景色也不能设置。当时的网页界面颜色单调，排版并不美观。

而WAP2.0主要是采用XHTML开发，页面形式丰富，可以采用CSS定义，通过IE也能直接访问，它能支持任何移动终端完美访问。其中XHTML是一种置标语言，表现方式与HTML相似，只是在语法上更加严谨。

现在，HTML5的面世，使得手机网站的页面更加美观，更具吸引力，而且网页的加载速度也有了很大的提升。

4 网站界面开发语言介绍

4.1 HTML5的优势

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改[1]，它现在正被应用于各大网站的网页编写。

HTML5融入了许多新颖的标签属性，淘汰了过时或冗余的属性。它与CSS3样式结合，使得网站的页面更加美观、炫丽，此外，它与JavaScript结合运用，还可以使网页界面更具动感效果，吸引访问者的眼球。而且HTML5还有一大特点就是它可以通过标签来控制网站页面的大小，使得页面能根据各类型智能手机的屏幕大小自动调节来显示信息。HTML5网站支持电脑PC端和手机端的访问，大大方便了网站数据的维护。

在本次网站开发里，我们也采用了HTML5+CSS3的界面布局方式，同时，适当的添加了JS脚本来调用手机的本地用户数据，来提高网页的加载速度。

4.2 JQuery的运用

JQuery是一个优秀的JavaScript库。它是轻型的JS库，兼容了各类浏览器。它的一大优势就是，有详细的文档说明，还有许多成熟的插件供开发者使用。JQuery能够使用户的html页面保持代码和html内容分离。它模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页[2，3]。在项目里，我们采用了JQuery来设计各功能模块的页面切换效果，同时还通过调用JQuery里的ajax方法来访问网站存储在用户客户端的localStorage和sessionStorage数据，提高了网站的响应速度。

5 网站后台编程语言选择

网站后台的编程语言，我们是采用了PHP语言编写。PHP是一门脚本语言，语法结构与JSP相似，在html页面里进行嵌入式编写，而且可以实现跨平台运行。这门语言实用性强，运行流畅，语法简单，方便了网站的后期维护和开发者对代码的阅读。只要在服务器端搭建好Apache环境，就能很好运行PHP程序了，而对于客户端，用户的手机大部分都是Android系统，PHP程序在Android系统也是完美运行的。

6 数据库设计

6.1 网站在移动手机端的数据存储

HTML5提供了两种在客户端存储数据的方法，那就是localStorage和sessionStorage，这就相当于以往我们采用的Cookie和Session数据存储方法。区别就在于Cookie和Session数据存储的时间比较短，而localStorage和sessionStorage这两种存储方法存放的数据保留时间长，不易丢失。这使得网页的再次浏览速度更快，甚至在断网的情况下用户也能浏览到已经加载完成的或者近期浏览过的网页的信息。

除此之外，还有一种WebDB存储本地数据的方式。它提供了关系数据库的基本功能，可以存储页面中的交互、复杂的数据。它可以将网站的部分缓存信息存储在用户的本地数据库中，此功能相较于localStorage和sessionStorage两种存储方式更有条理，同时这些数据还可以通过SQLiteSpy软件打开查看。因为该存储方式就相当于在用户端建立一个小型的SQLite数据库，该数据库主要是用来存储用户习惯或访问的历史记录。这些信息都会对用户能够快速访问网站起到一个关键的作用，但这些信息并不会占用用户太多的存储空间。

6.2 网站数据库设计

由于这个网站主要是用于校园信息的传播，信息量较大，所以在数据库的选用方面，我们是采用了SQL server 2008这种中小型数据库。

该数据库运行在微软数据平台上，功能强大，能够组织管理任何数据，同时它具有很高的安全性、可靠性和可扩展性。

我们对这个校园网站设立了4个独立的版块，根据E-R图和数据流图来设计数据表。另外，我们通过对数据库设置用户权限来区分普通访客和管理员，并且针对不同的用户，对网站内部信息的管理权限也作出了相应的限制。

7 开发工具选择

在这次网站开发过程中，我们选择了常用的、功能强大的编程工具eclipse、SQL server 2008数据库管理工具，还有就是采用Opera浏览器和Opera Mobile Emulator来调试网站的运行效果。

8 总结

在移动互联网和信息技术快速发展的今天，随着智能手机的日渐普及，基于移动平台的网站也逐渐成为了市场的焦点。基于移动平台的网站的开发工具在不断更新，技术也在日渐成熟。作为开发者，我们更要敢于尝试，尝试用新技术和工具来开发，这样，我们的作品才能具有时代的气息，跟得上时代的步伐。而网站的整体开发大致上就划分为前端页面开发和后台开发两个层面，只要需求分析全面，可行性强，数据库设计完善，网站搭建也就不会太难。通过这次网站开发，我们懂得了要做开发，专业的基础知识一定要结实，而且要有一定的开发经验，还要学会在网络上和书籍里获取所需知识，善于总结，团结合作。

参考文献：

[1] 怀志和.Android移动网站开发详解[M].北京： 清华大学出版社，2013 .

[2] Adam Freeman.HTML5权威指南[M].北京：人民邮电出版社，2012.