Tag Archives: Apple

Are iPhone Apps Part of the Web?

It’s pretty obvious that I have a significant interest in iPhone apps and their development. I like to cover the subject here, despite the fact that the site is called “Webmaster-Source” and not “iPhone-Source.” Why is that?

I think mobile applications are as much apart of the field of webmastery as web pages are. Just as a web application can serve-up an HTML frontend or an RSS feed or a JSON result set, it can also have a mobile interface in “app form.” Modern websites generally separate the content from the business logic and the presentation layer, allowing for interface-agnostic systems like Twitter. I can use most of the functions of Twitter through the main website or through HootSuite or through one of the many iPhone apps.

True, mobile apps are not hypertext, but they’re yet another facet of the internet. Let’s face it, normal web pages don’t work terribly well on pocket-sized devices. The iPhone made it tolerable to browse the web on a mobile device, but it’s still not an optimal experience. Apps are the preferred interface, whether we all like it or not.

What do you think: is mobile app development as closely linked to web development as I consider it?

iTunes 10: Fix the Vertical Buttons

iTunes 10’s interface is a significant step backwards from its predecessor. The monochrome sidebar makes it harder to pick items out, as you only have the shape of the icon to go by. The new album list view takes up too much horizontal space, while the one from iTunes 9 was fairly efficient with it. Elements like the checkmarks and the volume control just look bad.

The worst change, which completely breaks Apple’s set-in-stone UI convention, is the use of vertical close/minimize/maximize buttons. What were they thinking? If any other developer broke the Human Interface Guidelines like that, Steve Jobs would probably personally punch them in the face.

Astute iTunes users could point out the fact that when you used the “Mini Player” (Command+Shift+M) in iTunes 9, the same vertical buttons were used to save space. While that is true, it wasn’t for the main interface that you spend most of your time in. And such space-saving is only necessary in the Mini Player.

Anyway, I won’t bore you with further design ranting. You can restore the buttons to their rightful orientation by entering this command into the Terminal:

defaults write com.apple.iTunes full-window -boolean YES

Re-entering the command with NO instead of YES will reverse the change, should you take leave of your sanity in the future.

Building iTunes Links

Have you ever wanted to link to an iTunes page? It’s easy enough to copy a long, nasty-looking URL like http://itunes.apple.com/us/album/yours-truly/id310905907 right from the application by right-clicking on the album art or title. This works well enough if you’re manually linking to an album or iPhone app from a blog post, but what if you need something a bit more user friendly?

It’s not documented terribly well, but you can create much nicer short “search” links using the itunes.com domain. Here are a few examples:

You can even combine the search links with your iTunes affiliate ID, if you know how to do it right. It looks something like this:

http://itunes.com/artist/album?partnerId=30&siteID=YOUR_AFFILIATE_ID

Now for the fun part… Wouldn’t it be neat to be able to generate the links automatically? I’m doing that over at Folk Music Site (a fun project I put together last summer, as I thought it would be neat to have a directory of noteworthy folk musicians). Here is some simple PHP that will generate iTunes links on-the-fly:

function get_itunes_link($artist, $album) {
 $affiliate_id = ''; //Linkshare affiliate ID for iTunes
 $artist = clean_itunes_string($artist);
 $album = clean_itunes_string($album);
 $link = "http://itunes.com/{$artist}/{$album}?partnerId=30&siteID={$affiliate_id}";
 return $link;
}

function clean_itunes_string($string) {
 $string = strtolower(str_replace(' ', '', $string)); //remove whitespace and makes everything lower-case
 $string = str_replace('&', 'and', $string); //Replace ampersands with the word 'and'
 $remove = array('!', '¡', '"', '#', '$', '%', '\'', '(', ')', '*', '+', ',', '\\', '-', '.', '/', ':', ';', '<', '=', '>', '¿', '?', '@', '[', ']', '^', '_', '`', '{', '|', '}', '~', '©', '®', '™');
 $string = str_replace($remove, '', $string); //Remove special characters that iTunes doesn't like
 return $string;
}

echo get_itunes_link('Feist', 'The Reminder');

Note: iTunes links should not have accented characters like á or ü. They should be replaced with their base ASCII counterparts (“a” and “u” respectively). The above code does nothing to sanitize these characters, so you might run into problems unless you write some additional logic to handle that. If you’re using a framework like Kohana, you might have a convenient helper function like utf8::transliterate_to_ascii().

Apple’s iAd Platform the “Most Progressive Thing to Date” in Online Advertising

“We feel pretty strongly that this is the way to capitalize on where the mobile Web is heading,” said Chad Jacoby, a senior manager of Nissan’s media operations. “What iAd promises is the most progressive thing I’ve seen to date” in digital advertising.

Advertisers and developers alike are very happy with Apple’s iAd platform. Developers like that they get paid a lot more than they would through other networks and advertisers like that users are much more likely to interact with the advertisements. Applications running iAds are seeing CPM rates as high as $25.

Dictionary.com said on Wednesday that the amount it could charge for its ad space had increased 177% since it enabled iAds in its iPhone app, and CBS Mobile Senior Vice President Rob Gelick said the company’s six apps — including apps for CBS Sports, CNET, and GameSpot, were seeing up to $25 CPMs (the cost advertisers pay for an add to appear a thousand times.)

On the other end of the scale, advertisers are reporting a much greater user engagement. Users spend more time with the iAds than with ordinary banners, and they are much more likely to “click” them. It can be expected that people would spend more time with the ads, seeing as the whole point of the platform is to provide information and entertainment without leaving the confines of the app. Ordinary display ads whisk the user away as soon as they click.

Nissan, which created a multilayer interactive ad for its electric LEAF car, said customers spent an average of 90 seconds with the ad — 10 times longer than interaction times for comparable online ads. Moreover, people chose to “tap” on the Leaf iAd five times more frequently than they clicked on regular online display ads for the Leaf.

If you haven’t seen an iAd yet, be sure to see this YouTube video of the Nissan ad. It shows-off the benefits of the platform (from the perspective of end users) pretty well.

I have high hopes for the iAd network, both as a blogger interested in seeing the advertising industry shaken-up and as someone getting started with iPhone application development.

MediaElement.js — HTML5 Video Player With Flash Backup

Many modern web browsers have early support for the <video> and <audio> elements in the HTML5 spec. Unfortunately, their implementation varies depending on the ideals of the various browser developers. Safari expects video to be encoded in the high-quality H.264 codec, other browsers prefer Ogg Theora. Google is trying to push their own freely-licensed VP8 codec, which Mozilla is showing signs of adopting. Then there’s Internet Explorer, which doesn’t support the <video> element at all.

Thankfully, there’s a way to fairly easily support everything. You can offer HTML5 video in one or more formats and fall back on Silverlight or Flash if necessary.

MediaElement.js allows you to do that with a little bit of jQuery voodoo. After including all of the required files, you can serve-up an H.264 video for Safari and iPhone/iPad users like so:

<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>
<script>
jQuery(document).ready(function($) {
$('video').mediaelementplayer();
});
</script>

There is also a way to specify more than one video type in the <video> element, if you have re-encoded it into more than one codec:

<video width="640" height="360">
<source src="myfile.mp4" type="video/mp4" >
<source src="myfile.ogg" type="video/ogg" >
<source src="myfile.webm" type="video/webm" >
</video>

You will want to check it out if you’re interested in cross-browser compatible web video.

Xcode 4: The Coda of Compiled Software Development?

I noticed something interesting recently. The new version of Apple’s Xcode development suite (which is used to build applications of iPhones and OS X) is starting remind me a little of Coda and Espresso. The latter two applications are one-window development environments for web developers.

Coda, which is similar to Espresso but was released first, combines a powerful text editor with FTP syncing, visual CSS editing and support for the SVN versioning system. This has proven to be popular among web designers looking to streamline their workflow.

Xcode 4 is taking the same one-window approach, bringing the previously separate Interface Builder application inside of Xcode. The UI is also looking a lot more streamlined. The boring Windows-style file tree pane on the left hand side has been redesigned to look more like the iTunes sidebar. (Which is another interface feature of Espresso and Coda.)

Xcode is already a great IDE, and a pleasure to work with. The changes should make it even better, and more in line with the “Mac-like” feel the great tools that other developers have been building for web designers.

How to Delete GMail Messages in iOS 4

Upon upgrading my iPod Touch to iOS 4, I found one little change that really bothered me. My usual email workflow on my mobile device is to check-off and delete emails that are unimportant (server notifications, newsletters, etc.) and delete them. I would then proceed to read the important ones.

Unfortunately, Apple decided it would be a good idea to change the “Delete” button to an “Archive” button for GMail accounts under iOS 4. I don’t really need to keep messages about my server’s recent five minutes of downtime for any length of time, so I thought this was kind of stupid.

I was able to find a fix, however. Open your settings and navigate to the “Mail, Contacts, Calendars” page. Tap on your GMail account. Then turn off the slider for “Archive Messages.”

I don’t mind the idea of an Archive option in the Mail app, but not to the exclusion of a Delete function. Some things just don’t need to be kept.

Arq: Back Up Your Mac to Amazon S3

I use some shell scripts to back up my web server to Amazon S3. It’s very cheap and off-site, two things that make for a good backup strategy. But what about personal computers? Most people, myself included, simply back up to external hard disk. Off-site backups stored “in the cloud” on remote servers would be a much preferable option. (But most people balk at paying $5-$20 per month for a service like Dropbox, JungleDisk, SpiderOak or Carbonite.)

Arq, by Haystack Software, takes a slightly different approach. It’s designed for those of us who already have Amazon S3 accounts. Arq lets you set a monthly budget, say $5 (which gets you 50GB or storage). The application then keeps the folders you choose mirrored with Amazon S3. It operates on the same hourly schedule as Time Machine, keeping multiple versions of the files. It periodically deletes old versions of the files to stay within the storage space equivalent to the monthly budget you set. It even encrypts your files with a passkey of your choosing.

If you’re selective about the data you back up, the pricing should be fairly reasonable. It seems like a good way to back up data. You could use it in tandem with Dropbox; Arq+S3 for backing up your critical data, Dropbox for sharing and collaborating.

Further Reading

iPhone 4 Gets a 326ppi Screen: What Does this Mean for Web Design?

The new iPhone 4’s screen may be the same size as its predecessor’s, but the resolution is much higher. 326 pixels per inch, versus the 160ppi of the previous models. (This works out to pixel dimensions of 960×640 for the new model and 320×480 for the old, but that’s not really relevant to this post.) 326ppi is roughly the same resolution as is used in printing images, as opposed to the 72-96 pixels per inch that most web designers design for.

Already, if you view an iPhone screenshot on a computer monitor, it will look strangely oversized due to the difference in resolution. The new “retina display” will make the effect further pronounced.

My question is: with phone displays increasing in resolution, can we assume that desktop and laptop monitors will follow? Will it become more common to see full-size screens with upwards of 300ppi? It might cause some problems for designers at first, but it will make for more richly detailed web designs eventually.

14 Mac Applications I Use Every Day

I made the switch to Mac OS X a little over two years ago when I bought my first MacBook (which is still working fine as my main computer, I might add). I find that my workflow has improved, and I’m more efficient in my daily tasks. Exposé and Spaces are probably a large part of that.

The idea to share my most frequently used applications came to me recently, so I thought I would write-up a quick compilation of the software that I use on a daily basis post-Windows. Obviously I needn’t bother with the “well, duh…” applications like iTunes, Terminal, or my choice in web browser. After all, the major browsers all have Mac versions. Firefox, Opera, Chrome, Safari. (I use Firefox, despite the speed issues, since I’m fairly dependent on certain extensions.)

Adium

I don’t do a lot of Instant Messaging, but I keep an account on all of the major services for the occasions when I need to. Apple’s own iChat only supports AIM, MobileMe, ICQ, and Bonjour, if I’m not mistaken. Many users, including myself, prefer Adium for it’s extensive protocol support. You can chat on AIM, Jabber (GMail/GTalk), Yahoo, MSN, Facebook, ICQ, Bonjour, and many others. It has a good interface, and it’s feature set is more than adequate for most users. I don’t believe it offers voice or video chat options, but you can always open Skype or iChat for those.

Homepage: Adium

CloudApp

Need to share a file fast? That’s what CloudApp is all about. It sits in your menu bar, waiting for you to drag a file onto it. When you do, it uploads the file to the service’s redundant servers and copies a short URL to your clipboard. It has some more nice features, but that’s the crux of it. I find it useful for sharing files or screenshots, and it keeps my Dropbox account from becoming too cluttered.

Homepage: CloudApp

Continue reading →