Month: 六月 2010
针对移动设备web制作的小知识
- by wu shengyuan
最近，因为对手持设备样式表的逐渐了解，我对手机网站的开发设想产生了一点点改变。
首先，什么时候你会想打开手机用来上网？
通常有两种情况：一种是急需获得某种信息，但因为各种原因只能通过手机上网查询；另一种是闲着无聊，便通过手机上网消遣。
对于后一种情况，设计一种同电脑浏览有相同浏览体验的网站依然是每一个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网页中的一些体会
- by wu shengyuan
本文讲述我这两周手机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。所有懂得适应屏幕模式都重设了字体大小和样式。（现在想想重设才是正常的）
- 不要自动跳转。
- 少用背景图片。
【字体】
- 不要对字体抱有任何幻想，感觉比较漂亮的字体还是arial,sans-serif;
- 字体大小虽然不是必要但是最好还是重新设定，这对于能缩放的浏览器有较好的用户体验；
- 视觉设计不要依赖于你的字体大小和字体颜色，因为大多数浏览器会重设你的字体，包括大小和颜色
Summary
- 对于有重写代码的css，手机浏览器对重写的优先级顺序更加复杂，建议不要写太复杂的CSS。
- 手机浏览器兼容性相当混乱，不建议尝试制作精密到像素的手机WEB设计。
- 如果目标只是制作手机网页，怎么简单就怎么做，不要依赖CSS达到美观效果，但可以试着多加些小gif图标。
- 既然不同浏览器的网页展现方式如此不同，那么，最低限度请不要出现任何的html或css错误了，对代码不严密的网页，不同浏览器的纠错能力各不相同，展示效果更是“随心所欲”。
UTF-8还是GB2312？
- by wu shengyuan
经常我们打开外国网站的时候出现乱码，又或者打开很多非英语的外国网站的时候，显示的都是口口口口口的字符，
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 标准，GBK 包括了 GB2312 的所有内容，同时又增加了近20000个新的汉字（包括繁体字）和符号。
后来少数民族也要用电脑了，于是我们再扩展，又加了几千个新的少数民族的字，GBK 扩成了 GB18030。从此之后，天朝民族的文化就可以在计算机时代中传承了。
在这个标准里，最大的特点是两字节长的汉字字符和一字节长的英文字符并存于同一套编码方案里，因此他们写的程序为了支持中文处理，必须要注意字串里的每一个字节的值，如果这个值是大于127的，那么就认为一个双字节字符集里的字符出现了。
那时候凡是受过编程学习的程序员都要每天念下面这个咒语数百遍的折磨：
“一个汉字算两个英文字符！一个汉字算两个英文字符……”
====================================================================
UNICODE编码
因为当时各个国家都像天朝这样搞出一套自己的编码标准，结果互相之间谁也不懂谁的编码，谁也不支持别人的编码，连大陆和台湾这样只相隔了150海里，使用着同一种语言的兄弟地区，也分别采用了不同的编码方案：
当时的天朝人想让电脑显示汉字，就必须装上一个“汉字系统”。专门用来处理汉字的显示、输入的问题，
但是那个装台湾的人士写的程序就必须加装另一套支持 BIG5 编码的“倚天汉字系统”才可以用，装错了字符系统，显示就会乱了套！这怎么办？而且世界民族中还有那些暂时用不上电脑的穷苦人民，他们的文字又怎么办？
正在这时，天使及时出现了——一个叫 ISO （国际标谁化组织）的国际组织决定着手解决这个问题。他们采用的方法很简单：废了所有的地区性编码方案，重新搞一个包括了地球上所有文化、所有字母和符号的编码！他们打算叫它 UCS, 俗称 UNICODE 。（ Universal Multiple-Octet Coded Character Set ）
在UNICODE 中，一个汉字算两个英文字符的时代已经快过去了。
无论是半角的英文字母，还是全角的汉字，它们都是统一的“一个字符”！同时，也都是统一的“两个字节””
===================================================================
UTF-8和UTF-16
UNICODE 来到时，一起到来的还有计算机网络的兴起，UNICODE 如何在网络上传输也是一个必须考虑的问题，于是面向传输的众多 UTF（UCS Transfer Format）标准出现了，顾名思义，UTF8就是每次8个位传输数据，而UTF16就是每次16个位，只不过为了传输时的可靠性，从UNICODE到UTF时并不是直接的对应，而是要过一些算法和规则来转换。
====================================================================
未来的UCS-4
如前所述，UNICODE 是用两个字节来表示为一个字符，他总共可以组合出65535不同的字符，这大概已经可以覆盖世界上所有文化的符号。如果还不够也没有关系，ISO已经准备了UCS-4方案，说简单了就是四个字节来表示一个字符，这样我们就可以组合出21亿个不同的字符出来（最高位有其他用途），这大概可以用到天朝成立银河联邦成立那一天吧！
二.为什么有些网站打开有时候会是乱码
网页乱码是浏览器（如IE等）对HTML网页解释时形成的。
如果在浏览网站网页的代码写错语系（比较少见），有形如：
<HTML>
<HEAD>
<META CONTENT=“text/html；charset=ISO-8859-1”></HEAD>……
</HTML>
的语句，浏览器在显示此页时，就会出现乱码。因为浏览器会将此页语种辨认为“欧洲语系”
解决的办法是将语种“ISO-8859-1”改为GB2312，如果是繁体网页则改为BIG5。
==========================================================
还有一种可能比较大
就是网页并没有标明他用的是何种语系，即没有
<META CONTENT=“text/html；charset=XXXXX“>，这一行
而你的计算机默认也不是这种语系，比方我们访问某些日文网站，经常出现这个问题。这个主要是由于程序员是面向当地的人开发的网站，由于当地都是默认语系，所以没有乱码种情况，而你是外来人，你的操作系统本身默认不是当地的语系。所以要手动改语系。
============================================================
至于出现口口口口口口这种情况
这是由于网站并没有采用UTF-8编码而是采用的当地的编码，如蒙古语的，阿拉伯语的编码，你的计算机中并没有这种编码，所以不能识别。
解决办法是，事先为浏览器安装多语言支持包（例如在安装IE时要安装多语言支持包），这样在浏览网页出现乱码时，就可以在浏览器中选择菜单栏下的 “查看”/“编码”/“自动选择”/蒙古），如为繁体中文则选择“查看”/“编码”/“自动选择”/阿拉伯语，其它语言依此类推选择相应的语系，这样可消除网页乱码现象。
三.目前开发网站用什么编码比较好
我们一般通俗的理解为：
utf-8是世界性通用代码，也完美的支持中文编码，如果我们做的网站能让国外用户正常的访问，就最好用utf-8。
GB2312属于中文编码，主要针对国内用户使用，如果国外用户访问GB2312编码的网站就会变乱码。
网友的反馈一般觉得是用utf-8比GB2312要多很多，大家都比较赞同用 utf-8
从一张外国网站的调查也可看得出
由此图可以看出，2001-2008年期间，GB2312编码的使用情况虽然幅度不大，但还是在稳定上升的；蓝色的线表示出用UTF-8的网站越来越多了。
我挑选了国内部分几个大的门户网站，看看他们用的是哪种编码格式：
也学有同学就会问了为什么国内几个网站用GB2312反而更多些呢。
我也对这个疑问进行了思考，我觉得。应该有3种原因
===================================================================
1. 国内这些网站本身历史也比较长，开始使用的就是 GB2312编码，现在改成 UTF-8（以前的网页）转换的难度和风险太大。
2. UTF-8编码的文件比GB2312更占空间一些，虽然目前的硬件环境下可以忽略，但是这些门户网站为了减少服务器负载基本上所有的页面都生成了静态页，UTF-8保存起来文件会比较大，对于门户级别的网站每天生成的文件量还是非常巨大，带来的存储成本相应提高。
3. 由于UTF-8的编码比GB2312解码的网络传输数据量要大，对于门户级别的网站来说。这个无形之间就要增大带宽，用GB2312对网络流量无疑是最好的优化。
====================================================================
所以在新做站的情况下，建议还是选择UTF-8比较好。因为没有上面那些原因，兼容为上策。
原文链接地址: http://www.9fun.org/archives/183.html