摘要:我在《用HTML5新特性开发移动Web App》中全面提到了移动Web App的各种优点,包括:云端升级跨平台代码复用结合强大的云计算平台的能力绕过App Store 下面的这篇文章也提供了对于各种类型应用的详细分析。 当你开始一个新的移动项目时,选择采用本地(Native),混合(Hybrid)或者Web App哪种方案可以说是艰巨的任务。J Schwan全面分析了每种解决方案的优点和缺点。移动Web的最大优势是跨平台。你只需要开发一次,这样成本更小。移动Web优点:跨平台开放标准没有私有的编程语言更容易重用现有技术不依赖应用商店移动Web缺点:断网时不能保持状态-注:HTM...
阅读全文
摘要:写在前面的话:对于移动Web App来说,响应式设计相当的有价值,现在大家也正在逐渐的了解它。但是我认为它也有自己适用的范围,需要根据具体的场景来选择使用。正好最近业界对此也有一些声音和反思传递,例如我之前的一篇博文《用HTML5实现iPad应用无限平滑滚动》里就有提及。现在我翻译一篇相关文章,大家可以对此有更多的了解和判断。-- 宇捷媒介查询很伟大,但是... 对于Web开发人员来说,如果要通过对样式表进行微调来为不同尺寸设备的用户提供更好的体验,媒介查询(Media Queries)非常棒。媒介查询实质上可以根据屏幕的尺寸来自定义网站的CSS。在你深入这篇文章之前,可以更多的...
阅读全文
摘要:前言: LinkedIn 5月2日发布了新的iPad版本,它基于HTML5制作,在体验和界面上非常出色,在使用中可以发现它和原生应用基本没有任何差别。 关于这个版本,有两篇文章非常有价值,深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。 第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容:LinkedIn and themobile web LinkedIn开始越来越多的采用HTML5来开发移动Web应用。Now, with more Node.js 大量使用了node.js。“Responsive design...
阅读全文
摘要:在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。2、 deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能,在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientati...
阅读全文
摘要:注:今天HTML5小组沙龙《论道HTML5》分享时有朋友问到一个问题,getUserMedia是否会支持人脸识别,我当时的答案是这应该是应用来实现的功能,而不是规范要完成的工作。而我之前在网上看到过一篇关于getUserMedia和人脸识别的相关文章,觉得很有趣,正好趁这个机会分享给大家。 译自:http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia 转载请注明出处:蒋宇捷的博客 “现代Web”不断发展出不少有趣的API,但你并不会在大多数项目中使用到所有的内容。例...
阅读全文
摘要:我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况。的确,因为HTML5内容庞大,特性众多,而浏览器的支持情况又混杂不一,随时都有可能变化,所以了解起来比较困难。在这里,我汇总了一些常用的网站供前端开发者了解HTML5浏览器的支持情况。浏览器支持情况统计 When Can IUse:图表经常更新,展示了HTML5、CSS3、SVG等浏览器的支持情况。在这里可以了解到很多新知识,例如Firefox和Opera支持PNG动画;另外重要的一点是可以了解到各浏览器是否支持某个HTML特性以及准备什么时候支持。 HTML5 Readiness:看起来很酷,但是信息较少。 Mobile...
阅读全文
摘要:App Annie:http://www.appannie.com。通过此网站,可以查看:1、 App每日排名,包括App Store和Android。App Store排名Android市场排名2、 App排名历史3、 推荐记录 另外国外还有不少类似的网站,例如http://www.applyzer.com/等。
阅读全文
摘要:我在Chrome的最新动态里提到了Typed Arrays(Typed Array,类型数组)这个概念,可能对很多人来说非常陌生,那么它是什么,又有什么用途呢?之前的问题 Web应用程序变得越来越强大,例如新增了音视频处理、WebSocket等多个功能特性。毫无疑问,如果Javascript能够快速方便的操作原始二进制数据会相当的有用。过去,我们必须要把原始数据当作字符串来处理,并且使用charCodeAt方法来从数据缓冲区中读取字节。 但是这种方法需要多次转换数据(尤其在二进制数据不是字节格式的数据时,例如32位整数或者浮点数),所以非常慢而且容易出错。 Javascri...
阅读全文
摘要:译者注:这篇文章涉及图像处理,非常有趣,同时可以用来构建云加端的移动拍照App。教程细节程序:PHP/ImageMagick难度:中级预计完成时间:45分钟你将创建的最终作品下载源文件 在本教程中,我将演示如何用PHP和ImageMagick创建像Instagram一样效果的老照片。是的,你可以用PHP和ImageMagick来完成这件事,而且这只是最简单的事情!我们创建数码老照片,然后让它变得很酷 曾几何时 - 22年以前(在PHP出现5年前)ImageMagick诞生了。从那时起,它已经发展成为一个独立的软件平台来创建、编辑、生成或者转换光栅图像(支持超过100种格式!)。...
阅读全文
摘要:今天百度开发者大会,移动互联网分论坛,我的主题演讲《用HTML5新特性开发移动App》PPT分享如下。 完整PPT可在Slideshare观看,或者在百度开放云平台上下载到。
阅读全文
摘要:著名移动云平台公司Appcelerator刚发布了2012年Q1移动开发者调查报告,其中值得关注的几个地方为: 1、整个报告的关键句为“The Google and FacebookBattle Moves to Mobile While HTML5 Gains Speed”,意思为当HTML5开始加速的时候,Google和Facebook的战场已经转移到了移送设备上。 2、 报告中对比了Native App、Hybrid App和Web App三种形式的App。 3、 HTML5 Mobile Web已经上升为开发者最关注的开发平台第四位,远高于WP7、Symbian等平...
阅读全文
摘要:在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。1、 视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问,用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签,并将从摄像头获得视频作为这个标签的输入来源(请注意目前仅Chrome和Opera支持getUserMedia。补充:请使用Opera支持HTML5的新版本,如果是Chrome,版本需为Chrome 18.0.1008+,并使用about:...
阅读全文
摘要:在HTML5中,Device API相关内容众多,而且结构比较复杂,内容有所重叠,大家在使用时可能会遇到许多问题,下面我针对这些问题谈一下个人的理解。1、The Media CaptureAPI VS System Information API,两者都可以访问摄像头和话筒,有什么区别? 背景:The Media Capture API定义了一个高级别的API来访问设备的摄像头和话筒,SystemInformation API的输入设备展示了系统的输入设备,例如鼠标、键盘、摄像头和话筒。 答案:The Media CaptureAPI定义的API提供了对设备的音频、图像和...
阅读全文
摘要:随着移动站点的发展和普及,毫无疑问CodeCanyon的移动应用集合有了巨大的增长。从iPhone到Android,开发者已经贡献了一些令人惊艳的移动站点开发工具。这里快速列出了一些市场上所销售的顶级移动应用和工具。你可以试用它们并为你下一个移动站点获得灵感。1、创建自己的应用程序(无需任何编程技能) 不需编码就能创建你自己的iPhone/ iPod Touch应用!让客户在苹果AppStore找到你并且挖掘你沟通的潜力。2、DOLPHIN- XML的iPad / iPhone幻灯片和电子书模板 Dolphin,XML驱动的App模板,兼容iPad和iPhone,拥有...
阅读全文
摘要:在《做移动互联网App,你的测试用例足够吗》一文中,我们谈到了Android 1.5和1.6兼容性和2.0版本以后有很多不一致的地方,开发时需要单独进行处理,这会耗费开发者相当大的精力,我们在开发Android实际应用时应该如何制定App的支持策略呢? 下面我们谈谈应该如何分析来制定自己App的支持策略。1、 了解Android最新版本分布情况 在Android developer上的资源页面里,Google会提供最新的Android版本分布情况。例如下面是最近2月1日的数据。从中可以了解到Android 1.5的分布比例为0.6%,而Android 1.6的分布比例为1.0%...
阅读全文
摘要:1、Webkit内核这次又远远走在了前面。开源的Chromium和每日构建的力量是无穷的。2、Firefox、Opera等浏览器不久之后将会马上跟进,IE也一样。说到IE,其实IE是最早提出和支持类似滤镜效果的浏览器,早在IE 5.5的时代(还记得国悼日全灰色的网站是如何快捷实现的吗?),只是它糟透了的名声让人忘记了它的一切好处。Whatever,这次时光轮回又把一个强大和统一的规范带给了我们。3、CSS3的快捷滤镜使用起来相当方便,也很强大。参见演示页面(请用Chrome的最新版本观看)。4、《遇见CSS3滤镜》文中介绍的滤镜还不足以实现更加复杂的效果,例如Instagram的Poprock
阅读全文
摘要:写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合,来进行多种分辨率适配的例子。 文中提到的响应式网页设计(Responsive web design)是一种现代网页设计方法,基于CSS3的媒介查询(Media Query)特性使得网页适应不同设备,即根据设备的分辨率和缩放自动重新布局。 ----------- 译自:http://webdesignerwall.com/tutorials/responsi...
阅读全文
摘要:也许有的开发者觉得在Android开发中用户界面设计和实现简陋而麻烦,缺乏有效的帮助和支持。Android-ui-utils开源项目包含了一系列工具,帮助我们更好的设计和开发Android用户界面。项目主页为http://code.google.com/p/android-ui-utils/。它主要包含以下几个主要工具:一、Android Asset Studio 这是一个基于网页的工具,可以帮助用户生成Android的图像资源。地址为:http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html。An...
阅读全文
摘要:我在面试测试工程师时,经常问到的一个问题是“给出Word另存为这个功能的测试用例”。除开基本的测试用例外,考虑到各种异常情况,例如内存已满、硬盘空间不足是非常重要的。但是针对移动互联网App来说,情况还要复杂的多。 一个重要原则是:测试你最终要发布给用户的App版本。 可能每日构建、每日测试的理念已经深入人心,我们很多时候测试的只是App的开发和Debug版本,而不是最终的Release版本。在打包最终的Release版本时,我们一般还要加上数字签名,或者再加上代码混淆。那么最终的发布版本和Debug版本肯定有不一致的地方。我们iPhone的App曾经使用过一个第三方开源库,在Debug...
阅读全文
摘要:在微博认证方式里,基本的OAuth认证是必须要调整到跳转到第三方页面上进行授权的,例如下面的例子: 1、从http://open.weibo.com/wiki/index.php/SDK#Android下载SDK包。 2、在AndroidExample/src/weibo4android/Weibo.java中填入App key和App Secret。public class Weibo extends WeiboSupport implements java.io.Serializable { public static String CONSUMER_KEY = "4119...
阅读全文