iPhone shell November 2, 2009
Posted by headwinds in Mobile.add a comment
I’ve been evaluating the possibilities of using html/javascript/css to create mobile apps that work across various smart devices. I’m concentrating on the iPhone first. Along with developing with universal html/javascript/css, I would also like to pick up some Objective C so that I can learn a few of the unique hooks into the iPhone.
Since I’m working with html to create a rapid prototype of my app, I want to use the speed of the browser and simply hit refresh each time. I don’t want to wait the 20 seconds or so that it takes Titantium’s developer to compile the app in the iPhone simulator on my Mac (maybe that’s just my Mac though).
By publishing the app in the browser I missed the look of the simulator cradling the potential of my prototype. It made it look that much more real. I did a search for iPhone templates and found this amazingly detailed iPhone template psd by Teehan+Lax and extracted the vertical and horizontal faces from it.
I used those faces to develop my own shell with 2 views; each using an iframe. This could probably be further improved to flip on an internal app activity but it works great for simple testing and I can edit the iframe to point to a different app or game when I’m ready to test something else.
Feel free to download the source and use it in your projects.
BOOKS
I picked up a few books on the weekend, and I recommend both of these which should be instrumental in learning more about iPhone development.
This booked is directed at the novice iphone developer and includes an Objective-C Primer with best practices on how to approach iphone development inline with the Apple app store.
iPhone SDK Application Development: Building Applications for the AppStore
This takes advantage of HTML/CSS/javascript to build browser-based applications and games that can leverage the iphone’s api to handle things like multitouch and phone calls.
SAVE THE CARIBOU
There should be an app for that.
hinterland who’s who: caribou
PhoneGap vs. Titanium from n00b eyes October 28, 2009
Posted by headwinds in Random.add a comment
I admit it – I’m a n00b when it comes to mobile development. I have experimented with Android’s Java and Objective C but I’ve come to realize that what I really need is something simple that will translate easily from the web to mobile. I also need simple, well-written getting started tutorials to make this transition even easier.
In most of my posts, I point to Flash as my weapon of choice. Its my Excalibur. But then again I’m no pendragon; I can’t pick and choose my technologies. I’m somewhere in the middle of the pack of dragon developers who require a larger arsenal depending where they need to stick their media. Don’t get us confused with the other jacks out there. We aspire to be specialists even gurus in a few languages and command them to do our bidding. For me, its all about the speed to prototype and a decent level of control over the media.
For this test to compare frameworks, my goal is to link together 3 html pages with a mixture of text, images, and interaction. I want to build an iPhone app in the simulator without an actual iPhone nor developer license.
PHONEGAP
I approached Phonegap first which now slants my take on Titantium because it took out most of my hair during this process. It helped me learn to how to think about html/css/javascript for mobile, and this made diving in Titantium easier.
After downloading and opening the PhoneGap project in XCode, I mainly struggled with the xcode interface itself so I can’t really fault phonegap for my not being comfortable with its in and outs. For instance, I could easily edit the html but it took me a long time to figure out how to add an image to my project. I also attempted to manually rename the PhoneGap project to my own project name and this caused havoc [specifically I got a weird pathing error to a missing configure folder] and I had to rename it back to get it to compile properly.
I think most of my problems could be cleared up if this tutorial was better though. In fact, because they have a wiki system, I (or you) should consider writing one.
Getting started with phonegap and iPhone
TITANIUM
For Titanium, I watched a few videos on their site [ youtube also has decent Phonegap videos] and then downloaded and installed their Titantium Developer tool for the Mac which allowed me to configure my iPhone app without even touching XCode!
Next, instead of wrestling with XCode, I decided to open a familiar html editor — Dreamweaver — and edit the index.html in this environment. Again, without using XCode, I created an images folder and linked my html to an image in that folder. I returned to the Titanium Developer and launched the app. I saw my html page and the image [ I never did get the image to appear in Phonegap but that's xCode's fault I'm sure]. From there, it was relatively easy to create another html page as they include an about.html to reach my goal of three html pages with images and some hyperlinking interactivity.
Getting started with titanium and iPhone
CONCLUSION
Phonegap supports Android, iPhone, and Blacberry while Titanium supports Android and iPhone. This difference doesn’t really matter to me as I’m currently focusing on iPhone and Android. If I write standards compliant html/javascript/css as my base, I should be able to an create app that works within any platform and it would then be a matter of learning the individual hooks. The underlining html/css/javascript should then in theory be web friendly too so that one could that work and create things like facebook pages. Its a little bizarre to be thinking about the mobile first then the web.
I’d like to see both Phonegap and Titantium add a big quick link to their iphone development getting started pages on their home page as I had trouble finding them initially. I would like to see Phonegap write their own official guide to getting started separate from their wiki page as much as I love wikis, it needs an authority voice.
For your next mobile project, look at what your app needs to do and consider using html/javascript/css. One might consider the following workflow but I’ll jump straight to steps 2/3 
1. create a prototype that works in a web browser
2. hook the prototype into a framework like phonegap or titanium in an iphone simulator
3. test the app on the actual device
I think I wanted PhoneGap to be a no brainer as it was recommended to me by friends. Right now, after about only 3 hours using each platform, I will have to recommend Titanium as I simply found it easier to get started with but I don’t know yet how it might limit me down the road.
receptionist friendly flash 10 xml editor October 21, 2009
Posted by headwinds in Development, Flash, Gaming.add a comment
XML is so simple even Maggie Gyllenhaal could update it but she never would; nor would your receptionist or even your PM.
In theory, non-technical people should be able to edit xml files. Creating configurable xml files are a relatively cheap solution to content management over one driven by a database. XML is really meant for other developers to manage your compiled work without having to dig around your source looking for variables.
On a side note, I’ve been building a lot of html, css and javascript lately so that I can eventually claim to be a true front-end developer not just a one-trick Flash pony. I’ve grown to realize that there is a cool conversation happening with html these days and I should be more versed in it. But I’ll save that tangent for another post. I only mention it here because I’m working with a django developer and learning django tags. In the django documentation, there is a line about the pains of having to hand write xml which they call “sadistic”.
As much as you try to keep it organized, xml becomes increasing more challenging to work with as the data grows beyond 100 lines. It would be nice to have something like form-based editor for it which could create the xml behind the scenes. But you need to model the xml first before you can create the editor. In most cases, its simply faster to edit the raw xml.
With the introduction of Flash player 10, we can now develop xml editors in CS4 without using AIR or ZINC. We have a new method on filereference: save(). We can use save to open file dialog so that the user can save the new file to their desktop. Currently, there is a bug though in the save method which won’t allow you to overwrite existing files — it will attempt to and actually append your data to the end of the file which isn’t good especially when dealing with xml.
You can get around this bug by creating a new file each time. In the below example, I simply added a timestamp to my file name to avoid this problem. Then, when I need to load this xml file, I open the latest version. Here is a small code sample demonstrating this save work around:
view code sample
download code sample
I liked these two blog posts about the filereference features and the known save bug:
deleteaso.com
dynamicflash.com
This post is a little backwards. I’m showing you a code sample before I reveal its purpose.
I like to evaluate new features in Flash by creating mini game engines. In order to get more comfortable with filereference and potentially use it my client work, I decided to design/develop a story editor which would allow me create reams of xml for a story-driven game like Mass Effect. For this exercise, I did the wireframing and coding simultaneously. This felt natural to me as I basically had an idea of what the end interface would look like, and, as I discovered missing controls, I could add them and wire them up as I went along. It’s a strange feeling when your interface starts to speak to you and recommends new features ;-D.
Along with the ability to create/edit scenarios, you can see a few other features sketched in this working wireframe like an image option which doesn’t do anything yet; the preview scenario which will show the images and cycle through the scenarios; and the bizarre “male” reference in the top right that tells me that this scenario is written from the main man’s point of view. I have to plans to add female, alien, and possibly unicorn POVs.
After the recent Adobe announcement about how they had managed to circumvent the Flash player on the iPhone by developing a way to convert AS3 to a native iPhone app, I did a black flip back into Flash and have pretty much abandoned my shallow dives in Android and Objective C. I’ll thrilled to be focusing on Flash again with some complementary side steps into javascript.
As much I know this scares some hardcode Apple developers who fear we’ll fill their precious little wonder with trivial bubble wrap apps, I’m dreaming of serious Flash games and apps on the iPhone now as an extension of our greater advertising campaigns that will uniquely consider an iPhone’s hardware requirements. As soon as CS5 is ready, I hope to have a Flash mobile game but in the meantime I’m starting to look at many of the Flash gaming portals with their reduced desktop space that seem like an ideal tank to test the waters.
FITC MOBILE NOTES September 21, 2009
Posted by headwinds in Mobile.add a comment
This photo has nothing to do with the FITC Mobile conference that I attended last week. Its just one sick flashlight.
PHONE GAP
Phone Gap is an opensource javascript framework that helps you develop native apps for all major smart phones: Android, iPhone, and Blackberry.
They have also taken the popular jQuerry framework and created their own version XUI; reducing its size from 25K to 2.5K in the process.
Titanium is a similar framework to Phone Gap which also produces native apps using javascript, html, and css so a web developer can continue to work with familiar technologies and not have to dive deep into objective c.
MOTOROLA
Motorala doesn’t just have one phone to worry about; they offer a “portfolio” of phones; well over 40 devices. By 2010, they plan to have 17 handsets that have android OS.
The Motoblur platform is all about the concept of “I broadcast” — users don’t need to surf anymore; anything that they could be interested in comes to them, and they simply flick passively through panels of facebook, myspace, and twitter updates.
Once one has setup the device, it retains its settings even if lost so that you can pick up a new device and it will re-sync.
MOBILE FLASH
Adobe is committed to bringing out the Flash 10 Player on a android device by 2010. They will also be releasing a new version of Flash lite 4 supporting AS3 for underpowered phones.
Device Central will allow developers to test their apps in any device that support Flash Lite. They can also test new accelerometer functionality on a virtual 3D phone.
In order to promote their openscreen project, Abode and Nokia have joined together to put up a $10 million fund for aspiring mobile flash developers.
According to Mark, Flash lite will most likely be the dominant flash player until 2012.
FLASH LITE
frameworks:
Feather
Shuriken Flash lite 2 components
portals:
thumbplay
Brian Robbins
Riptide Games
Brian discussed iPhone game development. He mentioned that turning on NSZombieEnabled = YES will help you track down memory leaks by creating zombie objects that persist; make sure you turn it off after testing though. He also recommended the Clang Static Analyzer found in the new Snow Leopard
Mobile Analytics:
pinch media
flurry
localytics
You can track not just your own games, but leading games like Paper Toss by Backflip Studios.
RIM
Composer and Themebuilder are two tools that designers can use to completely skin the entire blackberry interface. Designers can sell themes on the Blackberry market.
Flash developers/designers will be interested in the swf import functionality. These tools will convert the swf into an svg so one can build custom animated wallpapers and other animated effects like button states.
ANDROID GUITAR APP
Active Frequency developed an android guitar app which is for sale in the US android market. There is no Canadian app market yet where we can sell apps.
Android tip: Instead of using pixels in your layout, try using dip ( density independent pixels ) instead as described in this blog post.
making iPhone headway without an iPhone September 8, 2009
Posted by headwinds in Blast Radius, Design, Development, Flash.add a comment
I was part of a winning team that took home the first place prize and handsome cash reward for our internal iPhone competition here at Blast Radius, and I don’t even own an iPhone.
The goal was to form a dream team; pick an existing client; and design a game-changing iPhone app that they couldn’t live with it, and also to motivate us to build more apps/games on our own. So far Blast has produced 1 iPhone app commercially — iMotivator for Jordan’s Flight Club. And, I’m sure we’ll see a lot more iPhone apps being developed here in 2009/10 as demand heats up; hopefully it will pick up for android as well.
The competition was open to the Blast offices around the world with two stages: proposal and prototype. In the second phase, we produced a functional prototype leveraging box2d for our iphone game with various marketing and social media hooks.
Even though the iPhone doesn’t support Flash, Flash did play a major role in the success of our pitch. I was able to animate a complete game experience as if our game was real; very compelling to our judges. Its such a shame that the iPhone doesn’t support Flash — our game really doesn’t need objective c — we could create the entire thing in Flash and have it run on both phone and desktop — wishful thinking — which is one reason I’m more excited by the android platform after hearing Adobe’s promise to bring Flash 10 to android by 2010.
In Canada, we have these nasty 3 year phone contracts which are very expensive to break and I still find myself somewhat on the sidelines until I get a smart phone. I’m ready to purchase one but not at the price of breaking my existing contract to do so. In meantime, its great to have free tools available for both iPhone (xcode/interface builder) and Android (eclipse plugin) with virtual emulators.
When my contract ends next year, my plan is to get iTouch and then something like an HTC hero ( or which ever model supports android, Flash 10, and G3 — more dreaming ;-D ) and then get the best of both worlds.
Heavy Forward August 4, 2009
Posted by headwinds in Adventure, Design, Eco-Tech.add a comment
We went white water rafting on the weekend with the River Run rafting. 12 of us ventured forth split between two 6 person rafts on an adventure down the Ottawa river. It rained during the ride which only added to the fun and fear.
With all the rain, the river had risen quite a bit, and our first drop into the rapids felt like falling from 5 feet and slamming into a water wall. That woke us up, and those with contacts were surprised to still have them.
You don’t need to be certain size to enjoy rafting, you simply need a certain ferocity to risk life and limb to meet the rapids head on. We flipped twice, and I found myself underneath the raft both times which was a bit like raising to the surface of a lake only to find it frozen. Dark and scary. After swallowing both water and panic, I was to able to get out from under boat and then hug my knees while flying down the river to catch the rope that was thrown out to meet me.
I was impressed by all safety measures around the area. Along with wearing an helmet and life jacket, I felt secure that there were guides along the shore as well as ones in the water on solo kayaks ready to assist us.
Before setting out, we did have a brief training session which came in handy several times when getting dunked, and I remembered to flip over my back, and ride the current. Supposedly, the number one cause of death in white water is by standing up as you can easily get caught in debris (and other fallen rafters who decided to stand up) on the bottom and drown.
In many of the quieter moments on the river during our 4 hour descent we had the opportunity to introduces ourselves and discuss world affairs and other environment concerns like increases in hydro dams that could threaten the river.
At night, we were provided with a dinner beneath the covered patio which had live music and even dance music for a couple hours. The stage dance floor filled up quickly after getting primed with a massive game of flip cup.
The cost for the rafting was around $150 and well worth it! I highly recommend the adventure and am planning to go next year. You can pay an extra $30 for a 20 minute video recording of your adventure too. Here’s a sample:
I’m contemplating learning the kayak maybe work my up to one of this custom kayaks which does look like the ultimate experience. Or maybe I’ll stick to the 6 person rafts for a few years.
As someone keen on experience design, what could a trip like this teach me?
Well, we could have more moments of terror and provide guides that push with one hand and protect with the other.
Around the camp fire, we hardly mentioned the paddling – we even complained a bit about it – but we babbled on about the flipping and how we nearly died which was far from the truth! It was that element of danger that excited us. We realized that our guide probably put us in a better position to flip and we thank him [ much appreciated John! ;-D] for getting us into and safely out of the drink.
He always mixed up things like rocks edged with quartz that could tear boats and slice through flesh with the best ways to avoid them and stressed that you probably never see one. And, although we never did see these razor sharp rocks, the mere thought of them being potentially a few feet below helped keep our feet up even though in reality they may have been far too deep to bother us. No one stood up in the moving water.
gotcha! July 13, 2009
Posted by headwinds in Wired.add a comment
Or start from the beginning and watch Lain 1 Part 1 on YouTube.
Vote 4 Pete! April 1, 2009
Posted by headwinds in Random.add a comment
Peter Nitsch is up again for a FITC Best Canadian Developer award. He was runner up last year, and it would be awesome to see him take it home this year! His website has been an amazing portal for the developer community; showcasing his slick work at Teehan+Lax, his own intense experiments and those of his peers.
Please visit this FITC award site and vote for Pete!
Roll your own Social Media platform March 13, 2009
Posted by headwinds in ASP.NET, Blast Radius, Community, HIVE.1 comment so far
Many social media platforms like Twitter or Flickr were built to attract people to share their content in an ad-free space, and people knew that their content wouldn’t be used to market anything. This makes it difficult — but not impossible — for Marketers to harness this media to sell products. We were careful and respectful of this nature when seeking out partners with the goal to leverage their platforms, however, in the end due to some of these conflicting non-commercial virtues, we decided to fly solo and create our own app that basically tweaks the Twitter idea of sharing brief messages and mashes it up with complimentary photography.
In this app, we attempt to pull each photograph based on what the person is saying to give an element of surprise. Without using keywords, it was challenging to create an algorithm to would weigh each word in the string and attempt to find the best possible match. Our .NET developer, Mustufa Baig did a great job in preparing all the data which I tapped into to feed this AS3 experience that stands on the hive framework.
By creating our own platforms, we had no restrictions around what we could do with the content and, by being upfront about where one could send their “moment”, we were able to distribute them widely to the Mobiel Momentjes (Mobile Moments) campaign site, to Hyves (the Dutch version of Facebook), to msn as an extra tab on messanger; and even to mobile devices thanks to our Marvelous partner.
Now that we have this infrastructure setup, it would be neat to open up this project and create an API for visual developers to play with the media. I was at the end of this project train and didn’t have much say in the design, but I can see a lot of potential in dealing with the raw data. For instance, the photography is scaled down is screaming for various full-screen views. I also think a different take on the ticker interaction could benefit from being to click on each moment to open them up instead of rolling around, similar to Flickr clock. Expanding the UI could include buttons to toggle the auto mode or refresh the app, but this is more for a power user and may distract from the simplicity of of the campaign goal to encourage people fairly new to texting to start sharing. Beyond that, this project was really the brain child of Omar Zuberi, our creative director for the Amsterdam office, I think his vision drove this project in some cool directions and it could take off here in Canada.
