蒋宇捷的专栏

做出好的App无疑是每个产品经理梦寐以求的终极目标，有哪些要点会让应用在iOS平台上成功的脱颖而出呢？我们下面来总结总结。        Delightful - 简洁直观        应用需要简单直观但又有难度和趣味(例如游戏Cut the Rope和美食应用Jamie Oliver)        Innovative – 追求创新        例如游戏flight control，绝对经

本文介绍了一种时尚的网站设计方法，以及如何由浅入深的通过HTML5和浏览器渲染机制来构建高性能的站点。        文中多处涉及浏览器重绘和性能优化的原理，也是《Web滚动性能优化实战》的拓展和延续，难度上属于中级进阶，请在阅读前请先看看这篇文章。        介绍        视差网站最近风靡一时，只需看看下面这些站点：        Old Pulteney Row to the Pol

一、WebWorker介绍        由于Javascript是单线程执行的，在执行过程中浏览器不能执行其它Javascript脚本，UI渲染线程也会被挂起，从而导致浏览器进入僵死状态。使用WebWorker可以将计算过程放入一个新线程里去执行将避免这种情况的出现。这样我们可以同时执行多个JS任务而不会阻塞浏览器，非常适合异步交互和大规模计算，这在以前是很难做到的。        下面一张图形

春节将至，先祝大家新年快乐。我在这段时间内将会抽出时间由浅入深的发表几篇CSS3、HTML5最新的技术文章，涉及原理、实现、应用的几个层面，代表了国外HTML5最新发展的趋势，希望能给大家带来新的启迪。         下面的这篇文章非常简单，是响应式设计的一个具体实现。我希望能带给刚入门的朋友一些思路和帮助。         ……………………………………✄……………………………………

很久前我曾经提到过Web Speech API，现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持，这对Web开发者来说无疑是一个具有里程碑意义的事件，因为我们可以直接在Web App中原生使用语音识别技术，Web应用的新时代将会由此开启。         控制不住激动的心情，下面我会通过示例马上给大家介绍此API的详细信息。         Google专门提供了

HTML5对旧有的安全策略进行了非常多的补充。        一、iframe沙箱        HTML5为iframe元素增加了sandbox属性防止不信任的Web页面执行某些操作，例如访问父页面的DOM、执行脚本、访问本地存储或者本地数据库等等。但是这个安全策略又会带来另外的风险，这很有趣，例如ClickJacking攻击里阻止JavaScript脚本的运行来绕过JavaScript的防御方

HTML5的最好的功能之一WebSocket允许浏览器打开到特定IP目标端口的Socket连接，它提供了基于TCP Socket的全双工双向通信，可以实现消息推送机制，大大减少了服务器和浏览器之间的不必要的通信量。例如可以用它来实现QQ的消息弹窗或者微博的新消息通知，让我们可以更好的实现Web应用。iPhone的消息推送        HTML5限制了Web Socket可以使用的端口，但是，它可

HTML5环境传感器由Sensor API描述和定义，包含了6种常见的传感器类型：        它们分别代表温度（摄氏度）、气压（千帕）、湿度（百分比）、光线（lux ，勒克司）、声音（分贝）、临近（厘米）。        HTML5传感器目前讨论的比较多的是DeviceOrientationEvent运动传感器和方向传感器，而Sensor API的详细内容在国内很少有相关的文章提及。下面我对其

注：我昨天刚发了一篇关于WebRTC的文章，但是WebRTC的变化如此之大，让我不得不再用一篇文章的篇幅从另外一个方面详细阐述它带给我们的变化。Firefox、Opera、Android、iOS平台的广泛支持会让它可以立即落地，实现很多有趣的视频功能和应用。你准备好使用它了吗？        关键词：视频 RTCPeerConnection getUserMedia WebRTC 多媒体

好吧，好久没有聊CSS3了，今天我们来讲讲CSS3的最新特性。         在Chrome最新的动态里，添加了对CSS.supports()方法的支持，而许多关注浏览器发展的朋友也可能已经了解到Firefox和Opera开始支持@supports规则。CSS.supports()和@supports看起来非常相似，它们之间有什么关联，它们的前世今生究竟是怎么一回事呢？         为了应付

前言        迪斯尼《Find Your Way to OZ》这个贴近地气的游戏我在最新一期《程序员》杂志的《从HTML5移动应用现状谈发展趋势》这篇文章里有所提及，它借用了近期上映的《魔境仙踪》电影的设定（设定来自于经典故事《绿野仙踪》，看过这个电影的同学们会深有感触），构建了一个等同的宏大游戏世界。同时迪斯尼又和谷歌合作，把它作为Chrome浏览器性能和HTML5技术的一个show ca

（接上文）桌面游戏通常创建于一个核心的物理引擎。因此，要在3D世界中模拟一个柔软的物体，需要一个完整的物理模拟器，并且建立一种可信的行为。        WebGL和JavaScript还不能奢华到可以运行一个完全成熟的物理模拟器。因此，在这个游戏中我们必须找到一种方式来创建风的效果。        我们在3D模型中为每一个对象嵌入“风敏度”的信息。3D模型的每个顶点有一个“风属性”，指定顶点应该

在工作中，经常需要基于黑盒分析应用的网络请求。例如分析第三方SDK或者应用发出的网络请求，这种时候我们是没有办法基于代码进行debug的，那么我们应该如何来分析网络请求呢？之前有些分析方法需要root手机或者越狱并在手机上安装软件来监视网络请求，这种方式还需要把log信息dump到电脑上才能方便查看，较为不便。下面我来介绍一下利用一些工具，就能够方便分析手机网络请求的方法。        思路很简

我在Chrome的最新动态里提到了Typed Arrays（Typed Array，类型数组）这个概念，可能对很多人来说非常陌生，那么它是什么，又有什么用途呢？之前的问题        Web应用程序变得越来越强大，例如新增了音视频处理、WebSocket等多个功能特性。毫无疑问，如果Javascript能够快速方便的操作原始二进制数据会相当的有用。过去，我们必须要把原始数据当作字符串来处理，并且

前言：Chirp在iPhone上掀起了有声传输文件的序幕，我们再也不需要彩信、蓝牙配对、IM来传送数据。它通过“叽叽喳喳”的小鸟叫声来分享数据，简单有趣，而且可以快速的实现一对多的分享。         此外支付宝曾经试推过“声波支付”，利用手机发送超声波至终端作为交易密码进一步完成交易。然而支付宝的技术目前只是使用在了支付上，而需要可接受声波支付的特定售货机方可使用。        《Advan

前言：        LinkedIn 5月2日发布了新的iPad版本，它基于HTML5制作，在体验和界面上非常出色，在使用中可以发现它和原生应用基本没有任何差别。        关于这个版本，有两篇文章非常有价值，深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。        第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容：Link

我的前言        HTML5的API体系是重要知识，但是如何写出更高效的Web App对于从程序员进阶为高级程序员来说更为重要。技很重要，但是容易学会，术才是茫茫人海中鹤立鸡群，安生立命之本。        码农们容易吗？是的，我们必须要不断努力和学习才能进化为高级码农乃至顶级码农。        Web App的性能优化非常重要，之前我有过一篇LinkedIn的相关文章《用HTML5实现i

1、你的移动App利用了手机的哪些特性？2、你们是否有用移动的角度和思维来考虑产品形态？还是简单的把Web照搬到手机上？3、用户有什么特殊的动力去安装你们的App？4、用户是否能很好的上手和使用你们的App？5、你们的App有没有很好的运营，让用户知道你们的特点？

写在前面的话：对于移动Web App来说，响应式设计相当的有价值，现在大家也正在逐渐的了解它。但是我认为它也有自己适用的范围，需要根据具体的场景来选择使用。正好最近业界对此也有一些声音和反思传递，例如我之前的一篇博文《用HTML5实现iPad应用无限平滑滚动》里就有提及。现在我翻译一篇相关文章，大家可以对此有更多的了解和判断。-- 宇捷媒介查询很伟大，但是...        对于Web开发人员来

Chrome 7月9日刚为Chrome打包的应用提供了强大的访问Google服务例如Google统计、GoogleAPI和Google 钱包的能力，除此之外，还能够使用系统层面的服务包括蓝牙和原生应用通信。        打包应用可以在Mac、Linux和Windows上脱离Chrome浏览器独立运行。可以把它们看做用传统Web技术例如HTML、CSS和JS开发的单机应用，同时它们看起来和用起来也

HTML5里有许多协议、模式和API，可能成为攻击者的攻击途径。         一、registerProtocolHandler：信息泄漏        HTML5允许某些协议和schema注册为新的特性。例如下面的语句可以注册一个email handler。navigator.registerProtocolHandler(“mailto”,“http://www.f.com/?uri=%s

下面我们要讲到一类的HTML5安全问题，也就是劫持的问题。         一、ClickJacking-点击劫持        这种攻击方式正变得越来越普遍。被攻击的页面作为iframe，用Mask的方式设置为透明放在上层，恶意代码偷偷地放在后面的页面中，使得一个页面看起来似乎是安全的，然后诱骗用户点击网页上的内容，达到窃取用户信息或者劫持用户操作的目的。下图中，欺诈的页面放置在下层，被攻击的银

Goole在Chrome的最新beta版本中添加了关键的WebRTC框架，以此来支持第三方开发者创建视频聊天程序，而不需要下载任何插件。这项技术可能有一天会在Chrome里支持原生的Goole Hangouts视频群聊。        Google的工程师在Chromium的博客上写到：        Chrome现在嵌入了PeerConnectionAPI，允许开发者创建实时的音视频Web Ap

著名移动云平台公司Appcelerator刚发布了2012年Q1移动开发者调查报告，其中值得关注的几个地方为：        1、整个报告的关键句为“The Google and FacebookBattle Moves to Mobile While HTML5 Gains Speed”，意思为当HTML5开始加速的时候，Google和Facebook的战场已经转移到了移送设备上。

在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。1、  视频流        HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的

今天百度开发者大会，移动互联网分论坛，我的主题演讲《用HTML5新特性开发移动App》PPT分享如下。        完整PPT可在Slideshare观看，或者在百度开放云平台上下载到。

译者注：这篇文章涉及图像处理，非常有趣，同时可以用来构建云加端的移动拍照App。教程细节程序 ：PHP/ImageMagick难度：中级预计完成时间：45分钟你将创建的最终作品下载源文件        在本教程中，我将演示如何用PHP和ImageMagick创建像Instagram一样效果的老照片。是的，你可以用PHP和ImageMagick来完成这件事，而且这只是最简单的事情！我们创建数码老照片

随着移动站点的发展和普及，毫无疑问CodeCanyon的移动应用集合有了巨大的增长。从iPhone到Android，开发者已经贡献了一些令人惊艳的移动站点开发工具。 这里快速列出了一些市场上所销售的顶级移动应用和工具。你可以试用它们并为你下一个移动站点获得灵感。1、创建自己的应用程序（无需任何编程技能）        不需编码就能创建你自己的i​​Phone/ iPod Touch应用！让客户在苹

在《做移动互联网App，你的测试用例足够吗》一文中，我们谈到了Android 1.5和1.6兼容性和2.0版本以后有很多不一致的地方，开发时需要单独进行处理，这会耗费开发者相当大的精力，我们在开发Android实际应用时应该如何制定App的支持策略呢？        下面我们谈谈应该如何分析来制定自己App的支持策略。1、  了解Android最新版本分布情况        在Android de

写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。        文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Quer

我在面试测试工程师时，经常问到的一个问题是“给出Word另存为这个功能的测试用例”。除开基本的测试用例外，考虑到各种异常情况，例如内存已满、硬盘空间不足是非常重要的。但是针对移动互联网App来说，情况还要复杂的多。    一个重要原则是：测试你最终要发布给用户的App版本。

在微博认证方式里，基本的OAuth认证是必须要调整到跳转到第三方页面上进行授权的，例如下面的例子：    1、从http://open.weibo.com/wiki/index.php/SDK#Android下载SDK包。    2、在AndroidExample/src

支持的浏览器：难度：中等注意：本文讨论的API尚未最终确定，仍在不断变化。请在自己的项目中谨慎使用。介绍        音频在很大程度上使得多媒体体验非常引人注目。如果你曾经尝试在关闭声音的情况下看电影，你就很可能已经注意到了这一点。        游戏也不例外！我最喜爱的视频游戏的回忆里包含了音乐和声效。在二十年后的今天，大多情况下，当玩我最爱的游戏时，我仍然不能把“塞尔达”里近藤浩二的乐曲和马

本文可视为《用HTML5实现人脸识别》的进阶，在人脸识别的基础上，我们将使用纯Javascript来实现如下的功能：识别和标注人脸以及五官对人脸进行美容        从本文的内容中，你将意识到，Javascript能做的，能实现的，远远比你想象的多。演示一、实现1、人脸识别        Face.com有包括检测、识别在内的多个API接口，根据《用HTML5实现人脸识别》一文，我们已经可以实现

在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：1、  deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。2、  deviceMotion：封装了运动传感器数据的事件，可以获取手机运

当你的老板或者客户想要一个iPhone应用的时候，你会说些什么？        我希望你不要说“我们可以这样做”。相反，我希望你问问“为什么”，更重要的是“你想要它做什么？”        往往客户和老板并不是真的确定自己想要什么，或者为什么想要它。他们想要一个App的原因只是因为有人告诉他们移动互联网非常新潮，他们应该有一个移动App。我们需要挖掘其中更深的原因。        通常的答案是，他

移动App和传统互联网有很多不同，在移动App的领域中，经常有一些常见的惯性思维，实际上并不一定正确。在此我抛砖引玉，就一些误区聊聊自己的经验。用户使用时长下降，一定是应用出现了问题        在许多移动统计系统里，有用户平均每次使用时长这一数据。如果你发现这个数据有所下降，就认为这一定是坏事，这种想法可能有欠全面。        事实上，你需要考虑你最近是否对软件进行了优化，因为有一种可能是

前言：像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及，在百度或者Google上搜索CORS，搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍，让我等前端同学情何以堪（对比起来，用Google搜到的国外文章，基本都是跨域资源共享的介绍，说明了前端技术在国内外环境和发展的巨大差距）。        我之前《用HTML5实现人脸识别》这篇文章中提到了“Face.com实现

前言：HTML5出现后，网络安全更加受到广泛的关注。Web对于网络安全有哪些改进？我们如何来面对越来越危险的网络欺诈和攻击？下面的文章谈到了W3C对于这个问题的最新解决方案。未来有机会的话，我会针对XSS、P3P、同源策略、CORS（跨域资源共享）和CSP进行关于HTML5内容安全的现场分享。        ------------------------华丽的分界线        注意：本文所讨

在3月23日的百度开发者大会上，百度推出了开放云计算平台来帮助开发者构建分布式网络应用。它包括云存储、云环境、关系服务、消息服务等组成部分，开发者可以利用云平台方便的编写分布式网络应用，无需考虑集群扩容、负载均衡等问题。         百度开放云平台的优点包括：1、  容量大：云存储支持最高2T的单文件数据容量；个人云存储用户存储初始空间