在过去的一年里，你不是很容易踩踏，对于所有的使用Objective-C开发iPhone程序的开发者而言，日子都不那么好过，你不是为了学习开发iPhone应用程序曾经硬着头皮去读着那生涩难懂的学习教程，事实是Objective-C是一门类似C语言的语言，这也就绝定了它不是那么容易学习。
我不是劝你去放弃学习Objective-C，因为世上无难事，只怕有心人。但是条条大路通罗马，也许你转换下思路你可以用另一种方法达到相同的目的。
你可以制作一个原生的iPhone应用程序去模仿其他的程序，多半上它也许会成为一个不错的复制品。
但是你完全可以利用现有的技能（HTML5，CSS，Javascript）去完成上面的事。
下面我会向你们展示如何创建一个具有离线功能的HTML5 iPhone应用程序。更进一步的话，我会向你们展示编写一个俄罗斯方块游戏的过程。
离线
到底什么是离线？好吧，它实际上意味着当我们的手机没有互联网连接时，能够有一个像本地应用程序样子的程序图标，启动画面。
这意味这我们的应用程序能够像原生应用程序那样在手机离线时使用。
其实这不仅是针对iPhone开发的教程，它同样适用于所有带有HTML5功能支持浏览器的手机。
OK，下面我们开始吧。看看下面的图片。没有地址栏，没有导航条，它就像是一个原生的应用程序。
27 02最终结果html5 iphone thumb【译文】如何制作一个HTML5的iPhone应用程序
准备工作
如果我们要想使用HTML5的离线功能的话，你需要有能够操作服务器端，因为我们需要更改文件的HTTP的头信息。（下面我们会详细讲解）
我们使用Apache做为服务器，为了完成任务，我们需要配置.htaccess文件。这里是一个教程使用.htaccess更改HTTP头信息。
其他我们需要做的就是在iPhone设置中打开Safari浏览器的调试模式。在你的iPhone中进入Settings.app> Safari> Developer，然后打开调试模式，从而的目的是帮助您寻找可能出现的JavaScript错误。
一旦你完成你的应用程序，您应该关闭调试模式杀死你正确的测试你的应用程序。
27 03调试控制台iphone thumb【译文】如何制作一个HTML5的iPhone应用程序
关于你的App
图标和启动画面
图标的大小57px x 57px。
无论您使用什么样的图标，iPhone会自动对它进行圆角处理，创建投影，并增加光泽。
图标最好使用PNG或JPG格式。
下面是我使用的俄罗斯方块游戏图标。
27 04 iphone icon thumb【译文】如何制作一个HTML5的iPhone应用程序
启动画面大小最好是320px x 460px，且格式为PNG或JPG。
下面是我使用的启动画面。
27 05打开屏幕缩略图【译文】如何制作一个HTML5的iPhone应用程序
一些小提示
谨记，简单就是美（保持小巧，稀疏和简单。）
Small：虽然可以使用缓存以保存一部分文件，但是保持轻量级也是一个明智的行为。
稀疏：调整的减少处理的文件。
简单：不要盲目扩大范围，从小的方面着手，除非你事半功倍。
应用程序缓存
这是一个新的标准，详细信息请看这里。
应用程序缓存允许我们预先告知浏览器我们的应用程序使用了那些文件。浏览器会将这些文件缓存下来（有时也会失败）。这个文件的语法格式很简单，仅就是在清单文件中窗格了文件的相对（例如/picture.png）或绝对地址（例如http://yourwebserver.com/picture.png），浏览器会在离线时保留这些文件。
你也可以列出一些文件地址代表你不想缓存的，但是这跟我们的离线应用程序没有什么关系（如果你有兴趣的话，看这个文档）。
还有一件重要的事是manifest（就是你需要缓存的文件列表）的文件类型头信息必须被设置成文本/清单。这就是我们为什么需要有一个web服务器以使我们能够设置HTTP头信息。
屏幕尺寸
当设计你的应用程序时，你需要注意：当你出入应用程序时，你的屏幕可利用面积是320px x 46px。当你处于网页模式时，你的屏幕可利用面积是320px x 356px。这会影响你的程序的用户界面。
下面就是处于两种模式下的不同点
27 06 in iphone ui sidecomp thumb【译文】如何制作一个HTML5的iPhone应用程序
的HTML
你的App实际上就是一个网页，因此跟在浏览器中展示的没什么不同。iPhone的浏览器对HTML5的支持程度也是排在前列的，如果你想深入了解的话，请移步Safari开发者中心：
Safari HTML参考
Safari CSS参考
开始编写代码
应用程序以一些标记开始，下面的就是我的俄罗斯方块游戏的标记。
<！DOCTYPE html> <html manifest =“ tetris.manifest”> <head> <metaname =“ viewport” content =“ user-scalable = no，width = device-width，initial-scale = 1.0，maximum-scale = 1.0 ” /> <meta name =“ apple-mobile-web-app-capable” content =“是” /> <meta name =“ apple-mobile-web-app-status-bar-style” content =“ black” / > <link rel =“ apple-touch-icon” href =“ iphon_tetris_icon.png” /> <link rel =“ apple-touch-startup-image” href =“ startup.png” /> <link rel =“ stylesheet” href =” tetris.css” type =” text / css” media =” screen，mobile” title =“ main” charset =” utf-8“> <title>离线俄罗斯方块</ title> </ head> <body> <！–将您的标记放在此处–> <script type =” text / javascript” src =” tetris。js ”> </ script> </ body> </ html>
首先注意Doctype。哦也以后在也不用写那么长的Doctype了。
在HTML标签里manifest =” cache.manifest”属性是告诉浏览器我们需要缓存那些文件。
这些是在HTML5页面中Apple的专属标记，这里是他们的一些简要说明：
apple-mobile-web-app-capable：这是又一个地方告诉浏览器，它一个离线应用程序
apple-mobile-web-app-status-bar-style：当处于离线时隐藏状态栏和导航栏时。
apple-touch-icon：告诉浏览器程序图标的地址。
apple-touch-startup-image：告诉浏览器启动画面的地址。
还有一点请注意，最好把CSS文件放在上面，JavaScript文件放在下面。
的CSS
它跟一个普通网页没什么两样，但是你可以利用一些特殊的CSS -webkit特性做一些很炫很酷的事情，像动画等。下面是一个很简单的指导，这已经超出了这里的知识范围。
简单的CSS代码
身体{溢出：隐藏；背景：＃d7d7d7; 保证金：0; 填充：0; } #tetris {宽度：320像素；高度：460px；背景：＃000；}
主要是设置div元素在网页中适应iPhone的视图。
的JavaScript
我使用的是Dalton Ridenhour修改版本的JS库，是我在Github上找到的，这个JS库适用与大多数的浏览器。我唯一做的修改就是让它在没有键盘时也可以使用。
一般情况下，JavaScript能在iPhone上很好的工作，但是也有例外。想想一下mouseover这个事件，它存在与iPhone浏览器上的，但是如果没有一个标准的指示设备，我很好奇它怎么使用。Quirksmode写了一篇很不错的文章讲解了iPhone浏览器上的事件。
如果上面的事情你已经完成了，你就可以测试你的程序了，只要在iPhone上打开index.html，你就能看到一个最基本的程序已经完成了。
下一步就是把你的程序放到服务器上，然后正确的设置好cache.manifest文件，并放置到你的程序根目录里。好了，看看你的缓存文件工作了没有。
这是我写的一个完成版，你可以在这里查看
http://tetris.alexkessinger.net
补充说明：离线数据
我们主要使用两个API：第一个是localStorage。localStorage是一个很容易使用的键/值对应的存储形式，我们可以使用这个API像这样：
localStorage.dataToStore = 5; console.log（localStorage.dataToStore）; // 5
我们可以利用上面的方式保存用户数据。
第二种方式是离线Web SQL数据库（单击链接查看W3C官网的说明）。这个API使用起来有点复杂。下面是一些代码片段。
//尝试获取数据库对象var db; 尝试{如果（window.openDatabase）{db = openDatabase（“ NoteTest”，“ 1.0”，“ HTML5数据库API示例”，200000）; if（！db）alert（“无法打开磁盘上的数据库。这可能是因为该版本不正确或该域的配额中没有足够的空间”）；} else alert（“无法打开数据库。请在每晚启用此功能的情况下尝试使用WebKit”）；} catch（err）{} //检查并查看是否需要初始化数据库db.transaction（function（tx）{tx.executeSql（“ SELECT COUNT（*）FROM WebkitStickyNotes”，[]，function（result）{ loadNotes（）;}，function（tx，error）{tx.executeSql（“创建表WebKitStickyNotes（id REAL UNIQUE，note TEXT，timestamp / REAL，left TEXT，top TEXT，zindex REAL）”，[]，函数（结果）{loadNotes（）;}）;}）;}）; //插入测试笔记。var note = {id：“ 1”，文字：“这是测试笔记”，时间戳：“ 112123000”，左：10，上：10，zIndex：2}；db.transaction（function（tx）{tx.executeSql（“ INSERT INTO WebKitStickyNotes（id，note，timestamp，left，top，zindex）VALUES /（？，？，？，？，？，？，？）”，[注。 id，note.text，note.timestamp，note.left，note.top，note.zIndex]）;}）; //从数据库中获取所有注释。db.transaction（function（tx）{tx.executeSql（“ SELECT id，note，timestamp，left，top，zindex / FROM WebKitStickyNotes”，[]，function（tx，result ）{for（var i = 0; i <result.rows.length; ++ i）{var row = result.rows.item（i）; var note = new Note（）; note.id = row ['id ']; note.text = row ['note']; note.timestamp = row ['timestamp']; note.left = row ['left']; note.top = row ['top']; note.zIndex = row ['zindex']; if（row ['id']> maximumId）maximumId = row [' ID']; 如果（row ['zindex']> maximumZ）maximumZ = row ['zindex']; } if（！result.rows.length）newNote（）; }，function（tx，error）{alert（'无法从数据库中获取注释–'+ error.message）;返回; }）; }）;
总结
通过离线Web App，我们可以做很多东西。做游戏也可以的，就像我做的俄罗斯方块，但是你最好想清楚一点东西适合适合离线应用。像雷神3竞技场估计做不出来，做一个待办事项的App肯定是绰绰有余。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60900.shtml
