开始你的iPhone和iPad应用开发旅程

上周Enqoo和大家分享了一篇《如何开发你的第一款iPhone应用?》,今天我们继续讨论iPhone和iPad的开发工作。

据AdMob显示,iphone的操作系统已经占据了全球智能手机市场的50%,占据第二位的是Android系统,约为24%.Apple ipad第一年的销售预测在任何地方的运营都是以百万计的。不管你喜不喜欢,ios操作系统,尤其是Safari浏览器,已经成为Web开发一个不可忽视的力量。如果你还没有使用,现在就是时候使用它,并且让你自己熟悉这些优化网站的工具和为ios系统提供的应用软件。

值得庆幸的是,在iOS系统上的的Safari浏览器是一个真的非常好的浏览器。就像为台式电脑开发的Safari4一样,它有着非常好的CSS3 和 HTML5的支持。它也有一些与iPhone和iPad不同的,漂亮的界面元素。最后,因为iPhone OS已经存在相当长一段时间,现在有大量的资源是可用的。

我知道,现在有很多对本地应用程序的iPhone OS平台中心的讨论。但你仍然可以创建使用HTML,JavaScript和CSS的强大的,本土的前瞻性应用。本文将重点讨论三个阶段的建设和优化您的网站:设计,编码和测试。

在我们进入这三个阶段之前,让我们先看一些建立一个本地应用程序,而不是一个Web应用程序的优缺点。

建立一个本地应用程序,而不是一个Web应用程序的优点:

  1.  没有苹果公司的审批程序和繁文缛节,这是特别重要但却富有争议的服务。
  2.  与其他使用相同代码的流行的平台如Android和黑莓相比,优化你的web应用要容易得多。
  3.  你不必学习Objective-C。
  4.  如果你向使用者收费,你也不必和Apple公司平分你的收入。
  5. 你获得100%以上的支付手段,促进和分配给用户的控制,这也可能是一种消极的,取决于你如何看待它。

建立一个本地应用程序,而不是一个Web应用程序的缺点:

1.不能存在于App Store中。

2.安装设备上的应用程序是一个小麻烦。

3.没有权利访问一些本地的iPhone OS的功能,如推送通知和GUI控件的功能。

设计

设计一个Web应用程序设计,很像是一个本地的应用程序设计,所以你有机会到一些真正极好的工具。无论是线框选择的工具还是铅笔和纸张或桌面软件,你都能找到。

灵感  

没有多少人知道,苹果有一个“Web应用程序”在其网站上,这是专门展示优化网站的。

也有一些其他地方展示在移动网络设计的最好的网站:

苹果应用列表

移动应用设计画廊

CSS iPhone 设计画廊

Well Placed Pixels  

Apple App Store (虽然这些都是本地应用程序,你可以找到伟大的视觉灵感在这里。)

纸  

纸上原型一直是我为新思路或网站线框设计的首选工具。我真的很喜欢下面的工具,他们提供的角度的大小和你正在处理刚好吻合。要想成功地优化Web应用程序的iPhone OS,你要削减一些东西。我建议保持设计最小线框用Sharpie笔,下面列出的工具之一。

Notepod: iPad 和 iPhone 的速写本

 •App Sketchbook 

 •PixelPads

 •UI Stencils sticky pads  

 •Apress iPhone Application Sketch Book

  •Printable iPhone Wireframe Template (free)

数字化  

一旦你真正地知道事物怎样在你的设计中展示,我们可以移动到桌面,并得到具体的细节。我真的很喜欢OmniGraffle 的框架,但有时直接用Photoshop又是有用的。无论哪种方式,这些工具在它需要时会有巨大的帮助。

iPhone GUI PSD 3.0 and iPad GUI PSD (Photoshop)

Layered iPhone GUI elements (Photoshop), from Designer’s Toolbox

PSD Vector Kit (Photoshop), from Smashing Magazine

iPad and iPhone stencils; see more at Graffletopia (OmniGraffle)

iPhone and iPad Development GUI Kits, Stencils and Icons

想要知道更多吗?这篇文章对额外的设计工具有一个很好的概述。

编码  

当您启动在iPhone OS上启动Safari浏览器时,了解浏览器是如何工作是很重要的。另外,在iPhone和iPad的浏览器还有一些细微的差别,比如怎样使表单选择框 运作。最重要的是,Safari浏览器有强大的CSS3和HTML5的支持,所以你可以使用现代化的代码,而不必担心跨浏览器兼容的问题。

教程

实际上,苹果公司为记录ios系统上的safari浏览器做了很好的工作。在我看来唯一的缺点是缺乏浏览器检测和窗口定位的帮助。阅读文章下面的一切,你需要了解这个浏览器的编码。 iPhone Web应用程序的人机界面指南  这是关于Safari浏览器在iPhone OS如何运作的一个很好的的全面总结。这肯定是值得一看的,因为它有一些很好的意见,虽然没有具体的编码例子。

iPad的人机界面指南

这个文件为区别的iPhone元素和iPad元素做了很好的工作。这也是值得看一下的,因为它有一些为iPad设计的意见。

Safari网页内容指南

这个文件得到的关于窗口,webclip图标,独特的meta标签和事件处理的具体事例,其中包括许多其他议题。提供代码示例。我建议你开始使用之前从头到尾阅读它。

为iPad准备你的网页内容

本文档为测试您在ipad上的网站提供了一些指点,但其在检测浏览器上的讨论可能没有我想的那样详细。

浏览器检测

大卫·沃尔什在他的博客上提供了在iPadiPhone上检测浏览器的很好的例子。 PHP和JavaScript选项都包括在内。

iPhone窗口取向的检测

这个开发教程为iPhone的方向如何改变样式表提供了一个很好的例子。

iPad的窗口定位检测

检测窗口iPad的方向要容易得多。下面是代码(没有JavaScript要求的):

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>

<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

虽然iphone有一些关于移动电话发展的框架,但jQTouch离最好的还有很远。jQTouch给你所有的工具,使您的移动Web应用程序的外观和感觉就像一个本地应用一样。访问该网站,去从你的iPhone的演示网站,获得它的感觉。   建设的第一个网站我jQTouch时我唯一的抱怨是缺乏文档和教程。我必须通过用图演示网站的代码打出来。下面是一些jQTouch证明有助于我的第一个网站的文章:

jQTouch Wiki on Google Code

•Building iPhone Apps with HTML, CSS and JavaScript, Chapter 4: Animation

•PDF slides about getting started with jQTouch, by Philipp Bosch

测试  

建立一个网站或Web应用程序的iPhone OS的关键,但又有些棘手的部分就是测试。这比在浏览器上测试要复杂,但用你熟悉的工具,做的过程应该比较简单。

实时查看

当您的应用程序是在设计或编码阶段的初始,实时显示是一个非常实用的测试工具。它允许您从您的桌面上播放图像到您的手机,所以你可以看到是什么样子。这在测试尺寸时是非常有用的,文字的大小和视觉细节恰到好处,因为有时从Photoshop的可视化是很难的。

使用iPhone模拟器

在我看来,没有好的iPhone或iPad模拟器,可用的就是浪费时间。更好的是下载最新版本的SDK,并使用苹果官方的iPhone OS模拟器,这当然也是支持iPad的。   设立SDK和一个本地测试环境需要几分钟,但是这非常值得去努力,而不是根据非官方的,并且往往是不准确的模拟器。关于设立一个本地测试环境,我写了一步一步的教程,很值得一读。有关本地测试的一个伟大之处在于,它的速度更快,并且不需要互联网连接。我强烈推荐它,直到你准备开始。

PhoneGap:两全其美?  

PhoneGap是一个Web开发人员的游戏转换者。如果你宁愿在HTML,CSS和JavaScript创建你的应用程序,并希望它运行在App Store中,PhoneGap就是解决方案。它是一个开源的开发工具,不仅你的代码编译为本地使用的iPhone OS,也为 Android, Palm, Symbian, Windows Mobile and Blackberry 设备服务。   PhoneGap最近与3.3.1苹果公司的服务条款有点争议。换句话说,PhoneGap编译的应用程序仍然会批准。但会检验与PhoneGap的建立,以了解更多的应用程序列表。

感到忙不过来?  

如果是,那么一些好的托管服务将使它更容易为多个平台服务,以优化您的网站,而不必从头开始。有各种可用的灵活的平台,但所有的服务,使用像一个所见即所得的编辑来帮助您创建移动网站上的飞行物。根据您的Web应用程序和客户端,执行下列操作之一可能是一个不错的选择:

•Mobify (which powers Smashing Magazine’s mobile website)

 •Wapple

 •Mofuse

 •Mobi10

结论   对于一个Web开发人员来说,这是一个伟大的日子。因为像iPhone OS这样的非桌面平台为我们开辟了更大的可能性以表达我们的创造力和企业家的理解力,同时让我们坚持以现代Web标准。你需要创建一个极好的web的所有的工具是目前主导移动空间的主要平台。让它们变成怎样都取决于你。

-> 转载请务必附上应酷设计原文链接,谢谢合作!

全球最新的设计资源,精彩实用设计技巧每天呈现。欢迎关注微信公众号:ienqoo

让产品体验更好:www.enqoo.com

2 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注