如何创建一个iPhone Web应用

iPhone OS被看作是口袋里的一个完整互联网,除掉Flash之外。在大多数时候,这样的看法是对的,但是,如果你仅仅是想要设计一个看起来像本地iPhone应用的站点或者一个form,你该怎么办呢?

iWebKit就可以帮你解决这个问题。iWebKit(http://snippetspace.com/)是一个免费的框架包(a free framework package),它可以用来创建网站和应用,并且最适宜在iPod Touch、iPhone和iPad上进在行创建。这个框架的主体是CCS3,它可以建立非常棒的站点,并且看起来很新奇。

我将会介绍其中的建立站点时与web-form相关的部分,但iWebKit有很多更高级的特性,这些特性可以直接和OS进行交互。它的文档很好,所以,你可以查看demo site(http://demo.iwebkit.net/)以获得更多灵感。

当为iPhone OS进行设计时,你需要利用SDK(http://developer.apple.com/devcenter/ios/index.action)中的iPhone模拟器(iPhone simulator)来看看你的设计变成什么样子了。你也可以使用Safari来获得一个非常精确的展现,但没有任何工具比直接在物理上看效果更好地了。你会意识到它感觉起来有多好并且你会觉得它就是个本地应用。

开始Getting Started

这是在我们进行优化之前在iPhone上看到的表单(form)的样子。

(图片无法显示)

可以说,这看起来很丑。下面是原始的HTML代码。我们将会在其中注入Apple的血液让它焕然一新。

Test Form

Name:

Password:

Gender:

Male:

Female:

Favorite Food:

Steak:

Pizza:

Chicken:


新的代码:

下面处理下拉菜单。下拉菜单一直是使用iPhone的内置方法以便来创造一种本地应用的感觉。

原始代码:

Select a Level of Education:


新的代码:

Level of Education

可以注意到arrow span class在选项框右侧加了一个向下箭头。

(图片无法显示)

表单进行到这里,剩下的就是Submit按钮,并且将

标签关闭了。

原始代码:

替换为:

现在可以用如下语句关闭

标签了:

最后,我们可能希望在页面底端加上页脚(footer)。这在iWebKit中也获得了很好的支持:

上面就是HTML的部分了。若是人们想要将这个页面加到他们的主屏幕(home screen)上去,你还可以为这个页面做一点东西。当浏览这个页面的时候,点击“+”按钮并选择Add to Home Screen选项。你可以看到一个图标,这个图标默认是该页面的一个截图。你可以定制这一项,将图片设置为你自己的58*58像素的图片并指向部分。我的图片命名为homescreen.png,我已经将相关代码放在文章开头了。

(图片无法显示)

现在这个页面被加到主屏幕(home screen)上了,它看起来就像是一个本地应用。在这个页面加载的时候,为什么不做一个初始化界面呢?iWebKit也提供了这一功能,你只需要简单地向刚才那样增加一个320*460像素的图片,并将其指向部分。我将它命名为startup.png。

(图片无法显示)

就这样,我们完工了!iWebKit很多其他特性,你都可以看看。你或许可以为一个应用活动一些灵感,或者至少你可以美化那个存在了很久的老的表单让你的boss感到开心。文后附上了这篇文章中所用到的所有文件,你可以尽情观看。其中,还有一个短片,是对教程的一个展示。

 

工程文件:iwebkit-tutorial-files.zip (94 KB, ZIP)(http://a.theappleblog.com/files/iwebkit-tutorial-files.zip)

 

 

iPhone OS被看作是口袋里的一个完整互联网,除掉Flash之外。在大多数时候,这样的看法是对的,但是,如果你仅仅是想要设计一个看起来像本地iPhone应用的站点或者一个form,你该怎么办呢?

iWebKit就可以帮你解决这个问题。iWebKit(http://snippetspace.com/)是一个免费的框架包(a free framework package),它可以用来创建网站和应用,并且最适宜在iPod Touch、iPhone和iPad上进在行创建。这个框架的主体是CCS3,它可以建立非常棒的站点,并且看起来很新奇。

我将会介绍其中的建立站点时与web-form相关的部分,但iWebKit有很多更高级的特性,这些特性可以直接和OS进行交互。它的文档很好,所以,你可以查看demo site(http://demo.iwebkit.net/)以获得更多灵感。

当为iPhone OS进行设计时,你需要利用SDK(http://developer.apple.com/devcenter/ios/index.action)中的iPhone模拟器(iPhone simulator)来看看你的设计变成什么样子了。你也可以使用Safari来获得一个非常精确的展现,但没有任何工具比直接在物理上看效果更好地了。你会意识到它感觉起来有多好并且你会觉得它就是个本地应用。

开始Getting Started

这是在我们进行优化之前在iPhone上看到的表单(form)的样子。

(图片无法显示)

可以说,这看起来很丑。下面是原始的HTML代码。我们将会在其中注入Apple的血液让它焕然一新。

Test Form

  

    Name:

    Password:

    Gender:

    Male:

    Female:

    Favorite Food:

    Steak:

    Pizza:

    Chicken:

    

新的代码:

      

  •     

      

下面处理下拉菜单。下拉菜单一直是使用iPhone的内置方法以便来创造一种本地应用的感觉。

原始代码:

Select a Level of Education:


新的代码:

Level of Education

      

  •     

        

      

可以注意到arrow span class在选项框右侧加了一个向下箭头。

(图片无法显示)

表单进行到这里,剩下的就是Submit按钮,并且将

标签关闭了。

原始代码:

替换为:

      

  •     

      

现在可以用如下语句关闭

标签了:

最后,我们可能希望在页面底端加上页脚(footer)。这在iWebKit中也获得了很好的支持:

上面就是HTML的部分了。若是人们想要将这个页面加到他们的主屏幕(home screen)上去,你还可以为这个页面做一点东西。当浏览这个页面的时候,点击“+”按钮并选择Add to Home Screen选项。你可以看到一个图标,这个图标默认是该页面的一个截图。你可以定制这一项,将图片设置为你自己的58*58像素的图片并指向部分。我的图片命名为homescreen.png,我已经将相关代码放在文章开头了。

(图片无法显示)

现在这个页面被加到主屏幕(home screen)上了,它看起来就像是一个本地应用。在这个页面加载的时候,为什么不做一个初始化界面呢?iWebKit也提供了这一功能,你只需要简单地向刚才那样增加一个320*460像素的图片,并将其指向部分。我将它命名为startup.png。

(图片无法显示)

就这样,我们完工了!iWebKit很多其他特性,你都可以看看。你或许可以为一个应用活动一些灵感,或者至少你可以美化那个存在了很久的老的表单让你的boss感到开心。文后附上了这篇文章中所用到的所有文件,你可以尽情观看。其中,还有一个短片,是对教程的一个展示。

 

工程文件:iwebkit-tutorial-files.zip (94 KB, ZIP)(http://a.theappleblog.com/files/iwebkit-tutorial-files.zip)

 译文来源:http://www.webapptrend.com/ 
WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展 

请大家在关注CSDN的同时,关注我们的新浪微博 @WebAppTrend,欢迎加入我们的QQ群:193775364

你可能感兴趣的:(如何创建一个iPhone Web应用)