iOS Need help making a simple text heavy app

[sdimas]

Hi I want to make a simple app for my Youth Group so that we could have all of our songs that we have in our binders on our phones as well (usually not enough folders to go around) plus this will be much more convenient for times when we don't have our music binders with us.

I have taken an HTML/CSS and a Visual Basics class in high school and was the best in both of the classes.

In those classes I learned mostly by looking at examples of code and was able to learn what each tag or code does, and occasionally refer to the text if I was confused.

I would prefer to make this app first for android and then maybe make one for iPhones as most people in my youth group have androids.
Is there and app similar to dreamweaver and microsoft visual basics that creates most of the code for you, and you go back and modify it to your needs?

For now I would just like to make a quick app and later go back and learn the proper language and make modifications to this app.

What are your suggestions?
What language would be most beneficial?

 

[chown33]

This sounds more like a website than an app. For example, consider websites that provide the lyrics for popular songs. Each song is basically just a page of lyrics, with some formatting (CSS, images, etc.).

So I think you should start by making a website with HTML+CSS. Distribute the URL to your youths, and have them bookmark it, or save it as a web-app (iOS can do this; Android I don't know). If they have internet access, all they need to do is touch the web-app icon or bookmark, and boom they're at the starting page.

There are some things you can do on the web-server side to enhance the experience under Safari (there are probably similar things to optimize for Android browser or Chrome). You will probably need some control over your server to provide some features (such as client-side data storage), but a lot of things are easy to do just by putting a few tags or meta tags in the HTML page. See here:
https://developer.apple.com/library...farioniPhone/OptimizingforSafarioniPhone.html

The "Configuring Web Applications" section has a list of stuff you can put in HTML. Other sections cover CSS (and conditional CSS), and other HTML capabilities. I used a lot of these in a web-app I deployed a few years ago. The web-server was an embedded microcontroller, so I couldn't use every optimization (e.g. I couldn't serve a manifest file with the necessary type, see "Storing Data on the Client"), but a lot of them worked.

 

[sdimas]

I haven't considered the Web site idea. That is something I actually know how to do. I could easily put that together and make it look pretty and not too big. Oh and I forgot I could optimize the site for mobile devices as well.

I guess the best representation of what I'm trying to make is kind of like the mobile Bible app, where you can scroll through and select what song you will need in this case. What is the best way to go along doing this?

 

[chown33]

I guess the best representation of what I'm trying to make is kind of like the mobile Bible app, where you can scroll through and select what song you will need in this case. What is the best way to go along doing this?

I know nothing about a mobile Bible app. Either describe how it's used in more detail, or provide a link to a web-page that shows what you want.

It sounds like you have a list of songs. They might fall into categories. So make top-level categories with a name, and list the songs under each category. The name of the song is then a link to that song. Example using only the markup available in this forum, so real HTML could use any tags at all, not just this simple stuff:

Traditional Spirituals
Bringing in the sheaves
Shall we gather at the river
Nobody knows the trouble I've seen

Campfire Songs
Kumbaya
John Jacob Jingleheimer Schmidt
Bingo was his name
​

Real HTML would use tags like H1, H2, H3 etc. for the category headings. and you'd probably apply a style to the links.


The first thing you need to think about is how you want to arrange the main list, which will depend on how many songs and categories you have. Play around, write some HTML, and put it on a web-server you have control of, or just store it as an HTML file and open it in a browser on your computer.

Once you have the basic list structure down, then decide what one page of lyrics will look like. Again, write some HTML files, using real lyrics from real songs you'll use. Set up the links in your main list, and see how it looks. Play around with the CSS styling. Try it on different mobile devices.

After the basic look is done, put the rest of the lyrics into HTML, and add links. Beta-test with some of your youths, make revisions, then deploy.


If you have lots of categories, with lots of songs in each category, then make each category its own page, with the songs as links on that page. Then the main page is a list of category names, where each name is a link to that category's page.

This is all pretty elementary data structuring for design. Think about how you want to use it, and design for that use. Then make an example, try it, and see if it succeeds in that use. You learn a lot just by thinking about use and then trying it.

 

[sdimas]

Okay think of it more like a forum then. You can scroll through all the categories, then the threads (songs) and when you click on that you get the lyrics.

And we just have our songs numbered but not necessarily grouped by category. So I guess I could make several different lists (by number, category, favorites). Thank you for the suggestions.

I was considering an app because of the offline access. But I could also just make the files available for download and people would be able to access them on their phones locally.

----------

And we have about 90 or so songs

----------

Also they have guitar chords so how do you suggest I implement those? Make a separate page? Or integrate them into the stanzas?

 

[chown33]

Also they have guitar chords so how do you suggest I implement those? Make a separate page? Or integrate them into the stanzas?

Think about who uses each part (lyrics and chords). If everyone uses both, then it makes sense to integrate them. If most people don't use chords, then it probably doesn't make sense to always show them. If they don't always appear, think about ways to show them.

A lot of design is what I posted before: think about who uses what, think about how to present the most useful info for each target audience, then try things. This is how you learn about design: how is it used, by whom; write it down, try it out, see how it works; repeat.