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的血液让它焕然一新。
<html><head><title>Test Form</title></head>
<body>
<form method="post">
Name: <input type="text" size="12" maxlength="12" name="name">
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>
这段代码要放在与iWebKit framework（http://snippetspace.com/projects/iwebkit/）同一文件夹的HTML文件中。我将其命名为index.html。
第一步是将下面这些代码放入<head>标记中。
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="javascript/functions.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="homescreen.png"/>
<link href="startup.png" rel="apple-touch-startup-image" />
这些代码是用来告诉iPhone浏览器这个页面是针对它而设计的。它同时也也指向CSS，JavaScript和iPhone Home Screen的图标。
为了创建顶部的标题栏，我们需要紧跟<body>标记之后插入下面的代码：
<div id="topbar">
<div id="title">Test Form</div>
</div>
如果你在你的iPhone 模拟器（iPhone simulator）上加载这个页面你将会在顶部看到这个标题栏。
（图片无法显示）
现在我们需要开始创建主体内容。通过下面的<div>标签可以可以做到这样。
<div id="content">
所有表单的内容都会在这个标签之内，并且，直到这个表单结束，我们才会关闭这个标签。
第一个表单中的域是Name和Password：
原来的代码为：
Name:<input type="text" size="12" maxlength="12" name="name"><br />
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
将其替换为：
<ul class="pageitem">
<li class="bigfield"><input placeholder="Name" name="name" type="text" /></li>
<li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li>
</ul>
那么，Name和Password的在界面上将会如下所示：
（图片无法显示）
<ul>容器代表了白色框，<li>标记代表了框中的不同部分。你也可以将这些域分别放在它们自己的<ul>容器内，以便让它们看起来像是两个不同的框。为了节约屏幕空间，我将相同的条目放在一起。现在从Gender条目开始来替换掉原来的radio按钮。
原始代码：
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
新的代码：
<span class="graytitle">Gender</span>
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Male</span>
<input name="gender" type="radio" value="M" />
</li>
<li class="radiobutton">
<span class="name">Female</span>
<input name="gender" type="radio" value="F" />
</li>
</ul>
现在，radio按钮看起来就好多了。
（图片无法显示）
接下来是在Favorite Food条目下的复选框：
原始代码：
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
新的代码：
<span class="graytitle">Favorite Foods</span>
<ul class="pageitem">
<li class="checkbox">
<span class="name">Steak</span>
<input name="steak" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Pizza</span>
<input name="pizza" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Chicken</span>
<input name="chicken" type="checkbox" />
</li>
</ul>
现在不再是复选框了，我是我们所熟悉的iPhone OS中的漂亮的开/关滑动条（on/off sliders）了。
（图片无法显示）
文本框非常简单，因为它只是在文本框外加了一个白框。
原始代码：
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
新的代码：
<ul class="pageitem">
<li class="textbox">
<textarea name="quote" rows="5">Enter your favorite quote!</textarea>
</li>
</ul>
下面处理下拉菜单。下拉菜单一直是使用iPhone的内置方法以便来创造一种本地应用的感觉。
原始代码：
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
新的代码：
<span class="graytitle">Level of Education</span>
<ul class="pageitem">
<li class="select">
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select>
<span class="arrow"></span>
</li>
</ul>
可以注意到arrow span class在选项框右侧加了一个向下箭头。
（图片无法显示）
表单进行到这里，剩下的就是Submit按钮，并且将<div>标签关闭了。
原始代码：
<input name="Submit" type="submit" value="Submit" />
替换为：
<ul class="pageitem">
<li class="button">
<input name="Submit" type="submit" value="Submit" />
</li>
</ul>
现在可以用如下语句关闭<div>标签了：
</div>
最后，我们可能希望在页面底端加上页脚（footer）。这在iWebKit中也获得了很好的支持：
<div id="footer">
<a href="http://iwebkit.net">Powered by iWebKit</a>
</div>
上面就是HTML的部分了。若是人们想要将这个页面加到他们的主屏幕（home screen）上去，你还可以为这个页面做一点东西。当浏览这个页面的时候，点击“+”按钮并选择Add to Home Screen选项。你可以看到一个图标，这个图标默认是该页面的一个截图。你可以定制这一项，将图片设置为你自己的58*58像素的图片并指向<head>部分。我的图片命名为homescreen.png，我已经将相关代码放在文章开头了。
（图片无法显示）
现在这个页面被加到主屏幕（home screen）上了，它看起来就像是一个本地应用。在这个页面加载的时候，为什么不做一个初始化界面呢？iWebKit也提供了这一功能，你只需要简单地向刚才那样增加一个320*460像素的图片，并将其指向<head>部分。我将它命名为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的血液让它焕然一新。
<html><head><title>Test Form</title></head>
<body>
<form method="post">
Name: <input type="text" size="12" maxlength="12" name="name">
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>
这段代码要放在与iWebKit framework（http://snippetspace.com/projects/iwebkit/）同一文件夹的HTML文件中。我将其命名为index.html。
第一步是将下面这些代码放入<head>标记中。
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="javascript/functions.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="homescreen.png"/>
<link href="startup.png" rel="apple-touch-startup-image" />
这些代码是用来告诉iPhone浏览器这个页面是针对它而设计的。它同时也也指向CSS，JavaScript和iPhone Home Screen的图标。
为了创建顶部的标题栏，我们需要紧跟<body>标记之后插入下面的代码：
<div id="topbar">
<div id="title">Test Form</div>
</div>
如果你在你的iPhone模拟器（iPhone simulator）上加载这个页面你将会在顶部看到这个标题栏。
（图片无法显示）
现在我们需要开始创建主体内容。通过下面的<div>标签可以可以做到这样。
<div id="content">
所有表单的内容都会在这个标签之内，并且，直到这个表单结束，我们才会关闭这个标签。
第一个表单中的域是Name和Password：
原来的代码为：
Name:<input type="text" size="12" maxlength="12" name="name"><br />
Password:<input type="password" size="12" maxlength="36" name="passw"><br />
将其替换为：
<ul class="pageitem">
<li class="bigfield"><input placeholder="Name" name="name" type="text" /></li>
<li class="bigfield"><input placeholder="Password" name="passw" type="password" /></li>
</ul>
那么，Name和Password的在界面上将会如下所示：
（图片无法显示）
<ul>容器代表了白色框，<li>标记代表了框中的不同部分。你也可以将这些域分别放在它们自己的<ul>容器内，以便让它们看起来像是两个不同的框。为了节约屏幕空间，我将相同的条目放在一起。现在从Gender条目开始来替换掉原来的radio按钮。
原始代码：
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
新的代码：
<span class="graytitle">Gender</span>
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Male</span>
<input name="gender" type="radio" value="M" />
</li>
<li class="radiobutton">
<span class="name">Female</span>
<input name="gender" type="radio" value="F" />
</li>
</ul>
现在，radio按钮看起来就好多了。
（图片无法显示）
接下来是在Favorite Food条目下的复选框：
原始代码：
Favorite Food:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
新的代码：
<span class="graytitle">Favorite Foods</span>
<ul class="pageitem">
<li class="checkbox">
<span class="name">Steak</span>
<input name="steak" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Pizza</span>
<input name="pizza" type="checkbox" />
</li>
<li class="checkbox">
<span class="name">Chicken</span>
<input name="chicken" type="checkbox" />
</li>
</ul>
现在不再是复选框了，我是我们所熟悉的iPhone OS中的漂亮的开/关滑动条（on/off sliders）了。
（图片无法显示）
文本框非常简单，因为它只是在文本框外加了一个白框。
原始代码：
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
新的代码：
<ul class="pageitem">
<li class="textbox">
<textarea name="quote" rows="5">Enter your favorite quote!</textarea>
</li>
</ul>
下面处理下拉菜单。下拉菜单一直是使用iPhone的内置方法以便来创造一种本地应用的感觉。
原始代码：
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select><br />
新的代码：
<span class="graytitle">Level of Education</span>
<ul class="pageitem">
<li class="select">
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option>
</select>
<span class="arrow"></span>
</li>
</ul>
可以注意到arrow span class在选项框右侧加了一个向下箭头。
（图片无法显示）
表单进行到这里，剩下的就是Submit按钮，并且将<div>标签关闭了。
原始代码：
<input name="Submit" type="submit" value="Submit" />
替换为：
<ul class="pageitem">
<li class="button">
<input name="Submit" type="submit" value="Submit" />
</li>
</ul>
现在可以用如下语句关闭<div>标签了：
</div>
最后，我们可能希望在页面底端加上页脚（footer）。这在iWebKit中也获得了很好的支持：
<div id="footer">
<a href="http://iwebkit.net">Powered by iWebKit</a>
</div>
上面就是HTML的部分了。若是人们想要将这个页面加到他们的主屏幕（home screen）上去，你还可以为这个页面做一点东西。当浏览这个页面的时候，点击“+”按钮并选择Add to Home Screen选项。你可以看到一个图标，这个图标默认是该页面的一个截图。你可以定制这一项，将图片设置为你自己的58*58像素的图片并指向<head>部分。我的图片命名为homescreen.png，我已经将相关代码放在文章开头了。
（图片无法显示）
现在这个页面被加到主屏幕（home screen）上了，它看起来就像是一个本地应用。在这个页面加载的时候，为什么不做一个初始化界面呢？iWebKit也提供了这一功能，你只需要简单地向刚才那样增加一个320*460像素的图片，并将其指向<head>部分。我将它命名为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是一个独立的技术博客，关注WebApp前瞻和实践，以及智能浏览器发展
请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，欢迎加入我们的：193775364
分享到：
相关推荐
用Eclipse 开发 iPhone Web 应用程序.doc，回去试试
用 Eclipse 开发 iPhone Web 应用程序教程（含图例和代码）
让你的移动web应用对iPhone的支持更加友好，看标题，你懂的！
它们和运行在Safari内部的web应用程序不同，在基于iPhone OS的设备上，它们作为独立的执行程序来运行。本地应用程序可以访问iPhone和iPod Touch的所有特性，比如加速计、位置服务、和多点触摸接口，正是这些特性使...
这个示例 Web 应用程序支持着一个小型的 iPhone 应用程序 Sonnet，这个小程序可从 Apple 的 Application Store 免费下载。综合 Google App Engine 和 iPhone 开发的强大之处在于可以使用 Python 快速原型化应用程序...
IOS应用源码之【应用】WebVNC - iPhone远程控制PC.rar
开发iphone风格的网页必备，强大的iui功能。 内含iui.css 和一个 iui.js 来实现强大的iphone风格网页应用。
全在Web开发方面，分别介绍了三个iPhone Web库，即WebKit、iUI和Canvas，并讨论了Web开发环境Dashcode，最后阐述Web应用程序的调试。在SDK开发方面，详细描述其各种组件和功能，包括Xcode、Interface Builder、视图...
IOS应用源码之【应用】-WebVNC - iPhone远程控制PC.rar
如何建立一个移动网站；iPhone和iPad的网络应用发展； iPhone应用开发的趋势；iPhone应用开发的误区；iPad应用开发的要点；如何制作移动Web应用；如何使用CSS3媒体资讯库创建移动站点；移动设备的形式；Web和iPhone ...
【应用】★★★★-WebVNC - iPhone远程控制PC.zipIOS应用例子源码下载【应用】★★★★-WebVNC - iPhone远程控制PC.zipIOS应用例子源码下载 1.适合学生学习研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术...
创建一个视图对象 57 添加和移除子视图 57 视图层次中的坐标转换 60 标识视图 61 在运行时修改视图 61 实现视图动画 61 响应布局的变化 63 重画视图的内容 64 隐藏视图 65 创建一个定制视图 65 初始化您的定制视图 ...
议题简介：当为知乎等以 Web 为主的复杂社交产品开发 iOS 端时，我们在开发上总会面临的一个棘手的矛盾，即迭代速度以及原生体验间的取舍。本次演讲将以知乎 iPhone 端从 1.0 到 2.0 的重构过程为例，讲解为复杂社交...
根据我的经验，精心配置出来的方案，使用Delphi2007lite最小精简版,才60M。加上intraweb+IntraWeb iPhone Controls非常适合开发web应用，本文里有下载地址。
它们和运行在Safari内部的web应用程序不同，在基于iPhoneOS的设备上，它们作为独立的执行程序来运行。本地应用程序可以访问iPhone和iPodTouch的所有特性，比如加速计、位置服务、和多点触摸接口，正是这些特性使设备...
相册应用开发包 iPhone FGallery ,FGallery 是为 iPhone 开发的相册浏览库，可自行定制外观，支持本地和网络的图片。 主...
一个JavaScript插件，显示在iPhone设备（在Safari浏览器上）上安装Web应用程序的消息。 如果您要构建一个渐进式Web应用程序，这将很有用。 如果您不知道什么是渐进式Web应用提供的为什么需要尽管Safari尚不支持服务...
在 web开发方面，分别介绍了三个 iphone web库，即 webkit、iui和 canvas，并讨论了 web开发环境 dashcode，最后阐述 web应用程序的调试。在 sdk开发方面，详细描述其各种组件和功能，包括 xcode、interface builder...