基本规范:
原文发布时间为:2010-08-19 —— 来源于本人的百度文章 [由搬家工具导入]
摘要:目前大多数手机已经不仅仅支持WAP1.0(WML),而是支持WAP2.0(XHTML
MP)了,甚至有些手机不久就要支持HTML5了。本文演示如何用ASP.NET
开发WAP2.0页面,查阅了一些资料,整理分享给大家,希望大家能以后能少走弯路。手机浏览器作为一个人机交互界面,而且手机又有随时随地能使用的优势,我们在这方面是可以大有作为的。
CSS 设计理念,css
今天整理CSS2.1的规范,发现这个,分享给大家。
CSS2.1 作为 CSS2 和 CSS1 的后序版本,基于一下一组设计理念:
- 向前和向后兼容。CSS2.1 的用户代理能够理解 CSS1 的样式表。 CSS1
的用户代理能够读取 CSS2.1
的样式表,并且丢弃他们不能理解的部分。同时,对于不支持 CSS
的用户代理可以显示样式增强的文档。当然通过 CSS
增强的样式将不被渲染,但所有的内容可以被表现。 - 作为结构化文档的补充。样式表补充结构化文档(例如,HTML 和
XML应用程序),为标记文本提供样式信息。样式表应该非常容易修改,并对标记的影像甚微或没有。 - 供应商,平台和设备无关。样式表使文档保持供应商,平台和设备无关。样式表本身也是供应商和平台无关的,但CSS2.1允许你为一组设备指定一个样式表(例如,打印机)。
- 可维护性。通过在文档中指向样式表,网站管理员能简化站点的维护和保持整个站点的一致外观和感觉。例如,如果组织的背景色发生改变,仅需更改一个文件。
- 简单。CSS
是一门简单的样式语言,是对人类读写友好的。CSS的属性保持最大程度上的相互独立,一般实现一个效果只有一种方法。 - 网络性能。CSS为内容的呈现方式提供了紧凑的编码。图片或音频文件常被作者用来实现某种特定的渲染效果,样式表和其比起来体积要小的多。同时,减少网络链接的次数,进一步提高网络性能。
- 灵活性。有几种方法可以将CSS应用到内容。关键特征是不同位置的样式信息能够层叠,包括默认(用户代理)样式表,用户样式表,链接样式表,内嵌样式,和元素属性中的样式信息。渴求的某些渲染效果和设备无关相冲突,但CSS2.1
- 丰富的。为作者提供一组丰富的渲染效果,增加网站作为表达媒介的丰富性。设计师们已经对桌面版和幻灯片应用中的常见功能渴望许久。但
CSS2.1 为满足设计师的要求,向前迈了一大步。 - 可选的语言绑定。规范中描述的一组 CSS
属性使视觉和听觉格式化模型表现一致。其格式化模型可以通过CSS语言访问,但也可以绑定到其他语言。例如,在JavaScript程序中可以动态改变某个元素的‘color’属性值。 - 可访问性。一些CSS功能将使网络更方便残障用户:
- 控制字体外观属性允许作者消除不可访问的文图图片。
- 澳门新葡8455最新网站,位置属性允许作者消除强制布局的标记技巧(例如,不可见图片)。
- !improtan
规则的意义在于有特别演示要求的用户可以覆盖作者的样式表。 - 所有属性的‘inherit’值用来提升层叠的通用性,和更容易生成一致的风格。
- 改进媒体支持,包括媒体分组和 braille,embossed,和 tty
媒体类型,允许用户或作者为这些设备定制页面。
必须是XHTML格式页面,不能是WML页面,这是WAP 2.0与WAP 1.X的根本区别之一。
.NET 模板:
注
原文:
必须限定页面大小,建议为5K~10K,虽然WAP 2.0协议栈的传输效率要高于WAP
1.X,但为了限制页面下载时间,提高业务可用性,保持良好的用户感受,必须对页面大小进行限定。
XHTML MP简介
WAP2.0有一套规范,XHTML
MP是其中用于浏览器显示的规范,底层可以使用HTTP传输,它也是XHTML的一个子集,详细参考如下链接:
XHTML Mobile Profile
跪 div+CSS 布局设计理念的书籍,有好的资源给建议,基本都会 但是运用起来
书其实
人认
没必要看
既
已经会了
部分了
对于说
几
问题:
代码混乱:
看书没
用
去看别人
写
看别人
源代码
布局颜色
好像
设计师
问题(
知道
篇设计还
偏制作)
css命名实
想
出来
下
有道把
文翻译成英文
行
每公司
规范
样
CSS我
般会分成好几
来写
比
全局样式、广告样式、特殊样式等等
都
单独写
再墨迹
句
多做多看
div+css没有太多
技术含量
里面
做
多了自
明白了
必须是彩色页面,使用图文混排功能图文混排能极大的提高用户界面内操作的数量和方便程度,对于提高用户对于WAP
2.0业务的体验极为有效。
WAP应用程序结构
DOCTYPE设置
XHTML MP有自己的DOCTYPE,如下
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
可以把它在Master文件里设置,以便在所有内容页里自动使用,而不是每个页面重复的设置。
DIV+CSS的概念
DIV+CSS网站标准(或称
WEB标准
)
常用
术语之
通常
了说明与HTML网页设计语言
表格(table)定位方式
区别
因
XHTML网站设计标准
再使用表格定位技术
而
采用DIV+CSS
方式实现各种定位
CSS英语Cascading
Style
Sheets(层叠样式表单)缩写
种用来表现
HTML 或 XML
等文件式样计算机语言
DIV元素用来
HTML文档内大块(block-level)
内容提供结构和背景
元素
DIV
起始标签和结束标签之间
所有内容都
用来构成
块
其
所包含元素
特性由DIV标签
属性来控制
或者
通过使用样式表格式化
块来进行控制
采用CSS+DIV进行网页重构相对与传统TABLE网页布局而具有
下4
显著优势:
1:表现和内容相分离
设计部分剥离出来放
独立样式文件
HTML文件
只存放文本信息
2:提高搜索引擎对网页索引效率
用只包含结构化内容HTML代替嵌套
标签
搜索引擎
更有效地搜索
网页内容
并
能给
较高
评价
3:提高页面浏览速度
DIV+CSS布局较Table布局减少了页面代码加载速度得
大
提高
spider爬行时
非常有利
过多
页面代码
能造成爬行超时
spider
会认
页面无法访问
影响收录及权重
另方面
真正
网站优化
只
了追求收录、排名
快速
响应速度
提高用户体验度
基础
对整
搜索引擎优化及营销都
非常有利
4:易于维护和改版
只要简单
修改几
CSS文件
重新设计整
网站
页面
5:代码精简
使用DIV+CSS布局页面代码精简
点相信对XHTML有所了解
都知道
代码精简所带来
直接好处有两点:
提高spider爬行效率
能
短
时间内爬完整
页面
样对收录质量有
定好处;二
由于能高效
爬行
会受
spider喜欢
样对收录数量有
定好处
6:表格嵌套问题
多网站
何推广
文章
称
搜索引擎
般
抓取三层
上
表格嵌套
点
直没有得
搜索引擎官方
证实
根据目前掌握
情况来看
spider爬行Table布局
页面
遇
多层表格嵌套时
会跳过嵌套
内容或直接放弃整
页面
使用Table布局了达
定
视觉效
得
套用多
表格
嵌套
表格
核心内容
spider爬行时跳过了
段没有抓取
页面
核心
页面
成了相似页面
网站
过多
相似页面会影响排名及域名信任度
而DIV+CSS布局基本上会存
样
问题
从技术角度来说
XHTML
控制样式时也
需要过多
嵌套
虽
没有得
确认
还
建议使用Table布局
朋友们
设计时尽
能
要使用多层表格嵌套
SEOer们
文章
说明了
点
相信
们也
没有依据
7:对网站Alexa排名
影响
基于XTHML标准DIV+CSS布局
般
设计完成
会尽
能
完善
能通过W3C验证
截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准
网站或页面
事实证明使用XTHML架构
网站排名状况
般都
错
设计理念,css
今天整理CSS2.1的规范,发现这个,分享给大家。 CSS2.1 作为 CSS2 和 CSS1
的后序版本,基于一下一组设计理念: 向前和向后…
建议使用BANNAR功能,以方便用户返回到相应层次。例如:QQ彩票首页》竞技彩
》竞彩足球
首先你拥有一个Web应用,那么集成WAP服务就相当容易。
你不必为原来的业务逻辑进行重新构建,而且如果你Web本身的应用就有分层的,那么扩展到WAP是很方便的。
对于我们目前的应用,我们可以简单的认为是WEB应用的Mobile迁移。更多的是在UIUE上的调整。
配置浏览器文件
在ASP.NET
项目里右键添加App_Browsers文件夹,再在里面添加一个mobile.browser文件,如下
代码
<browsers>
<browser id="NewBrowser" parentID="Default">
<identification>
<header name="Accept" match="application/xhtml+xml; profile|application/vnd.wap.xhtml+xml" />
</identification>
<capabilities>
<capability name="preferredRenderingMime" value="application/vnd.wap.xhtml+xml" />
<capability name="preferredRenderingType" value="xhtml-mp" />
</capabilities>
<controlAdapters markupTextWriterType="System.Web.UI.XhtmlTextWriter" />
</browser>
</browsers>
这个浏览器配置文件的意思,如果HTTP请求的Accept头里包含xhtml
mp的MIME类型,则在给客户端返回Response的时候使用application/vnd.wap.xhtml+xml的ContentType,且RenderType使用XHTML-MP类型,Render的时候强制使用XhtmlTextWriter。
浏览器配置文件是ASP.NET
2.0新增的机制,代替以前在WebConfig里配置的BrowserCaps节点。
建议使用CSS样式表,来实现终端适配功能对于WAP
2.0业务,终端适配的要求比WAP
1.X更高,而CSS样式表极大方便了SP终端适配的工作。
WAP采用什么标准
WebConfig配置
因为我们开发的网页是面向手机的,手机的功能比较弱,有的甚至不支持Cookie等,而且只支持简单的控件,所以我们把Cookie和ViewState等禁掉,如下
代码
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation debug="false" />
<authentication mode="None" />
<xhtmlConformance mode="Strict" />
<pages enableViewState="false" />
<sessionState cookieless="true"/>
</system.web>
</configuration>
对于新闻咨询类应用,建议在使用大量文字时,使用背景色以增强用户感受,并区别于WAP1.X业务。对于新闻咨询类应用,在页面布局上可能与WAP1.X业务比较类似,都是按条排列,有上下翻页功能。为了区别与WAP
1.X业务,同时使得用户界面更加美观,建议在使用大量文字时,使用背景色以增强用户感受。
1.XHTML Mobile 1.0(WAP2.0)
Google Mobile
wap.taobao.com
3g.sina.com.cn
启用页面压缩来减少流量传输
有些手机浏览器支持Gzip等页面压缩算法,我们应该检测出来这种情况,并让这种手机节省流量。可以在Global.asax里写一段代码支持,该方法来源于网络,引用如下,原始链接参考文末的参考链接
代码
void Application_PreRequestHandlerExecute(object sender, EventArgs e) {
HttpApplication app = sender as HttpApplication;
string acceptEncoding = app.Request.Headers["Accept-Encoding"];
Stream prevUncompressedStream = app.Response.Filter;
if (!(app.Context.CurrentHandler is Page ||
app.Context.CurrentHandler.GetType().Name == "SyncSessionlessHandler") ||
app.Request["HTTP_X_MICROSOFTAJAX"] != null)
return;
if (acceptEncoding == null || acceptEncoding.Length == 0)
return;
acceptEncoding = acceptEncoding.ToLower();
if (acceptEncoding.Contains("deflate") || acceptEncoding == "*") {
// defalte
app.Response.Filter = new DeflateStream(prevUncompressedStream,
CompressionMode.Compress);
app.Response.AppendHeader("Content-Encoding", "deflate");
}
else if (acceptEncoding.Contains("gzip")) {
// gzip
app.Response.Filter = new GZipStream(prevUncompressedStream,
CompressionMode.Compress);
app.Response.AppendHeader("Content-Encoding", "gzip");
}
}
在没有启用压缩和配置浏览器文件之前,手机访问页面抓包如下
代码
GET /mobileoaweb/?t=25345 HTTP/1.1
Host: 114.249.124.57
Accept: text/html, application/xhtml+xml, application/vnd.wap.xhtml+xml, application/vnd.wap.wmlc, application/vnd.wap.wmlscriptc, text/vnd.wap.wml, text/vnd.sun.j2me.app-descriptor, */*, text/x-vcard, text/x-vcalendar, image/gif, image/vnd.wap.wbmp
Accept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,Windows-1252,UTF-16LE,GB2312,windows-1250
Accept-Language: zh-CN,zh;q=0.5
Accept-Encoding: gzip,deflate
Content-length: 0
Via: WTP/1.1 BJBJ-PS-WAP2-GW07.bj2.monternet.com (Nokia WAP Gateway 4.1 CD1/ECD13_D/4.1.04)
X-Forwarded-For: 10.140.248.32
X-Source-ID: BJGGSN06BMT-CSK
X-Nokia-CONNECTION_MODE: TCP
X-Up-Bear-Type: GPRS/EDGE
X-Nokia-gateway-id: NWG/4.1/Build4.1.04
Connection: close
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Sat, 10 Jul 2010 12:26:43 GMT
X-Powered-By: ASP.NET
Connection: close
X-AspNet-Version: 2.0.50727
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 2180
可以看到这时候给客户端返回的Content-Type是text/html,而且Content-Length很长,是2180,而配置浏览器文件以及启用压缩之后,则如下
代码
GET /mobileoaweb/?t=25345&t=36045&t=26421 HTTP/1.1
Host: 114.249.124.57
Accept: text/html, application/xhtml+xml, application/vnd.wap.xhtml+xml, application/vnd.wap.wmlc, application/vnd.wap.wmlscriptc, text/vnd.wap.wml, text/vnd.sun.j2me.app-descriptor, */*, text/x-vcard, text/x-vcalendar, image/gif, image/vnd.wap.wbmp
Accept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,GB2312,windows-1250
Accept-Language: zh-CN,zh;q=0.5
Accept-Encoding: gzip,deflate
Cookie: jid=M4GKS9T0hh!-849429530
Content-length: 0
Via: WTP/1.1 BJBJ-PS-WAP2-GW18.bj2.monternet.com (Nokia WAP Gateway 4.1 CD1/ECD13_D/4.1.04)
X-Forwarded-For: 10.140.83.123
X-Source-ID: BJGGSN06BMT-CSK
X-Nokia-CONNECTION_MODE: TCP
X-Up-Bear-Type: GPRS/EDGE
X-Nokia-gateway-id: NWG/4.1/Build4.1.04
Connection: close
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.1
Date: Sat, 10 Jul 2010 14:33:48 GMT
X-Powered-By: ASP.NET
Connection: close
X-AspNet-Version: 2.0.50727
Content-Encoding: deflate
Cache-Control: private
Content-Type: application/vnd.wap.xhtml+xml; charset=utf-8
Content-Length: 1295
看到变化了吧。
相关文章
- 所以取为第〇局地,苹果公布了Mac OS X Lion 10.7.1 进级包
- 还恐怕会学习价格表格、规范表格和调换到效,栅格系统的劳作原理
- 澳门新葡8455最新网站干什么选用编辑器并非IDE进行JavaScript编制程序,Sublime Text 的特征功效
- 还会有厂商的COO也是足以获得高每年工资,我们本来不提倡解聘职员和工人来表明那一个理论
- JavaEye会准时实行问答大赛,JavaEye会准期举行问答大赛
- 招待投稿,research的历程比较辛勤
- Fire必然会预装其Appstore,要是想让本身耗费的软件步向苹果App
- 澳门新葡8455最新网站:技艺来开辟活动应用程序,个国内外前端开辟框架举办开端的横向比较
- jquery的1.3版本已经去掉的性情选用器@符号,jquery的1.3版本现已去掉的品质选取器@符号
- SDK面向全部开辟者开放下载,LG已经有四款智能石英表