如何用HTML5制作iPhone App

标签: HTML 5技术概览 HTML5 技术博文 HTML5前沿技术 HTML5学习资源 | 发表时间:2012-05-14 14:31 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

你在这一年中很受挫,我知道的。所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历。你曾经想找一两篇iPhone开发的初级教程,但是它的C语言太难学了。

我不想说一些让你放弃的消极的话:你可以放弃它,这意味着这些时间你可以做些别的。

你可以作一个nativeapp 和别的app 一样,并且,很大程度上,它看起来就是一个完美的仿冒的应用程序。

只要你会 HTML(5),CSS 和Javascript 就能做到。

我将向你演示 如何 制作一个 离线的iPhone应用程序,说白点就是我会一步一步教你怎么作一个俄罗斯方块游戏(Tetris game)。

Offline?

什么是离线?离线意味着,我们有一个自定义的icon和界面让他们看起来像本地应用程序,无论手机是否链接了网络都能是使用。

这个app就像手机中的普通应用程序一样当它离线时也会可以运行。

这虽然是一个详细的iPhone教程,但更多的技术来自于所有手机都内嵌的支持HTML5浏览器。

看下面的图片,它没有URL 的输入框 也没有浏览器导航在底部,看起来就是一个本地的手机应用程序。

Prework

利用HTML5的offlinecaching,你访问服务器文件可以改变文件的 HTTP Headers

Apache对这个支持的非常好,你只要修改.htaccess 文件就行了。这有一个教程  《使用htaccess修改HTTp headers》

还有一件事你需要做,你的iPhoneunit中的 Safari的网页浏览器中需要打开debugbar,进入设置:.app> Safari > Developer on your iPhone,然后打开debug console。这可以方便你查看潜在的JavaScript 错误。

一旦你创建了你的app,你就应该将这个关闭以便于在测试你的HTML5 iPhone app时得到完整的体验。

About the App

Icon and Startup Screen

icon需要是57px x 57px。

iPhone会将所有的icon图片做圆角处理,创建阴影效果。

其次图片必须是PNG或者JPG格式。

这个是我在俄罗斯方块游戏中使用的图片。

起始屏幕需要320px x460px 也必须是PNG或JPG格式。

这个是我用的起始屏幕图片。

Some tips before you start

保持小(small),少(sparse)和简单(simple).

·        小:手机程序开发需要缓存文件,所以要保持文件的大小。

·        少:需要处理的文件的数量越少越好.

·        简单:从一些简单的想法开始,在做的过程中把持住复杂度,这样你会完成的更快。

Application Cache

这是一个新标准,点 这里查看更多。

应用程序缓存允许浏览器检测网页是否需要网络才能工作。

它可以缓存你想缓存的文件,语法非常简单:只要把每个文件(例如:http://yourwebserver.com/picture.png)的绝对目录列在manifest文件(/picture.png)。浏览器会让这些文件离线。

你也可以列出需要缓存文件的URL。但是这个对于离线应用没有效果的(有兴趣的朋友看 这里

通过manifest(需要缓存的文件列表)来缓存文件有一个棘手的问题,需要将filetype Header设置为 text/manifest。这也是为什么需要设置HTTP headers来访问web服务器。

Screen Size

设计程序的一个提醒:当你在应用程序模式(app mode)时,屏幕大小为 320px x 460px。当你在网页模式(web mode)时,屏幕会变成320px x356px。这会影响你的HTML5程序的用户界面。

这里你可以看到不同他们的不同。

HTML

iPhone浏览器是一个真正的支持HTML5的浏览器,所以HTML代码完全相同。

更多的详细,请查看SafariDeveloper‘s corner:

·         Safari HTMLReference

·         Safari CSS Reference

Let’s get coding

程序开始定义markup,下面是俄罗斯方块app的markup。

<!DOCTYPE html>

<html manifest=”tetris.manifest”>

<head>

 

<meta name=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0″/>

<meta name=”apple-mobile-web-app-capable” content=”yes” />

 

<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>offline Tetris</title>

</head>

<body>

<!– Put your Markup Here –>

<script type=”text/javascript” src=”tetris.js”></script>

 

</body>

</html>

首先,注意Doctype,这难道不值得为HTML5欢呼吗?

其中<html>标签中的manifest=”cache.manifest” 属性 告诉浏览器,我们需要缓存这个离线页面。

这些是苹果 在HTML5中独有的markup,简单的介绍下:

·        apple-mobile-web-app-capable:  另一种声明这是一个offline app。

·        apple-mobile-web-app-status-bar-style: 当程序离线时隐藏status bar和 nav bar。

·        apple-touch-icon:指向需要成为icon的图片。

·        apple-touch-startup-image:指向起始图片的url。

同时要注意,把CSS放在顶上而把JavaScript放在底部(最好这样做)。

CSS

与大多数网页一样,你还可以使用 -webkit规则的CSS做一些像动画一样非常酷的特效。但是这个话题有点超出本文的范围了。

下面的CSS很朴素

body {

overflow:hidden;

background: #d7d7d7;

margin:0;

padding:0;

}

#tetris {

width: 320px;

height: 460px;

background:#000;

}

这个样式只是为了确保div元素能适应iPhone的显示界面。

JavaScript

我用了一个改装过的javascript版本,来自于 Dalton Ridenhour;我在 Github上发现的.JS本来是用在网页浏览器中的。而我不得不做了一点点修改让它支持键盘。

一般来说,JS 方法在iPhone中运行正常-虽然有些小问题。想想一些类似mouseover在iPhone中存在的事件,我不确定当你没有标准的点击设备时(如:鼠标)能帮到多少。Quirksmode发表了一篇关于 events on theiPhone的文章,受益良多。

当你全完成了,你可以在iPhone中打开index.html测试,应该能够可以见所有运行正常。

接着,下一步是从一个真实的服务器上设置缓存 manifest。

然后你可以添加到主桌面上,然后查看离线模式。

你可以参考一个可以运行的版本,我创建在:

·         http://tetris.alexkessinger.net

Bonus Section: Offline Data

随着需要离线的文件越来越复杂,你也可以讲用户数据存储在一个离线数据库中。有两个主要的API,一个是保存每个用户的数据,另一个是用来保存每个页面的数据。

第一种是localStorage。localStorage,一种简单的键值对存储方式。

localStorage.dataToStore = 5;

console.log(localStorage.dataToStore); // 5

举个例子,你可以用它来存储用户的得分。

第二种实际上时一个离线的SQL引擎,一个 webdatabase。API更先进一些,这有一点代码:

/ Try and get a database object

var db;

 

try {

if (window.openDatabase) {

db = openDatabase(“NoteTest”, “1.0″, “HTML5 Database API example”, 200000);

if (!db)

alert(“Failed to open the database on disk.  This is probably because the version was /

bad or there is not enough space left in this domain’s quota”);

} else

alert(“Couldn’t open the database.  Please try with a WebKit nightly with this feature enabled”);

} catch(err) { }

 

// Check and see if you need to initalize the DB

db.transaction(function(tx) {

tx.executeSql(“SELECT COUNT(*) FROM WebkitStickyNotes”, [], function(result) {

loadNotes();

}, function(tx, error) {

tx.executeSql(“CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /

REAL, left TEXT, top TEXT, zindex REAL)”, [], function(result) {

loadNotes();

});

});

});

 

// Insert a test Note.

var note = {

id: “1″,

text:” This is a test note”,

timestamp: “112123000″,

left:10,

top:10,

zIndex:2

};

db.transaction(function (tx)

{

tx.executeSql(“INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /

(?, ?, ?, ?, ?, ?)”, [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]);

});

 

// Get all the notes out of the database.

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'] > highestId)

highestId = row['id'];

if (row['zindex'] > highestZ)

highestZ = row['zindex'];

}

 

if (!result.rows.length)

newNote();

}, function(tx, error) {

alert(‘Failed to retrieve notes from database – ‘ + error.message);

return;

});

});

Wrap Up

离线HTML程序可以做很多东西,游戏,像俄罗斯方块,没有什么是不可能的,但是你需要事先考虑你想做什么是否有必要做成离线程序。雷神之锤3竞技场,可能不行,做一个确信可行的 to-do程序表。

 

相关 [html5 制作 iphone] 推荐:

如何用HTML5制作iPhone App

- - HTML5研究小组
所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历. 你曾经想找一两篇iPhone开发的初级教程,但是它的C语言太难学了. 我不想说一些让你放弃的消极的话:你可以放弃它,这意味着这些时间你可以做些别的. 你可以作一个nativeapp 和别的app 一样,并且,很大程度上,它看起来就是一个完美的仿冒的应用程序.

Fastbook 的制作过程 : 邂逅 HTML5

- - 极客公园-GeekPark
初级译者,菜鸟前端,低端摄影 & more.. [核心提示]HTML5 不是 Facebook 移动客户端速度慢的原因,相反,HTML5 的出现,为程序员提供了更多的开发工具,使得他们可以将浏览器看作应用的开发平台而不仅是页面渲染引擎. 在开始 Sencha 的开发之前,我们对 web 开发抱有一个希望:希望现代应用程序的开发只需要一个浏览器,而不需要其他的任何环境,另外加上一组足够强大的开发框架和强大的编码工具.

iPhone 4借助HTML5和CSS3渲染网页

- - 博客园_新闻
1月 5 日消息,据国外媒体报道,近期一项技术让公众领略到了互联网技术的万能之处. iPone 4 通过使用 CSS3 渲染网页. CSS3是由乌克兰网络开发者 Vasiliy 设计的. 最令人惊艳的是,基于网络的 iPhone 由 HTML5,CSS 3 和 JavaScript 所创建. iPhone 4 的渲染不仅体现在设备本身,还体现在一系列屏幕按钮,令人印象深刻的是这些按钮都是由颜色构成的,而非图片.

HTML5 QQ游戏大厅iPhone版强势上线

- - HTML5研究小组
继 iPad版Html5手机QQ游戏大厅重磅出击后,HTML5版QQ游戏大厅也在iPhone上强势上线了. 不是枯燥的wap游戏,而是超炫的HTML5体验. 再也不用苦恼在iPhone上不能玩QQ欢乐斗地主了,只需输入网址即可开始游戏. 超级好记的地址:h5.qq.com(建议使用safari或QQ浏览器打开).

使用 HTML5 和 CSS3 制作登录页面完整步骤

- Amo - HTML5研究小组
本文详细介绍使用 HTML5 和 CSS3 制作一个登录页面的完整过程. 所用到的 HTML5 的特性:. placeholder – 输入框的简短提示,当该输入框获得输入焦点时,该提示信息自动消失. required – 指定该输入元素是否必须提供. autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点.

分步解析HTML5画布游戏的制作过程

- - GamerBoom.com 游戏邦
作者:Matt Hackett. 自从发布《Onslaught. Arena》后,许多人要求我分享制作简单画布游戏的基础教程. 所以,我决定利用这篇博文介绍自己认为最简单的画布游戏制作方法,并逐步进行解析. 让我们跳过game.js,直接进入游戏制作过程. 我们首先要做的是创建画布元素. 我使用JavaScript而不是HTML来实现这个目标,以此来展示这个步骤的简易性.

【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

- - HTML5研究小组
在本教程中,我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能. 【e800编译】在本教程中,我们将完成一个不错的基于. jQuery和Quicksand插件的HTML5portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能.

HTML5+CSS3+jQuery制作视频播放器完全指南

- - 博客 - 伯乐在线
导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash. 虽然国内还没有完全普及HTML5 浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中. 本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器.

欣赏制作精良的动画版iPhone进化史视频

- will - cnBeta.COM
CNET UK制作了这段非常精良的iPhone历史动画,动画中讲述了那些使iPhone变成现实的人们和科技. 这段视频也比较了Dieter Rams和Jony Ive两位著名的设计师,最后还有乔布斯在1985年城建NeXT的故事,总之这是一段非常经典的视频.

喵友(Catfan)用HTML5制作流动云朵增强网站互动趣味

- Chris - 36氪
之前我们曾专访过国内最早的实时轻博客社区喵友(Catfan)创始人黎言卓. 我是在广州读了2年大学后开始辍学创业的. 整个网站的开发,设计,翻译等所有工作都是由我一人完成的. 创业的过程中经常每天都对着电脑差不多20小时,有时候疼得双眼都快打不开. 网站各个部分都差不多经过四次以上的重新设计,最终才形成今天的样子.