iPhone Minds

Quest for the Best iPhone App Content

2008-06-24T11:52:00.003-04:00

On Friday, June 20th, iLounge and Bowers & Wilkins announced the Quest for the Best iPhone App Contest.

Best Game

Best Business/Pro App

Best Just Plain Cool App

For more details on how to enter visit the Quest for the Best iPhone App Contest web site.

The Quest for the Best iPhone App begins on June 20, 2008 and ends on July 23, 2008 at 11:59PM Pacific Time.

2008 WWDC Apple Keynote Highlights

2008-06-10T13:15:00.008-04:00

Apple CEO Steve Jobs kicked off Apple's WWDC Keynote highlighting 147 sessions on developing for Apple products, 62 of those sessions on the iPhone, with 169 hands-on labs. After announcing over 250,000 developers downloading the free SDK and 25,000 purchasing the developers license, Jobs went into the iPhone 2.0 features.

Enterprise

New End-User Features

iPhone 2.0 Enterprise

The iPhone isn't just for Mac businesses anymore, The iPhone can now integrate with Enterprise applications, ie. Microsoft Outlook and iCal, as well as "push" technology, which can easily be described as synchronization to multiple devices allowing users to synchronize their email, contacts, calendar, etc. With increased security and implementation of the push technology, the iPhone can now be used as a secure and viable Enterprise solution.

iPhone 2.0 SDK

Scott Forstall discussed allowing developers to build iPhone applications the same way that Apple does, using the same kernel as Mac OS X and Core Services layer, development couldn't be any easier. If you're already developing applications for the Mac the iPhone won't be much different.

Included in the SDK now is XCode, Interface Builder, iPhone Simulator, Tethered Debugging, and Instruments. With so much power in this SDK, iPhone applications should blow iPhone users out of the water.

Be sure to check out Apple's WWDC Keynote for Scott Forstall's demonstration of these iPhone SDK tools as well as some of the amazing demonstrations from other development companies.

iPhone 2.0 New End-User Features

Some of the new features included in the iPhone 2.0 update are Parental Controls and 16 new languages including Japanese and Chinese.

iPhone 2.0 Software Update - Early July

As the Keynote went on Jobs mentioned the iPhone App Store and MobileMe.

What really got us excited here at iPhoneMinds was the announcement of the 3G iPhone, which can only be purchased and activated in stores July 11th. The 8GB 3G iPhone will cost you 199.99 while the 16GB 3G iPhone will cost you 299.99, the new iPhones also include GPS.

Tell us what you thought of Apple's 2008 Keynote at WWDC. ask[at]iphoneminds.com

// Jay, aka W3prodigy

Digg 2008 WWDC Apple Keynote Highlights on iPhoneMinds

Think different: Some companies are targeting iPhone users when they go mobile

2008-05-28T14:36:00.008-04:00

Thanks to Jay and the iPhone team for their support on this interview/feature in BtoB Magazine!

Originally published in BtoB Magazine.

By Amy Syracuse
Story posted: May 27, 2008 - 11:48 am EDT

Ask an iPhone user what the device means to him or her and you'll likely hear that its advanced capabilities and user-friendly interface have been nothing less than life-changing.

Such statements might sound like hyperbole-the ravings of an ardent group of Apple-eyed gadget geeks. But recent studies indicate there is truth behind them. The iPhone is changing lives, at least where mobile Web use is involved.

A survey of 50,000 U.S. households conducted by iSuppli Corp. in the fourth quarter of 2007 found that iPhone users spent just 46.5% of their time on the device making calls, compared to 71.7% for the typical cell phone user. The rest of the time, they were reading and sending e-mail, browsing the Web and checking out Google Maps, among other tasks.

As these consumers' behaviors change so, too, must those of marketers. Realizing this, more companies are testing campaigns targeting iPhone users to determine whether the way to their hearts is the $400-plus device they're carrying in their pocket.

One example is Payless Car Rental, which this month unveiled an iPhone-optimized Web site that helps consumers research and reserve rental cars with minimal typing and clicking. The site focuses on the functions that most interest mobile users, with buttons for "Reserve a Car," "View, Modify, or Cancel Reservation" and "Locations." It also has a "Call to Book" button that connects directly to a call center.

According to Justin Talerico, CEO of ion interactive, a company that offers iPhone-optimized landing pages and other post-click marketing services, optimization should improve consumers' interactions with marketing messages. And even though the iPhone was designed for easy browsing of the Web in its traditional format, there is room for improvement.

"[iPhone users] come to the table in a more ... purposeful state of mind," Talerico said. "In a way, they're easier to convert. But you make them harder to convert if you give them an experience that's subpar."

Companies can deliver more satisfactory iPhone browsing experiences by simplifying landing page messaging, developing pages that load quickly over lower bandwidth connections, using fonts that are readable on a 3.5-inch screen and eliminating the need to scroll, regardless of whether the device is in portrait or landscape mode, Talerico said.

Jeff Lin, project leader of Payless Car Rental's Web marketing strategy team, believes optimization paid off for Payless. "The number of iPhone ... visitors and bookings has increased many fold since the launch of the interface," he said. The press that accompanied the debuth has also helped with branding, Lin added.

Payless drives traffic to its iPhone site through RSS feeds, publicity and links on www.apple.com and www.paylesscarrental.com. Other companies have used online advertising to connect iPhone users with optimized content, said Jason Spero, VP-marketing for mobile advertising network AdMob.

In April, AdMob client Land Rover Group made online advertising purchases targeted to iPhone users. When they clicked, consumers reached landing pages where they could watch video, view pictures, access a store locater and click-to-call for a test drive.

Companies can target advertising buys within AdMob's network according to device manufacturers and models, country or region, demographic groups and other factors. Spero called Land Rover's work "highly successful" and said iPhone users are only becoming more active. "We have seen traffic to iPhones and iTouch devices grow rapidly in the last year," he noted.

As much as the iPhone has already altered mobile Web usage, Tara Lamberson, VP-marketing and strategy for marketing agency MindComet Corp., believes more "life-changing" developments are on the horizon.

The June release of Apple's Software Development Kit means select external developers and enterprise customers will be able to create custom widgets, games and even software platforms for the device. Marketers can use branded versions of such applications to boost brand awareness or deliver a call to action, said Lamberson.

In the long term, Lamberson thinks truly advanced mobile marketing capabilities-things like geo-targeting based on a user's GPS coordinates-aren't unrealistic. But with such opportunity comes tremendous responsibility.

"Direct marketing on the iPhone should be permission-based," she said. But for those consumers who wish to receive iPhone marketing, "companies can be more relevant just by using those devices."

iPhone SDK Development Programming Language

2008-05-15T16:21:00.005-04:00

Another great question comes in today from an anonymous "M$ .NET developer",

Hi,

Please forgive my ignorance, but can you tell me which languages you can develop iPhone applications in? From looking around it seems you need to install xCode 3.1 on OS 10 (10.5?) by installing the iPhone SDK and then write code in Objective C. But can you code in other languages, like C#?

Also, what language are the code snippets on you site in?

There's no need for apologies, we're all learning here! This is a great question. You are correct in your assumption. The first step toward iPhone development bliss is installing the latest beta of the iPhone SDK (you'll need a free Apple Developer Connection account to download). Unfortunately, you will only be able to install the SDK on the latest version of OS X (10.5.2 at the time of this writing). The iPhone SDK is not supported on Tiger or any previous versions of Leopard. Once you have it downloaded, install it like you would any other .dmg file and you're off!

The only language you can use to write code for the iPhone currently is Objective-C. Now, there have been some open-source efforts made to bridge Objective-C with other languages (PyObjC comes to mind), but as far as being able to directly develop for iPhone with another language within Xcode (whew, that was a mouthful!), sorry Charlie.

For the code snippets, I believe you are referring to the web applications, correct? The backend code used is PHP and the effects are the result of some crafty Javascript. For the slide effects, we've utilized the IUI on several occasions, the wonderful YUI, and have also taken from the jQuery library. Also, have a look at a nice little list of frameworks that we have previously written about.

Keep those questions coming in! Until next time, stay classy iPhone-diego!

// Albert

Optimizing iPhone Web Applications

2008-04-30T16:42:00.006-04:00

We received a comment on Basic AJAX Scroll Animation w/ YUI from Joel saying,

These javascript libraries will equal more than 80K. For an iPhone that's just way too much. Especially if it's EDGE.

Any other suggestions for slide?

I agree Joel, you have an excellent point, an iPhone loading a web page on EDGE is much slower than on 3G or WiFi. While I don't have any other suggestions for a slide technique, as a developer I do my best to keep the load times to a minimum, and in all reality the user should only have to load your site once. After the initial load, no more data should be transmitted.

Let's keep this simple; an iPhone application should be "small, lightweight, and portable." Sound familiar? Yeah, that's exactly how Apple describes the iPhone. So we're not stretching far away from the overall goal of the iPhone. "At the touch of a finger." I believe was one of the many slogans used during the initial iPhone ramp-up. We should develop our web applications with the same intent.

While normally loading these AJAX libraries on mobile devices is tedious and increases the load time, I personally have no problem loading YUI libraries on our development iPhone. The way I see it, users of the iPhone expect a slight delay when loading a web page, much like I expected it on my old SideKick. However, when developing these iPhone applications, if you load all your content, whether visible or not to the user, then make AJAX animation calls to bring the content to the iPhone's screen when needed, the overall user model will not take a hit and it will be an experience of the lifetime.

To summarize:

Keep AJAX Libraries to a minimum.

Limit the number of pages to load.

Define a user model that relates to the user.

iPhone web applications rely on solid user models. Build a good one, and you won't have any issues with my methods.

// Jay, aka W3prodigy

Animation on the iPhone, You know you missed me.

2008-04-15T12:27:00.006-04:00

With the iPhone SDK out, and iPhone applications moving away from the web, I never thought I'd post here again. Lucky for you, we received an awesome question from Dan in the UK about Animation on the iPhone. Yay Dan!

Hey iPhonemind.com guys,

I was wondering if you could help me with a quick question I have pondering about in my mind relating to the wonderful invention called iPhone. I'm a multimedia student at Stafford College in the UK and having learnt the "designer" side of computing fancied turning to the dark side and have a go at programming. I've done bits of programming here and there before and know Action-script pretty well etc, but since the iPhone currently doesn't support flash yet here is where my question lies.
I want to create an interactive application where the user taps the screen and random squiggles or images will pop up to create a sort of abstract image animation, I've been looking on Apple's Developer website and had a look through most content on their but to no avail I'm still not sure on what the right sort of API's or frameworks to use. The UIKit would be a major player in the making of it but I'm not sure what else to read up on, just hoping someone out there might be able to point out roughly what I should be looking for?
The application is going to include shapes, colours, images, video maybe, sound hopefully, vector graphics and maybe a bit of text, the whole thing is going to be totally random for a college project and have no real purpose other than being one of them cool things you show your mates.

Your website is great by the way, loads of useful tips and tricks that I will be having a tinker with after I've figured all this out.

Many Thanks,

Dan

Well Dan, That's an excellent question! Since we'll never truly know when Flash will become available on the iPhone, I'm very glad you asked. We've all seen ways to animate a web page through the use of AJAX [cough]dhtml[/cough], including my post on creating a Basic AJAX Scroll Animation w/ YUI that was featured on the YUI developers blog.

As of right now, AJAX is the way to go for animation on the web. Here's a few of my favorites...

Yahoo! UI Library: Animation - A little more advanced, but one of my favorites.

Script.Aculo.Us - Simple to implement, a little more restricted.

jQuery - Takes time to learn, but definitely worth the effort.

MooTools - This one seems to be a popular one, maybe not the best for the iPhone, but definitely fun to work with.

What I suggest is that you sketch out your idea, step by step, then determine from the libraries listed above which would work best for you. JavaScript is relatively simple, and with your ActionScript experience it should be a quick run-through for you. Try to stick to one library to reduce load times. While the iPhone is an amazing device, the technology it runs on (EDGE) isn't completely up to speed for large applications.

I hope this helps you out Dan, I look forward to answering more questions like this. If you have a question about iPhone development, hit us up at ask [at] iphoneminds.com.

// Jay, aka W3prodigy

iPhone SDK = Happy Developer

2008-03-07T19:03:00.002-05:00

All I can say is "holy shnikes!" If you missed yesterday's presentation, head over to Apple's site and watch the QuickTime stream. Especially if you're interested in iPhone game development. Check out the demos! The iPhone appears to be more impressive of a platform that I had originally thought.

Apple revealed two things of importance to developers both big and small. First, despite earlier skeptisism over the immediate availability of the SDK... here it is, complete with a visual interface builder and snazzy iPhone emulation (for testing). Very cool. Second, they've already announced a distribution model that equals money for all developers. Even the lonely one's working from their basement (that's not a stab at you, that's a stab at me).

I won't get into much of the details because Apple's iPhone Dev Center has absolutely everything you could possibly need. But I do want to comment on the revenue model since, from what I can gather, that's the only piece that some have reservations about.

All apps will be sold through the iPhone's App Store. You set the price. Apple takes 30 percent. Is Apple's commission too great? That's what's up for debate. But let's look at this objectively. Apple is handling all credit card charges and hosting fees. Additionally, they're making it simple for developers to update their apps through software updates. Since each developer can name their own price, I personally don't see much wrong with this model and I'm more than happy to throw the burden of money transactions at Apple. Let me concentrate on developing, then cut me a check once a month. This all sounds good to me. But what do you think?

Before I wrap today's post I figured I'd "touch" upon a comment we received yesterday.

Do you think having a native SDK will reduce the number of iPhone web apps currently being developed?

jeffrey.t.lynch

My response was: "Not initially, since any app developed with the SDK will not publicly be distributed until June. Even after the mobile App Store is launched I find it hard to believe that Web Apps will become obsolete. After all, development for the SDK requires knowledge of a much more complex programming language (compared to HTML/CSS/Javascript) and developers will need to pay $99 in order to distribute their SDK-developed wares. I expect all of the bigger named properties and developers to move strictly to SDK development, but I still think there will be plenty of Web based apps for all."

Yesterday I quickly mentioned that Cocoa development requires knowledge of Objective-C. The same holds true for Cocoa Touch (the programming interface for the iPhone and iPod Touch). So, although anyone with $99 can now develop applications for the iPhone and iPod Touch, their may be a steep learning curve for those only familiar with HTML/Javascript development.

// Ryan Jennings

The Long Awaited iPhone SDK

2008-03-05T18:23:00.000-05:00

Tomorrow's the day. The day that developers over at Apple finally unveil their plans for third-party iPhone application development. Press members were invited to "join [Apple] to learn about the iPhone software roadmap, including the iPhone SDK and some exciting new enterprise features."

Words like "learn about" and "roadmap" don't quite encourage someone interested in having instant access to an SDK. Will tomorrow's event be filled with more talk, or actual tools? That's yet to be determined, but I have confidence that Apple will not disappoint. After all, they announced this event six months ago.

More than anything, I'm interested in finding out which programming language will be used to develop apps. It's been clear for sometime that Flash is not going to be the answer. In fact, even today, sites like AppleInsider posted interview snippets with Steve Jobs in which his stance on the plug-in is clear. The current desktop version of the Flash plug-in demands too much processing power to currently make sense on the iPhone and Flash Lite is a joke.

The bottom line is that the iPhone's version of Safari is slow, so more robust applications (including games) will need to be developed using a language that can access the phone's guts more directly and intelligently.

In answering a question about an iPhone blogging application, Jobs recommended that "if Apple does not address it" then the individual should learn Cocoa and write an iPhone blogger application himself.

Cocoa is Apple's name for the collection of frameworks, APIs and accompanying runtimes that make up the development layer of Mac OS X. Therefore, it would make sense that Cocoa also be used to develop apps for the iPhone since it runs a mobile version of Mac OS X. But, again, specifics won't be clear until tomorrow. Which is exactly when we'll post again with our impressions of the news that is announced!

P.S. Cocoa applications are mainly written in Objective-C.

// Ryan Jennings

Part 10: That's All Folks!

2008-02-25T11:43:00.012-05:00

Well, our two week developer's feature has come to an end. I hope you all enjoyed the various discussions and behind-the-scene tips and tricks. Maybe we'll do this again in the future.

Without further ado, here's a link to the final game:

http://www.iphoneminds.com/crossword

I've also embedded the game below (though it's more fun to play on the iPhone):

Here are some things to keep in mind while playing the game. If the page gets refreshed mid-game, you'll have to start over again. Try not to open new Safari windows when playing on an iPhone or iPod Touch. If you need to open other windows, return to the game window before exiting Safari or turning off your phone, otherwise the page will automatically refresh when you come back to the game after returning to Safari. Also, two clues are repeated in the puzzle. This is not a glitch. Get creative and think about what the two answers might be based on the size of the words you're working with.

UPDATE: It appears that the 1.1.4 iPhone and iPod Touch firmware update preserves the state of Safari "tabs/windows." Meaning, you can start the crossword game in one window and open another without having to worry about loosing your place in the game and starting all over again. I'd encourage everyone to download the 1.1.4 update.

Enjoy!

// Ryan Jennings

Part 9: Gratuitous Eye-Candy

2008-02-24T18:30:00.007-05:00

Games just aren't interesting without snazzy graphics. But graphics need to be downloaded, and you want to limit as many unnecessary downloads as possible when developing applications for the iPhone.

Until now, our game required only two images. The background image, and the image border used for grid highlights. Together these assets weigh in at about 24.5K. We also embedded a number of images in Javascript, which beefed up that file. All together the images, HTML file (which includes CSS) and Javascript file amount to 50K. That's really good for a complete game and means that the game will load quickly if you need to access it using EDGE.

But of all the things that irk me in life, only one is intolerable. A shitty ending to a video game. I mean you spend 40+ hours of your life (many of which are extremely aggravating) glued to the game. Is it too much to ask for a slick 5+ minute movie ending? Something brilliant that wraps up everything at the end. It only seems appropriate. So, I think it's important to give the winner of our puzzle something nice to look at when they're done.

End Screen:
Okay, it's not much, but hey, this game is being developed for demonstration purposes. Still, I think it satisfies the "snazzy graphics" requirement. Keep in mind that by the time you see the curl, the grid will be filled with letters. I didn't want to give away all of the words so I left the grid empty.

In my "Preloading Commonly Used Game Assets" post I mentioned that it would not make sense to embed all images in Javascript using URI Kitchen. The curl PNG weighs 69K. That's more than the entire game weighed up until this point. So, is it worth forcing the user to wait for this image to download when they won't even see it until the end of the game? Sure it is. Because we're not going to "force them to wait."

Since this image isn't required until the very end of the game (and it would probably take anyone at least 15 mins to solve the puzzle), we're going to load the image behind the scenes while the user is playing the game. Here's how we'll do it:

First, we set the game up. This includes waiting for all of the assets (except the curl) to download. Once the HTML has been parsed, Javascript hides the iPhone address bar, reads the game's XML file and builds the game's grid. The game is now ready to be played.

At this point we execute the following Javascript:

setTimeout(function() {
    var curl = new Image();
    curl.src = 'curl.png';
    curl.onload = function() {
        var img = document.createElement('img');
        img.id = 'curl';
        img.src = curl.src;
        document.getElementById('body').appendChild(img);
        img.onclick = function() { resetBoard(across, down); };
    };
}, 30000);

Again, the above script will not execute until the game has completely downloaded and is playable by the user. This script then waits 30 seconds before it downloads and sets up the curl image, giving the game more than enough time to prepare the asset before it's required.

For dramatic effect, we're going to fade the curl in when the user has completed the puzzle. There are a number of Javascript resources you can utilize to create fades. MooTools is a great option. But since we're not relying on MooTools to manage the styles or effects of any of the other elements that make up the game, it doesn't make sense to include the MooTools Javascript library (an extra download) only to access it for one effect. There's a simpler way.

The Mac software company Panic has, for a long time, been a leader in creating compelling, and shockingly easy to use, Web applications (they of course make brilliant Mac applications as well). On their site I found a small snippet of math which we can use to fade the curl.

Javascript:

function cubicOut(t, b, c, d) { return c*((t = t/d-1)*t*t+1)+b; }

If you use this code within your projects, please give credit to Panic.

Using the cubicOut function, we can do the following:

var curlanim = { time:0, begin:0, change:0.0, duration:0.0, timer:null };

function curlFade(start, end, duration) {
    if (end == 1) document.getElementById('curl').style.visibility = 'visible';
    if (curlanim.timer != null) { clearInterval(curlanim.timer); curlanim.timer = null; }
    curlanim.time = 0;
    curlanim.begin = start;
    curlanim.change = end-start;
    curlanim.duration = duration;
    curlanim.timer = setInterval(function() { fadeAnimDo(end) }, 15);
}

function fadeAnimDo(e) {
    if (curlanim.time > curlanim.duration) {
        clearInterval(curlanim.timer);
        curlanim.timer = null;
        if (e == 0) document.getElementById('curl').style.visibility = 'hidden';
    } else {
        var alpha = cubicOut(curlanim.time, curlanim.begin, curlanim.change, curlanim.duration);
        document.getElementById('curl').style.opacity = alpha;
        curlanim.time++;
    }
}

In the last post I mentioned that the matrix array keeps track of whether or not correct letters have been added to the 225 different spaces that make up the puzzle. If it is determined that the puzzle is filled with correct letters (using the matrix array), then the game has been won and we initiate the curl fade with the following code: curlFade(0, 1, 50).

And that's it! The tutorial portion of this feature is complete. Although we didn't post every bit of the game's Javascript, I hope we've explained enough to provide a good sense as to how everything was developed. Come back tomorrow for a link to the working game!

// Ryan Jennings

Part 8: Maximizing Screen Real Estate

2008-02-22T17:24:00.010-05:00

In the previous post I included a new image of the game. Let me explain how the user is going to interact with the game grid.

Pressing on any square will active a selection (see image below) focusing on whatever horizontal (across) word includes that square. The actual square pressed will turn blue. Pressing anywhere on the now visible selection will rotate it 90° (using the blue square as a control point) to focus on the vertical (down) word. Pressing the selection a second time will deactivate it. You can also deactivate the selection at any time by pressing outside of the selection.

A clue will only be visible underneath the puzzle while a selection is activated. It will initially read something like this:

29 DOWN Starbucks order.
Press here to answer.

I decided early on that I didn't want to continually display an input field for answering. Rather, I only wanted to display it when the user was actually ready to answer.

Since iPhone applications are dynamic, we can make smart use of the screen real estate and only display certain UI elements when necessary. Here's how I implemented the "now-you-see-it-now-you-don't" input field:

HTML:

<span id="outer-answer"><input type="text" id="answer" value="" /><span style="text-decoration:underline">Press here to answer.</span></span>

CSS:

#outer-answer { position:relative; }
#answer {
    width: 208px;
    height: 20px;
    border: none;
    padding: 0;
    margin: 0;
    position: absolute;
    opacity: 0;
    text-align: center;
    line-height: 20px;
    margin-left: 56px;
    font: bold 13px Georgia,serif;
    }

Javascript:

document.getElementById('answer').onfocus = function() {
    this.style.opacity = 1;
};

document.getElementById('answer').onblur = function() {
    if (this.value != '') {
        var letters = this.value.split('');
        var correct = xmlhttp.responseXML.getElementsByTagName(node)[0].getAttribute('a').split('');
        var numCorrect = 0;
        for (var i = 0; i < selected.length; i++) {
            if (letters[i]) {
                if (letters[i].toUpperCase() == correct[i]) {
                    eval('ctx.drawImage(i'+letters[i].toLowerCase()+'b, '+((selected[i].id%15)*18)+', '+(Math.floor(selected[i].id/15)*18)+')');
                    matrix[selected[i].id] = 1;
                    numCorrect++;
                } else {
                    matrix[selected[i].id] = 0;
                }
            }
        }  
        if (numCorrect == correct.length) {
            alert('Correct!');
            clearSelection();
        } else if (numCorrect == 0) {
            alert('Incorrect, try again.');
            document.getElementById('answer').value = '';
            document.getElementById('answer').focus();
        } else if (numCorrect != correct.length) {
            alert('Only some letters are correct.');
            clearSelection();
        }
        checkForWin();  
    }
};

The input field is actually always present (positioned on top of the "press here" text), but it starts off invisible. When you press to answer the field becomes active and the iPhone displays its keyboard. Press the keyboard "Done" button or anywhere on the grid to commit your answer.

So, that's how it's done. Before I wrap up this post, I'll explain some of the other things that are happening in the Javascript above.

Once the user clicks the iPhone's "Done" button we first check to make sure they have actually entered text. If they have, we create an array of the text and match it against an array of the letters that make up the correct answer to the clue. We check each letter one by one. If the letters match, we add the letter to the game grid. The matrix array keeps track of whether or not correct letters have been added to the 225 different spaces that make up the puzzle. Ultimately if all letters are correct, you've won the game.

// Ryan Jennings

Part 7: Taking Advantage of Web Kit CSS Styles

2008-02-21T02:53:00.017-05:00

One of the biggest benefits of designing Web applications specifically for the iPhone is that you have access to many Web Kit CSS properties that have not yet been supported in today's other popular browsers, including Firefox.

Things like:

Borders with rounded corners
Image borders
Box shadows
Multiple background images

If you've ever used Google's iUI, a user interface library for Safari development on the iPhone (originally developed by Joe Hewitt), you may be using image borders and not even be aware of it. In today's post I'll explain how we'll take advantage of image borders in our crossword puzzle game.

The buttons used in iUI all rely on image borders. Image borders make it easy to create scalable image-based buttons (with rounded corners and all types of other snazzy eye candy). Accomplishing something like this previously required 4+ nested elements (plus 4+ images) each responsible for the rendering a specific corner of the button. Now you need only one element and one image and two CSS attributes.

Here's the CSS:

.button {
    border-width: 0 5px;
    -webkit-border-image: url(toolButton.png) 0 5 0 5;
    }

When using -webkit-border-image you first specify the image to use, then set the areas that will act as your borders. In the example above, we're only going to scale the asset horizontally, so we'll only need a border of 5 pixels on the left and right. The top and bottom do not require a border.

Click Me

For more information on image borders check out Apple's Safari CSS Reference: Supported CSS Properties.

In the crossword puzzle game we'll use an image border to highlight the currently selected squares in the puzzle grid. Here's what it will look like:

Using an image border is convienent because we can scale the border horizontally and vertically based on the length of the word we're working with. After entering my answer, in this case "CAL," the letters would appear in the highlighted area on the grid.

// Ryan Jennings

Part 6: Taming XML

2008-02-19T20:09:00.008-05:00

Though it's easy to get Javascript to read from an XML file, pulling out the appropriate data can sometimes be tricky. Here are some tips to help you tame the XML beast.

Refer to the code we posted yesterday. If the XMLHttpRequest loads without error, then we can use the xmlhttp variable to access the contents of the loaded XML file. To understand how to work with xmlhttp (or whatever you named the XMLHttpRequest instance), relate it to Javascript's document variable.

document.getElementsByName('menu') will return an array of the elements on your page that all share the name "menu."

xmlhttp.responseXML.getElementsByTagName('menu') will return an array of the "menu" XML nodes (tags).

Now, nodes can have both attributes and values. In the following example, "Burns or Byron" is the c attribute of the a1 node and "Timothy Parker" is the value of the editor node.

XML Example:

<?xml version="1.0" encoding="UTF-8"?>
<editor>Timothy Parker</editor>
<across>
 <a1 a="POET" c="Burns or Byron" n="1" cn="1" />
</across>

getElementsByTagName will always return an array. In the example above there is only one a1 node, therefore there's no reason to keep an array of a1 nodes. Using the code below, we can save to variable only the first returned node (since that's all that exists).

var a1 = xmlhttp.responseXML.getElementsByTagName('a1')[0];

Now, access the c attribute like this:

var c = a1.getAttribute('c');

Doing that is easy, but accessing node values is a little more confusing. Here's the code to access the editor node's value:

var editor = xmlhttp.responseXML.getElementsByTagName('editor')[0];
var editorValue = editor.firstChild.nodeValue;

The firstChild method gives you access to a node's first child. But the editor node does not appear to have any children. Well, it apparently (or not so apparently) does. When attempting to access the value of a node, imagine the value text as being a node itself... access the nodeValue of the "text node" and you'll get the result you're looking for. Or, in more simple terms, always use .firstChild.nodeValue to access the value of a node.

Another XML Example:

<?xml version="1.0" encoding="UTF-8"?>
<across>
 <a1 a="POET" c="Burns or Byron" n="1" cn="1" />
 <a2 a="BLAB" c="Give everything away" n="6" cn="5" />
 <a3 a="TALKS" c="Gives everything away" n="11" cn="9" />
 <a4 a="ALSO" c="Too" n="16" cn="14" />
 <a5 a="YOHO" c="Exclamation by Captain Jack Sparrow" n="21" cn="15" />
 <a6 a="ELIOT" c="''A Cooking Egg'' writer" n="26" cn="16" />
 <a7 a="LIAR" c="Ananias, for one" n="31" cn="17" />
 <a8 a="PREY" c="Target in the wild" n="36" cn="18" />
 <a9 a="ALONE" c="In isolation" n="41" cn="19" />
</across>

In the above example, all of the across child nodes are named differently, so it would be cumbersome to "getElementsByTagName" each one separately. Instead, take advantage of the childNodes collection to return an array of the nodes.

var across = xmlhttp.responseXML.getElementsByTagName('across')[0].childNodes;

There is more to learn about XMLHttpRequest, but by simply knowing how to use the getElementsByTagName, getAttribute, firstChild and nodeValue methods and the childNodes collection, you'll have an easy time accessing all types of data from XML documents.

Before I close this lengthy post, there is one more thing I'd like to mention with regards to accessing XML files. It appears that you can not use Javascript to access local XML files using XMLHttpRequest, you can only access files found on a domain. I am completely perplexed as to why this is and if anyone out there has knowledge of the reason, or knows a workaround, I'd love to hear from you.

// Ryan Jennings

Part 5: Importing Data From an XML File

2008-02-19T01:16:00.005-05:00

Most programs, including games, require data. More often than not this data must be updated regularly so as to sustain the usefulness of the application. This type of data is usually stored externally (out of the application's main code) since it makes very little sense to require the application's user to download a new version of the program every day in order to receive the latest and greatest data. Therefore, with respect to our game, it makes a great deal of sense to store the data for each crossword puzzle in an external XML file. This way puzzles can easily be loaded individually by referencing a different XML file.

To import data from an XML file, we use the XMLHttpRequest Javascript object as follows:

var url = 'xml/070814.xml';
var xmlhttp = new XMLHttpRequest();

if (xmlhttp != null) {
     xmlhttp.onreadystatechange = stateChange;
     xmlhttp.open('GET', url, true);
     xmlhttp.send(null);
} else {
     alert('Your browser does not support XMLHTTP.'); }
}

function stateChange() {
     if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
               /*
               A status of 200 means that the XML file was
               loaded and parsed without error. At this point
               you'll want to sort through all of the data so
               that it can be used by your program. I'll give
               you some tips on how to do this tomorrow.
               */
          } else {
               alert('Problem retrieving XML data.');
          }
     }
}

We'll talk a little more about reading from XML files tomorrow.

// Ryan Jennings

Part 4: Preloading Commonly Used Game Assets

2008-02-14T20:15:00.013-05:00

Imagine playing The Legend of Zelda on your iPhone. Awesome, right? Well now imagine opening a treasure chest and finding this inside: . What the hell? Looks like the image of your treasure hasn't loaded yet! (Okay, that's actually the icon to represent that an image can't be found, but play along with me.) Similar things could happen in your game if your assets are not downloaded by the time they need to be. Fortunately, there's a trick to prevent this from happening.

If you've ever used Dreamweaver, you're probably familiar with the code that's used to preload images:

function simplePreload() { 
  var args = simplePreload.arguments;
  document.imageArray = new Array(args.length);
  for (var i = 0; i < args.length; i++) {

    document.imageArray[i] = new Image;

    document.imageArray[i].src = args[i];
  }
}

Look at the highlighted line. In Javascript you can create Image objects. By doing so, you can store images in the DOMs memory and quickly access them later. But preloading images in this fashion still requires an HTTP call out to the image so that it can be downloaded. When designing games for the iPhone, we want to limit the number of HTTP requests as much as possible. There's actually a way to embed some of your images in your Javascript file so that there's no need to download them.

If you've ever tried to open a GIF or JPEG in a text editor you'll notice that the guts of the image are a bunch of letters, numbers and symbols. There's a free program online, called the URI Kitchen that will read an image and print out the letter/number/symbol/gremlin guts for you.

To use the program, go to URI Kitchen, upload a file and then copy the resulting data from the address bar. Here's the data I got when feeding the program the above question mark image:

data:image/gif,GIF89a%10%10%D5*%80%C1.%8A%C9%2C%86%C5!o%B4%2B%83%C3-%88%C7%2C%86%C6%2C%85%C5%90%AE%D3j%92%C3)%7F%C0%26y%BC%8E%BD%E0%8A%AA%D0%92%AF%D44%7F%BF%87%A7%CFm%94%C4%25v%BA%84%A5%CE%7D%A0%CB%80%A2%CC*%81%C2%8D%AC%D2(%7D%BE%D3%E3%F1z%9E%CAs%99%C7%23s%B7%D3%E4%F1p%96%C6)%7D%BF'%7C%BEv%9B%C8%E3%EF%F7.%89%C8%C6%DD%EE%8C%B8%DCS%95%CA%B9%D6%ECT%98%CCF%91%C8*%83%C2%8D%BB%DDR%95%CA%9B%C2%E16%86%C2)%80%C0F%92%CA%2B%84%C4%9C%C6%E3%F1%F7%FB%8D%BC%DE(%7D%BF%24t%B8%25w%BA%23r%B7'z%BD%2F%8C%CA%22p%B5%94%B1%D4h%90%C2%FF%FF%FF!%F9%04%2C%10%10%06%AE%40%9EpH%2C%F2%1C%BE%A4r%B9t%20%7C%BA%A8t%1A%F5!.%BE%80%D6%608x%0D%23%AD%EF%D2%F0%15%0A1%0B%83q%92%C1%2Cg_%03%E2%13%08T4%D1%2B%E5%13)%EC%3E%10%13%3E%04%04(%2B5.%3E3%18%85%3E%13%15%3E%0A%1F%1F%18-%24%269%94%3E%15%14%3E5%A35%20%2C%25%0B%0B%20%A3%3E%14%1A%3E9%B19%12%0F%0F%12%B29%3E%1A!%3E7%BE7%1C%1D%1D%1C%BF7%3E!%1B%3E6%CB6%3B%19%19%3B%CC6%3E%1B%1E%3E8%D88%03%DB%03%D98%3E%1E%11%3E%3B%E4%E5%E6%E4%3E%11%09L%ECJ%09%3D%F0%F1%F2%F3%3DA%3B

Pretty, huh? Now, take that data, and use it as follows:

var questionMark = new Image();
questionMark.src = 'data:image/gif,GIF89a%10%10%D5*%80%C1.%8A%C9%2C%86%C5!o%B4%2B%83%C3-%88%C7%2C%86%C6%2C%85%C5%90%AE%D3j%92%C3)%7F%C0%26y%BC%8E%BD%E0%8A%AA%D0%92%AF%D44%7F%BF%87%A7%CFm%94%C4%25v%BA%84%A5%CE%7D%A0%CB%80%A2%CC*%81%C2%8D%AC%D2(%7D%BE%D3%E3%F1z%9E%CAs%99%C7%23s%B7%D3%E4%F1p%96%C6)%7D%BF'%7C%BEv%9B%C8%E3%EF%F7.%89%C8%C6%DD%EE%8C%B8%DCS%95%CA%B9%D6%ECT%98%CCF%91%C8*%83%C2%8D%BB%DDR%95%CA%9B%C2%E16%86%C2)%80%C0F%92%CA%2B%84%C4%9C%C6%E3%F1%F7%FB%8D%BC%DE(%7D%BF%24t%B8%25w%BA%23r%B7'z%BD%2F%8C%CA%22p%B5%94%B1%D4h%90%C2%FF%FF%FF!%F9%04%2C%10%10%06%AE%40%9EpH%2C%F2%1C%BE%A4r%B9t%20%7C%BA%A8t%1A%F5!.%BE%80%D6%608x%0D%23%AD%EF%D2%F0%15%0A1%0B%83q%92%C1%2Cg_%03%E2%13%08T4%D1%2B%E5%13)%EC%3E%10%13%3E%04%04(%2B5.%3E3%18%85%3E%13%15%3E%0A%1F%1F%18-%24%269%94%3E%15%14%3E5%A35%20%2C%25%0B%0B%20%A3%3E%14%1A%3E9%B19%12%0F%0F%12%B29%3E%1A!%3E7%BE7%1C%1D%1D%1C%BF7%3E!%1B%3E6%CB6%3B%19%19%3B%CC6%3E%1B%1E%3E8%D88%03%DB%03%D98%3E%1E%11%3E%3B%E4%E5%E6%E4%3E%11%09L%ECJ%09%3D%F0%F1%F2%F3%3DA%3B';

I can now access questionMark anytime I want to load that image in my game. And I can draw the image to the canvas (at coordinate 100,50) like this:

ctx.drawImage(questionMark, 100, 50);

Now, you won't want to use this approach for every image in your game. You'll still have to elegantly handle load times for large images. But this approach works great for smaller, commonly used images. What are the most commonly used assets in a crossword puzzle? The numbers used to label the grid, and the letters that will spell out each word. And those are the exact images that we'll "preload" into Javascript using this method.

// Ryan Jennings

Part 3: Jumping Into Code

2008-02-13T12:50:00.020-05:00

Okay, let's start programming this game. A couple of weeks ago... no wait, a little over a month ago... I posted about the canvas. The canvas is a really great way to draw to (or animate) a Web page. So, since the iPhone does not yet support Flash, utilizing the canvas makes a lot of sense.

Note: Yesterday's illustration stated that the grid takes up 271x271 pixels, yet here we say that the outer DIV that holds all of the inner squares is 270x270 pixels. This is because the inner squares do not include the outer stroke that surrounds the grid. The outer stroke (and all inner grid lines) are part of the background image. The inner squares have a 1px left margin to separate them from one another, so: (1+17)*15 = 270.

Since more qualified people have already written great tutorials on how to use the canvas, it may behoove you to read up a bit if you become confused with what follows.

Let's code the grid. There are two ways we can display it. We can use the canvas to draw the grid. Or we can create 225 17x17 pixel DIVs and float them all to the left within a 270x270 pixel parent DIV. The first option sounds easier, but we're actually going to do a little of both.

First we'll use the canvas to draw the representation of the grid. Here is some simplified code:

HTML

<div id="squares"></div>
<canvas id="crossword" width="269" height="269"></canvas>

Javascript

var ctx = document.getElementById('crossword').getContext('2d');
ctx.fillStyle = '#ffffff';
for (var i = 0; i < 225; i++) {
     ctx.fillRect((i-Math.floor(i/15)*15)*18, Math.floor(i/15)*18, 17, 17);
}

The code above will simply draw out 225 white squares, positioned exactly where we want them on the grid. It does not yet determine which squares should be black (the regions of the grid that are not part of the puzzle). We're ultimately going to read from an XML file to understand which squares are white and which are black. We'll get to that later.

The user will be interacting with the grid in order to read and solve clues, so we also need a separate clickable region for each of the 225 inner squares. That's where the second option comes into play. Let's add that logic to the for loop:

Javascript

for (var i = 0; i < 225; i++) {
     ctx.fillRect((i-Math.floor(i/15)*15)*18, Math.floor(i/15)*18, 17, 17);

 
     var newSquare = document.createElement('DIV');
     document.getElementById('squares').appendChild(newSquare);
     newSquare.className = 'square';
     newSquare.id = i;
     newSquare.name = i;
     newSquare.onclick = function() {
          // code to execute onclick
     };
 
}

We've given each "pressable" DIV an id and name so that "onclick" we can figure out which clues they belong to. We'll get to that later as well.

For today, that is all. We're going to start slow and ramp up towards the end. Tomorrow I'll provide a neat trick for embedding images into Javascript so that you don't have to wait for them to individually download. A great way to preload images. It's very cool.

// Ryan Jennings

Part 2: Design Considerations

2008-02-13T02:08:00.007-05:00

Earlier today news of an imminent Flash upgrade from the iPhone was flooding the Internet, though no concrete dates were specified. When a Flash plug-in is released it will open the doors for a lot of game programmers who are unfamiliar with coding using Javascript and the HTML DOM. But for now, this is all that's available. So, let's continue with our tutorial...

When designing games for the iPhone keep in mind that although the screen's resolution is 320x480 pixels, some of the vertical pixels are lost to the status bar, address bar and lower toolbar... 64 pixels are lost, to be exact. So, if you want your entire game to display "above the fold," design it to be 320x416 pixels. (Above the fold is a reference web designers throw around a lot to appear cool. It refers to the topmost part of a Web page -- the area that is initially viewable. The content that shows up as you scroll down the page is "below the fold.")

If you look at a printed crossword puzzle you'll notice that the game consists of two main parts: 1) the grid, and 2) the "across" and "down" clues. Both take up a lot of real estate. So how do we fit everything onto the iPhone screen?

First let's discuss the grid (or board, whatever you'd like to call it). The squares that make up the grid need to be small enough so that a 15x15 matrix will fit within the design. They also need to be large enough so that even a person with fat fingers -- *cough* Scott *cough -- can press a single square. After mocking up a number of grid sizes I realized that although I could theoretically size each individual square at 19x19 pixels and still fit all 225 (15 rows x 15 columns) on the screen, I didn't have much room for anything else. So I settled on 17x17. This means that we loose 271x271 pixels to the grid.

Since a title is required for each puzzle, very little room is left for the clues. It will be impossible to display them all at once, so instead let's display relevant clues when the user clicks on a particular row/column. We'll talk about how this is going to work later.

That's all for today. Coding goodies will come tomorrow.

// Ryan Jennings

iPhone Minds Developer's Journal

2008-02-11T15:47:00.006-05:00

Though I don't frequent other iPhone development type blogs much, I will say that the ones I have checked out skimp on the information you really want. They'll cover mundane issues like how to hide Safari's address bar, or how to change your wallpaper, or how to create a web clip bookmark... you know... beginner's stuff. What? That's all that we've been posting? Uhhh... ummmm... well, I guess it's time to up the education.

Over the next two weeks we're going to walk you through the development of a complete and working game for the iPhone. Not a stupid "move-around-the-pieces-of-this-image-and-try-to-put-them-in-order" game. We're going to build a fully functional crossword puzzle game. We'll discuss the best way to approach design and usability, provide coding tips (as well as some source code), and suggest solutions to many of the obstacles you will face along the way. So, without further ado, here is Part 1 of our ten part series.

Part 1: Things to Keep In Mind

There are a couple of things to keep in mind when considering iPhone game development. The most important is that iPhone developers currently do not have access to many of the usability features that make the iPhone great -- things like pinch, expand, slide, drag, drop, etc. That may change when the SDK is announced later this month, but for now all we have is press (click).

Additionally, all of the applications must be built in Safari. Don't get me wrong, I for one am more than happy to use Safari as my development environment. After all, HTML/Javascript development is what I know. It's what I've spent the last 10 years working with. So I know how to do really amazing things with that medium. Still, Safari on the iPhone is less responsive than it is on your Mac or PC. For instance, there is a lag between when you press something on the page and when you can press something else on the page. The lag is only about a second, but it should be kept in mind when you begin thinking about the type of game that you want to create. Because of the lag, slower-paced games make more sense on the iPhone. Therefore developing a puzzle game for this tutorial was a no brainer. After all, there's not much need to race your way through a crossword puzzle.

Besides the fact that a crossword puzzle was a slower-paced game, this type of game also provided some interesting usability dilemmas, but we'll get into those tomorrow. We'll also discuss design considerations tomorrow. For now, take a look at the near-finished design below. Though I've started some of the development of this game, there is much yet to still do so things may change over the next two weeks.

I originally got the idea for this game after seeing the daily puzzle on USA Today's site, so it made sense to try and repurpose the online version of their game in an iPhone format. DO NOT get all of your game ideas from copyright sources. I'm simply doing this because though I want to code and design the game, I don't want to create each puzzle myself, so I'm going to use the XML feed that their Flash game uses in order to pull individual puzzles.

That's all for today. Feel free to email us at ask@iphoneminds.com with questions or comments regarding game development. Come back tomorrow when we'll discuss design considerations.

// Ryan Jennings

iPhone Web Clip Bookmark Icons

2008-02-05T17:51:00.003-05:00

Since Apple announced custom Web Clips for your website everyone has been scrambling to write articles on how to do it even though almost everything you need to know is on Apple's own iPhone Dev Center site.

If you were paying attention, you noticed I said "almost". What no one has managed to do yet is tell you why your icon looks chopped and funky.

Well, after exhaustive testing, we've figured it out. The iPhone cuts off 1 pixel on the left and right and 3 pixels at the bottom of your icon. It also rounds the corners and overlays a "glossy" appearance that makes it difficult for you to truly showcase your amazing design skillz in Corel Draw. Many people have posted that they created icons with larger dimensions (128x128 or 158x158) to solve the problem. Don't bother. It's a larger download for users and now more difficult for you to figure out how your graphic will render. Apple says build them 57x57. So our advice is to build them 57x57 - or keep reading...

We've created a Web Clip Photoshop template for you to utilize to create your own Web Clip Bookmark Icon masterpiece. The graphic below shows you the opened file. We've included the overlay, rounded corners and guides to help you find the exact center of your icon.

Click here to download

In order to use the template, you'll need to be familiar with Photoshop layers. Make sure you turn off the "overlay" layer before exporting as a PNG. The corners of your icon should NOT be rounded. The iPhone takes care of that.

I realize you may have stumbled across this post trying to figure out how to actually get a web clip icon on your site, so let use save you an extra click and just post Apple's instructions here:

Create A Web Clip Bookmark Icon

iPhone and iPod touch allow a user to save a Web Clip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"> within the element of the page.

The bookmark icon dimensions should be 57x57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard "glassy" overlay so it looks like a built-in iPhone or iPod application.

BTW... as of the writing of this post, we have not put up a decent web clip for this site. Cut us a little slack, we've been busy.

//scott

Hiding the Address Bar: Take 2

2008-01-16T11:28:00.003-05:00

We've been receiving some feedback that the following code (responsible for hiding Safari's address bar) does not work on iPod Touch:

function hideAddressBar() { window.scrollTo(0, 1); }

No one on this end has an iPod Touch, so we can't test to see if that's true or not, but I've had my own problems with this code in the past, so here are some additional things to try and keep in mind.

Try using the following code instead. It doesn't require you to add onload="hideAddressBar()" to your body tag and has proved more reliable in the past.

addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false);
function hideAddressBar() { window.scrollTo(0, 1); }

Additionally, window.scrollTo(0, 1) does NOT seem to work if you include external CSS files using the following method:

Instead, do this:

Hope this helps!

//Ryan Jennings

Q&A: Can you hide Safari's lower navigation bar?

2008-01-09T18:59:00.003-05:00

We have our very first reader-submitted question. Here goes:

Hi,

Read your website with interest and wondered if you can help. ... My question is through additional code, how do you make the bottom 32px bar disappear please! I only want to ... utilize the absolute full screen as if in movie mode. ... Your help would be very much appreciated.

Thanks,
Chris

Unfortunately, I have bad news for you. It's currently not possible to hide that bar. I'm hoping that Apple will make some changes to how Safari on the iPhone operates in the near future. Perhaps they could tweak the browser so that the lower navigation bar only displays when the user is scrolling, and then slide back down and out of the way a second or two after the user stops scrolling or when the user starts clicking around the site. Additionally, it'd be nice if you could lock the page so that it doesn't move at all (if a page was designed to fit the screen exactly -- currently you can only prohibit horizontal scrolling, not vertical). Although, if scrolling was disabled... you'd never get back to the address bar (let alone a hiding lower navigation bar). Maybe instead of hiding the address bar completely, they can leave a sliver of it to display the page title. Clicking the title would slide back in the full address bar and navigation bar. I dunno. Apple, figure it out. Sorry I couldn't be of more help Chris.

If there are more of you out there with questions, feel free to email us at ask@iphoneminds.com. We look forward to hearing from you!

// Ryan Jennings

Draw vector art using the canvas

2008-01-07T23:28:00.003-05:00

We all know that the iPhone is incapable of displaying Flash content. But there are still two Flash-like benefits that we can take advantage of on the iPhone: vector art and animation. When Mac OS X 10.4 was released, Safari supported a new feature called the canvas. Safari, Firefox, Dashboard, and any Web Kit-based application (including the iPhone) can do arbitrary drawing of content using the canvas tag. This extension lets you reserve an area of your web page or widget and use rendering calls like those found in Quartz to paint complex paths and shapes in that area. The canvas tag was heavily utilized by the initial offering of Dashboard widgets released by Apple. Now you can use it to draw shapes to your iPhone webpages.

Don't get me wrong, this technique is not for amateurs. But if you're already familiar with using the Flash MX Drawing API, drawing using the canvas should be pretty easy. Additionally you can then use Javascript to continually redraw the canvas and animate your art.

Following is a silly example of what the canvas can do. Not very practicle, but go ahead and give it a whirl to see what it produces.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

<script type="application/x-javascript">

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (i = 0; i < 6; i++) {
    for (j = 0; j < 6; j++) {
      ctx.fillStyle = 'rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

</script>
</head>

<body onload="draw()">

<canvas id="canvas"></canvas>

</body>

</html>

For more information on how to use the canvas, check out Mozilla's canvas tutorial. It's filled with static and animated examples. Enjoy!

http://developer.mozilla.org/en/docs/Canvas_tutorial

// Ryan Jennings

More Wallpapers...

2007-12-18T17:43:00.000-05:00

The MindComet creative team has been hard at work bringing you more wallpapers for your iPhone or iPod Touch. Okay... they haven't really been hard at work putting these together for you specifically, but it sounds nicer when we say it that way.

Some of these wallpapers are holiday in nature and some are to showcase a couple of our clients. In once instance we even combined "holiday" and "clients" and brought you a third freakish kind of wallpaper. I know... the humanity of it all! As previously mentioned, if you need help downloading and installing the wallpaper, check the iPhoneMinds archives to see a how-to post on just such a topic.

// MC Creative Team

Basic AJAX Scroll Animation w/YUI

2007-12-17T17:19:00.004-05:00

Going through someone else's code is an art, you have to get into the developers mind and discover what he or she was thinking when writing the piece. While scavenging the Internet for an AJAX scroll animation, similar to that of the iPhone, I was so disgusted by the code I saw that I just wrote my own.

Some key things I had to keep in mind while writing this javascript code were, "How can I dynamically make one object slide off the screen while a second object slides onto the screen?" And "How can I keep users from going psychotic with my slider?"

To make the code dynamic, that was the easy part, I created a function calling out to the Yahoo UI Library (an AJAX source library). But to restrict when they user could slide the objects, that was the tricky part.

The YUI Library has three animation events that would allow me to limit when the slider would, well, slide...

onComplete

onStart

onTween

It was actually rather interesting how these three events functioned together. Checking if the animation is active (ie. isAnimated();) proved to be a thought provoking process. The onStart function would always return false while checking isAnimated, because onStart does a check right when you start the animation, not yet animated but almost animated. The onComplete function did exactly the same thing while checking isAnimated, it's done being animated. While the onTween function checks for every single tween or frame, it always returns true.

You can download the following YUI files from the Yahoo Developer Site (http://developer.yahoo.com/yui/):

yui/build/yahoo/yahoo.js
yui/build/event/event.js
yui/build/dom/dom.js
yui/build/animation/animation-min.js

<script type="JavaScript">
var movethis,target,x,y,goodToGo=true;

var waitForIt = function() {
 var onTheMove = this.isAnimated();
 if (onTheMove == true) {
  goodToGo=false;
 } else {
  goodToGo=true;
 }
}

function slide(moveThis, x, y) {
 if (goodToGo == true) {
  moveThis = document.getElementById(moveThis);
  if (x != null && y != null) {
   var anim = new YAHOO.util.Motion(moveThis, { 
points: { by: [x, y] } });
  }
  anim.onTween.subscribe(waitForIt);
  anim.onComplete.subscribe(waitForIt);
  anim.animate();
 }
}
</script>

// Jay, aka W3prodigy

Happy Christmannuza!

2007-12-07T16:32:00.001-05:00

It's that time of year again! Time to pack up everything you spent your annual savings on and head to someone else's uncomfortable futon for a holiday of overeating and oddly shaped sweaters.

To cushion the blow, we've put together a few quick and free iPhone wallpapers. We'll try to create more before we all leave for our own holiday adventures, so stay tuned!

note: if you need help downloading and using the wallpapers - check out our "how-to" post.

Happy Christmannuza!

//scott