一种将互联网站转换为适合手机用户浏览的风格的 技术.docx

一种将互联网站转换为适合手机用户浏览的风格的 技术.docx

《一种将互联网站转换为适合手机用户浏览的风格的 技术.docx》由会员分享，可在线阅读，更多相关《一种将互联网站转换为适合手机用户浏览的风格的 技术.docx（12页珍藏版）》请在冰豆网上搜索。

一种将互联网站转换为适合手机用户浏览的风格的技术

一种将互联网站转换为适合手机用户浏览的风格的技术

更改历史

更改时间

更改人

更改内容

2010-3-21

叶正

创建文档

一、前言

移动互联网的兴起，使手机用户逐渐形成用手机访问互联网的习惯。

但由于传统互联WEB网站的界面和风格，是为PC屏幕而设计的，即使手机上安装了可阅读HTML格式网页的浏览器，但网页在手机屏幕上显示的效果仍然很难看，用户体验很差，因此，传统互联网站的所有者不得不专门为手机用户开发专门的手机网站。

但开发新的手机网站需投入较高的开发成本，并需要专门的服务器和网络条件，因此，手机网站建设难以得到推广，普通手机用户只能面临丰富的互联网资源而无法访问。

本文提出了一种新型的网页转换技术，可以较低的成本将互联网WEB网站转换成适合手机屏幕浏览的界面风格，而且无需互联网站投入新的服务器设施和租用网络。

二、基本原理

本技术采用了HTTP反向代理服务器的类似技术。

在互联网上需部署一台服务器，称为W2M代理服务器，传统互联网站（称为源WEB网站如），需将其手机网站域名（称为手机网站，如）解析到该服务器的IP地址上。

当手机用户访问手机网站域名时，W2M代理服务器将Http请求转发到源WEB网站，源WEB网站返回WEB网页内容给W2M代理服务器，由于该网页只适合PC屏幕浏览，因此，W2M代理服务器按事先设置的规则，将该网页重新组织成适合手机屏幕浏览的内容，发回给手机浏览器，手机浏览器将网页展现给用户。

如下图所示：

三、技术架构

W2M代理服务器的架构如下所示：

上图展现了手机浏览器发出对手机网站的请求，到接收到手机网站内容的整个过程中，W2M代理服务器内各模块的工作流程。

主要的流程如下：

1.手机浏览器提交对手机网站的网页的HTTP请求，由于手机网站的域名被映射到W2M代理服务器，因此请求发送到W2M服务器的HTTP请求接入模块；

2.HTTP请求接入模块获取到HTTP请求，，该请求的HTTP头信息中包含了手机网站域名和请求的网页URL，以及其他信息，比如Cookie，会话信息等，并将该请求提交给HTTP请求解析模块处理。

3.HTTP请求解析模块通过分析手机网站域名和请求的网页URL，从系统内部的源网站网址映射表中得到源网站的域名；将HTTP请求消息头的Host改成源网站域名，Accept改成标准PC浏览器的HTTP请求的对应Accept数值。

转交给源网站请求模块；

4.源网站请求模块与源网站建立起HTTP连接，将请求转发给源网站，源网站对该请求视作标准PC浏览器的HTTP请求，返回网页或图片等资源的HTTP响应消息。

5.源网站请求模块将HTTP响应消息提交给WEB数据提取模块处理，如果该HTTP响应消息是网页文本内容，则该网页中大量用于PC浏览器布局处理和样式展现的HTML文本应该过滤掉，只需要保留对用户有用的信息内容数据（比如新闻页面中真正有价值的是新闻标题、内容和相关链接等信息内容数据）。

因此WEB数据提取模块根据HTTP响应消息对应的请求URL，从WEB资源数据提取规则库里获得对该URL的网页解析规则，按规则的要求，对HTTP响应消息体进行信息内容数据提取。

如果该HTTP响应消息是非文本信息，比如图片，那么图片数据就是信息内容数据。

6.提取出来的信息内容数据被转交给手机展现内容生成模块，手机网页展现模块对网页的信息内容，用对应的手机网页模板进行装载处理，形成适合手机浏览器阅读的手机网页。

如果该信息内容数据时图片，就将图片进行尺寸缩略和体积压缩，以免超出手机屏幕显示范围。

7.该手机展现数据要提交给HTTP响应生成模块，组成手机浏览器可识别的HTTP消息头和消息体，这就是手机浏览器请求的URL对应的HTTP回应消息；

8.HTTP回应消息被转交给HTTP请求接入模块，准备返回给手机浏览器；

9.该HTTP回应消息被保存在HTTP响应消息缓存模块中，被设定缓存一定时间，以备后用；

10.HTTP请求接入模块将HTTP响应消息返回给手机浏览器，该响应消息内容是专门为手机浏览器进行定制适配的网页内容，所以，展现效果更适合用户体验，整个流程至此完成。

11.为了提高手机用户访问网站的速度，如果手机用户访问的是之前曾访问过的同一个网页（或图片），那么HTTP请求解析模块会从HTTP响应缓存中拿到缓存的网页响应消息。

12.该网页响应消息被送往HTTP请求接入模块，立即返回给手机浏览器，大大提高响应速度。

四、关键技术

4.1HTTP请求接入模块

HTTP请求接入模块是连接手机用户和W2M代理服务器直接网络通讯的模块，要具备同时维持成千上万个手机网络客户端的能力。

该模块性能的好坏，直接影响着可同时服务的用户数的多少以及用户对响应速度的感受。

因此，可利用为成熟的WEB服务器挂接Proxy模块的思路来实现HTTP请求接入模块，由于WEB服务器，例如IIS,Apache，本身就拥有稳定的大规模用户访问接入能力，只要WEB服务器将HTTP请求转交给Proxy模块，Proxy模块就可以处理后续的HTTP请求处理操作。

所有与手机浏览器之间的连接维护工作都交由WEB服务器来处理。

4.2WEB资源数据提取规则模型

WEB资源是指URL所指向的网站对象，一般包括网页、图片、Flash、ActiveX控件、音像文件、Javascript脚本、样式表、各种可下载的文件等等。

WEB资源数据提取规则是根据资源的数据特点定义出的规则，便于WEB数据提取模块，将必要的信息内容数据抽取出来，用于手机展示。

由于本技术主要是为了解决传统资讯网页在手机屏幕的适配展示，所以，对于网页、图片等网站资源要进行比较复杂的转换规则设计，对于其他资源类型，不必做转换处理，原样返回给手机浏览器自行处理即可。

4.2.1网页数据提取规则

每一个要适配的源网站网页都要定义一套提取规则，一般而言，网页的规则用网页的网站Id+站内URL地址作为关键字来标示，但对于动态网页而言，虽然参数不同，但实际上网页的数据展现方式是一样的，所以，网页的规则可以用URL的正则表达式来区别。

网页内有众多信息内容块，比如一段文字，一组类似于新闻列表那样的文章标题，这些信息内容在网页的HTML代码中，都以特定的代码开头，以特定的代码结尾，所以，通过分析HTML代码，可以提取出这些信息内容块。

因此一个网页的数据提取规则是由多个信息内容块定义组成的。

信息内容块类型分为单块图文，标题列表。

Ø单块图文内容块定义

单块图文如上图所示，要提取单块图文的信息，要有以下定义信息：

1.内容块说明：

用于标示某个内容块的说明，比如：

首页活动预告

2.内容块前置特征HTML代码：

即从页面中的HTML中，自从该段HTML之后，就是内容块的HTML代码内容的开始。

3.内容块后置特征HTML代码：

即内容块的HTML代码内容至该段HTML就结束了。

4.替换目标特征HTML代码（零或多项）：

即内容块中要使用替换为HTML来替换掉的HTML代码；

5.替换为HTML代码（与替换目标特征HTML代码数量一样）：

即替换目标HTML代码的内容。

留空值意味着只过滤掉替换目标HTML代码；

6.保留内容中a标签超链接：

是或否，如果否，则内容中的a标签被过滤掉；

单块内容块的img图片标签一般保留，手机浏览器看到该标签时，会再次向W2M代理服务器发出图片请求，再下载图片。

关于图片资源的数据提取规则后面章节解释。

Ø标题列表内容块定义

标题列表内容块例1

标题列表内容块例2

标题列表内容块例3

从以上例子可看出，标题列表内容块的特点是，列表中只显示信息的部分内容，要看更详细的内容，要点击进入另外一个详细内容页面，才能看到。

而该详细内容页面一般由单块图文内容块组成，如下图所示：

标题列表内容块的详细内容页面示例

因此，标题列表内容块的信息要提取出来，要有以下定义：

1.内容块说明：

用于标示某个内容块的说明，比如：

首页活动预告

2.内容块前置特征HTML代码：

即从页面中的HTML中，自从该段HTML之后，就是内容块的HTML代码内容的开始。

3.内容块后置特征HTML代码：

即内容块的HTML代码内容至该段HTML就结束了。

4.替换目标特征HTML代码（零或多项）：

即内容块中要使用替换为HTML来替换掉的HTML代码；

5.替换为HTML代码（与替换目标特征HTML代码数量一样）：

即替换目标HTML代码的内容。

留空值意味着只过滤掉替换目标HTML代码；

6.标题图片标签特征HTML代码：

如果列表中有图片，则通过该特征HTML代码可以提取img标签的内容；

7.详细内容页面链接a标签特征HTML代码：

通过该特征代码提取链接到详细内容页面的a标签内容；

8.标题文字前置特征HTML代码：

即内容块中所有标题文字内容前都有该段HTML代码；

9.标题文字后置特征HTML代码：

即内容块中所有文字标题内容后都有该段HTML代码；

10.简介文字前置特征HTML代码：

即内容块中所有内容简介文字内容前都有该段HTML代码；

11.简介文字后置特征HTML代码：

即内容块中所有内容简介内容后都有该段HTML代码；

12.发表时间前置特征HTML代码：

即内容块中所有发表时间内容前都有该段HTML代码；

13.发表时间后置特征HTML代码：

即内容块中所有发表时间内容后都有该段HTML代码；

14.备注1前置特征HTML代码：

备注1是标题记录的保留字段，是指标题记录的其他字段信息，这个代码即内容块中所有备注1字段前都有该段HTML代码；

15.备注1后置特征HTML代码：

即内容块中备注1内容后都有该段HTML代码；

16.备注2前置特征HTML代码：

备注2是标题记录的保留字段，是指标题记录的其他字段信息，这个代码即内容块中所有备注1字段前都有该段HTML代码；

17.备注2后置特征HTML代码：

即内容块中备注2内容后都有该段HTML代码；

应用上述规则，可将标题列表内容块的数据提取成一组记录，每组记录中都有标题、标题图片链接、详细内容页面链接、简介、发表时间、备注1、备注2等字段。

4.2.2图片数据提取规则

图片文件要在手机上友好显示，要进行等比例缩略，图片宽度超过180的图片，一般按宽180进行等比缩略。

4.3手机网页模板实现技术

源网站网页的信息内容块信息被抽取出来后，要转化成手机浏览器可阅读的网页，就要靠手机网页模板。

手机网页模板使用.NETMVC框架的Volocity引擎模板技术制作，每个源网站上的网页，对应一个手机网页模板，该模板使用的变量值，就是抽取的内容块数据，模板填入内容块数据，就生成手机网页。

4.4源网站数据结构

W2M代理服务器可为手机浏览器提供服务的每一个手机网站域名都对应这一个源网站，每个手机网站的可访问URL都对应着源网站的一个URL，该URL都有对应的数据抽取规则，如果该URL是网页，则还有对应的手机网页模板。

因此，源网站的数据结构则是系统关键的数据结构之一。

源网站的对象定义应包括以下内容：

1.源网站网址：

如；

2.提供服务的手机网站域名：

即供手机浏览器访问的域名，这些域名需解析IP到W2M代理服务器。

为灵活起见，一个源网站可提供多个手机网站域名，如、；

3.网站资源适配规则组：

这是一组适配规则，一般是对每个手机浏览器上可访问的网站资源提供一套规则，如果手机浏览器请求的URL在源网站上存在，但适配规则组中没有为该URL指定专门的规则，则使用通用规则来处理。

比如图片的通用规则，下载文件的通用规则等，专用适配适配规则包括：

a）适用的URL正则表达式：

即凡请求URL符合该正则表达式，都使用该规则进行适配处理，用正则表达式的原因主要是考虑到动态网页的URL路径；

b）数据抽取规则：

该规则定义了该网页数据如何抽取；

c）手机网页模板：

该规则定义了使用哪个模板进行网页展现；

4.替换URL域名：

很多网站的内容会放在不同的子域名对应的网站下，比如新浪首页的内容中，就往往是链接到新闻（）、财经（）、房产（）等子域名上的内容。

为了使网页转换后，手机用户点击链接，仍然将请求发往W2M代理服务器，则必须替换这些URL域名，比如说：

将URL链接中的替换成，替换成。

5.栏目结构：

栏目也称频道、导航。

一般分一级栏目、二级栏目、三级栏目、四级栏目等等。

栏目结构可用于手机网页模板，作为动态变量，自动显示出栏目菜单。

栏目本身只起到导航的效果，所以栏目的定义只需要以下内容：

a）栏目名称：

如首页、最新动态；

b）栏目级别：

一级、二级、三级；

c）上级栏目：

除了第一级栏目外，都有上级栏目；

d）栏目链接页面URL：

即点击栏目后，链接到哪个页面；