在跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率和跟燕青一起学Windows8应用开发：使用HTML+CSS自适应垂直方向分辨率中笔者介绍了自适应的水平和垂直布局，那么还有神秘布局是程序经常遇到的呢？嗯…，猜对了，那就是居中布局。最为常见的运用场合是登录窗口，本篇博客也将以此例，讨论如何制作居中布局。

         在设计居中布局时，HTML和CSS对运行的屏幕分辨率一无所知，那么如何才能够自适应屏幕分辨率呢？非常幸运，CSS中的top和left属性能够按照百分百进行定位，对于屏幕中心点，它的位置应该是left：50%; top: 50%;。接下一个问题是：我如何制定界面的左上角坐标呢？在跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率一文中，我们知道了margin属性可以制定其于边界的距离，并且让人兴奋的是，它还能够是负值！WOW，看到了胜利的曙光了吗？

在介绍CSS设置之前，不管三七二十一，我们先写个HTML的DIV吧，如图1所示

图1

图1设计了一个登录界面，笔者将具体登录内容删除，重点讲解其中心位置布局。

图2中的设置是本例的重点，它将position设置为绝对坐标（它将直接按照屏幕为中心，而不考虑其任何的子父包含关系）。因为登录界面的宽度是300个像素，高度是200个像素，所以按照中心点计算，界面应该向上偏移150个显示，向左偏移100个像素，映射到CSS的属性中，其设置为：margin-left: -150px; margin-top: -100px。为了让读者容易看清整体的布局，笔者将登录界面的背景设置为红色，在正常使用状态下，背景的设置可能是不需要的。

图2

运行一下，图3是你要的结果吗？

图3

Great！o(∩_∩)o 哈哈

居中布局相比较于跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率和跟燕青一起学Windows8应用开发：使用HTML+CSS自适应垂直方向分辨率中的水平和垂直布局而言，它是非常简单的，但是还是有几个基本点需要注意。为此，笔者还是留一道题目加深居中布局的理解 。

题目1）如何在屏幕某个特殊部位内进行居中布局？比如说屏幕的左上角有一个500x400的区域，我需要将login界面在此区域内居中布局。

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

4.        
跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用

5.        
跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率

6.        
跟燕青一起学Windows8应用开发：使用HTML+CSS自适应垂直方向分辨率

         在跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率一文中，笔者主要讲述了如何通过HTML+CSS的使用，自动根据屏幕的水平分辨率进行宽度的自适应调整。本篇博客将着重讲述如何使用HTML+CSS自适应垂直方向分辨率，通过水平和垂直方向的综合使用，Win8应用程序能够非常容易地自适应不同设备分辨率变化的挑战。

         阅读跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率后，读者已经知道：在默认情况下，DIV是自动扩展其宽度以适合屏幕的实际宽度，那么在垂直方向，DIV的行为方式是否和水平一致呢？为了搞清楚这个问题，不妨我们先做个实验看看吧 。

在Study Metro App项目中，我们添加两个DIV（TopPanel和BottomPanel），如图1所示。

图1

我们在CSS文件中对TopPanel和BottomPanel进行相关的属性设置：两者都自动填充屏幕的宽度，TopPanel有固定的200个像素的高度，BottomPanel没有制定高度，笔者希望它能够自动填充剩余的屏幕高度空间。此外，为了便于观察TopPanel和BottomPanel所占用的屏幕空间，我们分别将其背景设为绿色和蓝色，如图2所示。

图2

运行一下，图3是我们预想的结果吗？

图3

很遗憾，BottomPanel仅仅占用了剩余高度的一部分，而非是我们预想的将它填满。

那么如何才能够实现我们的设计预想呢？在DIV出现之前，我们一般使用table来完成此布局，那么DIV中是否也有类似的属性来实现类是于table的功能呢？非常的幸运，在CSS属性中display：table；能够对展示做出非常好的调整。因为display：table；是设置DIV的父Panel，所以需要在TopPanel和BottomPanel下布局一个父DIV，本例中将其称为MainPanel。图4展示出如何定义HTML中MainPanel、TopPanel和BottomPanel的布局关系。

图4

CSS文件中属性的设置是关键，那么如何搞定他们呢？图5给出了一个很好的样例 ：

图5

MainPanel是table展示，TopPanel和BottomPanel都是table-row的展示。

你们是不是迫不及待的想看看结果呢？没错，我也有这种心情，让我们看看运行结果图6吧！

图6

Cool！BottomPanel非常轻松的将屏幕的剩余部分填充满，真是太棒了！

本篇博客的样例虽然非常简单，但是给出的方法将是非常有价值的，难道不是吗？为了测试一下博友是否真的懂它了，不妨做两个题目吧 。

题目1）布局要求：BottomPanel的高度为200个像素，TopPanel为自动填充剩余的屏幕高度，HTML+CSS应该如何设置？

题目2）布局要求：有三个Panel，分为上中下。上和下分别占用100个像素和200个像素，中间部分自动填充剩余的高度空间，HTML+CSS应该如何设置？

是不是非常的容易？如果是，那么恭喜你！你已经完全“懂我”了 ！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

4.        
跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用

5.        
跟燕青一起学Windows8应用开发：使用HTML+CSS自适应水平方向分辨率

         在跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用一文中，我们介绍了如何在HTML中引入CSS文件，配置CSS中p元素的属性，让HTML显示更加的丰富多彩。本篇博客将继续学习如何使用CSS的属性，在水平方向布局，实现自适应屏幕水平方向分辨率的Metro Style应用。

         在HTML中，有两种方法规范化HTML元素的展现，一种是table；另外一种是div。table主要是规范数据的展现方式，它不是一种布局手段（虽然它在一定程度上能够实现布局需求），因此本篇博客将着重介绍div方式的布局。如果博友对table布局特别有偏好，请参考http://www.w3schools.com/html/html_tables.asp中关于table的文章。笔者还是按照以往的思路，从简单的例子讲解如何在水平方向自适应屏幕分辨率，布局的要求如下：屏幕分左右两块：左边一块占用水平方向200个像素点，右边一块占用屏幕剩下的水平空间。

在开始布局之前，我们先看看div在默认情况下，它是如何顺序布局的。注意：所有的代码都是在Study Metro App的工程中创建，对于如何参见Study Metro App工程，请参见跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序一文。

在default.html中添加两个部门面板：LeftPanel和RightPanel，如图1所示。

图1

在my.css中添加LeftPanel和RightPanel的CSS属性配置，如图2所示：

图2

点击Local Mechine按钮，运行项目，结果如图3所示：

图3

可以看出，在默认情况下div的布局是从上而下依次放置的。

如果我们将LeftPanel的宽度设置称200个像素，如图4所示，那么会达到我们的要求吗？

图4

不如运行一下吧 。图5是我们要的结果吗？

图5

LeftPanel在宽度上和我们的一直，但是RightPanel还是被布局在下面一个区域，这个和我们的要求不一致。可能博友会问，用水平方向的分辨率减去200个像素，不就是RightPanel的宽度像素吗？是的，完全正确，但是问题是：你知道它将会运行在哪个分辨率的机器上呢？在程序设计中，答案无法给出！

现在我们遇到了两个问题：

1）LeftPanel和RightPanel不在同一行。

2）RightPanel的宽度无法算出。

如果我们能够将上述两个问题一一解决，那么程序就能够按照要求展现出来了。

如何解决LeftPanel和RightPanel不在同一行的问题呢？

CSS中提供了一个float属性设置，它让你的div飘起来，是不是很酷 。它能够解决我们不在同一行的问题，还不赶紧看看CSS代码！在LeftPanel和RightPanel中各自添加float:
left一行，如图6所示。

图6

运行一下，解决了吗？

图7

WOW，Cool！LeftPanel和RightPanel已经处于同一行中了！

还有一个什么问题呢？嗯…，RightPanel的宽度怎么计算？

Javascript去计算？别老土了，用这个还让CSS情何以堪！

回顾一下HTML是如何布局的？先出现的先布局，后出现的后布局，… 嗯！好主意！思路豁然开朗了！不妨让RightPanel先占满空间，在左边留200个像素空间给LeftPanel，如图8所示。

图8

LowPanel的主要任务是填充水平方向的所有空间，RightPanel是填充水平方向剩余的空间，看看它的CSS是如何设置的，如图9所示。RightPanel是叠加在LowPanel之上的非float面板，想一下，为什么LowPanel和RightPanel需要float属性呢？对了，它能够解决不同行的问题！那么为什么RightPanel不需要float属性呢？对了，因为我们不希望RightPanel脱离LowPanel的控制，一旦飘了起来，若想固定住的话，需要晴空万里，无风无浪，但是现实是残酷的，难道不是吗 。LeftPanel需要左边200个像素作为其领地，OK！RightPanel通过margin-left:
200px;很大方的在其左边腾出200个像素。LowPanel很霸道，它因为先发优势，已经霸占了整行的宽度，那么LeftPanel只能通过飘起来，然后向左漂移屏幕的宽度，才能够到达其领地。float:
left; margin-left: -100%;给了它航线 ，如图9所示。

图9

运行一下，看看结果是你要的吗？

图10

O(∩_∩)o 哈哈！

不过好像高度不太对啊，应用希望是占用完整的高度！不着急，这个好办，看看图11的CSS设置吧。

图11

再运行一下，你看到了什么？

Y(^_^)Y ！

简单吗？好像是，有好像不是！没有关系，相信你按照此博客，自己实践一下，那么很多问题就很容易弄明白了，不过为了巩固所学的东西，留两个题目吧？

题目1）现在需要全屏布局3列，第1列和第3列的宽度都是200个像素，第3列自动填充满全部的剩余宽度。此外，第1，2，3列的高度都是屏幕的最大高度。

题目2）现在需要全屏布局3列，第1列的宽度是200个像素，第2列的宽度是300个像素，第3列自动填充剩余的宽度。此外，第1，2，3列的高度都是屏幕的最大高度。

如果你能够非常容易的做完题目1和2，那么你的水平布局就基本上出师了 ，加油哦！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

4.        
跟燕青一起学Windows8应用开发：用CSS文件妆点你的应用

         在跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序一文中，我们已经用Visual Studio 2011 Beta建立了Study Metro App的项目。在运行后程序后，出现了一个非常单调的黑白文本界面，那么能否给它点缀一下呢？毕竟咱们的生活世界是色彩斑斓的 。本篇博客将介绍如何使用CSS文件来为HTML进行点缀。

         CSS是Cascading Style Sheets的缩写，对于其基本的用法，博友可以参考http://www.w3schools.com/css/，这里笔者重点于如何使用。CSS可以配置HTML的各个元素的不同属性，那么如何在Study Metro App添加CSS文件并配置元素属性呢？不妨看看笔者的操作步骤吧！

1.        
打开Study Metro App项目，在Solution Explorer中鼠标右键点击CSS文件夹，在弹出菜单中选择Add菜单，再选择New Item…子菜单，如图1所示。

图1

2.        
依次选择JavaScript菜单àStyle Sheet菜单，然后在Name中输入CSS文件名，最后点击Add按钮，如图2所示。

图2

3.        
双击Solution Explorer中的CSS文件夹，检查是否新增的my.css已经放入了Study Metro App项目中，如图3所示。

图3

4.        
打开default.html文件，将my.css文件添加到HTML的head区域。如图4所示。

图4

5.        
在body区域，将给元素p添加class名字为MyContent。虽然CSS可以制定全局的p属性，但是它会污染所有相关的p区域，对于不同的p元素属性个性化定制工作是不利的，所以建议大家为不同的HTML元素使用局部的CSS属性定制，如图5所示。

图5

6.        
打开my.css文件，为MyContent配置属性。Class名字在CSS文件中将以.开头，在此列中为.MyContent，并依次将背景色设置为红色，文字为中心对齐（默认为左边对齐），文本颜色为白色，如图6所示。

图6

7.        
点击Local Machine按钮运行项目，如图7所示

图7

看到自己的心血了吗 ? 还不错吧！

图8

博客例子虽然非常的简单，但是它完整的掩饰了如何在一个Metro Style的应用程序中添加CSS文件，并且通过CSS属性的配置来控制HTML的呈现方式，对初学者而言应该是非常有帮助的！

【参考】

1.        
跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

2.        
跟燕青一起学Windows8应用开发：安装Visual Studio 2011

3.        
跟燕青一起学Windows8应用开发：安装Windows8操作系统

跟燕青一起学Windows8应用开发：创建HTML5 Metro应用程序

         在前两篇博客跟燕青一起学Windows8应用开发：安装Windows8操作系统和跟燕青一起学Windows8应用开发：安装Visual
Studio 2011中，燕青已经搭建了Windows8应用开发的基本开发环境。本篇博客将讲述我们如何创建HTML5 Metro应用程序。

         在安装玩Windows8和Visual Studio 2011Beta后，我们可以在桌面上看到Visual Studio 2011Beta的图标，如图1所示（红色方框部分）：

图1

创建HTML5 Metro风格的项目，主要步骤如下：

1.        
双击图1红色方框部分的Visual Studio 2011Beta图标，打开Visual Studio 2011 Beta版本，如图2所示。

图2

2.        
依次点击FileàNewàProject…菜单，如图3所示

图3

3.        
依次选择JavascriptàBlank Application菜单项，并且在Name中填写上你的项目名称（在此样例中，项目名称是：Study
Metro App），然后选择OK按钮，如图4所示。

图4

4.        
如果你有源代码管理系统，请进行相关操作，否则点击Cancel按钮，如图5所示。

图5

5.        
项目创建完成后，点击Local Machine按钮，运行程序，如图6所示。

图6

你看见运行结果了吗？是的，有些简单，不过对于我们而言，已经是很不错了，难道不是吗？J

图7

         在跟燕青一起学Windows8应用开发：安装Windows8操作系统一文中，燕青已经安装了Windows8操作系统。为了能够在Windows8上开发Metro-style应用，还需要安装微软的Visual Studio 2011软件。本篇博客将讲述燕青是如何安装Visual Studio 2011 Beta版本的。

安装步骤如下：

l  打开页面http://www.microsoft.com/visualstudio/11/en-us，点击红色标注方框，如图1所示。

图1

l  点击图2中的红色方框（http://www.microsoft.com/visualstudio/11/en-us/products）

图2

l  点击图3中的红色方框（http://www.microsoft.com/visualstudio/11/en-us/downloads）

图3

l  点击图4中的Run按钮，开始下载安装。

图4

如果网友的网路速度不够快，不妨先用下载工具将Visual Studio 2011 Beta整个文件下载下来，然后在进行安装。这样做的好处是，总体安装时间较少，不至于网友干等J。

可以访问：http://www.microsoft.com/visualstudio/11/en-us/downloads#ultimate
网页，如图5所示，点击红色方框，下载完整版Visual Studio 2011 Beta版本。

图5

Visual Studio 2011对Windows8应用开发非常的重要，建议初学者务必安装！

l  英文

l  中文简体

l  法文

l  德文

l  日文

图1 Win8 ISO

用户可以根据自身的需要下载各自的语言版本，并且也能够选择32位还是64位操作系统。

在漫长的等待后，我们将ISO下载完毕，下面需要制作安装盘。有两种方法制作安装光盘：

l  将ISO刻入到DVD中，使用DVD光驱安装Windows8操作系统。比如说，使用Windows
Disc Image Burner工具制作DVD盘，具体方法可以参考：http://windows.microsoft.com/en-US/windows7/Burn-a-CD-or-DVD-from-an-ISO-file。

l  将ISO制作为U盘的image，使用U盘启动和安装。具体方法可以参考：http://www.microsoftstore.com/store/msstore/html/pbPage.Help_Win7_usbdvd_dwnTool

注意：在安装过程中，可以使用Product Key:   DNJXJ-7XBW8-2378T-X22TX-BKG7J

作为SN号。

怎么样？简单吧，不妨自己手动试试看J。

本系列博客将主要介绍如今大红大紫的移动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 性能分析工具

你最好很擅长CSS技术，因为让游戏在桌面电脑平台、Android手机及所有iOS设备的主流浏览器流畅运行，需要用到大量的CSS知识。我们有一个网页开发者的任务就是处理与CSS相关的工作，针对多种移动设备创建可动态变换尺寸的菜单。在电子游戏设计中，有50％的工作用于创建菜单。而HTML5跨平台游戏开发中有50％属于与CSS相关的工作。

*我们的实践证明，开发者可以使用HTML5制作出很棒的跨平台等视距游戏。

*如果玩家可以在一个设备上玩某款游戏，多数人就会想在手机或平板电脑上继续体验该游戏。

*制作HTML5跨平台游戏需进行大量试验。

*虽然HTML5很强大，但仍有一些不甚完善之处。

*跨平台游戏体验意味着，游戏设计之初就要考虑到用户在不同设备上的体验。

*不可在手机游戏中植入需进行大量堆叠或过度拖动的操作。

*最好很精通CSS技能。

以下是我们在Facebook平台开发跨平台HTML5游戏的一些极有帮助的参考资料：

1）viewporter. https://github.com/zynga/viewporter. 这个Zynga开源代码允许你获取任何设备的屏幕尺寸，并针对这些屏幕调整游戏大小。它比你自己从头编写代码更省时间（我们用过Viewporter，也自己写过代码，所以才会知道这一点。）

2）Weinre.http://phonegap.github.com/weinre/. 这个远程调试器工作原理类似于Web Inspector，但它运行于移动设备。它有助于追踪iPhone和iPad等设备上的控制台错误信息。

3）JQuery. http://jquery.com/ 你可以利用这个库中现成的代码，省下自己写代码的时间。它对文本动画处理极有用处，我们进行了一些修改并推出了JQuery Mobile，它更适用于移动设备平台。

4）node.JS. http://nodejs.org/ 在你使用Javascript编写内容时，它可以让你省时省力地使客户端代码及服务器相适配。在作为游戏服务器时，node.JS的扩展性能也十分理想。

笔者就html5学习展开思考，光学大赛官网上的关于html5的知识是不够的，参赛作品不仅仅光需要html5更需要各个方面的组合，所以团队各个成员学习的侧重点最好不同，CSS对软件的重要性这里就不过多赘述了。学习有关CSS的课程我们现在最好尽快开始。

Win8 Metro UI应用的开发是一件非常有趣的事情，特别是它使用了非常奇特的Metro UI设计。如果现有传统UI设计的应用，能够很方便的移植到Win8上，并且也能够充分利用Metro UI的魔力，那么将是非常有有意义的事情。本篇博客就是讲述，在一般情况下，如何将传统UI应用移植成Metro UI应用。

移植工作看上去比较的难，但是按照规律办事，很多事情仅仅是时间和耐心问题。网友不妨使用9步法来完成你的应用移植：

1.        
下载并安装Windows 8 Consumer Preview，下载并安装Microsoft Visual Studio 11 Express Beta。

2.        
使用Microsoft Visual Studio 11 Express Beta 创建Metro UI应用程序项目，语言可以选择你自己喜欢的C/C++、C#或者Visual Basic等。

3.        
将你要重复使用的文件夹、源代码、资源文件等拷贝到你的新项目中，并且在Solution Explorer中选择Show All Filters。

4.        
用鼠标右键选择你的文件夹、文件等，将其添加入新项目中。

5.        
使用整个项目的查找替换方法，将System.Windows替换成为Windows.UI.Xaml。

6.        
拷贝能够重复使用的XAML代码到项目的XAML文件中去（你可以根据需要创建新的XAML文件）。

7.        
编译你的项目，使用错误信息快速定位需要修改的地方。使用Windows Runtime APIs替换元代的.NET APIs。

8.        
对不能够简替换的代码部分，使用注释将其暂时屏蔽，以便日后慢慢修改。重复7和8的方法直到整个项目完全编译通过。

9.        
对暂时屏蔽的代码部分逐一解决。完成所有相关的修改后，你的移植工作基本完成，下面的工作就是解bugs了。

怎么样？是不是比较简单！还不现在动手试一试J。