Designing and Developing for the iPhone from Scratch

In this tutorial, we are going to design a website for the mobile Safari browser (found on the iPhone and the iPod Touch).

source: NetTuts

Coming Soon: Flash Apps for the iPhone

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3.

source: Adobe Labs

FireQuery: A Firebug extension for jQuery development

FireQuery is a Firefox extension integrated with Firebug.

source: binaryage

WebApp.net release v0.5.0

This version is mainly a maintenance release which fixes many bugs found in previous versions and related to Safari Mobile (iPhoneOS 3.x).

source: webapp-net.com

WebKit Web Inspector updates

A number of exciting new features have been added to the Web Inspector since our last update.

source: Webkit.org

There are many different types of tools available to developers, from low-tech stencil kits to high-tech collaborative software. So I’ve rounded up a few of the more popular ones people are using specifically for iPhone development. It’s far from being the definitive list, but it’s definitely a good place to start.

Low Tech Solutions

Notepod

Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space (the iPhone screen), the back is a 6mm grid.

Project Page

iPhone UI Stencil Kit

The iPhone ui stencil kit is a stainless steel, laser cut stencil kit for drawing quick mock-ups and wireframes for iPhone apps. It also comes with a Zebra mechanical pencil.

Project Page

iPhone Sketch Pad

The iPhone Sketchpad works precisely with the iPhone Stencil Kit, with one phone silhouette on the front side and three on the back.

Project Page

App Sketchbook

The App Sketchbook has 50 Double-sided, perforated pages each with 3 actual sized iPhone templates. Each page also has has 20px ruler markings and a ruled section for notes.

Project Page

Vector Images

MetaSpark’s Fireworks Vectors

A collection of vector iPhone UI elements for Fireworks CS3 and CS4.

Project Page

320480 Stencil PSD file

Most iPhone screen elements, sensible layer sets all contained within one PSD file.

Project Page

Graffletopia Stencil Kit for Omnigraffle

Graffletopia’s stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch as well. The symbols are meant as a check list for included features in your app development.

Project Page

MockApp

MockApp is a set of iPhone ui templates and library files put together for use in Powerpoint or Keynote.

Project Page

Firefox Plug-ins

iPhone Prototype

This is a plug-in to browser Mozilla FireFox for prototyping interface of iPhone applications for creating an iPhone mock-up. Currently Alpha – not compatible with FF 3.55.

Project Page

Firefox Pencil

Pencil is a free and opensource tool for making diagrams and GUI prototyping. Pencil runs on the Mozilla Gecko engine, turning the Firefox browser into a sketching tool with just a 400-kilobyte installation package.

Project Page

Fireworks Plug-ins

Unitid

This plug-in combines Fireworks with some jQuery and PHP to give you a prototype you can not only view, but interact with, directly on your iPhone, just as if it’s a live app.

Project Page

iPhone Apps

LiveView

Liveview is an iPhone app that consists of two parts: the ScreenCaster and the Application itself.  ScreenCaster launches a simple iPhone skin on your Mac. From the same network, launch the LiveView app in your iPhone. Whatever the ScreenCaster is highlighting is now seen in the LiveView App. It also interprets touches as mouse clicks, turning it into a two way interactive prototype.

Project Page

Web Based Tools

Mockingbird

Mockingbird is a web based mockup/wireframe tool built using the Cappucino framework, so there’s no flash to wrestle with. While you can’t actually design your mockups from an iPhone (who’d want to?), the tool does have some very handy features. You can drag elements onto the screen, create multiple pages, link to other pages and share directly from the web.

Project Page

Pidoco

 Pidoco is a web-based tool that lets you create clickable wireframes via drag & drop ui and then collaborate with remote users on each project. The tool also includes iPhone stencils.

Project Page

iPhone Mockup

iPhone mockup is a web based tool that is currently in Alpha release only. You can design your mockup as a hand sketch or illustration, and mockups can contain user-uploaded images and user-entered text. Your mockups will be accessible via url so they are unsecured.

The developer makes this perfectly clear and warns that he could discontinue hosting mockups at anytime, thereby deleting any work. That makes this a handy tool for quick and dirty mockups you want to print or share with someone on the fly, but not for much more.

Project Page

Protoshare

Protoshare is a collaborative, web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time. It has an iPhone component that can be seen here.

Project Page

iPlotz

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Project Page

Installed Software

CogTool

CogTool is a general purpose UI prototyping tool simply using a storyboard of your design idea with sketches, images or on a canvas. Demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks.

Project Page

Balsamiq

Balsamiq mockups is desktop software that is designed to help teams or clients collaborate on wireframes and mockups. There are iPhone specific controls included.

Project Page

OmniGraffle

OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.

Project Page

Justinmind Prototyper

Justinmind prototyper allows you to create fully functional wireframes for mobile applications and generate your HTML high-fidelity wireframes.

Project Page

iRise

iRise for iPhones gives developers a way to quickly prototype the look, feel and behavior of Apple iPhone applications through pre-defined visualization widgets and templates that can be quickly assembled into a high definition mobile applications.

Project Page

Quite often I come across some great blog posts, news releases and demos that I want to share, but don’t necessarily warrant an entire blog post. So I am starting a new series of posts titled ‘Newsworthy’ where I’ll share these stories and link to each one.

Developing for the Apple iPhone using Flash

Adobe now makes it possible to create applications for the Apple iPhone using the Adobe Flash Platform.

via Adobe

Mobile Application Analytics

Flurry Analytics provides accurate, real time data to developers about how consumers use their mobile applications.

via Flurry.com

Getting touchy feely with scripty

With just one API, you can now multi-touch enable any web application easily.

via Ajaxian

View Source Tutorial: Sticky Notes With HTML5 and CSS3

Take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support.

via Ajaxian

I have only used a few of these, so I won’t vouch for usability. If you know of any that I should add to the list, please let me know.

iUI

iUI is a user interface (UI) framework for Safari development on iPhone. It combines JavaScript, CSS, and HTML for development of web apps that look and feel like native iPhone apps

License: New BSD License

Project Page
Download

iPhone-Universal

The UiUIKit (Universal iPhone UI Kit) is a collection of HTML examples of what can be done with CSS3 and Safari’s Webkit

License: GNU General Public License v3

Project Page
Download

iWebkit

iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and profesional looking website.

License: GNU General Public License v3

Project Page
Download

jQTouch

jQTouch is a jQuery plugin for mobile web development on the iPhone, Android, Palm Pre, and other forward-thinking devices. Features include: easy setup, native WebKit animations, image preloading, callback events, flexible themes, swipe detection.

License: The MIT License

Project Page
Download

Magic Framework

Magic Framework is a native iPhone UI imitator and HTML5 db interface built in html/css/javascript. It’s useful for online websites or on-device Webkit-based applications looking to imitate the native iPhone UI and/or use native storage without having to write native code.

License: Creative Commons Attribution 3.0 United States License

Project Page
Download

WebApp.net

WebApp.Net is a web application micro-framework has been designed to mimic the actual iPhone and iPod Touch graphic user interface. It combines JavaScript, CSS, and HTML for development of web apps that look and feel like native iPhone apps.

License: New BSD License

Project Page
Download

XUI

A simple javascript framework for building mobile web applications. XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

License: The MIT License

Project Page
Download

Rhodes (Ruby and gems required)

Rhodes is an open source framework for building native apps for all major smartphone operating systems. These are true native device applications (NOT mobile web apps) which work with synchronized local data and take advantage of device capabilities such as GPS, PIM contacts and camera.

Rhodes allows you to write your views in HTML and compile the application down to a native application for each device OS. A single set of source written with Rhodes can be compiled to run on all major smartphone devices, providing access to native device capabilities such as GPS geolocation, PIM contact reading and writing, and camera image capture.

License: Commercial ($500 – unlimited users)

Project Page

Sproutcore (Ruby and gems required)

Sproutcore is an HTML5 Application Framework written in Ruby. The Mobile framework contains views useful for building applications that run on an iPhone, Android or Palm Pre device.

License: The MIT License

Project Page
Download: (available as a Rubygem from github)

QuickConnect

QCiPhone allows you to use native iPhone behaviors without needing to know Objective-C or the native iPhone API. You create your interface in HTML and CSS and then implement you application logic in JavaScript.

License: The MIT License

Project Page
Download

CiUI (CNET iPhone UI)

CiUI was written by Vladimir Olexa of CNET after researching other frameworks to create an iPhoneized version of CNET. CiUI was greatly inspired by Joe Hewitt’s iUI, but with a few differences:

1. AJAX calls are performed after a page slides
2. DOM doesn’t get overloaded with “pages” as they load. Instead, two DIVs are constantly being reused
3. Page titles are set on the source page, not on the destination page
4. Only specified “a” tags are assumed a part of the UI

License: The MIT License

Project Page
Download

PhoneGap

PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.

License: The MIT License

Project Page
Download

LiquidGear

LiquidGear is a PhoneGap fork for developing iPhone applications using javascript and html. No need to learn Objective-C. LiquidGear runs as the middle man between your iphone hardware and your web app, giving you access to native iPhone functionality such as, accelerometer, gps, photos, calendar, and more.

License: The MIT License

Project Page
Download

Safire

Safire is an open source framework written in HTML/CSS/JS

License: The MIT License

Project Page
Download

Modelbaker

ModelBaker is an application development tool (Mac only). It is a visual editor that requires minimal coding skills, and supports MySQL, Ext JavaScript framework and PHP (up to PHP5). ModelBaker can be used to create web applications that are accessible from PC, Desktop and webkit based mobile devices.

License: Commercial

Project Page

Cappuccino

Cappuccino is an open source application framework that uses a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript. Developers can create web applications that work on all browsers, including Webkit.

License: License: GNU General Public License v3

Project Page
Download

TapLynx

TapLynx is a proprietary SDK create simple native apps from rss feeds. It displays displying text, photos and videos and supports ads, video pre-roll and sponsorship for potential monetization. Intel Mac only, XCode required.

License: Commercial ($3,499)

Project Page

jPint

jPint is a set of css and JavaScript libraries designed to allow developers to build web apps that emulate the native iPhone ui. By the looks of it, development has been discontinued for jPint.

License: Creative Commons Attribution 3.0 United States License

Project Page

MobiOne was developed by Genuitec, who approach application development from an enterprise point of view. For many organizations, the installation and updating of native applications is difficult, since they must often go through a proprietary storefront. In addition, developing a device independent, enterprise class application can quickly become cost prohibitive. In an interview with eWEEK , Todd Williams, vice president of technology at Genuitec, said “In contrast, building mobile Web applications can be inexpensive and rapid because HTML/CSS3/JavaScript is the new platform.”

Genuitec’s approached the idea of distributing enterprise class applications to mobile devices by creating an IDE that does not install to a device. Rather it is an emulator with built in development tools such as debugging, a DOM Inspector, JavaScript Console, Resource Profiler and more.

Some of MobiOne’s impressive features are:

• User Agent Switcher
• Geolocation Support
• HTML5 Local Storage
• HTML5 Offline
• SQL Inspector
• JavaScript Debugger
• JavaScript Profiler
• DOM Inspector
• Resource Profiling
• Proxy Settings
• Simulated network (WiFi, 3G, Edge)
• HTTP, HTTPs, proxy support
• ACID3 test compliance
• CSS3 transforms
• CSS3 animations
• High performance JavaScript
• JavaScript-to-Java Bridge

In addition, MobiOne will soon have the following features:

• HTML5, JavaScript and CSS3 Editors
• iPhone web application templates
• JavaScript framework support
• iPhone Sync Service
• TruView local/offline web application support
• Educational resources (how-tos, snippets, tutorials)

MobiOne has also integrated real-time news and information about mobile web frameworks, with several that can be launched within the emulator. The following frameworks are (currently) supported:

• iui
• iPhone Universal
• iWebKit
• jQTouch
• Magic Framework
• WebApp.net
• XUI

Currently MobiOne is available for Windows only, and is free of charge (at least for the time being).

Download MobiOne here

Many creative types like pen and paper versus design software when designing the UI for that new killer app. The folks at Design Commission understand this and have come up with an excellent set of tools to add to your box.

The iPhone Stencil Kit is an iPhone sized stainless steel stencil with all the UI controls you could ask for. They include sliders, playback controls, icons, buttons, dialog box, and stars.  When you purchase the stencil kit you also get a Zebra mechanical pencil and a downloadable .PDF letter or A4 sized printable template of an iPhone.

To compliment the stencil kit, Design Commission has created the iPhone Sketch Pad. Each sheet has one iPhone silhouette on the front side and three on the back, for a total of 200 possible screens per pad. The pad is 8.5×11 and is made with 50lb paper. There are grid lines, project name, screen and date fields as well.

iPhone Stencil Kit Price: $17.95

Sketchpad is Price: $7.95

It allows designers to test their icons and themes locally, in a browser, before loading them onto the iPhone.

It’s quite simple to use. The first thing you’ll need to do is download the package. Extract it to a local directory and open iPhone.html or iPodTouch.html. By default you will see the first page and the native iPhone icons.

Switch to the second page (click page indicator dot) and you’ll see the contacts icon and 16 blank icons.

This means you have enough space for 40 custom icons to test.

To replace the native icons with your own, open new-icons.css and take a look at the code:

/*This is an Icon*/
#page-1 .Blank, #page-2 .Blank { background: url(Theme/Icons/blank.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*This is another Icon*/
#page-1 .Blank, #page-2 .Text { background: url(Theme/Icons/digg/Text.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

All you’ll need to do is replace each instance of the word ‘Blank’ with whatever the name of your icon is. For example, I downloaded the Digg icon set and used 16 of those icons. I placed them in their own directory (digg) within the icons directory so my css now looks like this:

/*Digg Calendar*/
#page-1 .Calendar, #page-2 .Calendar { background: url(Theme/Icons/digg/Calendar.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg SMS*/
#page-1 .Text, #page-2 .Text  { background: url(Theme/Icons/digg/Text.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg Clock*/
#page-1 .Clock, #page-2 .Clock  { background: url(Theme/Icons/digg/Clock.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg Contacts*/
#page-1 .Contacts, #page-2 .Contacts  { background: url(Theme/Icons/digg/Contacts.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg iPod*/
#page-1 .iPod, #page-2 .iPod  { background: url(Theme/Icons/digg/iPod.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

/*Digg Mail*/
#page-1 .Mail, #page-2 .Mail  { background: url(Theme/Icons/digg/Mail.png) center center no-repeat; }
#dock .Blank { background: url(Theme/Icons/blank.png) center 10px no-repeat; }

etc etc. Refresh iPhone.html or iPodTouch.html and they should now look similar to this:

Happy Designing!

Download Source here

Now it looks like it’s developers are really starting to keep that promise with it’s new Beta 2 release that includes a lot of enhancements and bug fixes.

If you’re not familiar with jQTouch, it’s a jQuery plugin with native animations, auto list navigation, and default application styles for Mobile WebKit browsers like iPhone, G1, Storm, and Pre. It’s released under the MIT License.

The latest jQTouch features:

• Native WebKit animations, with 8 core page animations (including several 3d options) and the ability to easily add your own.
• Support for custom extensions, including 4 built-in sample extensions for geo location
• A public object now allows you to manipulate jQTouch dynamically with functions like goTo(), goBack(), and submitForm().
• A “fast touch” feature is enabled by default, improving responsiveness up to 500% in some cases.
• Swipe Detection
• Flexible Themes

I’m seriously impressed with jQTouch and can’t wait to see what designers will do with it. Check out a few of the clips below and be impressed yourself:

jQTouch Preview

jQTouch Animations

View a demo here (on iPhone, Safari using iPhone user agent)

Download jQTouch here

Get support on Google Code

]]> http://iphoneized.com/2009/10/jqtouch-beta-2-released/feed/ 1 http://iphoneized.com/2009/10/nimblekit-native-iphone-apps-html-javascript/ http://iphoneized.com/2009/10/nimblekit-native-iphone-apps-html-javascript/#comments Tue, 13 Oct 2009 05:00:37 +0000 Chris http://iphoneized.com/?p=987 NimbleKit, developed by VolnaTech, is an SDK that allows users to develop iPhone applications much quicker using HTML and Javascript.

The NimbleKit API sits on top of Cocoa Touch and uses Javascript functions to give developers access to core iPhone functionality such as:

• Native iPhone interface elements
• Full control of application appearance
• Databases support
• Play bundle audio files
• Play audio streams from the Internet
• Play bundled or streamed video
• Support iPhone vibration
• Support Address Book with full search and people picker
• Access to bundled files
• Check Internet availability
• Location services (GPS)
• Access to images (take photo or browse in library)
• Multibutton dialog sheets
• Abilitie to mix javascript and Objective-C
• UISwitch native control
• UITextField native control
• Support for non standard replys for NKInternetPlayer
• Pages caching

The demo version of the NimbleKit gives you access to all of the features and testing on the iPhone simulator. You must buy a copy to run on your iPhone, but you can create as many apps as you like with it. You’ll also need Xcode installed with the iPhone SDK to run NimbleKit.

Download Nimblekit

Check out the NimbleKit wiki

Book Description:

Now web designers and developers can join the iPhone app party without having to learn Cocoa’s Objective-C programming language. It’s true: You can write iPhone apps quickly and efficiently using your existing skills with HTML, CSS, and JavaScript. This book shows you how with lots of detailed examples, step-by-step instructions, and hands-on exercises.

• Learn how to build iPhone apps with standard web tools
• Refactor a traditional website into an iPhone web app
• Hook into advanced iPhone features (e.g. accelerometer, geolocation, vibration, and sound) with JavaScript
• Do most of your development with the operating system of your choice

You can read the entire book online or purchase pre-order it at Oreilly.com