This blog entry is purely speculative based on a number of different news articles I have read over the past couple of months.

As an iPhone developer, I am giddy with anticipation over tomorrow’s supposed unveiling of Apple’s upcoming tablet. Specifically, my interest in multiplayer gaming as it relates to the iPhone and iPod Touch, and now iPad (if that’s what the tablet is to be called), has peaked recently as I begin development of a couple of new mobile games of my own.

Yesterday a number of friends forwarded me a New York Times article entitled A Playland for Apps in a Tablet World. I actually didn’t make it through the entire article because I stopped dead in my tracks by the fourth paragraph which reads:

But the larger screen — most likely 10 inches diagonally — and other features of the tablet could inspire developers to create new twists on apps, like games that two or more people can easily play at once on the same device.

continue reading »

In the third update to my crossword web app tutorial, I discussed CSS Canvas. I mentioned how potentially powerful the canvas can be, especially as an alternative to Flash, but I wasn’t able to provide concrete examples since I hadn’t personally done anything exceptionally extraordinary with it yet.

Well now I have the proof! A couple of weeks ago I was followed on Twitter by @canvasdemos. The Canvas Demos blog dedicates its time to tracking down and showcasing demos and tutorials for the HTML canvas element. Some of the examples they’ve uncovered are truly amazing and include games, 3D tests, music visualizers, etc. If you’re at all intrigued by the power of CSS Canvas, and are wondering how you can use it on your own site (or Web app), don’t hesitate to give their site a look!.

The image above is from Jacob Seidelin’s music visualizer. The demo creates an image of Thom Yorke to the music of Radiohead’s Idioteque. It’s worth checking out.

— Ryan

Although 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.

Part 6: Taming XML

Let’s look at a typical XMLHttpRequest again.

continue reading »

Although I’m preparing Part 6 of the crossword web app feature for tomorrow (after an unfortunate two week posting hiatus), I wanted to quickly point out the new “inspirations” module, included in the sidebar.

For years now I’ve admired the works of many of today’s top visual designers. Through regular visits to the Iconfactory, an icon design house, I’ve come to appreciate the illustrative styles of a select group of visual designers. David Lanham is one of these incredible designers. Lanham’s designs are remarkably otherworldy. Though his creations are born from fantasy and bewilderment, his attention to detail is uncompromised. David’s contributions to the Iconfactory can most publicly be seen in icon and title art he created for the Frenzic iPhone/Mac game and the Twitterrific application.

I’ve included one of his vector pieces, Samurai Monkey, above. On his site Lanham writes, “Most of my work is made to be fun and enjoyable, which works out well since I have a really good time creating it.” And that simply is what good design is all about. Making magic and having a fun time doing it!

To view more of David Lanham’s art, visit his Web site at www.dlanham.com. You can also follow him on Twitter at dlanham.

When I first started developing this crossword tutorial, I wanted the end game to access USA Today’s crossword XML feed directly and offer a new game each day. Sadly, their feed is secured. Although I can track it down, view its source in a Web browser, save to a local file and upload to my server, I cannot get my code to access the file directly from their server. Keep that in mind when we reach the end of this tutorial. You’ll be able to play one completed game, but don’t get too attached. There’s not much replayability.

Part 5: Importing From XML

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 each puzzle can easily be loaded individually by referencing a different XML file.

continue reading »

No, it’s not the latest and greatest place to meet Sailor Moon-costumed babes and stuff bag after Watchmen-themed bag with useless, but free, tchotchkes. Favicons are the neat little Web site icons that appear in the address bar of your browser, and I finally got around to creating one.

Pretty, isn’t it? Did you know that Microsoft pioneered favicons in the release of Internet Explorer 5 as a way to spice up dreary bookmark menus? This was back when Microsoft actually contributed to the forward momentum of positive Internet change instead of holding it back. It wasn’t until later that favicons were incorporated into browsers’ address bars.

Most people know the purpose of a favicon and even understand how to implement one. Still, there are some unique things to keep in mind when generating the image itself.

continue reading »

Unlike desktop applications, or native iPhone apps, whose code is pre-compiled with assets prepped and readily available in nearby bundles, Web apps are burdened with the task of downloading their assets (HTML, CSS, images, scripts, etc) in real time, as a user is attempting to interact with the app. In this context I’m referring to a Web site as an “app” since so many of today’s Web 2.0 sites are robust enough to be considered applications. Also, Apple has often referred to iPhone Web sites as Web apps. HTML, CSS and scripts are generally low weight files, a couple of kilobytes a piece (some are larger, but most aren’t) and can be downloaded quickly. Images, on the other hand, can be very large—upwards of 100K in some instances. Downloading large images can be time consuming, especially on mobile devices, therefore you can improve your application’s user experience by downloading images ahead of time.

This part of the tutorial is actually not going to explain proper procedures for preloading images. There are a number of methods available, all of which can be found by doing a simple Google search for “preload images”. This article will instead concentrate on ways to reduce the necessity of preloading altogether by means of self-contained data and CSS Sprites.

I’ll start off by briefing explaining the importance of CSS Sprites (since Part 4 below will explain how to use self-contained data). An in-depth discussion of CSS Sprites can be read on A List Apart. In a nutshell, a sprite map is a collection of smaller images mapped onto one large image. By combining images, you will reduce server requests and speed up download times. CSS Sprites especially come in handy when dealing with hovers.

continue reading »

It’s been a couple of days since my last post and though I plan to update with part four of the crossword feature later today I thought I’d bring attention to these t-shirts I found on Panic’s site. The Noby shirts are the first eight at the top of the page. I love them. In fact I love most crazy Japanese nonsense. Anyway, take a look and enjoy.

Also, if you use Twitter and would like to be updated whenever I post something new, please follow designment. I wanted “sinceriously,” but it was taken… by someone who doesn’t even use it. Hate. Anyway, happy Friday!

This part of the tutorial makes mention of the canvas tag. When Mac OS X 10.4 was released, Safari began supporting a new feature called the canvas. The canvas (refered to as CSS Canvas on the Safari 4 features page) provides a method for drawing arbitrary content in a Web page. This extension lets you reserve an area of your web page or widget and use rendering calls like those found in Quartz (or ActionScript) to paint complex paths and shapes in that area. CSS Canvas was heavily utilized by the initial offering of Dashboard widgets released by Apple.

Safari, Firefox, Dashboard, and all other WebKit-based applications, including Safari for the iPhone, support CSS Canvas. There’s even rumor that Internet Explorer 9 will use WebKit, allowing it access to CSS Canvas as well. So it really makes a lot of sense to start learning how to use CSS Canvas now, so that you can build really cool Web sites that take advantage of it later.

Part 3: Jumping Into Code

Let’s start programming this game. The canvas tag, supported by Firefox and Safari, is a really great way to draw to (or animate) a Web page. Since the iPhone does not yet support Flash, utilizing the canvas makes a lot of sense. Since more qualified people than ! 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.

continue reading »

When I originally posted part two of this tutorial last year, I prefaced it with news of an “imminent” release of Adobe’s Flash for the iPhone. Well, a year has passed and still no Flash. Around a month ago, MacRumors announced a collaboration with Adobe and Apple on a Flash solution, but I’ve since read that business negotiations are delaying that initiative. So we’re still a no go.

I mention Flash because it would seem that the inclusion of the plug-in would open the door to many established and seasoned Flash developers who are not savvy with HTML/CSS/JavaScript or Objective-C (for SDK development). But with the introduction of CSS animation, which the iPhone (and now Safari 4 beta) already support, creating visually intriguing web user interfaces (for games or other web apps) is more plausible than ever before, even without Flash.

It may not seem realistic to create iPhone web app games anymore, since the release of the SDK over a year ago, but iPhone Web designers and developers can still strive to create visually impressive web experiences. And some of these tips may help towards that cause.

Part 2: Design Considerations

When designing web app games for the iPhone keep in mind that although the screen’s resolution is 320×480 pixels, some of the vertical pixels are lost to the status bar, address bar and lower toolbar… 64 pixels to be exact. So, if you want your entire game to display “above the fold,” design it to be 320×416 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.”)

continue reading »