As part of Widgetbox's new staff series—we'll be bringing you occasional guest posts from members of the Widgetbox team.
Last month, Widgetbox began to equip the front-end Development team with brand spankin' new iPads. It was definitely an Oprah moment during that morning's SCRUM meeting, you could imagine Giles our CTO shouting out "You get an iPad! You get an iPad!" It was actually happening, I was becoming an iPad owner, I was in. If you could have seen my face, I'm sure it looked something like this :-o. I was excited to begin using it, in a new toy kind of way, but also as a canvas to unleash my creativity. At first, I expected the experience on the iPad to be very similar to that of the iPhone I've been using for years, after all the iPad is basically a larger iPod Touch, right? If you have used an iPad, then you probably know, although it's similar to the iPhone's user interface, the iPad is a completely new device meant for new applications designed for the large screen. When iPhoneOS 2.0 came out, I began seriously trying to learn Cocoa Touch and have since built a few applications in my spare time (that haven't seen the light of day.)
Now that I have an iPad, and with Apple's recent public release of iOS4.0, the idea of developing for the device sounds pretty intriguing. I have been trying to get a handle on iOS (formerly iPhoneOS) for a few years now. It hasn't been the easiest transition from my garbage collected world of Java and ActionScript, but with the help of Google and a few lucky queries I managed to find my way. I've collected 10 of my favorite resources, the ones I've returned to time and time again. Whether you're a seasoned iPhone developer looking to get jump into iPad development, or a complete newbie to Cocoa Touch, you'll want to bookmark these links to help you make the most out of your iPad apps. As an added bonus all of the resources listed here are FREE resources available for you to use! We'd love to hear what you think are your essential iPad developer resources, let us know what sites are your go-to references in the comments. Enjoy! (Listed in no particular order.)
1. iPad GUI PSD (Photoshop Template) http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
Teehan+Lax does it again! This time they have put together a free PSD containing all the parts of the iPad's UI in a beautiful template (PSD Format). If you find yourself needing to mock up a screen or having to create a custom button, this is the place to start. You'll find a host of resources buried within this template from fonts to buttons, UIKit elements, and even a full iPad layer perfect for mocking up marketing materials. This is just as complete as their first version created for the iPhone. The template includes incredibly high fidelity replicas of the most common iPad UI elements. I highly recommend that you keep this close to you. (Download PSD).
I use this template for designing layouts, creating screenshots, and just pure inspiration.
2. LiveView for iPhone & iPad http://www.zambetti.com/projects/liveview/
From developer Nicholas Zambetti, comes a nifty application called LiveView which allows you to interact with your apps on the device without having to pay the $99 Apple Developer Program fee. It's not the real deal, you won't be able to install your apps on your iPad with this software, but while you're learning how to use the SDK it's a nice option for testing if you want to avoid shelling out the cash. The app is basically a VNC app for your iPad that allows you to see an iPad sized region of your computer screen letting you see your UI in your hands on the device. It easily connects to the LiveView Sceencaster server application which you need to have running on your computer. In recent versions, LiveView can go fullscreen, and it also has the option to relay touch events through to your computer allowing you to interact with your apps while they are running in the iPad Simulator. The first time I experienced one of my apps on an actual iPhone in the palm of my hand was a very gratifying experience. They offer iPhone support as well. Get it now!
I use this app to test out my user interfaces and verify the interaction experience.
3. XCode Tips & Tricks http://stackoverflow.com/questions/146297/what-are-those-little-xcode-tips-tricks-you-wish-you-knew-about-2-years-ago
I am a Java coder by day, spending most of my time coding in IntelliJ. One day I was frustrated with how noticeably more efficient I am in IntelliJ than I am in XCode. I was pretty sure it was the software, but the more I got to explore XCode, I found out that it was, in fact, a beast. So I went to Google to ask what I was missing. You ask and you shall receive... This is one of my favorite webpages on the entire internet. Partly because I practically Googled this exact question only to find this thread with almost 2 years worth of tips and tricks. But mostly due to the fact that it contains so many gems that I have yet to find in any other posts regarding the subject, making this the most complete collection of XCode tips and tricks I've ever seen on the Web. I can't even pick one as my favorite, so just head over to Stack Overflow and check out the endless amount of community involvement. If you have something that's not on the list, make sure to add it.
I used these tips to become an XCode ninja, seriously.
4. iPad Human Interface Guidelines http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html
Apple has done the hard work for us by defining what the Human Computer Interaction should be like on the iPad. In my opinion, they have done an exceptional job of encouraging developers to produce experiences that really embrace those design principles. The tools provided for you in the SDK are great to get you started, but visually they aren't the most exciting elements. The UI building blocks available in Interface Builder are intended to be used as a proxy for how your app will behave. At first, I was frustrated with the limited customization available within Interface Builder, but once I figured out how to make the UIKit elements look like I wanted, I understood the power of Apple's iPad HIG. It is intended to establish a consistent user experience so that when a user finds my app, they just know how to interact with it making the entire experience a consistent one regardless of what application context you are in.
I use this document to help me understand what my app should and shouldn't do.
5. Today in iOS Podcast http://itunes.apple.com/ca/podcast/today-in-ios-podcast-the-unofficial/id252820844
As soon as I got my iPad, I found that I began using my iPhone a lot more. But really, it was just to get to know my iPad a little better. By the recommendation of our CEO, I have now become addicted to listening to podcasts with the Stitcher Radio iPhone app where I found the recently renamed Today in iOS podcast. These guys offer a great show full of Apple updates, iPad news, app reviews, interviews, and many other topics surrounding Apple's iOS. If you're looking for a good way to keep up-to-date with iOS news, this is definitely worth checking out.
I use this podcast to get my weekly fill of topical iOS banter.
6. appsamuck http://appsamuck.com/
This one's more of an iPhone developer's resource, but I had to include it because it's too good not to. 31 FREE downloadable iPhone applications (with entire source code) available for you to download and learn from. I came across appsamuck while reading their iPhone Game Development book where they offer great tutorials and tips for getting started with iOS game development. Here you'll find tutorials ranging from something as simple as setting up your first iPhone application to advanced topics like how to implement particle emitters to simulate flames for visual effects. Each application has a description page which tells you a little bit about the application and what lessons it can help teach you. They say the best way to learn is by example; if that is true, then this is the best way to learn.
I use these examples (and book) for code samples and to learn Objective-C.
7. Glyphish http://glyphish.com/
Glyphish is simply a free set of monochromatic icons for use in UI buttons and tab bars. The set includes 130 icons ready to import into your project. There is a great range of icons available allowing you to satisfy most UI requirements. If you can't find an icon in this set, you're probably trying too hard. The icons are distributed under a Creative Commons Attribution license.
I use these icons so I can spend time focusing on the details.
I use these icons so I can spend time focusing on the details.
8. three20 http://three20.info/
An Open-Source iOS UI development framework. Have you ever used the Facebook application and wonder, "Man, I wish I could have these UI elements in my app without the hassle of having to build it all myself?" Well, me too! You don't need to wish, because three20 is here to solve this. This is the UI framework that the actual Facebook application is built on top of. The developers have done the community an amazing service by making this available for us to use. The overview provides a nice glimpse at what is available via this framework. If you're planning on building any custom UI, this is a great place to start your implementation.
I use this framework to include complex UIs in my apps without needing to code them.
9. OpenFeint http://www.openfeint.com/
OpenFeint is an Open-Source Social Gaming Network that runs embedded within thousands of iOS apps. The premise behind OpenFeint is not to allow for interactive gameplay, but to act as a hub for players of various games to manage contacts, share their achievements, post their high scores, and find out about other games that might interest them. They claim to be "The coolest thing since sliced awesome." I'm not sure what that is supposed to mean, but from my experience, OpenFeint is pretty awesome. Although Apple recently announced plans for their own social gaming network, Game Center, I'm not suspecting OpenFeint will be going anywhere soon. Every game I've played with OpenFeint integration has had a consistent great experience around the social features making it a definite plus for me when purchasing games in the AppStrore. From a development perspective adding it to a game can be less than a days work. It's an entire social gaming hook for your app that is pretty much pluggable. It's awesome.
I use OpenFeint as a gamer, and want to build a game just so I can implement it.
10. Cocos2D-iPhone http://code.google.com/p/cocos2d-iphone/
Cocos2d for iPhone is a 2D graphics framework for managing your 2D assets. The framework allows for building robust applications using the same API as the original cocos2d design, but instead of using python it uses Objective-C. This framework is being used in many of the games in the App Store, and is a great accelerator for any project that includes custom graphics beyond the standard UI components. Using Quartz or Core Animation in your app can be an insurmountable challenge for some; if you're having trouble, give cocos2D for iPhone a shot, you may be surprised how easy it is to create elaborate transitions and effects using the built in cocos2D classes.
I use cocos2D to easily manage the sprites in some of my application that require animation.
For another iPhone resource, check out our Mobile Site Builder. With our Mobile Site Builder you can quickly create an HTML5-based mobile site for your business or brand.
—When Omar isn't destroying co-workers at the iPhone game Eliminate or planning romantic dinner dates for his wife, he's a front-end engineer here at Widgetbox