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)