it Flies Like Mario – 像Mario一样飞

• GIF、PNG、TIFF最大尺寸上限是300万像素
  也就是说，确保width * height ≤ 3 * 1024 * 1024。
• JPEG二次采样（颜色压缩）后的最大尺寸上限是3200万像素
• canvas元素的最大尺寸上限是3百万像素
  canvas对象的默认宽高是150 x 300像素
• 单个资源文件必须小于10MB
  适用于HTML、CSS、JavaScript、非流格式媒体
• JavaScript执行时间限制在10秒之内。
  如果脚本执行时间超过10秒的话，Safari会在一个随机位置强制停止执行，可能会导致意想不到的后果。
• 一次性打开最多的页面数量是8个（慎用Framesets）
• iPhone OS 1.1.4以下版本中，JavaScript执行时间限制在5秒内，大小限制在10MB内。Canvas元素的限制跟桌面Safari一致。
• iPhone OS 2.2.1以下版本中，所有frames的总数之和需要小于200万像素，也就是说，frames的宽x高x数量≤1024x1024x2。
• iPhone OS 3.0以上版本中，该限制变更为单个的frame上。

ref：Safari Web Content Guide

本文译自quirksmode.org，原作者为Peter-Paul Koch(PPK)。
原文链接：http://www.quirksmode.org/blog/archives/2010/04/mobile_browsers.html， 转载请注明以上信息。

我给目前正在测试的15款移动浏览器做了一个列表。
在当前移动浏览器如此错综复杂、变幻莫测的形势下，这或许会对给你一些启发。

经常有人问我：“我到底该测试哪一个移动浏览器？”，这个问题意味着，你应该搞定哪些设备。现在我来尝试回答这个问题。

一个移动测试环境

在过去的一年内，我非常幸运。沃达丰不仅有大量的移动设备（译者注：PPK于2009年开始在沃达丰担任顾问和培训师的工作），也有一些人士会提供比较靠谱的建议。比如我需要一台非HTC的带轨迹球的Windows Mobile设备，他们通常会告诉我应该去测哪一台机器，以及为什么这样选择的原因。

但并非每一个人都是这样好的情况。所以，干脆地说，这只是我的建议。

iPhone 和 Android

我假设你已经有了一台iPhone或Android手机。用它来测试你的网站（你可能已经这么做了）。看到最牛B和强悍的移动浏览器，你可能会有很多想法和灵感。如果你的站点不准备支持Safari或Android，那么忘了它吧。

如果你没有iPhone或Android，去借一台。作为一个西方世界的Web开发者，至少也应该会认识拥有一台这样的电话、并愿意（偶尔）用它来测试一下东东的人。

Safari iPhone和Android Webkit并不是完全相同的浏览器，但至少他们都是自家人，特别是当你测试中级到高级的CSS或JavaScript时，他们的处理结果可能会一样好。当然，不包括那些小BUGs。

阅读全文 »

前一阵参与了一个基于IPTV的项目，分享一下这次项目的一点收获。
首先来恶补一下IPTV的一些基本概念和介绍吧：

IPTV，全名网络协议电视（Internet Protocol Television），是宽带电视（Broadband TV）的一种。IPTV是用宽带网 络作为介质传送电视信息的一种系统，将广播节目透过宽带上的网际协议向订户传递数码电视服务。由于需要使用互联网，IPTV服务供应商经常会一并提供连接互联网及IP电话等相关服务，也可称为“三重服务”或“三合一服务”（Triple Play）。IPTV是数码电视的一种，因此普通电视机需要配合相应的机顶盒接收频道，也因此供应商通常会向客户同时提供自选影像服务。

上文中所提及的“三重服务”或“三合一服务”，其实就是我们通常所说的“三网融合”，是“物联网”发展中很重要的一步。

好了，基本概念普及到这里，需要了解更多，可以移步百度百科或维基百科等各种百科来查看相关介绍。

你应该已经清楚，IPTV最重要的两个部件是“机顶盒”与“电视机”，机顶盒负责处理用户与IPTV的交互事件、解析网页、处理IP数据和视频流以及视频的解码等功能，相当于PC中的主机；而电视机最主要的作用是显示视频图像，相当于显示器。我们要做的网页，是要经过机顶盒中的浏览器进行解析处理，然后输出给显示器来显示的，所以机顶盒是决定了我们开发过程的关键因素。

其实，机顶盒的软件技术架构，与移动设备有很多相似的地方，因为都具有相似的特性：迷你、便携、特定功能，因此注定了其内嵌的操作系统和软件。在设计和开发之前，我们务必要搞清楚，这些内嵌的操作系统和软件的特性，摸清楚这些，我们才可以有针对性地进行最完整设计和开发。下面是一个相对理想化的前端开发步骤模型：

1. 基本UA探测+研究技术规范白皮书（关键）
2. 指导UI设计
3. 前端开发
4. 兼容性测试+调试

我们可以发现，这个步骤与我们“Mobile WEB前端研发”步骤非常相似。其实，对于一个未知的跨平台的设备领域，我们都可以采取这个步骤来做开发，它可以保证最终开发的结果是最具针对性和兼容性的。因此，第一步的研究阶段是最关键的。

阅读全文 »

移动嘉年华！

• mobyaffiliates：Mobilists 移动嘉年华 217期！

设备动态：

• iPad出货，海量iPad示范影片登上官网 (iPad官网)
• cbinews：山寨iPad燃起战火 厂商达近50家
• iFanr：小众化的 Web OS
• sina：塞班3新平台 诺基亚旗舰N8-00真机曝光
• Admob：Android操作系统平台流量份额将接近iPhone

应用动态：

• Guilhem Ensuque：Adobe应该改变他们的移动战略
• Adobe：对前文的回应与战略辩护 (Adobe移动战略原文)
• imobile：LBS定位服务软件面面看
• cnBeta：QQ for Android 发布
• 163：手机浏览器厂商UCWEB获诺基亚巨额投资

产业动态：

• 物联网时代：电信首办物联网高峰论坛
• cnnic互联网研究：中国物联网-技术研发和产业化先行，应用暂缓
• 移动Labs：关于中国3G用户数的发展趋势

设计：

• iFanr：iPhone 与 Twitter—设计的交集
• iFanr：拇指和触摸的对话——单手触屏手机的大拇指体验
• androidicons：android上的图标设计资源
• noupe：Mobile WEB上的设计技巧和最佳实践

开发：

• IE Mobile：IE Mobile UA字串公布（Windows Phone 7）

  Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0) ;

• FLM：MooTouch – 一个应用于iPhone的新JavaScript框架
  (延伸：jQtouch – iPhone上的另一个JavaScript框架，基于jQuery插件形式)
• 移动Labs：面向三网融合的Web Service系统架构模型

好站推荐：

Expatliving：http://m.expatliving.sg/

介绍：便民生活类的社区站点，聚焦外籍人士在新加坡的生活：购物、餐饮、娱乐、手工艺品等。
特色：这就是之前介绍MooTouch时，其作者设计的移动站点，站点中全面应用MooTouch框架，整站Ajax异步无刷新。几乎可以完全模拟本地App应用程序，他做到了！快用你的iPhone体验一下吧。

MooTouch是一个基于MooTools的新JavaScript框架，它可以将iPhone/iPod Touch上的本地应用程序体验带到Web App上。它是一个非常轻量级、具有高扩展性的框架，将MooTools中的类设计整理为低耦合的模块集合，来处理用户的Touch等交互事件。

下面是这个框架的主要特性：

• 完整的Ajax体验，实时动态内容装载，页面0刷新0转向
• location hash 操作
• 历史记录管理，全面支持浏览器的“后退”“前进”按钮
• 页面渲染时使用Mobile Safari的本地CSS3 GPU加速
• 自动隐藏浏览器地址栏
• 全局事件代理以优化性能
• 其它……

下面是框架核心中的主要功能：

• MooTouch.Clickable：在“onClick”事件执行之前，不再有邪恶的300ms延迟。
• MooTouch.Scrollable：CSS position:fixed不可用已经成为历史。在你需要增加模拟滚动特性的区域，它可以提供给你完全的支持，包括滚动指示、自减速、快速返回边界等特性。
• MooTouch.Swipeable：你可以在任何DOM元素上使用“onSwipe”事件，就像photo gallery那样。
• 其它……

因为基于MooTools的“use-at-will”结构，MooTouch不同于目前其它类似的库。你可以简便地提取你所需要的部分，并用你自己的方式组合使用。同时，也可以使用任何一个已存在的UI框架如iUI、iWebKit、UiUIKit等等配合使用，只需要将MooTouch放在它们的最上面即可控制所有的UI元素。

MooTouch现在仍然处于Alpha测试阶段，将会基于MIT License以开源方式发布。
阅读全文 »