09 - Web Apps
Web Apps out there...
09 - Web Apps ↑This week I wanted to look into some great examples of web applications out there in the world wide web, and take some inspiration from their designs and why are these web applications such a success. There are loads of examples of out there but there are just a few I wanted to target this week and take an in-depth look at, and get an idea of the reasons why they have achieved such success as they have.
I have known about Twitter for quite a while but have never took the plunge to start using the application until now. You can follow me on Twitter, after looking at the potential of Twitter I thought that it would be an ideal application for me to use whilst I am developing my Major Project, and can allow me to get some good contacts and good pointers along the way. As soon as I got signed up to Twitter, I didn't quite know what to do, and I had read Lee Munroe's post on 15 mac apps web designers should have in their dock a few weeks back and downloaded Twitterrific for the desktop and for my iPhone.
Twitterrific
I found Twitterrific very useful especially the iPhone App, and the application was very simple to use, I really like the handy tooltips that came up for novice users like myself. A tooltip to show beginners how to use my iPhone Application but was never quite sure how to implement this idea, and this idea has gave me some food for thought. Another Twitter app that I played with was TweetDeck (via Paul McMaster). TweetDeck is an Air application, and allows you to easily group your tweets.
TweetDeck
Another Twitter app that I looked at this week was Matt - Multi Account Twitter Tweeter. I have been admirer of Carsonified for quite a while and there is an interesting story behind the makings of Matt. Matt was created in four days.
Matt - Carsonified
After following a TinyUrl from a Twitter tweet to a Smashing Magazine post, TwitThis came up, and be curious I click on the TwitThis, and so far looks like such an easy to use and simple Twitter Application, and I think that I will use this quite a bit because it is just so simple to use - this will make this application very popular.
TwitThis
These are some good examples of how the Twitter community have really developed Twitter into such a great web application, and has played a part in its popularity and success, and looking at these apps has given me some nice ideas on how I could develop Performa Sports, however, these ideas would be useful after I have developed my application.
When I thought of researching into successful web applications, one of the first apps I thought of was Facebook. The success of Facebook is probably most down to the whole social networking buzz that is so popular. From a web designer and developer point of view, I love the design with the use of Ajax. Facebook maybe daunting to the novice user but you can quickly pick it up, and for my iPhone Application, I aim to build the application to run as an Ajax Application operating offline using HTML 5 client-side data storage to store the data, and send the data to the server thats running online when the user has an internect connection, to allow the user to access their data from not just the iPhone. I am planning on doing some testing on this approach, to ensure that I can achieve this goal.
Everyone knows Google, and is one of the most used web applications in the world with such a wide audience. I am not just talking about their search engine to which most people would put the name (brand) Google with. Google have developed some amazing web applications using a lot of nice Ajax coding. With Ajax, Google have produced the following three web applications that I have looked at over the week:
Google Analytics
Gmail
Google Docs
I have been a particular big user of Google Analytics and Gmail, but as of yet have not really had the need to use Google Docs, however, I feel that its' usability will come very effective when working in a team basis, and to allow for easy co-operation. Something I may need to use in the years to come, maybe...
Web Development Tools...
09 - Web Apps ↑
that I didn't quite know until now!!! This week I read a post from Smashing Magazine - 15 helpful in browser web development tools, and a lot of the tools I was already using such as Firebug, and Web Developer. However, as I read through the post two in browser tools that I quickly bookmarked and got set up on my mac, were Yslow and Web Inspector.
Yslow
09 - Web Apps ↑
Yslow is a great addition to any web developers toolbox, as it easily slides into your firebug toolbar, and displays the performance of the site and gives you a grade from A (brilliant) - F (Not so good). Yslow gives you an overall grade, but also a breakdown of different grades for each section, so that you can easily see where your going wrong. Yslow has a stats view, which shows all the files that have been cached, and displays the files in a pie chart, along with cookies.
Never heard of gzip components before until I read Yahoo's - Best Practices for Speeding Up Your Web Site. As I read through all their best practices, as speed will be crucial to the user experience for my web application on the iPhone. I think I'll be using YUI Compressor to compress my PHP, CSS and JavaScript files. However, for gzip to work my application will need an apache server to run on, so until I get testing this method out I will use it if it works.
Web Inspector
09 - Web Apps ↑
I have always used Firefox as my main browser mostly because of all the great add-ons you can get, and makes website testing a lot easier. Now comes Web Inspector on Safari. However, Web Inspector is not turned on automatically, but can be turned on from the terminal. I have downloaded a recent version of the web-kit that has Web Inspector automatically turned on. With the latest version of web-kit and with the help of Web Inspector, it will allow me to test for HTML 5 client side storage, and if my app will function on the desktop, then it should work on my iPhone.
iPhone Developer Program
09 - Web Apps ↑
Finally after a long two weeks of waiting I had been approved by Apple for the iPhone Developers Program. The program that costs $99, has nicely laid portal site, and as Apple do they provided me with some videos to help me along to creating my first iPhone App. Firstly, their is a section where you setup your team. There are roles such as team agent (me), team admins and team members. Each role with different levels of control on the portal site. For my application all I need is my role as the team agent, with full control, and responsibility of the project. To be able to start testing your application on your iPhone device, you have set up your iPhone Code Signature.
iPhone Code Signature
09 - Web Apps ↑To set up your iPhone Code Signature, you must apply for a development certificate by going into the KeyChain Access application on your desktop and from the preferences tab ---> Request a Certificate from a Certificate Authority. This will create a CSR (Certificate Signing Requests) file, which I submitted to the program portal site. After that I have to approve the CSR to be used. Once the CSR has been approved, a download button beside the certificate appears. I downloaded my certificate, and open the file and it automatically saves the file inside your KeyChain Access application. I have now setup my iPhone Code Signature on my desktop.
Testing Device
09 - Web Apps ↑The process is not yet finished, I then had to setup my testing device, by uploading the Unique Device Identifier of my iPhone, which is 40 hex character string. Also I named my device Dannys iPhone. Although I ran into a bit of trouble with the naming of the device as Danny's iPhone would not work, as an the following error appear ---> Please use alphabet characters or numbers only.
App ID
09 - Web Apps ↑The next step in the process was to create my App ID. For every application, I will be testing on my iPhone I will need to first create an App ID. Creating an App ID is very simple, just give the App ID and name, and give it an identifier in the structure of com.domainname.appname.
Provisioning Profile
09 - Web Apps ↑The last step in the process is creating the provisioning profile. This last step combines all the above steps into one file. You gave the provisioning profile a name, select certificate, the App ID and the device that it will be tested on. Then submit the profile to Apple, and they will provide a download button from the portal site. Once the profile is downloaded I drop the provisioning profile into my organizer from the Xcode window, and that is me ready to start testing applications on my iPhone.
Which iPhone Framework?
09 - Web Apps ↑In week 7 I came across PhoneGap and iui as iPhone frameworks, since then I have setup my iPhone as a development device, I wanted to experiment with these frameworks to see if I could use them for my major project. I have done a lot of reading up on the Google Groups on PhoneGap, and a lot of good movement has been made as they now have setup a wiki and view their Roadmap. One of the major benefits is that the framework is supported on Android and Blackberry as well, allowing me to easily port my application onto these Phone OSs'. As I was reading through the discussions on PhoneGap, I came across another iPhone framework, Big Five, this framework looks very similar to PhoneGap, although it is only for the iPhone. So far both frameworks have been successful in submitting applications to the App Store.
This week I looked numerous different frameworks for the iPhone, and here is a list of them that I looked at:
- iui - http://code.google.com/p/iui/
- iWebkit - http://iwebkit.net/
- jPint - http://www.journyx.com/jpint/
- WebTouch - http://ejohn.org/blog/iphone-javascript-apps/
However, below are the two frameworks I feel could be beneficial to my major project, as both frameworks allow me to access the iPhone API via JavaScript, and both will allow me to create a web app and wrapped it up as it was a native app.
PhoneGap - tutorials online
09 - Web Apps ↑
I was very happy man when I got my first iPhone App working on my iPhone, as I did encounter some problems but thanks to the Apple's support I was able to sort out the problem of installing the app onto the iPhone. I followed the tutorials on the PhoneGap wiki, and was able to load up my website from my iPhone.
Big Five
09 - Web Apps ↑
Big Five, which was created by Dirk Holtwick, has not yet setup any tutorials as of yet, but has some screencasts highlighting the capabilities of the framework. So far through reading the Google Group discussion pages on both PhoneGap, and Big Five, that PhoneGap breaks when JavaScript and CSS files are link through folders, whilst as Big Five doesn't break, so I will be keeping a close eye on both frameworks as my major project develops. However, Big Five cost $14.99 from iTunes, and PhoneGap is open source.
Plans for Next Week
- Next Week I want to create the brand for PerformaSports
- Create a brand for Clare Byrne - spaceforyourself.com