How to best turn outlines into menus on a Web, mobile, and/or desktop app?

April 21, 2010 10:51 AM

Can you advise me on creating my research tool? Do you know a way to turn outilnes into interactive menus on the Web? How about on a mobile device ? Is there an app that is for iPhone apps what Dreamweaver is for Web sites?

My extended question: I was wondering if someone could advise me on a tool I'm building for myself (which I will eventually develop for others to enjoy and perhaps purchase). I'm obviously not much of a coder.

What I want to create on a mobile device (or at least on the Web) is pretty basic, comprised of menus and sub menus of data.

For starters, it'll just be a reference tool. Later, I'll add some more advanced functionality.
The rapid scrolling and clicking through menus that's possible on these mobile devices (iPhone, iPad, Android) would make them great platforms for my tool. I just need a way to build and update it easily. That's the kicker.

__________

Plan A:
First, I've created outlines in OmniOutliner and exported them as HTML unordered lists. Second, I've been learning basic CSS coding because it seems like the best way to turn those exported outlines into interactive hover/flyout menus on a web page (you don't even need Javascript), which could in turn provide me with a good template for an iPhone/iPad app. However, the CSS code gets overly complicated and is not easily updated.

Plan A.2: Another way to go (beyond flyout menus) is to just mimic an iPhone menu on the web (with CSS and Java). I might end up using this guy's code as a starting place: http://joehewitt.com/files/iphone/navigation.html#_albums
Here's a a similar USC site built for mobile: http://mobile.usc.edu/
The problem with that approach is that each list in the menu/outline requires a new HTML page. Ugh.

Also, I want to make something that can be cached on the device, not requiring internet. I wonder if that can be implemented or if no internet makes all these "built for mobile" web sites moot. I mean, if I can save a Web archive to my desktop, I imagine it can be done on the iPhone (and in reverse).
In other words, I'd rather have an app installed on the iPhone, that runs natively. Not a web-hosted app.
___________

So, plan B: I'm looking for alternates for turnings outlines into menus. The next thing would be to look at Mac's Interface Builder to create an Mac app that is simply a bunch of menus (and later make it something more). But I don't know if that'll be any easier or quickly updatable. Any experience with that? I gotta find some forums...

Of course, I'd rather have this be cross platform.

________

Plan C:
For *real* iPhone code, I'm hoping to hunt down a program that is to iPhone/iPad apps what Dreamweaver is to Web page creation. Something like StencilsApp that generates real code. There are a lot of red herrings out there and folks that want hosting and development fees. But, I'm sure more and more solutions for non-coders are going to emerge. Know any besides SwebApps?

What other approaches would you suggest?

Thanks for any advice!

posted by jimmymcvee to computers & internet (8 answers total)

This
iPhone app article is from November. I wonder who the winner is so far.
posted by jimmymcvee at 11:09 AM on April 21, 2010

Howdy,
I would like to suggest you back up a bit and explain the problem a little more before jumping right to the solution. I have found that giant menus are no good for anyone and can almost always be handled another way.

You say you've got big unordered lists and then you want to turn them into menus? Why do they need to be menus? What are you attempting to do?

I don't do any development for the iPhone or mobile environments at all really, but I use the hell out of lists and menus so I might be able to suggest something if I understand the problem a little better.
posted by BeReasonable at 1:36 PM on April 21, 2010

My master's project involves writing mobile GIS apps for the iPhone and similar devices, so I've been pretty heavy into Objective-C and the iPhone SDK for the past year. I don't do anything with web pages as of yet, but I've worked a lot on sending and receiving data over the network, so I have some familiarity with this.

Creating an app that just contains a UIWebView object that presents a web page is super easy. Doing the same for Android and other devices to make it cross-platform will also be super easy. Anyone with iPhone SDK familiarity can set that app up for you in an hour or two, allowing you to work on the webpage and not have to worry much about the app.

As far as caching the page for offline use goes, I haven't done that, but after taking a look at a few class references, I'm entirely certain that you can save the contents of a UIWebView to the phone/iPod and reload them into a webview when the app loads. Although it will take a little more time and code, it is entirely doable for someone to write you an app that will check for a cached site on the device, and load the site from the web if it isn't found locally or the user wants to check for updated content.

A third, more coding intensive solution is to get all of the data for the menus from a webpage (probably just a simple XML table) and use that data to programmatically create a hierarchy of tables and information views within the app. This will probably provide the quickest, most navigable interface for the user. This is a step above the other two in terms of coding, but would allow you to maintain all of your menu data in a simple table. Once the app is set up, you won't have to worry about writing anything in Objective-C unless you want to change your basic table layout scheme.

Maybe fish around in your local CS department for any takers. I'm sure someone could turn this into a class project or assignment. If it can wait, I might be interested around mid June when my current term is over and I have some spare time. I'm always looking for a chance to expand my fledgling coding skills and I could do what you are asking for.
posted by Derive the Hamiltonian of... at 1:51 PM on April 21, 2010

Ok, thanks. Yeah, I was just in dialogue with folks on a the metafilter mainpage post and Jquery mega dropdowns were mentioned. I'm kind of with you, backing off the giant menus (in terms of CSS). I'm considering good ol' pulldown menus too now.

To answer your question, right now I want to create a reference tool/database that's easy and fast to scroll through. And at this point I don't care what platform it's on, though I do like how with a flick of a thumb I can quickly scroll through a menu list on the iPhone

Eventually, in version 2, this is going to be more than just a menu, involving some real (though basic) programming.
To further explain, I was in dialogue today with the CEO of SWebApps and here's what I wrote:
n the immediate future, I wanted to get my feet wet by creating a very simple reference tool. It's mainly just a bunch of menus, sub menus, sub sub menus, etc. The final sub-levels might arrive at a full page of content.

Here's an example: http://upstruct.com/m

The big concern is: how easily can it be updated? Right now I'm building these menus in OmniOutliner.
________________

In a later, more complicated version, I'd like to add some basic programming: the ability for a user to *select* a menu item and have that selection inserted into a phrase, with all phrases being compiled on one screen that the user could access at any time.

As a simple example, say the app helped you choose a pet.

And say the top level menu items were DOG / CAT / BIRD
If I clicked on BIRD, then a program would create the following phrase on the compiler/master screen: " You bought a BIRD!"

Plus, I'd get to the next menu screen under Bird. My choices would then be: EAGLE / PARROT / WOODPECKER

If I clicked on PARROT, the program would then add another phrase to the master screen: "You bought a BIRD! The bird is a PARROT".

I'm not a coder, but I wonder if creating such a "simple" program might be a good Programming 101 project for me. Or, maybe there's an app out there that could help me with that process.
____________

Now if I did this kind of thing on the Web, instead of with a mobile app, maybe pulldown menus and radial selections would be better than flyout menus. I don't know .

Am I making any sense yet?
posted by jimmymcvee at 1:56 PM on April 21, 2010

Derive, thanks for your info as well. Your third options sounds especially intriguing though the last statement - "...you won't have to worry about writing anything in Objective-C unless you want to change your basic table layout scheme" - concerns me.
I'm hoping it's a set-up that will allow me to add list items in the menu if needed and perhaps create new menu categories if needed. That shouldn't be too hard to change right?

Anyway, I might be interested in your assistance! Mid June would give me time to nail down the content on this. How good might you be in creating the code for an "ad-libs" style program, as I described in the previous comment?
posted by jimmymcvee at 2:06 PM on April 21, 2010

jimmy: Yes, the third option I described would let you add items to any level of your menu hierarchy, and potentially create as deep a hierarchy as you want (although incredibly complex and deep hierarchies are generally not so great for users, right?). However, the form/table used to generate the app content must still be organized by some basic rules. Programmatically creating content by simply descending or ascending a hierarchy of choices requires a very simple table/form. Developing an app where some elements load based on the user descending or ascending a hierarchy but other elements have linkage unrelated to the hierarchy requires a more complex table/form.

The program you describe using the pet example is not difficult to create. It simple requires templates that are populated with values based on the user's answer to previous questions.

Like I said, I might be able to help come June, but that is really up in the air. Since you don't seem enthusiastic about learning to code, you should really look into local resources, like the CS department, that you can tap into. Maybe you can mefi-mail me the basics of what you actually want to do, and if you haven't found someone local by June we can touch bases and I'll let you know if I'm able to help.
posted by Derive the Hamiltonian of... at 2:32 PM on April 21, 2010

Sounds good, Derive. By the way, if I did want to try some coding (re: the pet example) what language would I use? Thx.
posted by jimmymcvee at 8:41 PM on April 21, 2010

Objective-C I assume.
posted by jimmymcvee at 8:43 PM on April 21, 2010