中文 » Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs Mon, 28 May 2012 13:40:23 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 从人人网客户端看Win8 Metro设计精髓 http://software.intel.com/zh-cn/blogs/2012/05/17/win8-metro/ http://software.intel.com/zh-cn/blogs/2012/05/17/win8-metro/#comments Thu, 17 May 2012 08:03:37 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/05/17/win8-metro/ 之前也发了一系列关于Win8的博客，今天给大家分享的不是Win8本身，而是Win8 Metro的应用。Win8 的极简主义设计理念被很多人批评做出来的东西太粗糙，不好看，甚至记得一度非常火的一个帖子，详细对比Win8和iOS在各个界面的美观度。经过这篇博客给大家分享的内容，我想会改变很多人的看法。

坦白讲，作为一个学习了四年专业交互和界面设计本科课程的我，看到人人网Win8的Metro设计，也被深深地惊艳到了。惊艳到的不仅仅是一个一个界面，同样还有其优秀的交互设计。鉴于在博客中无法让大家感受到交互设计的部分。我就给大家列出主要界面的UI设计，配上描述的交互方式，供大家尝鲜。

郑重申明：本文仅供参考，转载请注明出处，其中涉及部分个人隐私，请勿用于其他目的。

1. 新鲜事

最左边是新鲜事，极简主义发挥到极致，背景渐变色块，优雅的微软Segoe字体，有图片的区域较大，直接显示图片，文字区域较小，配以不同颜色的色块，搭配非常简洁和干净。从未发现微软Segoe字体这么漂亮过。注意背景色块的渐变区域，如果是纯蓝色，会显得很呆板，加上一点点的渐变，和右边30%的分隔，将整个画面激活。

2. 我的照片

我的照片和最近来访在新鲜事右边，直接滑动即可看到这部分内容。每个图片会动态变化。请注意看我的照片区域的分栏设计，设计得非常精巧，中间加以宽度适中的分隔，是否想起了Van der Rohe 的名言"less is more" 。最右边的竖条照片刚好显示一张全身照，不知是巧合还是有图片识别算法进行优化排列的。

3. 最近来访

继续向右推动，就会出现这幅界面，这里面的联系人会像来回翻动，可惜无法动态展示。

4. 个人主页

依然只有色块区域，文字和图片，组成了个人主页区域。上端三个字的字体和颜色搭配得非常漂亮。依次点击可以跳到对应的界面。这边我想很多网友会拿和iOs相对比，iOs的设计理念，一般会放个Button在这里，各有各的好处，但是我想说人人网这里的设计真的很惊艳。

5. 我

点击我可以看到详细信息。在这个页面可以仔细看出背景设计的巧妙之处，仔细欣赏这个背景一会吧，真的很棒。我想这就是教科书上面说的"简约不简单"吧。

6. 浏览图片

浏览图片的界面，在前端的这个图片可以随意拖动，当拖到边框外的时候，就回到后端的页面。交互很好。这张图片来自马蜂窝的，应该不存在个人隐私的问题，大家尽可多多欣赏。哈哈。

7. 个人新鲜事

再给大家详细欣赏一下个人新鲜事页面。

8. 快速回复

快速回复非常方便。

9. 我的日志

我的日子页面，大家是否看到了本人去年9月16日发的日志？哈哈，这也算这页UI的亮点吧。

10. 我的好友页面

11. 快速分享@页面

12. 总结

已经无法用言语表达我对这个设计的喜爱了。如果你还在怀疑Windows8设计师Sam在 如何重塑信仰 中对于Win8的期待和描述，我想，这篇博客是最好的答案。

]]> http://software.intel.com/zh-cn/blogs/2012/05/17/win8-metro/feed/ 0 Metro Web应用开发中页面通信问题解决方法 http://software.intel.com/zh-cn/blogs/2012/05/15/metro-web/ http://software.intel.com/zh-cn/blogs/2012/05/15/metro-web/#comments Tue, 15 May 2012 12:20:13 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/05/15/metro-web/ 最近在开发Win8应用，遇到Win8 native context和web context 通信的问题，这里将相应的方法分析一下。Win8的介绍和详细信息可以在MSDN上面获得，也可以参考本人介绍开发者预览版时的系列博客

Win8 应用开发介绍（一） Win8新特性\
Win8 应用开发介绍（二） Win8应用为王\
Win8 应用开发介绍（三） Win8开发者工具\
Win8 应用开发介绍（四） Win8应用开发步骤\
Win8 应用开发介绍（五） Win8硬件支持和安全性\
Win8 应用开发介绍（六） Win8伴你随行\

1. 问题描述

Win8可是使用HTML, JavaScript方式来开发Metro Style App。那么传统的HTML网页中，加载web端的JavaScript文件采用的代码方式仍然可以使用吗？如：

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0></script>

答案是不可以，因为处于安全考虑，Win8不允许在开发Web Metro应用的时候不允许在Local context中加载一个remote URL。及即使把这个文件下载下来放在本地也是不可以的，因为它会操作HTML页面中的DOM。

在编译的时候会报错。

2.解决方法

将需要加载的页面放在Local Context的iFrame中。这样当Metro应用在运行的时候，iFrame中的页面其实可以理解为运行在Metro IE浏览器中，所以不存在Local Context不允许加载Remote URL的问题。

代码参考如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024, height=768" />
    <title>WinWebApp1</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <script src="/winjs/js/ui.js"></script>
    <script src="/winjs/js/controls.js"></script>
    <!-- WinWebApp1 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <header role="banner" aria-label="Header content">
        <div class="titleArea">
            <h1 class="pageTitle win-title" role="button" aria-label="Groups" tabindex="0">
                Metro Map App</h1>
        </div>
    </header>
    <div>
      <iframe id="mapIframe" src="file:///****.html" width="1280px" height="800px"></iframe>
    </div>
</body>
</html>

src=file:///****.html 或者src=http://****.html 是需要加载web context 的页面，在相应的html文件中可以自由加载remote URL的内容。

在页面中的关系图如下：

通信

现在的问题出现了，Web Context如何和Local Context通信了。Win8 IE全面支持了HTML5，在HTML5中可以使用HTML5 postMessage method在不通的页面中进行通信。

假设我们在Local Context中新建一个button，代码如下：

<button onclick="ZoomOut();">Zoom Out</button>

在JavaScript中，添加ZoomOut函数：

<script>
function ZoomOut(dx, dy) {
    var xMsg = { method: 'zoomout' };
    mapIframe.postMessage( “ ***** Post your message ”);
}
</script>

在Web Context中，添加receiveMessage(event) 参考代码如下：

function receiveMessage(event) {
  switch (event.data.method) {

	......

    case 'zoomout':
      var currentZoom = map.getZoom();
      map.setView({ zoom: currentZoom - 1 });
      break;
  }
}

本篇完。
参考文章：http://alastaira.wordpress.com/2011/09/26/creating-a-windows-8-metro-slippy-map-application/

]]> http://software.intel.com/zh-cn/blogs/2012/05/15/metro-web/feed/ 0 安装 Win 8 双系统 硬盘AHCI模式不兼容问题 解决方法 http://software.intel.com/zh-cn/blogs/2012/05/14/win-8-ahci/ http://software.intel.com/zh-cn/blogs/2012/05/14/win-8-ahci/#comments Mon, 14 May 2012 10:22:10 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/05/14/win-8-ahci/ 网上看到很多帖子说Win8双系统安装时候出现硬盘AHCI模式不兼容的问题，每次Win7和Win8切换时还得去BIOS切换硬盘IDE模式和AHCI模式，非常不方便。在此提供一个采用VHD方式的完美解决方案。

1. 安装硬件配置

安装机器：超级本（Ultrabook）Acer S3-951-2464G52iss

配置：

屏幕尺寸：13.3英寸 1366x768

CPU型号：Intel 酷睿i5 2467M

CPU主频：1.6GHz

内存容量：4GB DDR3 1333MHz

硬盘容量：20GB+500GB SDD+5400转，SATA

显卡芯片：Intel GMA HD 3000

操作系统：Windows 7 Home Premium 64bit（...

摄像头：集成130万像素摄像头

光驱类型：无内置光驱

无线网卡：支持802.11b/g/n无线协议

笔记本重量：1.35Kg

蓝牙：支持，蓝牙4.0模块

2. 安装Win7

部分Win7的版本安装时提示找不到硬盘，这时进入BIOS，将硬盘加载方式设为IDE兼容模式，然后安装Win7。安装步骤这里不再叙述。

安装完成之后，在注册列表里面找到HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\services\msahci 下的 start ，把3改为0；然后重启，打开bios中的ahci 选择；保存退出。开机后系统自动安装AHCI驱动后，再次重启，即可。

3. 配置VHD

安装好AHCI驱动之后，右击我的电脑，管理 -> 磁盘管理，选择菜单栏 Action -> Create VHD， 然后按照步骤一路next即可，建议大小设置为60GB以上，以备足够空间安装开发工具。

创建VHD时间非常漫长，大约需要15-20分钟，创建完成之后，在磁盘管理中会看到disk 1，右击disk 1，选择初始化，初始化完成后，右击右边区域创建新加卷，然后一路next，并快速格式化。建议选择NTFS格式。

4. 安装Win8

接下来的过程就是从U盘或者光盘启动安装Win8，到选择安装硬盘的时候选择我们之前创建的VHD disk 1即可。之后的安装过程就不再叙述了。

5. 启动引导

安装好Win8之后，Win8会自动接管启动引导项。这里建议各位网友将启动引导项改为Win7的，出于安全和稳定的考虑。改回Win7 的方法就是 启动到选择系统页面，点击最下面更改默认启动方式，将默认启动方式改为Win7，则Win7会接管启动引导项。

6. 总结

尤其最新的笔记本基本都是AHCI方式的硬盘，在安装双系统的过程中经常碰到找不到硬盘等问题。安装以上五步安装即可完美解决上述问题， 保证双系统都在AHCI方式下面运行，保持电脑硬盘高效运行。

注意点：

1. 第二步中，以下步骤和第三步不能颠倒，否则安装的Win8只能在IDE的方式下工作：

安装完成之后，在注册列表里面找到HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\services\msahci 下的 start ，把3改为0；然后重启，打开bios中的ahci 选择；保存退出。开机后系统自动安装AHCI驱动后，再次重启，即可。

2. 强烈建议在第五步中，设置为Win7接管启动项目。Win8接管启动项，如果电脑有任何小症状，会带来不稳定性。

]]> http://software.intel.com/zh-cn/blogs/2012/05/14/win-8-ahci/feed/ 0 移动Web应用程序开发 高性能JavaScript篇 (三) JavaScript 加载解析和部署 http://software.intel.com/zh-cn/blogs/2012/05/10/web-javascript-javascript-3/ http://software.intel.com/zh-cn/blogs/2012/05/10/web-javascript-javascript-3/#comments Thu, 10 May 2012 15:53:27 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/05/10/web-javascript-javascript-3/ 介绍 

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。博文也分为三个大部分：

1. 众望所归的HTML5将主要介绍HTML5的前世今生，主要功能和API以及相关Demo，Demo的代码都可以在文章附件中下载到；

2. 高性能JavaScript将主要介绍如何让JavaScript更流畅，JavaScript debug和分析工具，可以说，没有JavaScript就不可能有互联网的今天，更不可能有移动互联网的明天，编写高性能的JavaScript至关重要；

3. 变化万千的CSS3将主要介绍如今异常强大的CSS3，结合HTML5编写动态的Web应用。熟练使用异常Fashion & Cool & 炫的CSS3将使Web应用增色不少。

本篇是高性能JavaScript介绍的第三篇，将给大家结合实例例子及分析工具介绍在加载JavaScript代码时，如何编程可以让Web应用或者网页更加高效。

相关文章 

移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript 性能瓶颈

移动Web应用程序开发 高性能JavaScript篇 (二) JavaScript 性能分析工具

加载JavaScript

当Browser在遇到<script>标签的时候，整个页面会因为脚本解析、运行而出现等待，不论实际load的JavaScript代码是内联的还是包含在不相干的外部文件中。页面会因为JavaScript文件的下载，解析而停止，等待脚本完成了才能继续。所以对比以下两段代码看谁能高效：

代码片段一

<html>
	<head>
		<title>Script Example</title>
		<-- Example of inefficient script positioning -->
		<script type="text/javascript" src="file1.js"></script>
		<script type="text/javascript" src="file2.js"></script>
		<script type="text/javascript" src="file3.js"></script>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<p>Hello world!</p>
	</body>
</html>

代码片段二

<html>
	<head>
		<title>Script Example</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<p>Hello world!</p>
		<-- Example of recommend script positioning -->
		<script type="text/javascript" src="file1.js"></script>
		<script type="text/javascript" src="file2.js"></script>
		<script type="text/javascript" src="file3.js"></script>
	</body>
</html>

很显然，代码片段二更高效。因为页面显示部分和JavaScript脚本没有直接的关系，所以完全可以先把界面渲染了再去load脚本。三个JS脚本加载时间我们可以从Chrome分析工具中获得，如下图所示：

将脚本成组加载

由于每个<script>标签在下载时都会阻塞页面解析的过程，所以限制页面<script>总数也可以改善性能。所以成组加载JavaScript脚本可以提升页面整体性能，这个规则不仅对内联脚本有效，对外部脚本同样适用。

原因是在于每个HTTP 请求都会产生额外的性能负担，下载一个100KB的脚本远比下载4个25KB的脚本要快。

下面我们用两个demo来证明一下：demo源代码可在本文结尾处下载。

代码片段一：

<html>
	<head>
		<title>Script Example</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<p>Hello world!</p>
		<-- Example of not recommended script positioning -->
		<script type="text/javascript" src="
		http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js">
		</script>
		<script type="text/javascript" src="
		http://yui.yahooapis.com/combo?2.7.0/build/event/event-min.js ">
		</script>
	</body>

代码片段二：

<html>
	<head>
		<title>Script Example</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<p>Hello world!</p>
		<-- Example of recommended script positioning -->
		<script type="text/javascript" src="

http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&

		2.7.0/build/event/event-min.js "></script>
	</body>

两段代码运行后，分别用Chrome开发者工具里面的TimeLine进行分析结果如下图：代码片段二要更加高效。

动态加载脚本

文件对象模型（DOM）允许用户使用JavaScript创建HTML文档中几乎全部的元素和内容。<script>元素也不例外。所以，使用DOM可以动态的在JavaScript动创建，移动，删除脚本文件，这样可以比较JavaScript在加载时对UI页面的阻塞。

参见代码片段：

<script >
	var script = document.createElement("script")
	script.type = "text/javascript";
	//Firefox, Opera, Chrome, Safari 3+
	script.onload = function(){
		alert("Script loaded!");
	};
	script.src = "file1.js";
	document.getElementsByTagName("head")[0].appendChild(script);
</script>

运行后使用TimeLine分析如下图所示：可以看出JavaScript的加载并没有阻塞UI页面。

XHR脚本

另外一种非阻塞方式加载脚本的方法就是将XMLHttpRequest（XHR）对象加入到页面中。这种方式首先需要创建一个XHR对象，然后下载JavaScript文件，再使用一个动态的<script>元素将JavaScript代码加入到页面里面。

具体参加代码示例：

var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.text = xhr.responseText;
	document.body.appendChild(script);
        }
    }
};
xhr.send(null);

部署JavaScript

为了让客户端Web应用更加高效和便捷，不仅仅在客户端编程时可以高效地使用JavaScript，同样在Server端可以通过以下途径来使Web页面的加载更高快速。

1. 尽可能地合并JavaScript文件，降低HTTP请求数量

2. 压缩JavaScript文件，缩小下载文件的大小，可以使用gzip的方式进行压缩。

3. 通过设定合适的HTTP 回复头文件来使客户端缓存一些大的JavaScript文件。一旦脚本被缓存，则用户下次打开时，可以显著降低加下载和解析时间。

4. 对于服务范围很广的公司，可以考虑使用CDN（Content Delivery Network）来部署JavaScript文件。

源代码下载地址： 下载

参考文章：High performance JavaScript O'Reilly Yahoo Press

在下一篇文章中将给大家介绍在JavaScript编程的过程中，如何通过一些编程技巧来提升Web应用的性能，缩短其处理时间。

相关文章

移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript 性能瓶颈

移动Web应用程序开发 高性能JavaScript篇 (二) JavaScript 性能分析工具

]]> http://software.intel.com/zh-cn/blogs/2012/05/10/web-javascript-javascript-3/feed/ 0 推荐两款特色手机应用 Mobile Alert & Pocket http://software.intel.com/zh-cn/blogs/2012/05/04/mobile-alert-amp-pocket/ http://software.intel.com/zh-cn/blogs/2012/05/04/mobile-alert-amp-pocket/#comments Fri, 04 May 2012 02:54:02 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/05/04/mobile-alert-amp-pocket/ 推荐两款特色手机应用：

1、 Mobile Alert
月黑风高独自走夜路时身后突然窜出一个黑影？荒郊野地里突然胸口一紧心脏不舒服？世事难料，人们总会碰到各种突发情况。这时候最重要的是保持冷静，其次才是用各种方式求救或者自救，比如拨打110或者120，通知你的亲人或好友，大声呼救。或者，你可以掏出手机点下这个神奇的红色按钮。

一家名为Avanquest Mobile Technologies的公司设计了这样一款为突发紧急事件服务的移动应用，打开这款应用，屏幕上会出现一个大大的红色按钮，点击它，软件开始倒数读秒，归零时，应用会启动一系列由用户设定的紧急措施。比如自动拨打当地的急救热线，通过GPS获取用户位置然后将其发送给指定的亲朋好友。对了，这款应用还会让手机发出刺耳的警报声，省的你求救把嗓子喊哑了。

市场上还有一些类似的紧急服务类应用，但是提供的服务不如Avanquest Mobile Technologies全面。值得一提的是，这家公司的盈利模式也不太一样。这款应用并不直接面向消费者，而是卖给便携设备的平台运营商，他们可以将这项应用集成到自己的服务中去，比如保险公司、旅行社。

2、 Pocket（原 read it later）

上网浏览，看见有意思的网页，但是又没有时间或者现在不想看怎么办？添加到收藏夹？不行，里面的收藏已经够多的了。从"历史"里面访问？太麻烦了吧！那还能怎么办？让Read It Later来帮你。碰到喜欢的网页，点一下下图所示的"以后再看"图标，这个网页就被放到Read it later的阅读列表中： 关掉浏览器。随时随地打开手机 Read it later 客户端，直接从列表里面选择，你牵挂着的网页就打开了。目前该程序已经支持很多和平台，Android，iOS。

但是随着用户量的增多，发现很多用户并非read it later, 而是保存在线视频留着“watch it later”，于是，"稍后阅读"工具Read it Later 最近迎来了华丽的变身，宣布正式更名为Pocket，同时发布新版应用Pocket并将整个服务免费。

相比之前黄黑主色调的"稳重"Read it Later，粉白双色搭配的Pocket显得素雅精致。Read It Later重新设计了应用的用户界面和操作方式，尝试打造新一个轻量、干净又富于美感的稍后阅读工具。在Pocket中，图片和视频内容的稍后看功能得到加强，用户不必再保存包含图片或视频内容的网址到阅读列表，专门的图片和视频保存项将为用户代劳这项工作。这项重要更新也是Read it Later上存储内容变化趋势的直接反映。据Read it Later之前发布的数据，YouTube已经成为其第一内容来源，越来越多的用户喜欢稍后看视频。内容类型扩展后，稍后阅读工具的搜索和标签功能就显得更加重要了。Pocket对原有的阅读条目组织方式进行了改进，并加强了内容的编辑和搜索功能。

需要注意的是，从Read it Later升级到Pocket的方式将有少许变化。如果你是Read it Later的付费用户，Pocket的更新将自动推送并安装；如果你是Read it Later的免费用户，则需要重新下载应用。因为，Pocket和原Read it Later是两个完全独立的应用。当然，原有的Read it Later帐户不会受到应用升级的影响，上面保存的内容会直接同步到新应用Pocket中。

Read it Later创立于2007年，用户数超过450万，支持的设备覆盖iPhone, iPad, Android和Kindle Fire。新应用Pocket的下载地址：Android | iOS

参考来源：36氪， 巴士数码

]]> http://software.intel.com/zh-cn/blogs/2012/05/04/mobile-alert-amp-pocket/feed/ 0 移动Web应用程序开发 高性能JavaScript篇(二) JavaScript 开发分析工具 http://software.intel.com/zh-cn/blogs/2012/04/07/web-javascript-javascript-2/ http://software.intel.com/zh-cn/blogs/2012/04/07/web-javascript-javascript-2/#comments Sat, 07 Apr 2012 12:51:28 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/04/07/web-javascript-javascript-2/ 1. JavaScript 引擎介绍

这里只介绍主流浏览器的JavaScript引擎。如下图所示：

JS引擎一般作为共享库使用，应用程序调用引擎提供的API函数。引擎API函数大致分为以下几种：数据类型操作、RunTime控制、类与对象的创建和维护、函数与脚本执行、字符串操作、错误处理、安全控制、Debug支持。

上图中测试使用的是Google V8 benchmark。可以看出Chrome V8引擎JavaScript执行各项指标最优。

其中：每款浏览器JavaScript引擎发展历史：

Mozilla

• SpiderMonkey，第一款JavaScript引擎，由Brendan Eich在Netscape Communications时编写，用于Mozilla Firefox 1.0～3.0版本。

• Rhino，由Mozilla基金会管理，开放源代码，完全以Java编写。

• TraceMonkey，基于即时编译的引擎，其中部份程式码取自Tamarin引擎，用于Mozilla Firefox 3.5～3.6版本。

• JaegerMonkey，德文Jäger原意为猎人，结合追踪和组合码技术大幅提高效能，部分技术借凿了V8、JavaScriptCore、WebKit，用于Mozilla Firefox 4.0以上版本。

Google

• V8，开放源代码，由Google丹麦开发，是Google Chrome的一部分。

微软

• Chakra (JScript引擎)，中文译名为查克拉，用于Internet Explorer 9的32位版本。

Opera

• Linear A，用于Opera 4.0～6.1版本。

• Linear B，用于Opera 7.0～9.2版本。

• Futhark，用于Opera 9.5～10.2版本。

• Carakan，由Opera软件公司编写，自Opera10.50版本开始使用。

其它

• KJS，KDE的ECMAScript/JavaScript引擎，最初由Harri Porten开发，用于KDE项目的Konqueror网页浏览器中。

• Narcissus，开放源代码，由Brendan Eich编写（他也参与编写了第一个SpiderMonkey）。

• Tamarin，由Adobe Labs编写，Flash Player 9所使用的引擎。

• Nitro（原名SquirrelFish），为Safari 4编写。

2. JavaScript 开发工具

下面介绍几款常用的JavaScript 开发调试工具：

1. Google Chrome Developer Tools

个人觉得目前Chrome开发者工具是所有工具中最好用的JavaScript开发调试工具，其具有非常强大的功能。具体参考：https://developers.google.com/chrome-developer-tools/docs/overview

2. Mozilla Firefox Firebug

Mozilla 在Web开发领域一直是一个领导者，Firebug也是非常方便的开发调试工具。可以分析，查看log, Debug等功能很强大。具体参考：http://getfirebug.com/

3. IE Developer Tools

微软IE也提供了自己的一套开发工具，但是个人觉得用起来不是很方便，可能是不习惯的原因吧。具体信息参考http://www.microsoft.com/download/en/confirmation.aspx?id=18359

再介绍两款JavaScript网页性能分析工具：

1. JavaScript Performance 网站 http://jsperf.com/

用户可以在该网站上面写不同的test case来测试如何写JavaScript代码更加高效。如果需要针对IE做优化，只需要在IE中打开该网站进行测试和分析，如果需要在Chrome中做优化，一样，对应地在Chrome中打开就可以了。点击测试之后，会给出一份很详细的测试报告。

2. Chrome speedtracer 插件。

具体的使用方式参考：https://developers.google.com/web-toolkit/speedtracer/get-started

然后打开你要性能分析的网页，打开这个工具，然后刷新目标网站，刷新完了点击停止分析，就可以查看报告了。

打开每一项之后可以看到很详细的分析报告，如下图：

相关文章

移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript 性能瓶颈

参考文章： WiKi Javascript Engine

在写一篇文章中将给大家结合实例例子及分析工具介绍在加载JavaScript代码时，如何编程可以让Web应用或者网页更加高效。

]]> http://software.intel.com/zh-cn/blogs/2012/04/07/web-javascript-javascript-2/feed/ 0 Google发布未来眼镜Google Glass：集智能手机、GPRS、相机于一身 http://software.intel.com/zh-cn/blogs/2012/04/06/googlegoogle-glassgprs/ http://software.intel.com/zh-cn/blogs/2012/04/06/googlegoogle-glassgprs/#comments Fri, 06 Apr 2012 03:07:30 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/04/06/googlegoogle-glassgprs/ 分享一篇谷歌新项目的介绍，如果能够成功进入消费市场的话，真的很酷。各位开发者是否准备好为这款眼镜开发应用程序了呢？

 

Google今天正式发布一个叫“Project Glass”的未来眼镜概念设计。这款眼镜将集智能手机、GPRS、相机于一身，在用户眼前展现实时信息，只要眨眨眼就能拍照上传、收发短信、查询天气路况等操作。

这个项目来源于Google最秘密的X实验室团队。根据其演示视频，通过眼睛对各种功能进行选择，但是具体实施貌似是通过语音来控制，这似乎显示Google的语音技术也比较成熟。

戴上眼镜往下看的情景

其虚拟操作界面

 


文章来自36氪

]]> http://software.intel.com/zh-cn/blogs/2012/04/06/googlegoogle-glassgprs/feed/ 0 移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript性能瓶颈 http://software.intel.com/zh-cn/blogs/2012/03/26/web-javascript-javascript/ http://software.intel.com/zh-cn/blogs/2012/03/26/web-javascript-javascript/#comments Mon, 26 Mar 2012 13:43:51 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/03/26/web-javascript-javascript/ 介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具：HTML5，JavaScript， CSS3。博文也分为三个大部分：

1. 众望所归的HTML5将主要介绍HTML5的前世今生，主要功能和API以及相关Demo，Demo的代码都可以在文章附件中下载到；

2. 高性能JavaScript将主要介绍如何让JavaScript更流畅，JavaScript debug和分析工具，可以说，没有JavaScript就不可能有互联网的今天，更不可能有移动互联网的明天，编写高性能的JavaScript至关重要；

3. 变化万千的CSS3将主要介绍如今异常强大的CSS3，结合HTML5编写动态的Web应用。熟练使用异常Fashion & Cool & 炫的CSS3将使Web应用增色不少。

本篇是高性能JavaScript介绍的第一篇，主要介绍JavaScript语言特性，为什么要编写高性能的JavaScript代码，以及对编写高性能JavaScript代码的开篇小结。

HTML5 系列文章

移动Web应用程序开发 HTML5篇 (一) HTML5简介

移动Web应用程序开发 HTML5篇 (二) 新功能介绍和测试

移动Web应用程序开发 HTML5篇 (三) Canvas API

移动Web应用程序开发 HTML5篇 (四) 多媒体 API

移动Web应用程序开发 HTML5篇 (五) 地址位置 API

移动Web应用程序开发 HTML5篇 (六) 通信(Communication) API

移动Web应用程序开发 HTML5篇 (七) Web Sockets API

移动Web应用程序开发 HTML5篇 (八) Offline Web Applications

移动Web应用程序开发HTML5篇 (九) Web Storage API

1. JavaScript 介绍

JavaScript用于Web编程的功能实现，被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。按照WiKipedia的说法，它是：

Prototype-based scripting language;

Dynamic, weakly typed and has first-class functions language;

Implementation of the ECMAScript language standard. ECMA-262-3。

我们依次来解释其中每句话的意思。

1. JavaScript是基于原型的脚本语言：基于原型的语言和传统基于类型的语言如Java等相对的。基于原型的语言所有的对象都是实例，通过原型来继承属性，构造函数或者原型指定了一组初始的属性.可以对一个对象或者一组对象动态的增加和删除属性。

2. 动态的，弱类型以及拥有First class function 的语言。

动态是指JavaScript是运行时动态解释的语言，系统不会将其编译为二进制文件进行执行。

弱类型是和强类型相对的，弱类型语言允许将一块内存看做多种类型。比如直接将整型变量与字符变量相加。强类型语言在没有强制类型转化前，不允许两种不同类型的变量相互操作。Java、C# 和 Python 等都是强类型语言。

First Class Function是指"能够用于类型生命"，即变量的类型可以是函数，可以赋值和传递函数。

3. 多范式的，支持基于对象的，指令模式和函数编程。

4. JavaScript是ECMAScrip标准的一个实现，目前使用的是ECMA-262-3. ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）通过ECMA-262标准化的脚本程序设计语言。

2. 为什么JavaScript性能很重要

通过上面的介绍，我们了解了JavaScript的属性和大致情况，那么为什么程序员在开发JavaScript代码时需要特别注重JavaScript性能呢？原因主要有以下几点：

1. 在过去的十年中，互联网改变了一切，最近的2年中，移动互联网深刻地改善了人们的生活，各种新技术层出不穷，HTML5，CSS3等等。网络负载越来越大，网页内容越来越丰富，加载的内容也越来越多，所有的一切都变了，只有JavaScript没有变。其作为一种脚本语言，伴随着互联网的发展十余年，都没有改变过。所以在以前没有的性能问题，如今都显现出来，如长时间Block UI Thread等问题。这就迫切需要我们深入了解其机制，编写高性能的JavaScript代码。

2. JavaScript是一个动态解释的语言，其固有特性导致运行的速度比编译成二进制代码的语言要慢很多，要想加快运行速度迫使开发者开发高性能的JavaScript代码。

3. 由于JavaScript是动态运行的，并没有编译环节，所以也迫使开发者编程时要完成很多本来可以由编译器完成的优化选项。比如gcc -o3的这些优化原理需要开发者在开发JavaScript代码时，自己手动去编写。

3. 总结

综上所述，JavaScript作为一个广受欢迎的web开发脚本语言，因为其已使用的特点，被广大Web开发者用来开发各种应用程序，但是由于网络环境，负载情况和运行环境在近几年都发生了很大的变化使开发者必须为Web应用优化JavaScript代码才能使其得到高效的运行，同时JavaScript固有特性使开发者需要去做可以由编译器完成的优化工作，也迫使开发者编写高性能的JavaScript代码。

本篇完，在第二篇中将给大家介绍目前流行的JavaScript引擎以及如何使用JavaScript性能分析工具来Tuning你的JavaScript代码。

参考文献： High performance JavaScript O'Reilly Yahoo Press

相关文章阅读：

JavaScript被扩展以支持并行运算

]]> http://software.intel.com/zh-cn/blogs/2012/03/26/web-javascript-javascript/feed/ 0 最新数据表明：中国引领全球移动应用市场增长 http://software.intel.com/zh-cn/blogs/2012/03/22/400010092/ http://software.intel.com/zh-cn/blogs/2012/03/22/400010092/#comments Thu, 22 Mar 2012 11:59:58 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/03/22/400010092/ 移动数据分析公司Flurry最近发布了多份针对中国移动应用市场的研究报告。从中可以看出中国市场在新iOS和Android设备激活数量上已远超其他国家，移动应用的增长速度也是全球最快。2011年初，中国app sessions（应用会话）排名全球第10。到去年年底，这一排名已经上升到第2位，仅次于美国。

下面是Flurry公司统计的2012年第一季度全球应用app sessions增长排名。（一次app sessions指一个应用的发布或被用户使用了一次，比如你打开一个新应用使用了几分钟即可算一次应用会话。）

下图是中国、英国、澳大利亚和日本在2011年1月到10月的应用会话市场份额趋势图。中国从最初的1.8%上升到十个月之后7.3%，目前已成为全球第二大应用经济体，未来恐怕很快将超过占据市场份额47%的美国。

下图是中国（红）和美国（蓝）每月新激活的iOS和Android设备数量趋势图，从2011年一月份一直到2012年三月份，中国一直处在增长之中。

下面是全球app sessions分布情况，美国仍然占据全球最大的应用会话份额，但尽管数量仍在不断增长，其整体份额却呈下降趋势。其中Top 10中的其他9个国家（中英韩法澳加日德西）的份额从27%增长到30%，而其他国家也从17%增长到24%。

下图是Flurry在2011年底统计的全球各国iOS和Android应用使用次数的统计排名。Flurry共统计了全球14万个应用，并根据30天内的应用使用次数作出的排名。美国共有1.09亿次使用，占全球应用使用总数的41%。中国为3500万次，占13%。

下图是Flurry通过复杂的统计方式对各个国家未使用iOS和Android用户（中产阶级、成人、15到64岁）的统计（详情请点击英文原文）。其中中国还有1，2亿未使用iOS和Android设备，但有能力使用的潜在消费者。也就是说，未来中国市场的潜力仍是最大的，这部分人的转化成本也是最低的。

最后一张图，是Flurry公司统计的各国2011年10月份新应用下载比例图，其中中国占到12%。但要注意的是，在去年1月份，这一比例还只有1.2%。

本文转载来自36氪

思考：这么大的用户群体和使用量，对我们广大的应用开发者来说是好消息啊。只要应用足够好，完全可以在中国变得越来越流行。只是到目前为止，国内用户仍然是使用免费应用的习惯，这对应用开发者来说也是挑战，达到一定用户量的时候就需要好好考虑商业模式，盈利模式的问题了。

]]> http://software.intel.com/zh-cn/blogs/2012/03/22/400010092/feed/ 0 从New iPad发布看Win8平板和Ultrabook的机会 http://software.intel.com/zh-cn/blogs/2012/03/22/new-ipadwin8ultrabook/ http://software.intel.com/zh-cn/blogs/2012/03/22/new-ipadwin8ultrabook/#comments Thu, 22 Mar 2012 11:46:48 +0000 Dawei Cheng 程大伟 (Intel) http://software.intel.com/zh-cn/blogs/2012/03/22/new-ipadwin8ultrabook/ 最近IT界有关平板电脑的讨论非常火热。iPad3发布国外销售异常火爆，但是在国内市场却遭遇冷淡。Win8 消费者预览版如期发布，媒体评价褒贬不一，但是OEM硬件厂商则非常期待。

目前平板电脑市场基本被iPad垄断，没有竞争对手能够真正威胁到iPad，在手机市场异常火爆的Android在平板领域却遭遇了水土不服。新一代iPad在硬件配置上的快速升级也从侧面反映出平板电脑的发展趋势，虽然这样带来了散热性和续航能力的问题。Win8的发布能否真的带动整个平板电脑产业的发展，一如它当年对PC产业的影响一样。

下面本文分别从以下几个方面来分析New iPad影响下Win8平板和Ultrabook的机会。

1. 平板的使用场景

未来用户道理用平板电脑来干嘛？这是一个需要深入研究的问题。我们首先来界定一下用户使用的方式：

1. 消费内容： 用来浏览，简单交互互联网内容的方式。如看微博，看新闻，用大众点评搜索附近好吃的好玩的。

2. 生产内容： 用来办公，日常处理。如处理word文档，进行表格制作，预定火车票，机票酒店，记账，日常处理邮件，专业淘宝卖家和买家等。

iPad是消费内容使用模式中最成功的产品，但是在生产内容的功能上显得比较弱。iPad的便携性使得用户可以利用零碎的时间来消费内容。如iPad中很流行的应用Read it later, 记录工作中没时间看的网页，将其发到平板端或者手机端，留着坐地铁的时候看。

而传统PC更多地用于生产内容。日常办公，邮件处理，玩大型网游等等。

总结：

那么Win8平板的机会就出来了，如果能够保证消费内容的同时，把Windows传统的经常使用的生产内容的部分加进来，将是其竞争力所在。有一种说法Win8平板如果做得像PC，那么没有出路的。个人觉得Win8平板坚决不能做得像PC，但是一定得把PC上的优势转移到平板上来。比如出差的时候，紧急需要回邮件，并且邮件中需要发送附件的，附件在U盘里。这时候你如果拿着的是一台iPad，只有干着急的份。如果是一台Win8的平板，那么你可以淡定地把邮件给回了。当然，如果你带着的一台超薄Ultrabook，那就更没有问题了。

2. 生态系统

谈到生态系统，iPad有非常成熟的生态系统，众多ISV给App Store开发优秀的应用，甚至微软自己也开发了Office的iPad版本。谈到生态系统无疑击中Win8软肋。那么Win8平板的机会在哪里呢？可以从以下几点入手：

1. 全面支持HTML5应用，其实Win8也的确这么做了。Web应用可以跨平台，那么已有的在iPad，Android中的Web应用可以直接在Win8平板上面运行。

2. 在平板上有效支持.NET，虽然.NET很庞大，但是和软件开发者没有关系，微软自身需要针对平板量身定制。那么庞大的.NET开发人员将是Win8平板在生态系统中制胜的关键。

3. 优化Web浏览。IE仍然是应用最广泛的浏览器，很多网站，如网银，预定火车票，个别企业网站，招聘网站等，更加适合IE浏览器。如果这些ISV没有独立的Metro Style应用，那么完全可以针对平板电脑，对齐网页进行优化显示，使其更加适合平板用户，可以弥补功能的缺陷。

3. 消费群体

这里面就有提到果粉了，iPad消费群体中，果粉很多。多少用户真正需要从iPad2升级到New iPad呢？国外著名科技博客拿着iPad2谎报说是New iPad去大街上找用户体验，居然多数说，哇，新iPad果然很好，改进很多。是不是很像童话故事里"皇帝的新装"？所以我们就把用户细分了：

1. 坚定果粉：Win8平板就不要打果粉的主意了。果粉是苹果的忠实用户，及时在上个世纪90年代苹果快要破产的边缘，果粉仍然是坚定的苹果产品使用者。这部分是小众群体。

2. iPhone，iPad培育出来盲目新果粉。近些年来，新果粉的风投大有超过老果粉之势。卖肾买iPad，蚁族可以，但是要标配iPhone等不绝于耳。在这部分用户看来，iPad不是一个产品了，化身为一种奇怪的精神上的某个寄托。所以他们不可能去买Win8的平板，这部分是极少数群体。

3. 实用主义"果粉"。这部分用户是Win8平板要着力去争取的。经常遇到用户将：我也不想拿着个到处可见的iPad，但是市场上面别的平板是在太差劲了。所以Win8只要在功能上面做好，用户体验做好，完全是有机会争取这部分客户的。

4. 就是我们普通的非果粉了。这部分用户是最有可能的Win8平板用户。

总结

后PC时代，很多用户对平板电脑的期望是其能够取代PC。Win8平板更多的还是需要从实用角度去设计，当在PC上所有的工作都能够在Win8的平板上方便的操作时，我更愿意购买一台Win8的平板。但是这个目标可能还有点遥远，比较平板电脑的性能比PC要差很多，所以目前最接近这个目标的产品是带触摸屏，轻便，可以当成平板电脑来使用的Ultrabook。当Ultrabook发展非常成熟之后，它可能就成为一个带有键盘的平板电脑。

]]> http://software.intel.com/zh-cn/blogs/2012/03/22/new-ipadwin8ultrabook/feed/ 0