A Mashup That Makes Sense

Recently Andy Powell won a WII for his submission into the 360 Flex | API Contest.

His winning application is a great example of leveraging multiple APIs that at first glance, one may be challenged in connecting the dots with regard to how they could be integrated into a single intuitive application. When I first looked at Andy's initial layout and functionality as intuitive as it was, I got stoked because I could see that this application could be enhanced visually and functionally; so I am blogging about the enhancements I made to that effect.

First, I had some .css in mind to give it that Ribbit Green theme. I adjusted the layout of the various nested canvases and converted them to use a form which allows for formitem conciseness with regard to alignment etc and allots for a default button (integrated form 'enter key' functionality).

I sized down the respective API images into the main panels control bar (will be applying links shortly) and enhanced the map functionality which allows for a unique icon (hotel) to identify the selected hotel from other hotel POIs on the map. Each time a search is performed the past icon is returned to its initial state and the newly selected hotel gets the new icon (member variables used to allow for this). I will be styling the MapQuest info windows that pop up with selection of a POI shortly as the very customizable MapQuest API is 100% extensible.

I then relocated the RIBBIT dial up interface and adjusted dialing status to persist in the connection labeling area rather than separately at the bottom of the form to save real estate. Lastly, I wrapped it in a panel with the hotel details form and nested it within a panel along with the MapQuest tilemap component. This panel will soon be a slide in that will open/close via grid selection and panel close feature. Please check out the new app on Andy's site here; Ribbit, Kayak, MapQuest Mashup and book your hotel today 8-).

FYI, souce code is located at Andy's Google code site here: AP's GCode site

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Great job! I really like what you've done. Nice layout, .css, and iconography.

One piece that would be a big add is a keypad - some hotels hit you with an IVR...and a keypad would sure be helpful! You might find a suitable keypad component sample code solution here: http://developer.ribbit.com/download/rcs/

Keep it up!
Crick Waters
SVP Strategy/Business Development
# Posted By Crick Waters | 4/16/08 11:49 PM
I'll check it out Crick, thanks for the kind words!
# Posted By Strikefish | 4/17/08 8:06 AM
Nice work, Jeff. BTW - the text bug you mentioned was fixed and will be out in the next RC. Thx!
# Posted By Darin | 4/24/08 5:31 AM
Thanks Darin, keep me in the loop!
# Posted By Strikefish | 4/24/08 10:55 AM
yeah, great blog.

but i tried out what u said about downsizing the APIs on one of my own projects, and this doesnt always guarantee extensibility, so i'd take your 100% down to a possible 63%, if that!
# Posted By jane carter | 5/6/08 8:50 AM
@Jane, hoping you're not a bot... If you are, you are a smart one.

Regardless, I think you misunderstood my statement. I didn't downsize the API, just the images in the control bar (bottom right of the UI).

With regard to your extensibility comment, the MapQuest API is. Having worked on the dev and test teams I know for a fact that the API is greater than 63% extensible ;-).
# Posted By Strikefish | 5/7/08 7:43 AM

Copyright Strikefish, Inc., 2005. All rights reserved.