I spent a few minutes using wordle to map my life (or tweets) from when I stopped working at Expedited Travel until now. Here is the result:

A few things you will notice include that “@applee” is HUGE, that’s because she’s my girlfriend. Next you’ll probably notice “@lessallan” and “@stevenbristol” that’s because I’ve been working with them on an iPhone version of More Honey…You’ll also notice that “watching“, “iphone” and “check”-ing are part of my routine.

All in all, hats off to Wordle. Expect more Post’s soon.

I haven’t blogged in a while. I waited this long, well, for no reason.

There has been a lot of hype surrounding the iPhone and Google’s Android Platform. With Androids updates shown at Google I/O recently I suspect it’s adoption will be widespread shortly.

So, we’re going to cover a tutorial for Safire, we’re going to build iZillow, which is basically Zillow, on the iPhone. This will hopefully give people a feel for what it’s like to develop mobile web apps.

Safire:

Safire is a front-end web app framework, for iPhone and Android Web Applications. It has a bunch of css/js/images that make it feel like a native iPhone app. It’s pretty easy to use, so long as you follow conventions.

So the base HTML look’s like this:

http://pastie.caboo.se/206073

That’s great, but we want to make an app that looks and feels like Zillow, so let’s start by adding in some elements to the page:

http://pastie.caboo.se/206086

Ok so we have a header, but no background, the .toolbar div will have our background image tiled:

http://pastie.caboo.se/206087

Simple enough, please note the “!important” declaration. It’s there because we have default styles for the .toolbar specified in the safire.css file. Whenever you see “!important” in the rest of this tutorial, it means that we are over-riding styles most likely specified in safire.css.

We’ve got a toolbar great! Not really… Let’s add the rest of our elements to the page. Make sure you put them above the div with the id of “stage”.

http://pastie.caboo.se/206079

So we added a link (which will hide our form), a few divs and a form. There are a few things that are weird about this html:

1. The form has no “action” attribute
2. The form does have a “method” attribute
3. There is a link that looks like it could be a button

With Safire, forms only needs a method attribute and the action is actually specified in a link within the form, let’s look at this snippet:

http://pastie.caboo.se/206090

So this works, but you need to do something with the response from the server after you submit the form, so we add a callback attribute with the name of our callback function which takes a ‘response’ argument:

http://pastie.caboo.se/206116

By now you should have quite a bit of code, something like this:

http://pastie.caboo.se/206125

OK so now we add in the slogan and footer:

http://pastie.caboo.se/206127

and then associated styles, we’re planning ahead with some of this CSS (results & errors):

http://pastie.caboo.se/206138

So that’s the start page, now we need to revisit the form for validation, we’ll add an onclick event of “preformSubmit”, check it out:

http://pastie.caboo.se/206142

Let’s add a form hide/show action to the appropriate link:

http://pastie.caboo.se/206145

Now let’s write out all of the associated javascript functions, getValue - the ajax callback, preformSubmit - the form validation, hideForm & showForm:

http://pastie.caboo.se/206150

Great, now let’s build out our results template (this will include some python), we’ll use a few rounded corners:

http://pastie.caboo.se/206157

I use the “success* ” at the beginning to let the js function getValue (listed here) know that everything went OK.

Now we have to add a few more lines of js and we’re done:

http://pastie.caboo.se/206160

Your final index.html file should look something like this:

http://pastie.caboo.se/206161

Please put any of your questions in the comments and I’ll get back to them asap. I’m going to be going over the back end of this (which was built using Python & Google App Engine) in a few days.

For my first post, I just want to say sorry I suck at design.

Until some designer comes along and say’s “Hey! Let me create an awesome design for you for free or for $50″. We’re probably going to be stuck with this.

If we’re lucky I will revamp this puppy, along with the rest of my site. But to be honest, I just don’t think that’s going to happen, because I am not very confident in my design skill.

I have some cool stuff coming out within the next 4 days, so check back if you like cool technology stuff.