2010年2月 的存档

• 谷歌-短信最流行-2010虎年短信免费(收发)

  日期：2010.02.11 | 分类：紫枫生活 | 评论数：0

  手机现在越来越流行了哈！发短信更是没得说哈。。

  今天看到了谷歌为我们广大的用户提供了一个很好的免费服务，可能之前就有了哈，没去注意！

  快过年了哈，手机的问候必不可少哈。俺就为那些懒得打字的朋友们，提供方便哈。

  可以上网的朋友，就去谷歌热榜-短信最流行：

  http://www.google.cn/rebang/msg

  点击进入→

  先看界面：

  

  2010虎年免费短信收

  

  2010虎年免费短信收

  

  2010虎年免费短信收

  在这里，祝大家新年快乐，虎年吉祥！

• 脆弱的用户体验

  日期：2010.02.09 | 分类：紫枫生活 | 评论数：0

  最近关心电子商务比较多，阿里系产品目前还是业内标杆，值得学习的对象。前几天Jack Ma对支付宝用户体验的严厉批评，成为业内交流热点，据说原话是“烂，太烂，烂到极点”。

  作为从业者说句公道话，中国网上支付体验差的根源在于“安全性”，所以才要用证书、用控件来尽可能“保障”安全，同时也给控件、证书的“兼容性”问题种下了祸根。这个症结主要受制于目前中国公民“个人信用体系”的不完善，这就是国情，不是目前谁能一拍脑袋、开个会能解决的。举个例子，美国建立信用体系历时百年，上世纪80年代初美国才建立全国数据共享个人信用体系。

  支付宝正在从单纯服务于淘宝，走向做网民生活的水电煤。我想不仅支付宝，任何一家商业公司的“网络支付”平台，如果想做生活的水电煤，想影响网民的日常起居，必将纳入国家管控体系。准确说，网络支付想做大，等于抢中国人民银行的生意，因为网络支付本身就应该是国家银行的“电子政务”。那中国人民银行为什么不自己做？目前国家的电子政务现状已如此“繁花似锦”，作为公民还能奢求什么？当然，我们谁都知道这件事等中国人民银行来做不靠谱，从他们现在网站的表现就能看出一二（点击后别怀疑，现在是2010年）。

  归根结底，不能有效发展的根源，在于整个体系不均衡，缺乏信用体系已成为制约中国经济发展的瓶颈。绝大多数用户体验问题的根本都在于最底层的那块短板，否则其他做再好也不会有实质性突破。Jack Ma在公开场合说过“支付宝可以随时送给国家。”这本身就是国家电子政务的未来。

  淘宝也类似，网上能买到便宜货的道理很简单，一方面商家直销无中间渠道，另一方面商家不用缴税。店主既没有实体店开销，又没有衙门抽税，利润空间自然大的多，价格方面实体店根本不是对手。但是，如果网络店铺、网络商城真正成长到足以影响国民经济的规模，朝廷不出手才怪，现在是对“你”没兴趣。到时如果备案、监管、缴税等一系列门槛出台，在网络上做生意还能有多少便利和优势？对用户体验的影响又要打多少折扣？

  以上两个行业例子，真实反映了在绝大多数互联网公司里推行“用户体验”的实际情况。很多时候，问题症结明明就摆在那里，我们却无力去直接推动和改变。就算有机会实施，弄不好也会搞成熙宁变法中的“执拗公”王安石，或者封建社会制度下的“怨妇”祥林嫂。

  有时把事情想太清楚其实挺没意思，反而做起来碍手碍脚。说白了，凡事都在夹缝中生存，高手总在游刃有余中寻找利用时间差。问题代表着机会，我很想告诉同行们，咱们这个领域到底有多大想象空间，所以千万别放弃。

• UI在中国

  日期：2010.02.09 | 分类：用户体验设计(UED), 设计杂谈 | 评论数：0

  UI全称User Interface，中文叫“用户界面”。

  2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件——金山，据说在2000年已成立人机界面组，虽然只有2个人。金山软件的UI 团队是业内名副其实的黄埔军校，培养了如今江湖上整整一代的设计领袖，并且他们出的作品也深远影响了国产软件的用户体验整体水准。也许早期的金山软件用户们还记得，随后WPS和金山毒霸的界面设计在整个大环境内首屈一指。

  2001年2月出版的《软件创新之路》中文版，在技术专著角度强调了交互与界面的重要性，为UI概念被广泛认可做好了铺垫。作者叫Alan Cooper，眼熟吧？没错，这本书就是后来2006年3月出版的《交互设计之路》的前辈版本。

  2001年到2003年之间，国内大小公司相继设立UI职位，同期，不少平面设计和网页设计从业者也开始尝试转行做UI。因为当时从事web design非常不景气，整体水平低下，市场环境糟糕。

  2003年随着ChinaUI论坛的上线，此概念开始在数字设计领域声名鹊起。如同ChinaUI网站最早的title“欢迎来到中国第一个UI设计网站”，但什么是UI？我估计当时没几个人清楚。同年5月，由金山转会腾讯的唐沐主导了QQ发展史上革命性的界面升级。耳目一新的QQ界面给粉丝们带来了极大惊喜，在外观和人性化方面做了较大改善。

  此后，以UI为主题的设计类网站层出不穷。我当时对UI其实并不太感兴趣，认为与我从事的是两个路子，但每天看到、听到的讨论又不得不去了解相关知识。从概念角度推敲，当时所有软件UI从业者所做的，都应该是Graphical user interface，简称GUI，仅仅只是UI的一个分支。所以，我后来特纳闷，为什么没有Web user interface？也可以简称WUI。

  http://en.wikipedia.org/wiki/Graphical_user_interface

  A graphical user interface or GUI is a type of user interface item that allows people to interact with programs in more ways than typing such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands.

  首先要肯定概念推广对业界整体实力的推动作用，但因对概念理解的不清晰，甚至误导，绝大多数同行认为“UI等于网页设计”，更有人认为“UI是专业的网页设计”。很大程度上影响了当时的web design主流审美，当时所谓好的“网页”设计，要么是一幅全由图片拼接的平面大作，要么就是由各种华丽的UI控件堆砌而成软件皮肤，丝毫看不到任何 web design的技巧和内涵。

  注意，软件的UI设计与网页的UI设计完全是两套知识体系。对于软件UI来说，设计师能够操作到的仅仅是视觉的表现层，所以从事软件UI的基本都是视觉设计师；而网站UI在表现原理上有很大区别，不是视觉设计师天马行空想象就能做，也不是所见即所得做出来的样子马上就可以用在页面上。关键网页表现层还有个Front-End的概念，所有界面控件表现都通过代码来落实，这是web最终用户体验的质量总控。

  针对互联网产品而言，当时有同行认为真正的UI专业流程，应该是用户研究、需求分析、架构设计、交互设计、可用性测试整个过程。我认为错的很离谱，因为对概念层级理解的模糊，导致对整个体系的认识存在缺陷。以点盖面，以偏盖全，后来的“交互设计”也走入此误区。

  http://mashable.com/2009/01/09/user-experience-design/

  It’s not uncommon to confuse “user experience” with “user interface” — after all it’s a big part of what users interact with while experiencing digital products and services. But the UI is just one piece of the puzzle.

  就我目前的实践经验来看，比较认同《用户体验的要素》作者的总结——界面设计只是框架层的一部分，与信息设计、导航设计并列组成用户真正能够看到和使用的原型。Web设计中典型的Web UI是表单，几乎每个系统、平台都有，也是处理用户交互行为最容易出问题的难点。

  GUI背景设计师做网站，有很显著的GUI风格，我观察中外很多设计师作品得出的结论。因为他们对web构建原理的认识不够，还有本身产出技能上的习惯差异所致。当然，也有个中高手，能够融洽的处理两者差异。总体上来看，因为GUI与WUI各专业体系纵深发展的日趋分化，顶尖GUI高手一般只专注于 GUI领域。

• 探索移动Web网页编码设计

  日期：2010.02.06 | 分类：WAP, 前端技术 | 评论数：0

  如果你正准备为你的网站制作一个移动设备版本，那这篇文章将会对你相当有用，在本文中，将探索移动Web网页编码设计的各种技巧和注意事项：

  * 为了移动设备上的用户体验可以被接受，代码得怎么设计。
  * “Mobile Web”与普通网站的不同之处？
  * 可以让网站成功运行在移动设备和桌面浏览器上的基本技巧
  * 一些Mobile Web设计中的建议和禁忌、以及大量资源

  Mobile Web和普通网站到底有何不同呢？

  这是个很好的问题 – 首先，也许我们应该从“什么是Mobile Web”的问题开始。毕竟，用户用移动设备访问的Mobile Web，跟他们在家里用台式机访问的网站是独立的不同的部分。当我说“Mobile Web”时，我指的是“通过移动设备访问的网站”。

  在Opera，我们全身心投入而创造出的浏览器允许你查看整个网络，不管浏览设备是否有这个能力。只要你在建立网站时，付出一点儿细心、尊敬并遵循 Web标准，你就可以为所有人所有设备创建只有一个版本的网站 – 唯一的一个网站。但是，有一些例外情况 – 在某些情况下，只有分版本的网站才行得通，一会你会看到这一点。
  移动领域的竞争环境并不平衡

  在桌面领域，对于我们前端开发者来说，形式正在好转 – 大多数现代浏览器已经对Web标准支持的非常好了，无论是Opera、firefox（以及其他 Gecko内核浏览器）或者Safari（以及其他 Webkit内核浏览器），甚至IE带给我们的痛苦都比原来少了。虽然IE6的用户群体数量仍然非常杯具，但这应该归结于大多数人封闭的使用习惯等因素。 但是，移动设备领域在这方面却是不同寻常的：

  * 你拥有能为“Full Web”提供支持的浏览器，像iphone上的Opera Mobile和Safari。Opera Mobile使用了与桌面版本相同的渲染引擎，所以对标准的支持相差无几。
  * 你拥有并不很爽的浏览器，例如IE，它们对Web标准仅能提供有限的支持。它们中的一部分只支持WAP（例如WinWap），另一些支持其他像 Chtml或HTML-MP这样的标准（例如日本NTT DoCoMo的iMode浏览器），还有一些只支持Web标准中的有限子集（例如Netfront、Pocket IE、以及Blazer）。
  * 最后，你拥有OperaMini， 以及其他通过代理机制的浏览器。它主要只是作为连接用户和一个大服务器群的客户端界面。当用户提交一个URL时，客户端会让服务端查找这个页面。然后它会 把页面转换成一个轻量级的二进制标记语言，将它格式化成适合移动设备查看的形式，并发送回客户端显示。这种方式的最主要优势，是可以使页面体积减少90% 左右，帮助用户节省很多带宽费用。这种标记语言表明Web标准并不能很好的表现在移动设备上，因为在这种服务的方式下，OperaMini对 ajax/javascript某些方面将支持的不是很好 – 在这儿有更详细的解释。

  注意：不要指望你的超级Ajax和DOM脚本动画网站在移动设备上会有良好表现。JavaScript在移动设备上的支持程度千差万别。时刻提供优雅降级吧。这种做法有一个例子叫做Hijax。

  我们可以看到，在移动设备的跨浏览器兼容方面，你要思考的问题有很多。但是不要怕 – 我随后的建议会给你指引一个正确的方向；并且随着时间的推移，移动浏览器对标准的支持将会得到改善，届时我们前端开发者真的再也不需要为它们操心了。你问 我这一切什么时候会实现？Who knows！
  移动浏览器的其它限制还有那些？

  当然，在移动设备上开发网站时，除了浏览器对标准的支持外，还会遇到其它更多的限制因素。设备自身的限制因素，你也不得不考虑。例如：

  * 有限的控制 – 不要只假设你的用户会使用鼠标来控制页面中的一切，你也要提供键盘的选择。一些手机用户可能没有类似鼠标这样的东东，所以类似这样的结构 :hover 以及 onClick 对 他们来说是没有用的（这对可用性方面也是非常重要的 – 一些残障用户可能在用手方面会有些缺陷）。为用户提供的表单设计也同样重要 – 你可能已经感受到，用手机来填写那些又臭又长的必填表单有多么不爽。为了解决这个问题，试着去把那一坨内容用下拉菜单的方式展现出来，这比等着用户一个字 一个字手动输入来的更靠谱（译者注：目前国内有某些山寨机浏览器对下拉菜单的支持可能有不同程度的问题。例如基于MTK系统的联想i61，默认情况下会显示所有选项，而在某些情况下会产生变形和“漂移”，使用时需要谨慎些）。另外，给表单设置一个最有可能的初始值，也是一个好主意。
  * 有限的屏幕尺寸 – 想象一下你那美妙的1024×768的设计在240×320屏幕下，或者更小的屏幕下，它的可用性会是什么样子……有一些方法可以应对这个情况 – 你可以故意把页面设计的很简洁流畅，或者你可以通过采取功能检测或媒体类型检测（诸如此类）的手段，为移动设备提供不同的页面。另外对于屏幕尺寸，有些手 机可能不需要这么麻烦，它们可能会提供“缩放模式”这样的机制，但是你却不能保证这一点。
  * 有限的内存和带宽 – 移动设备所提供的可用内存明显比台式机少得多。因此，在你设计站点时，需要特别小心的考虑那些超大容量的相册图片，以及交互式流媒体视频的应用程序。此外，一些移动浏览器提供了关闭图像显示的选项，但是你也同样不能确定这一点。
  * 有限的排版 – 我靠，你对台式机上那些排版非常痴情？你没有看到移动设备上的表现！虽然这条规则有很多例外情况，但大多数移动设备对字体的选择非常有限，只有一两种（like 1 or 2）。这个限制是由系统或浏览器决定的。
  * 有限的颜色 – 一些移动设备在颜色方面的支持也非常有限。考虑你有多少页面的体验需要依赖于颜色，并确认那些对比色在移动设备上仍然支持。

  这些限制因素，就是导致Mobile Web的体验与PC Web的体验不同之处的真正原因。千万别欺骗自己，觉得自己的网站在移动设备上的用户体验与台式机上会保持一致 – 这纯属YY。当然，你抛开浏览器，千方百计去确认用户体验这一点仍然值得肯定。

  真正的办法，去确保你的网站为移动用户提供一个良好的体验，是测试，测试，再测试！一些Web设计师们已经认识到，除了他们自己的手机、台式机以及游戏机浏览器外，还需要有一大堆移动设备需要准备在手头。
  解决问题的不同方法

  人们普遍意识到，有三种办法可以解决移动开发的问题（已经被Cameron Moll证实了 – 找他的书看看）。可能的话，我建议你试试这三种方式 – 如前所述，在Opera，我们坚持相信One Web的理念 – 但是刚才我也说过，有些情况下这是很难实现的，或者也是没有必要的。下面是这三种方法：

  1. 务必坚持遵循Web标准
  2. 创建一个完全独立的移动网站
  3. 只创建一个站点(One Web)，但是根据浏览它的设备和浏览器情况，添加优化代码。

  现在，让我们开始对这些点逐个讲解。
  坚持遵循Web标准和最佳实践

  一个好网站的基础，是要有一个好的HTML结构，以及美妙的CSS（表现）和JavaScript（行为）。如果你认真地遵循Web标准，大多数移动浏览器至少会很好地解析并至少会基本可用，这是非常有可能的。例如：

  * 一个网站，有良好的HTML结构顺序并在HTML中没有装饰性图片，在移动浏览器的单列模式或移动模式中，会呈现得很有逻辑性。
  * 如果你的表单元素中含有“label”元素，浏览器将把它渲染得更有表单区域的感觉。
  * 如果你给CSS和JavaScript使用了优雅降级/渐进增强技术，浏览器如果不支持、简化、忽略某些属性，这时站点的可用性几率会大大增加。

  如果你花费时间精力去研究的话，在提升移动用户体验方面，还有更多事情可以去做。如果你的目标受众包括大量使用非HTML浏览器（例如支持WAP或 CHTML的某些日本浏览器）用户，那么你可能不得不检测设备并提供适当的内容。
  提供一个完全独立的移动网站

  如前所述，我认为如果可能的话应该尽量避免使用这种方式。你可以做设备检测并自动重定向来避免给用户使用带来麻烦，但是这意味着你不得不维护两套网站。最主要的方法是通过UA嗅探来识别浏览器，或在服务端进行设备功能检测，然后再给用户提供相应的站点。在dev.opera.com，有很多优秀的文章来讲述如何实现 – 查看最后的资源部分。

  但也有例外，对于完全独立的网站来讲 – 你不得不始终考虑用户体验情况。某些类型的浏览设备可能不兼容于特定的网站或者特定的功能。例如，有一个大学校园网，带有部门电话号码的搜索功能，但同时 也包含了一大堆校园历史的网页。如果你想去与某人会面却找不到他们部门时，你大概会想在移动设备上使用搜索功能，但你在外出的时候也不太可能想坐下来阅读 那么多的文字。

  在这种情况下，你可以使用下面提到的一些技巧，来为移动设备提供网站中某个功能的一部分，或者干脆为移动设备创建一套完全独立的网站。你只需检测用 户使用的设备类型并自动提供给他相应的站点，并把这个过程完全公开给用户，但是很多很多人并不愿意这个功能把他们完全限制住，所以如果你要这么做的话，就 需要给用户提供一个指向完整站点的链接，用户可以自行选择是否用它来访问完整站点。

  一句话警告 – 设备检测很容易被滥用。你可能经常看到一个网站的桌面版本非常牛B，而它的移动站点却非常的垃圾。因为开发者只是将移动站点放在一个非常低标准的位置上。 事实上，目标受众的设备水平并不均衡，现在很多的移动浏览器都具有处理完整Web页面的能力了！你应该尽可能地让设备发挥他们最高的处理能力，并且要发挥 移动设备的特别优势，比如基于位置的服务（LBS），还有 tel: 协议 – 在超链接点击时它可以让设备拨打一个电话号码。
  只提供一个网站(One Web)

  进行到这里时，就开始变得有趣了。你可以再次依靠服务端功能检测，但这次是在单一网站的基础上进行优化，而不是重定向到另一个独立网站。有一些手机所支持功能的数据库可以参考，例如WURFL。它是以XML文件的形式开放的，你可以在设计优化内容之前，先通过它来查询设备所支持的功能。你还可以查询移动设备的UA字符串，找出这些设备的其他细节参数，例如是否有摄像头，屏幕尺寸是多少，以及它的语言种类等信息。

  在客户端，你已经得到了为移动设备而优化内容所需的两个条件 – 媒体类型（media types）和媒体查询（media queries）。
  媒体类型(media types)

  就像你知道的那样，你可以指定不同的CSS来实现不同的用途，例如：

  手持类的媒体类型允许你针对移动设备使用优化版的样式（例如精简的布局和排版等）。这是一个被支持得很好的机制，实现起来也很简单，但它确实有它的 缺陷。就像之前所说，它经常被开发者滥用，来给网站提供一个蹩脚的最低标准布局。事实上，OperaMini最近改变了默认类型，把默认使用手持型样式表 （handheld stylesheet）改为屏幕型样式表（screen stylesheet）。OperaMini可以处理大多数完整网站，因此它并不真正需要使用手持型样式表（handheld stylesheet）。如果你乐意，你可以在OperaMini的浏览器选项中手动设置回移动视图。
  媒体查询(media queries)

  媒体查询是CSS3的一个构想，它的用途跟条件注释非常相似 – 你可以把一大堆CSS规则封装嵌入到一个媒体查询中，然后把它应用到你的标记结构中，这一切取决于一个条件，类似“屏幕尺寸是否小于480px？”然后把代码放进去，代码类似这样：

  img {
    margin: 0 0 10px 10px;
    float: right;
  }
  
  @media all and (max-width: 480px) {
    img {
      margin: 10px auto;
      float: none;
      display: block;
    }
  }
  

  你甚至可以使用多个媒体查询，像下面这样：

  body {
    max-width:800px;
    font-family:georgia, serif;
  }
  
  img {
    margin:0 0 10px 10px;
    float:right;
  }
  
  .info {
    position:absolute;
    left:8000px;
  }
  
  @media all and (max-width: 480px) {
    img {
      margin:10px auto;
      float:none;
      display:block;
    }
  }
  
  @media all and (max-width: 240px) {
    img {
      display:none;
    }
    .info {
      position:static;
    }
  }
  

  OK，在这个例子中（源代码点击这里查看），浏览器中的图片在屏幕大于480px时会向右浮动，文本会环绕图片并通过外边距留出一点儿舒服的距离（另有一个信息隐藏在 p 元素中，并命名了一个 class 叫 info – 看看HTML代码）。文本流在一些小屏幕中看起来可能会有些蹩脚，因为那里没有足够的空间来让图片和定量的文本放置在同一行中，所以当屏幕小于480px 时，图片就需要改变一下，让文本不再围绕在它旁边，而是用 display:block 让它们显示在不同行中。等等 – 还有更精彩的！如果屏幕非常小以至于不能有效地展示图片，那就让它们消失，然后让隐藏信息显示在图片那儿，替代那些图片显示文本描述 – 这是一种将信息传达给读者的一种另类技巧，利用它也可以为那些使用屏幕阅读器的盲人用户提供原始文本，以便他们顺利浏览网站。图1展示了三个不同的浏览视 图，这是在那些支持媒体查询的浏览器中（例如Opera 9.5）表现出的不同形式。

  
  图1：例子中三个不同的浏览模式

  听起来挺好，但是有没有不足呢？好吧，目前浏览器对媒体查询的支持程度非常有限。Opera浏览器支持它们，Safari 3也可以（以及其它基于Webkit内核的现代浏览器），但是Firefox 3之前的版本并不支持，IE或其他浏览器也不支持。解决问题的方法之一，是使用媒体类型和媒体查询的组合。这种方法在我的这篇文章中做过解释。这是一种变通方案，但肯定不够理想。这点在将来应该会有所改善。

  摘要总结

  目前就是如此而已。我希望我的移动开发世界之旅会对各位有所帮助。我在这只是抛砖引玉，要想深入学习的话，可以查看下面这些资源。

  资源

  * Mobile web design book, by Cameron Moll
  * Designing and developing mobile web sites in the real world — 一个实例研究 by Brian Suda
  * Server-side capability detection for mobile devices by Brian Suda (包含WURFL, UA字符串等信息)
  * Ajax/JavaScript support in Opera Mini 4, by me
  * Kristian von Streng Hæhre’s Opera Mini request header reference
  * How to serve the right content to mobile browsers, 同样by牛B的me — 包含媒体类型和媒体查询
  * Creating safe media queries that work cross browser
  * Web design with Opera Mobile in mind, 再一次 by me
  * The WURFL homepage
  * The Opera Mobile homepage
  * The Opera Mini homepage

  英文原文: Coding for the Mobile Web
  中文原文: Mobile Web下的编码设计

• 俺遇到WordPress登录死循环-已彻底解决！

  日期：2010.02.06 | 分类：紫枫生活 | 评论数：0

  今天晚上俺遇到WordPress登录死循环的问题。也郁闷一会！后来才发现是路由器的问题，正好今天路由刚换了个新的，灰常的巧哈！于是乎准备将俺的路由器升级了哈，就OK了！

  下面说哈具体的方法哈!

  第一步：

  看自己路由的版本，如下：

  文 件 名： r402mv2.bin
  tftp 服务器 ip： 192.168.1.100
  当前软件版本： 3.3.1 build 070712 rel.33961na
  当前硬件版本： tl-r402系列 100122ba

  第二步：

  下载对应的版本升级文件，如下：

  http://www.tp-link.com.cn/surpport/search.asp?product_name=tl-r402m

  如果该地址失效，可以自己去搜索下，很多的！

  第三步：

  升级路由，如下图：

  

  TP-LINK路由器升级页面

  PS:

  升级的时候一定要按照升级步骤进行操作，特别是要记得关闭防火墙和第三方安全软件，以避造成误伤而升级不成功。

  注意：在升级的时候，你需要打开Tftp，把路径导向你的BIN文件位置 在路由页面中点升级 就可以！

  问题就解决了哈！