Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 14 2013

06:30

September 09 2013

06:30

August 19 2013

06:30

April 04 2012

00:11

AirParrot: Your Mac’s screen on your AppleTV

I’ve been waiting for an app that let’s you mirror your Mac’s screen and apps on your TV that’s connected to  an AppleTV over wifi. AirParrot does just that. While you’re at it, check out Reflection.app as well. Made by the same folks, it displays your iPhone or iPad screen on your Mac.

April 03 2012

23:57

Layer Cake: turn PSD elements into images for websites/apps – simply

Seriously this is a serious time saver for only 20 bucks. Here’s how it works:

  1. Name layer groups the same as the file you want to create for them
  2. Drop in your PSD
  3. Done! The extracted files are ready. Save, drag, copy or auto-repeat.

April 25 2011

17:41

PrintProof iPhone App Winners

Ok, I’m gonna start off this week with the 3 lucky winners of PrintProof, an iPhone app for preparing files for printing. And the winners are Peter L, Jason Owens, and Jerry. Congrats guys! And thanks to PrintProof for the giveaway. You guys should receive an email from me shortly. :)

Free iPhone App Giveaway: PrintProof - Comment to Win

April 15 2011

02:00

Free iPhone App Giveaway: PrintProof – Comment to Win

Hey all you freebie lovers, here’s an opportunity to win an iPhone app. The first BittBox iPhone app contest, but it’s design related so I thought BittBoxers would like it! PrintProof is a simple checklist app geared towards junior designers as a helpful tool to remind you what to check before preparing a document for print. Or as you prepare a document for print, rather. I wish I had this app at my first job, but the iPhone didn’t exist back then… I have 3 copies to give away, YAY! Be sure to read the rules, and good luck :)

Free iPhone App Giveaway: PrintProof - Comment to Win

Free iPhone App Giveaway: PrintProof - Comment to Win

Free iPhone App Giveaway: PrintProof - Comment to Win

Free iPhone App Giveaway: PrintProof - Comment to Win

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 3 winners will be randomly chosen from the comments.
  • You must leave an email address in order to win.
  • Comments will remain open for 3 days.

March 22 2011

06:00

Copper Project -The Webs Best Project Management – Giveaway

Copper is a project management software tool that helps you and your team manage projects, tasks, clients, contacts, and documents online. Thousands of businesses in over 50 countries and across numerous industries choose Copper as their preferred PM tool.

Screen shot 2011-03-22 at 7.33.19 AM

Copper is made for teams that need to plan and execute their projects quickly, efficiently, and cost-effectively. It’s like having a full time project manager keeping you and your team on track.

If you run any kind of design or web-related business, an internal marketing team, ad agency, medical team, education department, or any other special project team, once you’ve used Copper you’ll wonder how you ever did without it

Features Include:

  • Manage Clients, Projects & Tasks
  • Drag & Drop Timeline (This tool allows you to create and manage your project timelines, in seconds)
  • Allocating People and Booking Time & Resources
  • Logging Hours and Comments
  • Storing Files & Folders Pertaining to Specific Projects
  • Tracking and Managing your budgets & Invoices
  • Importing and Exporting Data (including your MS Project XML files, Syncronization of your Outlook or iCal calendars, Import and export of your Contacts via vCard, CSV & PDF exporting of Reports, Quotes and Invoices, or full backup & restore of your entire Copper database via the Admin console.)
  • Project Timesheet Reports
  • Plus Many More (take a full tour here)

“What do we think of Copper? Its super!!! Currently our whole creative team (online and offline), our data/crm dept, and our client service team use it. We’re now working with Ben and the crew at Element Software to tailor the product to suit our unique requirements, what other software company is so responsive?” – Yannis Piperakis-Papadakis, CIO OgilvyOne Worldwide

“We have a complex creative pipeline that includes everything from commercial shoots to software development and Copper is flexible enough to handle it all. The tools are intuitive, very well thought out, and best of all backed by developers who are committed to supporting their customers. It’s great!” – Neil McBean Rival Schools

The Goods

20 Free Copper Accounts

How To Win

Tell us the reason you think you deserve a free account. We love real answers. “I really need this account to further my design career by helping me keep track of my work”. Something like that is always a winner over “OMFG I NEED THIS STUFF NAOWZ”.

When Will I Know

Winners will be chosen next Monday (March 28th 2011)

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Copper Project -The Webs Best Project Management – Giveaway

March 16 2011

15:59

ColorSnapper: The missing color picker for the Mac

Finally! I’ve been waiting for something like this for a while now. ColorSnapper is a tool for quickly finding out the color of any pixel on the screen. Activate it with a hot key and it automatically saves the color value to your clipboard.

January 07 2011

07:11

The Hotlist – Edition 2

It’s that time again: Friday. This week has been an interesting week. With some heavy hitters being ‘fresh’ into the world and some other just plain awesomeness.

NEWS

Mac Appstore Launches

Screen shot 2011-01-06 at 11.31.03 PM

You guessed it. The MacApp Store put it all under one roof. Now, you can buy, install, update apps all from one little place in the mac. If you don’t have a mac the iTunes 10 icon everyone complained about is the same for the Mac App Store Icon except it’s replaced with the nice little app symbol. Did we also mention Angry Birds can now be played on your mac? As if we didn’t need more distractions

MUSIC

Tron Legacy Soundtrack – Daft Punk

daft-punk-tron-album
It’s not ‘new’ as Tron has been out for several weeks. However, this album has some of the best beats and rhythms to design and create to it’s definitely worth a look for people looking to get in the zone and crank out some work.

WEB SERVICE / APP

Twitter / Tweetie 2 for Mac Available

Screen shot 2011-01-06 at 11.49.59 PMThere once was a little app that was beloved by mac users. It was clean, simple and it worked. Then the creator Loren made Tweetie for iPhone one some awards created Tweetie 2 for iPhone and then went to work with Twitter. The app is now Twitter for iPhone and Twitter for iPad and the rest is history. Twitter / Tweetie 2 for mac was like a rainbow unicorn, that is until this week. Now, it’s here. Fanboys rejoice.

WORKSPACE

OfficePod

Screen shot 2011-01-07 at 1.55.11 AMIt’s an office! It’s a pod! It’s an OfficePod! Whatever it is, it works. This is a slick office setup for the home office or (you could get creative) and make some slick cubicles. Their efficient and have some pretty neat features. I wonder if they need someone to do a quality control check, if so, we’ll give them our address.

TYPE

Ratatan Font by Giuseppe Salerno
Screen shot 2011-01-07 at 1.39.35 AM

A new font that is extremely light weight and elegant. The site also has a great little flipbook that showcases it in various ‘examples’.

FOLIO

GaksDesigns
Screen shot 2011-01-07 at 2.02.29 AM

Gerrel Saunders has some amazing illustration skills… Enough to make a normal person jealous. Checkout some of his slick new work on his folio site.

LOGO

Starbucks Logo Evolution

d90e4a46265b4a3f949382332ba907d0

There comes a day for some brands when you cross into the big leagues and you’re a powerhouse brand you can just rely on a mark for people to understand who and what you are. Who else has trod this path? Apple, Nike, McDonalds, Shell just to name a few. Starbucks joins the ranks of these other prodigious brands and updates their siren and drops the text. Interestingly enough, the CEO Donald Shultz explains the evolution and states that “it gives them a chance to think beyond coffee”. What will the branch into next?

Supporting Stories:

Starbucks Logo Evolution – Logo Design Love

Starbucks Reveals New Logo – IDSGN

A Quick Word about the Starbucks Logo – Ask Spike

HAVE A TIP?

Feel free to send us a tip if you think you’ve got the hot stuff. ‘hotlist@fuelyourcreativity.com

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



The Hotlist – Edition 2

November 02 2010

06:24

PrintProof – using new technology to solve old problems

Creative technology to solve problems
“When I went to school I had to travel up hills both ways in the snow”. This quote has been used by many that have come before us to talk about “how hard” it was before now. The new generations have it easy. They have the new tech, the new gadgets and inventions and the world at their fingertips. Have you ever wished there was a better way to do something? Dave Merrilees-Kelly created an app to eliminate that problem.
From his experience through previous problems, he created a simple checklist app that helps you take the headache of preparing artwork.
“The last studio I worked at the art-stage was always rushed. A courier would turn up for a particular job and my boss would want 2 or 3 other jobs to go off as well (pre broad band days). So hence mistakes would happen, all for the idea of saving money on couriers. So if we had iPhones in those days I would have been using this app. “
The idea of PrintProof is a reference tool for studios and junior designers that reminds you of all the things you need to check to avoid expensive print errors. The app allows you to create separate projects and cross the completed steps off the checklist.
“I work with students on a design degree hence the idea of the app. Artwork was always my biggest headache when I was in the industry so I wanted to make it easier for students and junior designers. The idea of using it on the iPhone was given to me by a student who’s also a good friend (Kate E-M). I’m sure more apps along these lines can be developed for the creative industries especially where a more methodical, logical approach is required.”

“When I went to school I had to travel up hills both ways in the snow”. This quote has been used by many that have come before us to talk about “how hard” the previous generation had it. The new generations have it easy. They have the new tech, the new gadgets and inventions and the world at their fingertips. Dave Merrilees-Kelly tapped into making the new generation even easier for designers and students. From his experience through previous problems, he created a simple checklist app that helps you take the headache of preparing your artwork.

printproof

“The last studio I worked at the art-stage was always rushed. A courier would turn up for a particular job and my boss would want 2 or 3 other jobs to go off as well (pre broad band days). So hence mistakes would happen, all for the idea of saving money on couriers. So if we had iPhones in those days I would have been using this app. “

The idea of PrintProof is a reference tool for studios and junior designers that reminds you of all the things you need to check to avoid expensive print errors. The app allows you to create separate projects and cross the completed steps off the checklist.

printproof-2

“I work with students on a design degree hence the idea of the app. Artwork was always my biggest headache when I was in the industry so I wanted to make it easier for students and junior designers. The idea of using it on the iPhone was given to me by a student who’s also a good friend (Kate E-M). I’m sure more apps along these lines can be developed for the creative industries especially where a more methodical, logical approach is required.”

PrintProof App is simple and easy way to keep track of preparing your artwork. It is available on the iTunes store and it’s creator: Dave Merrilees-Kelly can be found on twitter.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



PrintProof – using new technology to solve old problems

September 21 2010

17:29

LittleIpsum: A Lorem Ipsum Generator for your Mac’s menubar

Here’s a handy little Mac menubar app: LittleIpsum. A quick and lightweight app that allows you to copy words, sentences or paragraphs right from your Mac’s* menubar.

*Requires OS X 10.6+

September 15 2010

13:59

iPhone App Designs Reviewed: Critique Board and Lessons Learned

Smashing-magazine-advertisement in iPhone App Designs Reviewed: Critique Board and Lessons LearnedSpacer in iPhone App Designs Reviewed: Critique Board and Lessons Learned
 in iPhone App Designs Reviewed: Critique Board and Lessons Learned  in iPhone App Designs Reviewed: Critique Board and Lessons Learned  in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Some time ago I started an iPhone app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board, developers can send us their mobile apps along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings.

Critboard in iPhone App Designs Reviewed: Critique Board and Lessons Learned

The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

1. Foobi

“Alex,

I am the lead designer and developer of Foobi. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance.

Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject.

— Remy”

Foobi 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it: if user knows how to flick, he is already an expert. An expert in what, though?

As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows:

  1. To record what food they consume,
  2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path.

Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.

Foobi 2 New Updated1 in iPhone App Designs Reviewed: Critique Board and Lessons Learned

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement.

There are two main problems with this part of the app.

Summary Information Is Hidden

To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.

Foobi 3 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

The summary chart doesn’t offer too much to the viewer. Here are the main problems:

  • It’s not clear what the different colors mean, and there is no legend to help.
  • The scale is not flexible. You can view the information only by week, which does not allow users to easily see their big-picture eating habits. (Tip: consider incorporating the pinch gesture to allow users to scale in and out.)
  • Tracking consumption of a particular food group is not possible with this chart but would be valuable to users.

Foobi 4 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Information design is a vast topic. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. I recommend reading Edward Tufte’s books, particularly The Visual Display of Qualitative Information.

And here’s an inspiring display of a lot of information. Of course, it’s not tailored to mobile use, but it has a few great ideas:

4 Foobi in iPhone App Designs Reviewed: Critique Board and Lessons Learned
From Google Finance.

One More Thing

When I purchased and downloaded your app, I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I was fooled by the app icon, which makes it look like it is still downloading:

5 Foobi Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

2. Budget Planner

“Alex, please take a look at my app Budget Planner. I have tried everything, and it keeps going up and down. The major issues that people complain about are intuitiveness and slowness. People don’t understand what the software does. But people who do learn it love it.

— Alex Sabonge”

The basic idea of this app is very good, and the App Store description shows off its functionality well:”Budget Planner tracks your bills, budget, calendar and transactions by displaying your balance in a calendar view, letting you know how much money you will actually have on any particular day. Like a balance forecaster.”

Here’s an overview of how Budget Planner works:

  1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).

    Budget Planner 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

  2. Using this data, the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

    Budget Planner 2 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Most folks would find this extremely useful. So, why are people complaining about the app? Why does it have an average rating of 2.5 out of 5 stars, and why are sales lower than you had hoped?

Let’s look at the main sources of the problem. For now, we’ll set aside lesser (though important) usability factors, such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s start at the beginning. Humans invented money to buy things, right? Your core audience’s main goal is to know what they can afford and when they can afford it, whether it’s a new pair of shoes, a new car or a solid retirement plan.

People don’t prepare a budget just for fun. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like), without their rent check bouncing. Your app is getting there. But several key factors are getting in the way of a great user experience. Let’s take a closer look at the app’s “landing screen,” the calendar, the main element that differentiates this app from other budget apps.

First of all, I think the calendar is a great idea. It’s much better than the categorized lists that many other apps have. The calendar is all about how much money you have or will have in future. A list only shows how much you’ve spent. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop, for example).

Here are some downsides to the calendar view:

Budget Planner 3 New Updated2 in iPhone App Designs Reviewed: Critique Board and Lessons Learned

I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Uncovering the details and patterns behind their spending habits enables users to get new ideas, make informed decisions and achieve their financial goals (and praise your app in the process). Users will better understand their bad habits and be able to take steps to correct them.

A graph could provide richer possibilities for visualizing financial information. It’s much more flexible and scalable then a calendar. Using a graph for the landing screen could dramatically increase the density of meaningful data, while reducing visual noise. Here are some ideas we came up with; this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design:

Budget Planner 4 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Budget Planner 5 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Budget Planner 6 New Updated in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Next Steps

People love apps that help them achieve their goals. What if your app allowed users to input and compare different financial scenarios, shown through several overlaid graphs?

This capability could help users think through their options:

  • If I put my child through this private school, would I still be able to afford the Beemer I’ve always dreamed of?
  • How many hours of overtime would I need to work to be able to afford both?

These are few examples of questions that people ask themselves. If your app can help them get the answers, I think it’ll really catch on, and you’ll soon be driving a shiny new Beemer yourself.

3. Units United

“Unit conversion app, Units United. Yep, yet another one… ;) Can you please review it?

— Meils Dühnforth”

Units United 1 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Most unit converters force people to make double the effort to get what they want.

Consider the following scenario: you’re from the US, and you are recounting yesterday’s baseball game to your Icelandic friend. During their last at bat, the Phillies hit a 456-foot home run. Amazing! You punch the value into your unit converter app, but to get an answer you must translate the query into a format that the application understands:

  1. Go to “Categories,”
  2. Select meters for the “To” unit,
  3. Select feet for the “From” unit,
  4. Type in 456 on the number pad,
  5. Double-check that you are converting 456 feet into metres and not vice versa.

Are all these steps necessary? You just wanted to know “What is 456 feet in meters?” But you had to ask the question in robo-speak. You had to select options from a list to be understood. Good software speaks your language. Among the innumerable unit converters, only Google does it right, allowing you to ask your question in plain English:

Units United 2 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

Using speech recognition technology is another good idea. Sometimes your hands aren’t free when you need to convert a unit. Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-per-hour speed limit into kilometers.

Implementing everything described above, your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal):

Units United 3 New in iPhone App Designs Reviewed: Critique Board and Lessons Learned

This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories, and it accepts questions in everyday language.

Send Your App For A Free Review!

Mobile developers are always welcome to send me their apps for a free review. Just use this form. Please remember that your content will be featured on our Crit Board, allowing developers, designers and users worldwide to join the conversation. If you prefer to speak privately about your design, please feel free to contact us directly.

(al)


© Alex Komarov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: app, Design, iphone, mobile, reviews

August 17 2010

21:43

Color Stream: a Free iPhone App For Web Designers

Smashing-magazine-advertisement in Color Stream: a Free iPhone App For Web DesignersSpacer in Color Stream: a Free iPhone App For Web Designers
 in Color Stream: a Free iPhone App For Web Designers  in Color Stream: a Free iPhone App For Web Designers  in Color Stream: a Free iPhone App For Web Designers

Today we are glad to release Color Stream, a free iPhone App, created by Sahil Lavingia (@slavingia on Twitter) and released for Smashing Magazine and its readers. Color stream lets you create and store color palettes that are either created from scratch or generated from a photo, or even generated automatically using a built-in color schemer. The color schemer supports analogous, monochromatic, triadic and further color schemes. As usual, this iPhone app is released for free.

Freebie Release Image in Color Stream: a Free iPhone App For Web Designers

The tool automatically generates a combination of colors from a picture either selected from your device’s photo library or from your device’s camera (if it has one). You can save multiple color palettes, name them and rate them for quick and easy access. You can also save any one of your palettes to your photo library (and have the option to make it your wallpaper), send it via e-mail (with included hexcodes and sample html) as well as browse Flickr for appropriate color-related pictures. So if you want to use it as a color scheme generator, you don’t even need to be online!

Download the iPhone app for free!

Homewithiphone in Color Stream: a Free iPhone App For Web Designers

Screenshots

Home in Color Stream: a Free iPhone App For Web Designers Autogen in Color Stream: a Free iPhone App For Web Designers

Palettedetails in Color Stream: a Free iPhone App For Web Designers Sunset in Color Stream: a Free iPhone App For Web Designers

Palettedetailswithiphone in Color Stream: a Free iPhone App For Web Designers

Paletteeditorwithiphone in Color Stream: a Free iPhone App For Web Designers

Sunsetwithiphone in Color Stream: a Free iPhone App For Web Designers

Motivation behind the design

Here are some insights from the developer:

Color Stream was built to fill a gap in my life; on transit from one place to the next there was no tool to continue my design workflow. This app allowed me to constantly be working on my designs no matter where I was, without excuse. And in the past months, it’s helped thousands of other designers with their own lives and clients.

Being focused at designers, I knew the app had to be extremely polished and well designed. Not just pretty, but functional and fast too. I think I succeeded. The basic movement and flow of the application isn’t too far off of Apple’s default applications, but I have created my own navigational elements where I though they improved on the experience (like the custom stars to rate a palette).

I include many tips on how to customize your own iPhone apps to help new developers like I once was as part of another project I did, One Week App.

— Sahil

Thank you, Sahil. We appreciate your work and your good intentions!


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: app, color, iphone

January 28 2010

20:20

The Easiest Way to Build your First iPhone App

Mobile websites have come a long way, but if you want to take full advantage of a smartphone’s hardware, or get listed in the iTunes App Store, you need to compile your code. In this tutorial, we’ll show you how to create a mobile web app with an iPhone look and feel using jQTouch, then turn it into a native iPhone app using Phonegap. No Objective-C necessary.

Tutorial Details

  • Program: Phonegap
  • Version: 0.80
  • Difficulty: Intermediate
  • Estimated Completion Time: 1 hour

Requirements

To complete this tutorial, you’ll need the following:

Introduction to PhoneGap

PhoneGap is an open-source framework that can turn any web app into a native app for iPhone, BlackBerry and Android. It pulls off
this trick by running your web code in a UIWebView, an embedded instance of Safari without the
toolbars and buttons of the standalone Safari app. PhoneGap then extends this basic functionality by mapping features of the
iPhone SDK to JavaScript objects you can call in your web code, so you can easily add features like GPS, camera, contacts, vibration,
SQLLite and accelerometer support. And when you’re ready to distribute your app, PhoneGap 0.80 is Apple-approved!

Included in the PhoneGap distribution is everything you need to build and run an iPhone app. The included XCode project is bundled
with a sample code showing how to use many of the native features, and all the supporting files necessary to compile the app and
run it in the iPhone Simulator or on your phone.

Building and Running an iPhone App

To test whether you’ve got your Mac ready to run your code, let’s try out the sample project included with PhoneGap.

First, open up the iPhone folder, and double-click on PhoneGap.xcodeproj:

This should open XCode with your project loaded. Although there’s a lot going on here, we as web developers only need
to concern ourselves with the www folder. This contains the web code that will become the interface and logic of
our app.

Now that we’ve got our project loaded, it’s time to take it for a spin. Bundled with the iPhone SDK is an iPhone Simulator that
hooks right in to XCode. All we have to do is click “Build and Run.”

Building Your Web App

For the sake of this tutorial, I’ve put together a simple, native-feeling app that displays my Tumblr feed with a slide-up “About”
screen. This app is based on the excellent jQTouch framework, a jQuery-based library of UI
elements, animations, and extensions that let you rapidly develop mobile web apps with native look and feel. Let’s take a quick look
at putting together a web app using jQTouch before we import this app into our Phonegap project.

First, we load jQuery, jQTouch, and some bundled theme files in the <head> tag; these will style our elements to look like
native iPhone UI widgets:

	<head>
		<script src="jqtouch/jquery.1.3.2.min.js" type="application/javascript" charset="utf-8"></script>
		<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
	    <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
	    <style type="text/css" media="screen">@import "jqtouch/themes/apple/theme.min.css";</style>
	    <style type="text/css" media="screen">@import "master.css";</style>

		<script type="text/javascript">
	        $.jQTouch();
	    </script>
	</head>

Then we build out the skeleton of our app:

	<body id="stage" class="theme">
        <div id="home" class="current">

        </div>
        <div id="about">

        </div>
    </body>

jQTouch takes any direct descendent of the <body> tag and converts it into a full-screen “view”. This means every
<div> in the code above will take over the entire screen, and changing screens means swapping between <div>s by linking
to them by their id:

	<a href="#about">About</a>

JQTouch includes a variety of cool ways to transition between these screens, and they and can be enabled simply by adding CSS classes.
For example, to turn that link to the About page into a slide-up transition, we add the following:

	<a class="slideup" href="#about">About</a>

Then, in the About page itself, we add a button to “close” the panel by sliding it back:

	<a href="#" class="grayButton goback">Close</a>

On the default screen, we’ll add a toolbar with the aforementioned “About” button, and a spot to embed a Tumblr feed:

    <div class="toolbar">
        <h1>Home</h1>
        <a class="button slideup" href="#about">About</a>
    </div>
    <h2>Live Stream</h2>
    <div id="timeline">
        <script type="text/javascript" src="http://YOUR_TUMBLR_USERNAME.tumblr.com/js">
        </script>
    </div>

Lastly, a few CSS classes that will style the output of the Tumblr feed to match our “Apple” theme:

	ol {
	    color: black;
	    background: #fff;
	    border: 1px solid #B4B4B4;
	    font: bold 17px Helvetica;
	    padding: 0;
	    margin: 15px 10px 17px 10px;
	    -webkit-border-radius: 8px;
	}

	ol > li {
	    color: #666;
	    border-top: 1px solid #B4B4B4;
	    list-style-type: none;
	    padding: 10px 25px 10px 25px;
	}

That’s it! After adding some content to our About page, we replace the files in our Phonegap project’s www folder
with our new web app, and run it again:

Conclusion

Our web app is now compiled, and from here can be packaged up for distribution in the iTunes Store. It’s a simple start, but
in very little time we’ve got a native app that looks like Apple’s own, runs on any iPhone, and can be extended to a variety of uses.

I’ll be covering how to extend your app with support for cameras and geo-location in future tutorials. In the meantime, you can
read more about Phonegap at the Phonegap Wiki. Documentation is not fully fleshed out,
so you may find yourself digging through git repositories after the end of a long hunt.

To submit your app to the iTunes App Store, register for the iPhone Developer Program.
Once you’re registered, you’ll be given the tools to digitally sign and submit your app to the iTunes Store.

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl