Andrew Marconi » Andrew Marconi

Getting Started with iOS Web Applications: Block Best Practices

Andrew Marconi — Fri, 10 Sep 2010 14:56:34 +0000

Being relatively new to building Web applications for iPhone, iPad and other Webkit/iOS browsers, I’ve been spending more and more time searching through the Apple Developer Safari Reference Library.

It’s a very complete resource, but so far, I’ve found it to be mildly frustrating for the beginner. For instance, constructing a basic block requires referencing about 3-5 different pages in the Apple documentation (that don’t link together in a meaningful way), as well as a variety of third-party developers’ sites.

So, I’ll step through what I typically do, explaining it line by line. Hopefully it will help someone who might otherwise go through the same problems I experienced when I was first getting started with Web app development for iOS mobiles and Webkit. I’m not saying that this is the 100% best way to do it; it is the way that seems to work best for me. If you have any suggestions to improve it (or refute some of my thinking), please feel free to comment on this post or contact me directly.

What Character Set?

First up, the http-equiv meta tag. I always encode my pages for UTF-8 because I typically deal with users around the world who have Web browsers that may render local characters incorrectly. UTF-8 allows for a large character set. Learn more about UTF-8 at UTF8.com.

This Really is a Safari Web App

Setting the apple-mobile-web-app-capable meta tag to yes means that the page can be added as a full-screen app, and run “outside” of Safari. I say outside in quotes, because really it is still running using the Webkit rendering engine, but the user isn’t presented with the URL bar, or other chrome that, while useful when browsing the Web, only gets in the way when he or she is using your Web app.

The Status Bar

Next, we define how the top bar looks (the bit that has the carrier, time and other system-wide icons). By default, this value is default, meaning, a grey chrome finish and completely opaque. Lately, I’ve been going with setting this to black which is how it sounds. The other option available is translucent-black. This lets your app “bleed through,” which sounds like a good idea, and can look nice if you take this into consideration when you build your mobile Web app… but in practice can end up looking a little sloppy in my opinion.

Viewport vs. Window

The viewport is one of the tricker concepts to understand. By default, iOS Safari renders content in a window with a 1024 pixel width. It then scales things down using it’s own logic to fit what it can on your screen (the viewport). The basic idea is that the viewport is inside of the window. On the desktop version of Safari, the two are set to the exact same size.

What I’ve found to work best for the iOS devices is the following. Basically, I’m saying, set the scale to 1:1 (make the viewport the same size as the window); the width should be the device’s width (this is a constant that changes based on rotation of the device — better to set it to this than to give a static width); and don’t let the user scale anything (again, because I’ve designed this as a Web app, specifically for iOS, there should be no need to scale).

Auto-Detect Phone Numbers

Many of the Web apps that I work with extend digital asset management systems, and so they include things like identification numbers for TV commercials, print job numbers, etc.; rarely do I use telephone numbers in my Web apps. So, I turn off automatic detection of telephone numbers to prevent bad links. Your Web app may be different, and you might want this behavior… if so, then by all means, skip over this line.

For me, I start with no phone number detection, and then flag items manually that should be sent to the phone (for instance, a technical support phone number in the footer). For this type of scenario, I’ll use a tag like Support by Phone. Using “tel:” as the first part of the href let’s Safari know that the link is be sent to the phone app rather than as a Web link.

Default Home Screen Icon

By default when you click the “+” icon in Safari to add a Web app to your home page, Safari will take a screenshot and use it as the icon. Generally, this isn’t very pretty. You can supply a more user-friendly design by uploading a 57×57 pixel PNG (not GIF or JPG), and pointing apple-touch-icon to it. Don’t include any rounded corners, or the glass/glow art — Safari takes care of this for you. There is an alternate meta tag that allows you to supply a pre-composed image instead, but generally, I don’t go that route.

Startup Image

Similarly, you can provide a “startup image” that displays before your Web app runs (actually, it displays while the device compares its cached version of your Web app to the live version on your server, and if there are differences it downloads them). This should be a 320×460 pixels in size, again in PNG format. Remember, this will only appear when your Web app is running full-screen (i.e., when you click on it from your device’s home screen); it doesn’t display when browsing to it in Safari.

Localized CSS

Lastly, I link to my stylesheet that defines styles specific to the Web app. If you’ve used any third-party libraries to help with layout, they would appear before this link so that you can override any styles locally. Some examples of these libraries are iUI and iWebKit.

Does Order Matter?

I don’t really know. Typically, I organize my block by placing any tags first, then tags, and then the tag. I really don’t think that this matters much, but I’m a fairly visual person, and having things grouped this way makes it easier for me to browse my source code.</p> <h3>In Summary</h3> <p>In summary, here is the completed <head> block:</p> <div style="background: #ebebeb;"><code><head><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br /> <meta name="apple-mobile-web-app-capable" content="yes" /><br /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><br /> <meta name="viewport"<br /> content="initial-scale=1.0, width=device-width, user-scalable=no" /><br /> <meta name="format-detection" content="telephone=no" /><br /> <link rel="apple-touch-icon" href="/lib/media/apple/icon.png" /><br /> <link rel="apple-touch-startup-image" href="/lib/media/apple/splash.png" /><br /> <link rel="stylesheet" type="text/css" href="/lib/css/ios-common.css" /><br /> <title>Name of Your App Here

Getting More Done, Mac Edition

Andrew Marconi — Sat, 20 Mar 2010 16:00:18 +0000

Lately, I’ve started implementing David Allen’s GTD framework for “Getting Things Done.”

I’ve never been a huge fan of life coaches, “creative visualization to get what you want in life,” and all the touchy-feely “my parents didn’t give me ice cream once when I was five, so now I can’t have a serious relationship” communities led by “life gurus.” Mostly, I think they’re frauds that prey on the weak and vulnerable.

However, David’s GTD framework is rooted in practicalities, simple ideas and easy ways to think about getting what you need done, done. I highly recommend reading his book, Getting Things Done: The Art of Stress-Free Productivity (available from Amazon) for an introduction to his work. Of course, his company offers workshops, personal coaching services, etc. — but just give the book a try first to see if it is a good fit for you. After all, it’s less than an $11 investment.

Although I’ve just got started using the organizational thinking and processes, I’ve found a couple of software tools that really help me stay focused on “what’s next.”

Click through to the following pages below to see how I’ve set up my system.

Getting Boxee and XBMC Back after the Apple TV 3.0.1 Update

Andrew Marconi — Thu, 03 Dec 2009 05:17:30 +0000

The Apple TV has a lot of potential. Unfortunately, it has some “features” that limit its usefulness out of the box. Thankfully, some really smart people have stepped in to leverage third-party components, extending its capabilities that bring it one step closer to being a fantastic HTPC.

Please Note: These instructions will wipe your Apple TV completely clean. Anything you have stored previously on it will be erased. Be sure to backup before playing. You have been warned.

Be sure to read everything (including the disclaimer at the bottom) before doing anything with your Apple TV.

Chapter One. Patchstick Your Apple TV

To start… you need a 1GB USB flash drive that doesn’t have any files on it. Some work, some don’t. Its a bit of a crap-shoot.

1. Factory Reset your Apple TV. (Go to: General > Reset Settings > Factory Restore).
2. Update Software to 3.0.1 on Apple TV (Go to: General > Update Software).
3. Go to http://patchstick.wikispaces.com/PatchStickBuilder and click “download location”.
4. You will now be on a “Data File Host” page to download a file called “PSB3.0.zip” click on “Click Here” to download.
5. It will download the ATV&More application in a zip file to your desktop. Unzip it.
6. Plug in your blank USB flash drive. If you have any other USB storage devices plugged in to your computer, UNPLUG THEM NOW to avoid accidentally erasing something important. This includes any external hard drives.

UPDATE (from @patchstick) – They tell me that you don’t have to do this because the software won’t write to any device over 16GB as a safety precaution – so there’s little chance in losing data on existing drives. Personally, I’m paranoid, so I’d still unmount/disconnect any other drives to avoid even a 0.0000001% chance.

7. Go into the PSB3.0 folder and double click on “PatchStick Builder” — this will launch the application.
8. Once the application is running, click on “Download Firmware Image” – this will get a required file from Apple’s update site. This could take some time, depending on the speed of your internet connection. When it is done, you should see a file name in bright green at the top left of the window, and it should say, “…ok” at the end.
9. Your USB drive should be listed in the drop-down box. Make sure it is selected and then click on the “Create Patchstick” button at the bottom. The program will spend some time organizing files and writing everything to the patchstick. Once it is done, it will let you know.
10. Quit the program and eject your new USB patchstick.
11. Unplug your Apple TV. Plug USB patchstick into the back of the Apple TV. Plug in your Apple TV. (NOTE: With some USB hardware, it sometimes works better if you plug in the Apple TV, and then within 2 seconds plug in the USB patchstick.)
12. You should see a hand holding a green apple come up on the screen, and then a bunch of little text scrolling down. When the process is done, you’ll see a note (in the small text) to unplug the USB patchstick.
13. In 30 seconds, the Apple TV will reboot – this will take a few moments. A big hand holding a green apple will animate, and then you’ll be taken to the 3.0.1 home screen.
14. Scroll to the right to “Launch More,” and then select Scripts > Load Free Base Configuration.
15. You will see a screen that says “Running Script “Load Free Base Configuration” and it will be doing some work. When it is done, it will take you back to the home screen.
16. Go to “Launch More” > “Scripts” > “Hide TV Shows Menu Entry” (provided you never use this option — if you do rent/purchase TV Shows from iTunes, then don’t do this.

Your Apple TV has been unlocked and is now ready to run third-party software.

Chapter Two. Install Launcher 3.2 Beta 3

This chapter downloads the program that will let you install Boxee and XBMC. Using your favorite SSH client (Terminal on a Mac, or PuTTY on Windows), you need to get your hands dirty for a few minutes…

1. On the Mac, open Terminal and type: “ssh frontrow@appletv.local” and press enter. If you get an error saying that the “remote host identification has changed!” then you need to delete your known_hosts file. If you’ve never ssh’d into your ATV before, this probably won’t happen. Otherwise, you may be prompted to confirm you want to connect, even though “the authenticity of host can’t be established.” This is ok. Just type Yes. If you are on a Windows PC, run PuTTY, and create a connection to “appletv.local” over SSH with the username “frontrow”.
2. You are now prompted for a password. This is “frontrow”. Type it, and press enter.
3. You are now at the command prompt (you’ll see a prompt that says “-bash-2.05b$” most likely. Type the following commands, pressing enter after each line, and waiting for the command to finish. After you type the first command, you will probably be prompted for a password. Again, the password is “frontrow”.
sudo mount -uw / cd /users/frontrow/ wget http://dl.getdropbox.com/u/858897/XBMC/Launcher-3.2.beta3-debug.run
(This will take a few moments — it is downloading software from the internet.)
chmod +x Launcher-3.2.beta3-debug.run ./Launcher-3.2.beta3-debug.run
(You will be asked whether you’d like to restart the Finder. Type the letter ‘Y’. Your ATV will flash and it will go back to the 3.0.1 home screen.)
sudo mount -ur / exit
4. You can now close out your Terminal or PuTTY window on your computer.

Chapter Three. Install Boxee & XBMC

1. On your Apple TV, go to the new “Launcher” menu. Choose “Downloads.”
2. Click on “Boxee alpha 0.9.14.6992″. Your ATV will download Boxee and run the installation script. This will take a few moments. When it’s done, it will say, “Update finished successfully! Hit menu to return.” Do so, and you’re back to the download screen.
3. Click on “XBMC 9.11 (beta1)”. Your Apple TV will download XBMC and run the installation script. This will take a few moments. When it’s done, it will say, “Update finished successfully!! Hit menu to return.” Do so, and you’re back to the download screen.
4. Hit the “menu” to get back to the Apple TV home screen.

You should now have both Boxee and XBMC available!

Credits & Disclaimer

These steps are an assemblage of instructions from many different sources on the net, including from various forums and third-party Web sites. I’ve tried to put them together in a way that is easy to follow, even for the “newbie.” I do not condone breaking any warranty or law, or hacking of any technologies here — I’m just presenting instructions as found throughout the Web in an organized manner.

Patchstick.ca is a great resource for extending the AppleTV. They offer additional services through a paid subscription model. Check them out.

Software versions and files. These instructions should work as of the date of this post. Like any evolving software, they may not work tomorrow. New software versions come out; incompatibilities happen. No warranty is made or suggested by being listed here. I cannot be held responsible if you manage to blow up (or otherwise damage) your property or the property of others.

Usability & the NYC MTA MetroCard

Andrew Marconi — Wed, 10 Jun 2009 16:04:01 +0000

Not that the MTA is known for providing a good experience… but…

I purchase a pre-tax monthly MTA MetroCard through a program at work, and I’ve noticed something inconsistent. When I drop my card in the machine on an MTA bus, it let’s me know the date that my card will expire. However, when I swipe my card in the subway, it just says “Go.”

Wouldn’t it make sense to make these two experiences consistent? The great thing about being reminded of the expiration date on the bus is that I’m prompted to bring my new card on the day after the old one expires. This prevents me (most of the time) from holding up the line swiping the expired one, waiting for it to tell me it is expired, and then fishing around in my wallet for the new card.

One would think that the difference in software would be a simple one. After all, both systems are able to tell you your balance on a non-unlimited card when you swipe it.

Though minor, it would be a vast improvement on the subway where, in the heat of catching the next train waiting behind someone to swipe a second card through the turnstiles is a huge, frustrating length of time (says something about perception over reality, doesn’t it?).

Enabling Flash Video (FLV) Playback on Windows IIS

Andrew Marconi — Wed, 10 Jun 2009 15:11:21 +0000

Here’s another “gotcha” courtesy of Microsoft: by default, IIS doesn’t include a MIME type for Flash Video (FLV) files, resulting in a 404 Not Found error whenever you try to access the file. One would think that they would deliver a 401 Unauthorized error, but hey… what do I know?

Right click on either the individual site or the full server, and then click “Properties.”

Click on the “HTTP Headers” tab.
Choose “File Types” and click “New Type.”
Add “.flv” for the associated extension, and “video/x-flv” as the content-type.
Click OK to save the addition, and close out.

Like everything with IIS, you may need to restart the service to see the change.

This is just one more reason to use Apache on Linux.

Opt-Out of “Interest Based Ads” from Google and Other Ad Networks

Andrew Marconi — Fri, 05 Jun 2009 03:40:05 +0000

While I don’t consider myself to be paranoid about being tracked around the Web, I still value my privacy. I also don’t like companies making money off of me (unless I’m getting a cut, of course) — and behaviorally-targeted ads have a higher value to advertisers, so DoubleClick (Google’s ad serving platform) and the other networks can charge more money.

So, this is why I “opt-out” of Google’s “Interest-Based Ads” and 28 other ad networks that are members of the Network Advertising Initiative. Conveniently, they have a tool online that allows you to do this fairly easily.

According to NAI:

“The NAI Opt-out Tool replaces a network advertiser’s unique online preference marketing cookie on your browser with a general opt-out cookie. It does not delete individual cookies nor does it necessarily replace other cookies delivered by network advertisers, such as those that are used for aggregate ad reporting or mere ad serving purposes. Such cookies allow network advertisers to change the sequence of ad banners, as well as track the aggregate number of ads delivered (impressions).”

Currently, you can opt-out of the following networks via NAI’s tool: aCerno, Advertising.com, Akamai, AlmondNet, Atlas, AudienceScience, BlueKai, BlueLithium, Collective Media, Dedicated Networks, eXelate Media, FetchBack, Fox Audience Network, Google, interCLICK, Lotame, Media6degrees, Mindset Media, NextAction, Safecount, SpecificMEDIA, Traffic Marketplace, Turn, 24/7 Real Media, Undertone Networks, [x+1] (formerly Poindexter Systems), Yahoo! Ad Network, TACODA Audience Networks, & Tribal Fusion.

You will still see ads wherever ads are served, but you won’t be tracked (usually, “anonymously,” which to me is a bit of an oxymoron). You will need to use this tool anytime you clear the cookies from your browser (you do this occassionally, don’t you?). You also need to do this for every Web browser that you may use. Just because you opt-out in Internet Explorer doesn’t mean that you’ve opted out in Firefox.

Opt-Out with the NAI Tool. There is a security issue that prevents Safari and IE7 users from being able to use the tool in some cases (it deals with third-party cookie permissions). View their FAQ for more information.

Troubleshooting jQuery in WordPress Themes

Andrew Marconi — Fri, 29 May 2009 04:29:03 +0000

Here’s another “oh yeah, I always forget about that” geek item.

I spent a few hours today going nuts trying to figure out why the jQuery Cycle plug-in wasn’t working in a new theme I’m working on. The code ran great outside of WordPress, but the minute I placed it inside the theme, it broke.

Then I realized: when using jQuery in WordPress you always have to remember to explicitly call it by name rather than use the handy-dandy $(“#identifier”) short-cut that every example and demo online uses. The long-winded reasoning (as I discovered thanks to Techxplorer’s blog entry) is that the bundled version of jQuery built into WordPress since version 2.2 is initialized with jQuery.noConflict. The upside is that this keeps the jQuery library from crashing into other bundled libraries (like Prototype). The bad news is that it breaks support for the $ shortcut.

I came across an simple solution via Chris Mellon:

Instead, for interoperability, be sure to use jQuery() instead, which should accomplish the same thing.

A bad example:
var username = $('#username').val();
If Prototype were to be loaded on the page this snippet of JS is running on, it would throw an error, since it uses a different pattern for selecting DOM elements.

A good example:
var username = jQuery('#username').val();
This line should work on any page, regardless of library conflicts. It’s a couple extra characters to type, but in the end it’s really for the best – you get portability, and it’s more self-explanatory which library is being used when you go back to look at this code in 6 months.

WordPress Theme Check List/Cheat Sheet

Andrew Marconi — Thu, 14 May 2009 16:06:12 +0000

Stefan Vervoort over at WPToy.com has published a great cheat sheet for developing WordPress themes. It’s available in PDF format, so as he suggests, if you build themes print it out and put it on your wall. When I’m building a WordPress theme, I always forget something along the line (when I go into “programmer mode” I get a little lazy sometimes, alright?) — this makes sure I cover off on all the elements.

Back in 2008, I announced the WordPress Theme Development Checklist on DivitoDesign. The Checklist with many small tips, code snippets and checkpoints you usually forget about was a success.

Today it is time to release an improved official PDF version of the Checklist for the WordPress crowd. This PDF version is clean and easy to print, which makes it an excellent checklist when you are developing your new WordPress Theme.

Great work, Stefan!

[Via WPToy.com]

WordPress Best Practices for the Newbie – Part 1: Before the Blog

Andrew Marconi — Mon, 11 May 2009 05:26:28 +0000

Introduction

After performing countless installs of WordPress, I’ve learned a few things about how to make it work more effectively, and how to avoid some common pitfalls that I’ve never seen in any of the documentation. This is part one of three; it deals primarily with the decisions you need to make before you write your first post. Subsequent posts will discuss different aspects of WordPress and the “Best Practices for Non-Geeks.”

So, getting started… the first question when you decide to start publishing on the Web is:

To Use a Blogging Service or Self-Host

There are many articles on the Web that argue one way or the other. On the one hand, with WordPress.com, Blogspot.com, or any other online blogging services (although, I strongly recommend WordPress) you can be up and running fairly quickly with a minimum of effort or technical acumen.

WordPress.com or Other Blogging Service

Pros: Easy to install/maintain; your blog lives on a fairly reliable, commercial farm of servers; usually free (more on this in a moment). WordPress lists many of their pros on the WordPress.com Features page.
Cons: Limited customization ability; you are giving up data to the host; they may add advertisements to your blog (unless you pay a fee to have them removed); using a domain name (rather than a x.wordpress.com address) costs extra.

Self-Hosting WordPress

Pros: Completely customizable; you have complete control over your installation; you don’t give up or share any monetization (unless you want to).
Cons: Occasionally requires some technical expertise.

For me, the decision was easy — I’m a bit of a geek, and I like to play around with the guts of my site — so I went the self-hosting route. If getting your hands a little dirty scares you, then you may want to start with WordPress.com. One of the great features of WordPress.com is that you aren’t locked in; you can pretty easily export your content and install it on your own server at any time. The caveat to this is that if your URL changes, any Google rankings will probably be lost.

Quite honestly, even if you aren’t especially technically-savvy, self-hosting isn’t too difficult.

Choose the Right Web Host

Once you decide to self-host your WordPress-powered Web site, the next important decision is: who are you going to use as your Web hosting provider? The folks at Automattic (the creators of WordPress) have a list of companies that they suggest. The only ones I’ve worked with and had positive experiences with are DreamHost and Media Temple. I had bad experiences with GoDaddy, but that was several years ago, so I hesitate to dissuade considering them.

The one I suggest, actually is 1&1 Hosting. True, they don’t offer the 1-click install that some other hosting providers have, but they offer a bunch of features that I actually use, and are a fraction of the cost. For instance, with my shared hosting account (I use their “Business Shared Hosting”) I pay $5/month (this has now gone up in price to $9.99/mo, but they’re also running a 50% off sale — which effectively means $5/month). This includes three free domain registrations for as long as you have your account, and let’s me host an unlimited number of domain names registered through them within my one account (or up to 100 externally-registered domain names). I can have up to 2,500 POP3/IMAP email addresses, and includes a $50 voucher for Google AdWords. For my particular needs, this is perfect.

One mistake I frequently see people do is to buy too much Web hosting — this is why usage tracking is important. If you have fewer than 5,000 visits/day, shared hosting may be your best bet. When your traffic scales, that’s when you should scale up to VPS (virtual private server) or dedicated hosting. These types of services give you much more control, bandwidth and capabilities, but also require much more technical knowledge. This makes sense — to put it in perspective think of it this way: “just because I can drive a car doesn’t mean I can fly a 767 aircraft.” The plane can do a lot more than a car can, but most of my transportation needs don’t require jet fuel (actually since I live in NYC, I rely on the subway more than cars).

On the flip side, if you know you are going to have tons of traffic right out of the gate (for instance, if you have paid AdWords traffic that will be hitting your Web site), or a major public relations push — you may need to start out with more powerful hosting… but that is beyond the scope of this article.

In Part 2, I’ll guide you through the installation and first steps of setting up WordPress in your self-hosting environment.

White House to Ask for $50M for Social Innovation Fund

Andrew Marconi — Sat, 09 May 2009 22:37:13 +0000

This past Tuesday, the White House announced it’s intention to ask Congress for $50 million for seed capital for the Social Innovation Fund. At the TIME 100 Most Influential People event in New York, First Lady, Michelle Obama described it as:

The idea is simple: to find the most effective programs out there and then provide the capital needed to replicate their success in communities around the country that are facing similar challenges. By focusing on high-impact, result-oriented non-profits, we will ensure that government dollars are spent in a way that is effective, accountable and worthy of the public trust.

I’ll be interested to see who ends up leading the pack here. Who has been the most innovative? The larger, more established non-profits or the smaller under-funded ones like the Medicare Rights Center? Although organizations such as Habitat do some great work, my money is on the smaller non-profits and individual entrepreneurs.

Read the White House Blog Post “What is the Social Innovation Fund?”
Read the White House Briefing
More Details via AmericaForward.org

[Via DesignMind]