This is the first of many iPHone SDK tutorials that I’ll be posting here, and on my YouTube channel. The first few tutorials are targeted at beginners who want to start learning how to code and create apps for the iPhone or iPod Touch with the iPhone SDK.

Download the SOURCE CODE for this project here.

In this tutorial I show you how to create a very basic iPhone / iPod Touch app that will display four buttons.

When the user taps one of the buttons, an alert will popup with text. Depending on the button pressed, the text in the alert will change.

Although this may be a basic app tutorial, it will hopefully greatly help you to start the dive into the world of iPhone application programming with the iPhone SDK.

XCode and the iPhone SDK is required - If you do not have these, you can create a free iPhone developer account here and download the iPhone 2.2.1 SDK.

This is the first of a few different posts I’ll be writing for Des Dot that will help you improve the typography in your web designs. Hope they help!

Never use black for text color

Always use a color other than black for your text/ font color. Black overpowers your design and can make the user feel weird and out of place. It’s not nearly as aesthetically pleasing as something else.

I often use hex color #333 or #222 depending on the rest of the layout. You can also use #111, but it may look to close to black (#000).

In the instance of using light text as opposed to black, it’s a bit different. Although pure white(#FFF) doesn’t look bad, you may want to experiment with some other colors. I usually use #eee if I’m not using pure white. You can also try #ddd or #ccc, but some say those are too dark. Just experiment, it’s easy enough to change back afterwards.

As a side note, for a clean and pleasing look, try your best only to use colored text in hyperlinks, not large pieces of text that the reader must to pay attention to.

Pullquotes/ Blockqoutes

Blockquotes can look outstanding… when done properly. Block quotes are made with the simple <blockquote>…</blockquote> html tag. In CSS, style just like any other html tag. One way of styling blockquotes is to create what is called a pull quote. These are very easy to create in CSS and can really help your design.

Simply set a negative text indent for the blockquote tag, and you’re good to go.

For example:

blockquote {
font-size: 14px;
text-indent: -0.8em;
}

That will create a pull quote that looks like this.

Rounded corners are becoming more and more popular with web design lately, and so is CSS. We are trying to make it so that we use as few images as possible, because they can drastically decrease loading time.

That being said, here are two tips that will hopefully help.

1. Rounded corners
The old fashioned way of creating rounded corners was to have images and background images. But, no fear! CSS is here!

Firefox, Safari, and IE(gross) all use different CSS tags for creating round edges, so for it to be consistent across platforms, you’ll want to use all three.

Firefox: -moz-border-radius:
Safari: -webkit-border-radius:
IE: border-radius:

Example:

A 100px by 100px div with 10px rounded corners would make a rounded box

.box {
width: 100px;
height: 100px;
-moz-border-radius: 10px;
text-align: center;
background-color: #236b8e;
color:#fff;
}
Would make… (screenshot)

2. CSS Circle

The same CSS properties apply to rounded corners as apply to circles. A CSS circle is just a rounded div, but with a bit of a special technique.

You want to make the corner raduys half of the width or height.. For example, a 100px by 100px div with 50px rounded corners would make a CSS circle

.circle {
width: 100px;
height: 100px;
-moz-border-radius: 30px;
background-color: #236b8e;
color:#fff;
}
Would make… (screenshot)

You can also use these techniques for other things. If you do it right, rounded corners can look very sleek! Right? Thanks?

I’m creating a game for the iPhone, and I’m calling it Slots. It’s based off of a simple premice, a slot machine. I want to thank Dave Mark, and Jeff LaMarche for helping me build the foundation for the slot machine app and teaching me the fundamentals of iPhone App Development, with their book, Beginning iPhone Development Exploring the iPhone SDK, which can be found here.

I’m very much building off of this and improving it. I’ve added a few new features so far. These include;

• Cash
• Bets
• Rewards
• Handle
• Restart button

These are all small(ish) tweaks but I will be progressively adding more.

Let me explain these. The first, Cash, is a way for you to keep money. When one plays the game, he or she starts out with $100 cash, and progressively loses or increases money based on the number of wins.

Bets, every time one spins the slots, that person loses $1 as a bet. Think about it. In a slot machine, it’s not just free and you get the money. You must put in money to be able to play, that is what bets are. But, you also gain rewards from winning!

Rewards are a significant part of Slots!, they allow you to earn money as you play the game, so it’s not just spinning images the entire time! When you win a spin of Slots!, you will earn more money as a reward. If you get 3 of the same image in a row, you will earn 15$, so you’re profit will be $14 because you had to give $1 for a bet. 4 in a row, $30/ $29 profit. 5 in a row, $50/ $49 profit.

The Handle is a minor adjustment that I made, but it makes the game a bit more real, and a bit cooler. Instead of a normal button that you press to spin the slots, I’ve made images for a handle, on the right hand side of the game window that you can press, and has the appearance that it comes down, and it activates the slots to spin.

The restart button is also a minor tweak. I’ve added a button to reset the game. All it does it bring the slots back to the top, and reset the cash to $100.

I have a few more ideas for new features, but if you have any features that you think would be cool to implement into the game upon release, please say so in the answers below.

Do you have any feature requests?