Monthly Archives: 六月 2010

针对移动设备web制作的小知识

最近,因为对手持设备样式表的逐渐了解,我对手机网站的开发设想产生了一点点改变。 首先,什么时候你会想打开手机用来上网? 通常有两种情况:一种是急需获得某种信息,但因为各种原因只能通过手机上网查询;另一种是闲着无聊,便通过手机上网消遣。 对于后一种情况,设计一种同电脑浏览有相同浏览体验的网站依然是每一个WEB开发者的梦想,但是对于前一种呢?当上课要迟到时,在路上赶路缺忘了上课的课室时,只想快速地查到想要的数据,一点不在乎网页的用户体验;同样,在外地想查询某公司的电话号码时,我们需要的,仅仅是一个8位数的电话号码,并不要任何的视觉效果。 现在开始,我们将讨论如何制作针对前一种情况的wml。 现在正是移动web的成长期,在这个阶段,手机的功能正在变得越来越强,他们的内存甚至比早期的个人电脑还要多,但是,与所有技术的成长期一样,移动WEB的未来还有太多的变数。数百种手持设备,它们可能使用四十种不同的浏览器,而这些浏览器以不同的方式支持HTML和CSS。目前我建议在等待移动WEB成熟的时候保持简约和耐心。 下面列出了一些针对手持设备应该注意的地方: 让每KB都物有所值,隐藏额外的部分,使用更少更小的图像,等等,因为WEB访问是昂贵的。 要确保站点上每个有意义的图像都有替换文本,使以无图像方式查看页面的访问者不会错过任何信息。因为访问者可能会选择在不显示图像的情况下查看页面(从而加快访问速度)。 保证图像尽可能小,彻底地对站点进行测试。因为许多手机浏览器(比如UCWEB)会通过代理服务器对网站进行过滤,从而去掉手机浏览器无法处理的内容。 在栏上使用窄的外边距,最好根本不使用。不要使用浮动、绝对定位、表格(它们的内容可能以出乎意料的次序显示)和弹出窗口。 避免使用固定宽度的设计。应该使用em和百分数来代替。 避免使用CSS字体属性,应该主要依靠标题标记,如h1,h2等等,来区分大标题和小标题。对于常规文本用p,对于强调部分用b或strong,尽量少用斜体。因为大多数手持浏览器只支持一种字体和最多两三种字号,支持粗体而不支持斜体(至少支持得不好)。 可以对导航条使用有编号的列表(ol)。因为手持设备对列表的支持很好。 避免使用背景图片。因为不太支持CSS的background-image属性。 一般支持CSS的color和background-color属性,应尽可能地利用,使得文本颜色和背景颜色之间的对比足够强烈,让访问者在日光下也能够看清页面上的内容。 确保站点的显示在没有加在样式表的情况下也是有意义的。测试时用尽可能多的手持设备或手持浏览器来查看站点。因为某些手持浏览器会完全忽视CSS文件(比如QQ手机浏览器居然像傻瓜似的不加载一个以上的样式表)。

开放移动web网页中的一些体会

本文讲述我这两周手机web开发中的一些经验总结,我是个菜鸟,有什么地方说错了请大家帮忙指点一下~ 时代在不断变迁,手机上网早已普及大众,但远远落后的,不是停滞不前的wap协议,而是花样百出的手机浏览器,手机浏览器已进入百家争鸣的状态。但是欣慰的是,现在手机浏览器存在一个共同的目标:如何让网页显示得和电脑看到的一样(即使电脑不同浏览器间也存在差别,特别是CSS3的到来)。 我们没有选择WML,而是HTML。 WAP协议是针对流量受限,屏幕大小较小,功率消耗小,运算处理速度低的小型移动终端而设计的;尽管WAP的兼容性和可扩展性好,可是人们的目标始终是:手机浏览和电脑浏览能得到一致的效果,因此,随着手机浏览器的发展,WAP必将被舍弃。 参考资料:http://www.wapforum.org/faqs/index.htm 几个测试 通过对不同机型的实测,请允许我我主观地对结果做一个简单的排序: Android自带浏览器 用户体验一流 用过Android自带浏览器的用户应该深有体会,当你用两个手指放大网页上的图片时,不得不在心理发出惊叹,这种感觉太棒了!,字体和图片全部跟着放大,并懂得自动换行,这才是smartphone! 堪称完美的样式展示 测试用的9种手机浏览器中,这种是网页兼容性最好的浏览器了。和我在电脑上用firefox测试的效果一模一样,甚至在某些方面做得更好;而且,这是测试的9种浏览器中两种实现了自动跳转脚本的浏览器之一。 字体显示全部按用户设定的大小显示 Opera Mobile (Version 10.00) 超炫的界面,几乎完美的兼容性,仅仅是偶尔的中文排版问题(原因不明,英文可以完美展示,中文浏览部分网站会排版错误,比如一行多出3个字符)。 Symbian s60 3rd UCWEB (V7.2.2.51) 适应屏幕模式: 强制统一了所以字体大小,包括h4~h6和p一样大,h1~h3比p大约2px。无斜体。 当字体颜色和背景颜色相同时,强制改为黑色。 border-color默认为灰色。 body强制有3px的margin。 不完全的无视margin和padding,默认margin为0,block元素有1px的padding-top和3px的padding-bottom,还有margin:5px 0px;但是当没有定义margin的上和下时,会出现IE典型的double margin的bug。 对于内联函数,对齐也有问题,有空截图下来。 缩放模式:字体还是统一了大小(UC这你就做得不对了)。 魅族自带浏览器 感觉就是仿Android,可是幸运的是,“该有”的小bug它也有了~ Opera Mini(Version 5.0.18755) 作为mini型浏览器,opera mini非常的出色,几乎完美地表现了盒子模型,只是偶尔会碰到中文字体换行有偏差,估计是外框的左padding撑开了字体?不对啊,一行显示的字数足足多出了4,5个…这个以后有空在研究。 Android UCWEB(v7.0.3.45) & 魅族UCWEB(v7.1.042 wince) 不明白为什么Android的UCWEB比Symbian的效果差,字体大小被重设,这本身没有什么问题,错就错在字体被放大得太大了,图标和图片还是原比例,搭配非常不协调。还有很多小bug,比如图标对齐有问题。 Symbian s60 3rd自带浏览器 网络浏览体验其实还蛮不错的,可惜以为一尘不变以及流量的浪费,使它最后还是成为了诺基亚的一个花瓶。 Symbian QQ浏览器 请原谅这位手机浏览器的初生婴儿吧,半岁大的QQ手机浏览器,不单止只能载入单一CSS,默认字体和大小都奇丑无比,样式也一团糟,还自作聪明地去掉了所有空格,除了进QQ农场,还是不要干别的好… 一些要注意的地方: 所有测试的适应屏幕浏览器均不支持a:focus。所有懂得适应屏幕模式都重设了字体大小和样式。(现在想想重设才是正常的)… Read More »

UTF-8还是GB2312

经常我们打开外国网站的时候出现乱码,又或者打开很多非英语的外国网站的时候,显示的都是口口口口口的字符, wordpress程序是用的UTF-8,很多cms用的是GB2312。 ● 为什么有这么多编码? ● utf-8和GB2312有什么区别? ● 我们在国内做网站是用UTF-8编码格式还是GB2312编码格式好? 一.各种编码的来历 可能很多同学一直对字符的各种编码方式懵懵懂懂,根本搞不清为什么他们有这么多编码 ==================================================================     ANSI编码 其实在很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物。他们看到8个开关状态是好的,于是他们把这称为“字节”。 开始计算机只在美国用。八位的字节一共可以组合出256(2的8次方)种不同的状态。 他们把其中的编号从0开始的32种状态分别规定了特殊的用途,一但终端、打印机遇上约定好的这些字节被传过来时,就要做一些约定的动作。 遇上00×10, 终端就换行,遇上0×07, 终端就向人们嘟嘟叫,例好遇上0×1b, 打印机就打印反白的字,或者终端就用彩色显示字母。他们看到这样很好,于是就把这些0×20以下的字节状态称为”控制码”。 他们又把所有的空格、标点符号、数字、大小写字母分别用连续的字节状态表示,一直编到了第127号,这样计算机就可以用不同字节来存储英语的文字了。大家看到这样,都感觉很好,于是大家都把这个方案叫做 ANSI 的”Ascii”编码(American Standard Code for Information Interchange,美国信息互换标准代码)。当时世界上所有的计算机都用同样的ASCII方案来保存英文文字。 ====================================================================   扩展ANSI编码 后来,就像建造巴比伦塔一样,世界各地的都开始使用计算机,但是很多国家用的不是英文,他们的字母里有许多是ASCII里没有的,为了可以在计算机保存他们的文字,他们决定采用127号之后的空位来表示这些新的字母、符号,还加入了很多画表格时需要用下到的横线、竖线、交叉等形状,一直把序号编到了最后一个状态255。从128到255这一页的字符集被称“扩展字符集”。从此之后,贪婪的人类再没有新的状态可以用了,美国当时估计也没想到还有别的国家要用计算机的。 ====================================================================   GB2312编码 当天朝人们得到计算机时,已经没有可以利用的字节状态来表示汉字,况且有6000多个常用汉字需要保存呢。天朝人民就不客气地把那些127号之后的奇异符号们直接取消掉。 规定:一个小于127的字符的意义与原来相同,但两个大于127的字符连在一起时,就表示一个汉字,前面的一个字节(他称之为高字节)从0xA1用到0xF7,后面一个字节(低字节)从0xA1到0xFE,这样我们就可以组合出大约7000多个简体汉字了。 在这些编码里,我们还把数学符号、罗马希腊的字母、日文的假名们都编进去了,连在 ASCII 里本来就有的数字、标点、字母都统统重新编了两个字节长的编码,这就是常说的“全角”字符,而原来在127号以下的那些就叫”半角”字符了。于是就把这种汉字方案叫做 “GB2312”。GB2312 是对 ASCII 的中文扩展。 =====================================================================   GBK 和 GB18030编码 但是天朝的汉字太多了,我们很快就就发现有许多人的人名没有办法在这里打出来,特别是某些天朝领导的名字要是打不出很麻烦的。于是我们不得不继续把 GB2312 没有用到的码位找出来老实不客气地用上。 后来还是不够用,于是干脆不再要求低字节一定是127号之后的内码,只要第一个字节是大于127就固定表示这是一个汉字的开始,不管后面跟的是不是扩展字符集里的内容。结果扩展之后的编码方案被称为 GBK… Read More »