教你用HTML5开发iPhone应用程序

wjlgryx

浏览: 308474 次
性别:
来自: 北京

最近访客更多访客>>

Helkern

Helenhhj

cao510453

1729051657

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html5 文章

HTML5 网络应用应用服务器 Apple Mobile

教你用HTML5开发iPhone应用程序

你一整年都像现在一样沮丧，这我知道。所有铁杆Objective-C的开发人员都曾有过为iPhone编写应用程序的日子。你甚至企图通过阅读一两篇关于 iPhone开发的教程，但C语言或它的其他形式真的非常难学。

我不想告诉你放弃该项目：你最终能得到它。但与此同时，你还可以做别的东西。

你可以创建一个本地应用程序来连接其他应用程序，很大程度上，这将是一个完美的模仿。

你可以用一些可能已经拥有的技能：HTML5，CSS及JavaScript。

我会教你如何利用HTML5创建一个离线的iPhone应用程序。更具体地说，我将带你浏览建设俄罗斯方块游戏的全过程。

本文作者：Alex Kessinger
翻　　译：RIA一起学
我的 QQ：908315256
我的邮箱：mayaboy0219@126.com

离线？
我说过“离线”吗？那么，这意味着我们要有自定义icon图标、自定义启动画面、与系统一致的外观，即使手机没有连接到互联网，你也可以使用该应用程序。

该应用程序的功能是：它就像普通的本地移动应用程序那样可以脱机使用。

这是一个专门为iPhone编写的教程，但这些技术适用于所有那些带有支持HTML5的浏览器的手机。

是的，我的意思很明确。看看下面的图片，没有地址栏，没有底部导航看起来就和本地移动应用程序一样。

教你用HTML5开发iPhone应用程序

Prework
你需要访问服务器，在这里你可以更改文件的HTTP 标头。因为我们必须考虑HTML5的脱机缓存优势。

阿帕奇服务器真的很不错，你只需将代码添加到“.htaccess”文件，他就能工作。这里是一篇关于使用htaccess修改HTTP标头的文章。

你要做的另一件事是在iPhone单元里启用Safari浏览器的调试栏。在你的iPhone理依次访问设置 > Safari > 开发，拖动调试控制按钮。这将帮助你发现潜在的JavaScript错误。

一旦建立好应用程序，当你测试完基于HTML5的iPhone应用程序并获得充分的经验后，你应该关闭这个功能。

教你用HTML5开发iPhone应用程序

关于应用程序
图标和启动画面
图标必须为57px × 57px。

iPhone会为你的图标添加圆角，创建阴影，并添加光泽。

图标必须是PNG或JPG格式。

一下是我的俄罗斯方块游戏应用程序的图标。

启动画面必须是320px × 460px，也必须是PNG或JPG格式。

以下是我的应用程序的启动画面。

教你用HTML5开发iPhone应用程序

开始前还要知道的小技巧
无非是小巧、疏松和简单

    * 小巧：这是移动应用程序开发。因此，即使拥有缓存，让文件更小巧也依然是一个明智。
    * 疏松：你应该尽可能让文件数量保持在较低的范围。
    * 简单：始于几个简单的想法并将之付诸实施。通过将文件保持在较小范围内，使你能更快地完成工作。

应用程序缓存
这是一个新的标准，你可以在这里阅读规范。

应用程序缓存允许浏览器事先确定需要工作的网页的所有文件。

这将缓存这些文件（有时会有点小故障）。该文件的语法很简单：只要列出文件的绝对地址（例如：http://yourwebserver.com /picture.png）或相对地址（例如：/picture.png），浏览器就可以让这些文件保持脱机。

你可以列出不需要被缓存几个网址，但对于我们的离线应用程序来说没什么关系（如果你有兴趣，可以阅读这篇文章)。

这个工作比较棘手的部分是清单（需要被离线缓存的列表文件）要把通过的文件类型的表头设为text/manifest。这就是为什么你需要访问可以设置 HTTP头的Web服务器。

屏幕尺寸
设计应用程序的快速说明：当你在应用程序模式下，你会有一个320px × 460px大小的屏幕空间。而当你在网页模式下，仅有一个320px × 356px大小的屏幕空间。这可能会影响你的HTML5离线应用的用户界面。

下图你可以看到两者的差异。

教你用HTML5开发iPhone应用程序

HTML
这是真正的浏览器，所以HTML的显示同电脑里是完全相同的。iPhone浏览器在支持HTML5方面也走在前列，因此要认真研究规范。

为了更深入细节，这里提供了Safari浏览器开发文档：

    * Safari浏览器HTML参考
    * Safari浏览器CSS参考

让我们来编代码吧
应用程序通过你定义的标记启动。这里的标记是我的俄罗斯方块应用程序。

<!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>
   
   <script type="text/javascript" src="tetris.js"></script>

</body>
</html>

首先，请注意DOCTYPE。HTML5是不是很棒？

<html>标签里的manifest="cache.manifest"属性是告诉浏览器怎样获取我们要缓存的脱机网页。

这里是关于苹果专有的HTML5标记的一个简短说明：

    * apple-mobile-web-app-capable：这是另一个告知想要离线的应用程序的途径。
    * apple-mobile-web-app-status-bar-style：当应用程序处于脱机状态时隐藏状态栏和导航栏。
    * apple-touch-icon:用于指明作为图标的图片。
    * apple-touch-startup-image: 一个指向启动图片的URL。

另外请注意，你应该把CSS放在顶部，把JavaScript放在底部（最佳做法在这里仍然适用）。

CSS
几乎与一个正常的网页相同。有一些特定的CSS规则网络工具包，你可以使用它们做一些非常酷的事情，比如动画。但这是速成指南，这些内容不在讨论范围内。

CSS很平常
body {
    overflow:hidden;
    background: #d7d7d7;
    margin:0;
    padding:0;
}
#tetris {
    width: 320px;
    height: 460px;
    background:#000;
}

样式之应用于网页的div元素，以确保其在iPhone屏幕上的大小合适。

JavaScript我用了Dalton Ridenhour的 JavaScript改进版本；我是在Github找到的。这个JS最初是为普通浏览器写的。我不得不为了支持触摸屏而做出修改。

一般情况下，JS在iPhone中的工作不过是优化，但也有例外。想想看一个类似于鼠标悬停的事物，这个事件存在于iPhone中，但当你没有标准的指针设备（如鼠标）时，我不知道是否能有所帮助。Quirksmode发布的一篇关于iPhone事件的文章真的很有帮助。

准备妥当后，你就可以测试了，但我想在iPhone中打开index.html时，你应该能够看到所有的工作。

然后，下一步是从可以正确设置cache.manifest的真正的网络服务器上将其转移到服务器。

然后，你就可以将其添加到主屏幕并以离线模式查看。

你可以看看我做完的版本：

    * http://tetris.alexkessinger.net

离线数据
为增强保持脱机文件的能力，你可以将用户数据存储在脱机文件数据库中。有两个主要的API用于每个用户数据或每页数据。首先是localStorage. localStorage，这是一个绝对简单易用的键值存储API。

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

你可以利用它存储用户得分，例如。

第二个实际上是个脱机SQL引擎，一个网络数据库。该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;
    });
});

本文转自：http://blog.sina.com.cn/s/blog_4a73f21d0100htg6.html

分享到：

处理火狐自动播放视频 | 　JavaScript分析

2011-05-13 17:38
浏览 1182
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论