07 - Prototyping
On fridays lab class, I had got the opportunity to discuss my major project with Nick in further detail, and I recieved very positive feedback. First things first at that stage I had not yet own an iPhone, and Nick heavily encourage me to this. I have thought about this for quite a while and after many trips to the Apple store in Victoria Square, I have bought myself an iPhone, and I love it. I am very excited about my major project as Nick said:
Your major project is very specific and simple, and will work very well.
Source - Nicklas Persson
Draft 0.2
07 - Prototyping ↑
Nick was very helpful, as he showed me some good links for me to have a look at, and he showed me Omnigraffle, a mac application that would allow me to quickly put together some prototypes of Performa. So far I have made only quick sketches of how Performa will look like, and getting my ideas on paper first. Everyday as work on Performa, I am getting new ideas, so I am expecting to have many revisions before I am happy with the final draft. With Omnigraffle, and the iPhone stencil that Nick showed me told me to download from http://corvusconsulting.ca.
With my second draft I began to think more of the process of how the app would work. As it the app will need to be flexible to cope with quick changes and be able to change within two to three presses on the iPhone screen. Ultimately I want my application to be very simple, and fast. For the user to perform a task with as little presses of the screen will be underlying key factor to the success of the application. If Performa can cope with the quick changes that can happen in a match, then it will turn out to be the managers/coaches best friend. I hope that Performa will be eventually used to help managers to prepare for their half time talks, and to help them aid them in their decision making skills. I intend for Performa to produce this visually, by using an Analyse button to graphically show the results of the stats of the match that has been recorded, with bar or pie charts.
Another article Nick gave me to read was Favorites UI design by Matt Legend Gemmell. The article is on the development of Matt's first iPhone Application, and I really liked how he showed some video of the interface would work. I really like how when there are less contacts the thumbnails expand to fit the screen of the iPhone. I also like how when the app enters edit mode, the X symbol appears on the top left corner of the thumbnail.
Making of Things UI for iPhone
07 - Prototyping ↑
I have been using Things for the last few weeks, and I have mentioned it a few times in my blog now but I had to buy the iPhone version of Things from the AppStore, and its a great iPhone Application as well as a Desktop Application. I love how both apps sync, its just soo simple. Nick told me that the makers of Things, Cutured Code, had documented the making of UI for the iPhone. However, when Nick told me about this the site was currently down, and is still down since I had written this week's blog, but I am eagerly waiting to see what they have done. Even though I haven't been able to view their site, on the Things Blog, they showed some screenshots of how they used cardboard stencils of the iPhone interface, and from the stencils made a lot of quick prototypes. This is simple a brilliant idea, one which I feel that I could adopt for quickly producing hand sketched designs of the final prototypes.
Web App v's Native App
07 - Prototyping ↑iPhone SDK
This week I played with the iPhone SDK to try and familiarise myself with Xcode and Dashcode. However, so far most of the resources I have been looking at are pointing me at sample code, and tutorials on how to create a iPhone native App using objective C. Objective C is a completely new language to me, and is more aimed at C and C++ developers. As at one stage I was thinking I would have to learn Objective C if I wanted to create my application, this really scared me as I was originally hoping to develop the app using CSS, XHTML, JavaScript and PHP.
After watching some more videos on my iTunes from the developers of Apple, I was happy to see that some of the videos do target Web Developers. However, I find that there is limit documentation on the iPhone DevCenter. However, towards the end of this week I came across WebApps DevCenter, this is exactly the kind of documentation I felt was missing from Apple. Next week, I hope to look through the documentation, and there is an online application to submit your web app, but I want to investigate this further. As can a web app be downloaded from the AppStore?.
iPhone Gestures
07 - Prototyping ↑
As I was talking to Nick on friday about the simplicity of the application, he suggested to benefit from iPhone gestures, such as shaking the phone to undo. I could also use the accelormeter, so that when the screen is tilted I could display a different layout of the app. There are lots of possibilites with the iPhone gestures. However, I would need to be able to access these capabilites of the iPhone so I could incorporate them. This is an interesting topic that I will investigate further over the next few weeks. As I was downloading some apps from the AppStore, I downloaded the Facebook app that was created by Joe Hewitt. From the options menu, the Facebook app allows the app to reload once the screen has been shaken.
As I was watching through the videos I downloaded from iPhone Developer Connection, the video on iPhone SDK for Web Developers. I was excited to find out that it is possible to use JavaScript to handle different iPhone Gestures, as I initially thought that this could only be accessed through using the objective C language of the native app.
PhoneGap & iUI
07 - Prototyping ↑PhoneGap
I came across PhoneGap when I read an article from Web Resources Depot a few weeks back. When I first read the summary of what PhoneGap was, I was thinking of how cool and useful this could be for me for my major project. As it more or less allows web developers to create their app and package it as a native app using the PhoneGap wrapper. I wanted to find out more so I signed up to the PhoneGap Google Group, and I have posted the following message:
Hi, I am web developer specialising in HTML, CSS and JavaScript, and I was thinking of creating a web app for the iPhone, but what I have read so far is that PhoneGap allows you to create a web app and wrap it in a native app that you can get from the appstore. This is brilliant and really new to me, and is it possible to test the app on an actual iPhone instead of using the iPhone simulator? If so, can someone help me? Is the app created from the index.html file?
Source - Danny Turley
I received a reply quite quickly saying:
Yes you can test the app on your own development iPhone as long as you are an Registered iPhone Developer. The iPhone Developer Program Portal is designed to take you through the necessary steps to develop, test and distribute your iPhone applications. Check http://developer.apple.com
You could include all you html files in the native app, or you can access them somewhere on your own webserver. In this last case you only need to point to your webserver from the Native App.
Very easy !
Source - Lieven Gekiere
The potential of PhoneGap looks amazing, but at the moment there is very limited documentation, and step by step guides and how to’s, so I will need to have a more in-depth look into PhoneGap, and hope to get more support from PhoneGap. Some of the members of PhoneGap Google Group have produce some iPhone Applications and you can find them on the AppStore. Here are the iPhone Apps made using PhoneGap:
iUI
07 - Prototyping ↑
iUI is an iPhone Framework created by Joe Hewitt. I came across iUI when I was reading an article that Nick gave me called Lessons Learned while Building an iPhone Site on code.flickr. This article was really helpful, as I was considering using the jQuery library for my app, and the first thing on their list was to not use a JavaScript Library or CSS framework. The article goes on to give helpful hints on how optimise page file sizes as this will ultimately speed up the application and give a better user experience.
Joe Hewitt used this framework to create the Facebook app, which I have on my iPhone that I got from the AppStore. If iUI is capable of producing the quality of the Facebook app, I will continue to investigate the iUI framework, and weigh up the pros and cons, against writing my own code.
CSS Animations
07 - Prototyping ↑When I was watching the video on iPhone SDK for Web Developers, the video went on to show the CSS support for CSS transforms, CSS transitions, and CSS animations. I originally thought that all the animation on the iPhone was created using JavaScript, but was very interested to see this done by CSS, and by doing this way would have loads of benefits especially as would reduce file size, and can be a lot more flexibile, and as a designer would be easier and quicker for me to create my animations this way. I wanted to research into this a bit more and found some information on http://webkit.org/blog/138/css-animation/. There are some great examples on this site to showcase the possibilities of CSS, however, you can only view this on Safari web browser, or a browser built using the web-kit engine.
iPhone Books
07 - Prototyping ↑
Nick emailed me a few books that I should have a look at, and the first book was called The iPhone Developer’s Cookbook 1st Edition, and I have bought this book from Amazon but this book is more aimed at native apps using Objective C. Another book Nick emailed me was called, iPhone SDK Application Development: Building Applications for the AppStore, however this book is due to be released until January 15, 2009. While I was reading up on these two books on Amazon, I looked through the section Customers Who Bought This Item Also Bought, I thought this book iPhone in Action: Introduction to Web and SDK Development and from the review would be very helpful for me but unfortunately not avaiable until January 28, 2009. The book - Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari, was another book I bought from Amazon, and hoping to getting reading it soon.
Plans for Next Week
- Watch the rest of the videos from the iPhone DevCenter.
- Investigate further into PhoneGap and iUI, as well as read the iPhone books I got from Amazon.
- Look at creating more Prototypes of Performa.
- Investigate HTML 5 ability to store offline databases on the iPhone