Chapter 4: Intermediate Dashcode development: video tour iPhone application – iPhone Application Development

4

Intermediate Dashcode development: video tour iPhone application

This chapter describes how to make web-based applications working from the Browser template within Dashcode. The workflow described here is significant in terms of the totality of what you can do for your library’s mobile web presence with a Browser Template. You can build your library mobile presence to the iPhone with the tools introduced in this chapter.

The best iPhone apps are task specific, and they deliver information in a way that does not require the user to have to do much typing or learn how to use the device and app. Hence, I will work from a specific user task that stems from, and is informed by, a practical or practice-oriented perspective of the academic librarian. This chapter’s example iPhone app answers a specific need for both librarians and for users of this type of library.

One of the biggest challenges facing an orientation services librarian, and perhaps any sort of public services librarian, is the development of service which is scalable to a large variety of users. During most summers I have to provide a library introduction to many new students. This introduction needs to cover the services of the library, but also specific collections, and available technology resources too.

Figure 4.1 Choose the Browser icon for the template used in this chapter. Be sure to select only the ‘develop for mobile safari checkbox’

The app I will work to create here to help make this orientation task more manageable is to design a service whereby users have the ability to take a video tour of the library on their iPhone.

User narrative: how a library user will use the Video Tour app

Here I want to take the perspective of a new university student. There exist an array of new campus services to learn, including those offered in the university library. This new student does not have a framework for academic research or for that matter what academic library services may do to further their education – the new student, for reasons explored herein, is not going to approach a service desk and ask: ‘What can you do for me?’ The new student actually needs to attend classes for a week or two and see the types of challenges that he or she faces before library orientation is going have any meaning. Specifically, they will come to the idea of going to the library as research assignments come up. Consider also that the new student was just a few months ago a high school student – they are in equal parts enthusiastic, excited and scared. As with most life transitions new students are worried about the prospect of new environments, like the library, the campus and new social groups.

There are library support staff in place who are available to help new students make the transition to university study. A variety of outreach methods are employed: activity booths, speaking with parents, and various welcome week tables. However, even with all of these activities, not every student will be reached by orientation librarianship. The new student may also have new computing challenges to tackle, and many promotional offers abound. Apple offers an educators discount,1 which sometimes includes hardware like the iPod touch thrown in for free (with the purchase of a new Mac computer). By way of their new iPod, students will be able to access a new kind of Orientation App. The app I’m going to describe is available on the iTunes App Store: http://itunes.com/apps/ugl4eva. The app provides video content about the library services and collections and study spaces. This is a way to scale library orientation for new students. By scale I mean that thousands of new students can take the tour and understand basic library information services before they have to step into the library.

This is prefereable for new undergraduate students as they prefer content that they can independently choose for their learning modules – the video is also suited in that it is short and it features students explaining the services, rather than solely librarians explaining library services.

Design theory: further description of a datasource

I will now begin to incorporate data sources from files. This is accomplished by way of configuring already existing lists of data from a JavaScript file. Technically, the JavaScript file is marked up using something based on JavaScript, the JavaScript Object Notation (JSON). In a sense the JSON format is just a component of JavaScript. So, don’t be afraid that you will have to learn a programming or scripting language. HTML is a familiar markup, and JSON is very similar. What we, as designers of this video tour app, are concerned with is describing a list of data for the app to use. By describing the data we actually make the app more dynamic and interactive, which will lead to an app that students will actually engage with in an authentic learning experience.

It doesn’t really matter whether you have heard of the JSON format. The important thing to keep in mind is that there are rules to structured data. This is not particularly complicated because the file we will use (sampleData.js) is already generated by Dashcode, produced in correct structure that Dashcode will use. JSON has a structure to its data that must be kept in that structure in order for machines (the iPhone, or the Mobile Safari Browser) to read, or alternatively process the data source and present it to users. We can modify the data provided and even add additional groupings (new elements) to the JSON data file; but we cannot change the rules around which the data can be structured. If we structure the data incorrectly, we’re simply going to be told by Dashcode that the file is not a valid JSON or XML file. Programming can be frustrating with regard to data structures, as the attention to detail can be time consuming and tedious. Unless you are detail oriented and the structure of data comes naturally to you, programming can be a headache.

Regarding the Browser template of Dashcode (the template we are working from) we will now start using one of the objects provided from the Library button (located above the canvas screen on the right-hand side of the design window). We’re going to be using video content in this section. This will require using the QuickTime element. Because the browser app supports the QuickTime element, you can integrate your videos into this iPhone application without too much hassle. From a design standpoint, you do not want to spend time thinking about the best way to imbed video into your mobile browser – it’s best to make use of components that Apple supports rather than trying to find work-arounds to using Apple products. The iPhone apps I’ve been developing in this book have got through the App Store submission process because I have started with Apple templates and utilized formats from Apple whenever possible. If you would like your iPhone apps to be placed on the App Store you want to do everything possible now to ensure that you will make it through the submission process.

Best practice in multimedia components for iPhone application design includes incorporating elements of video and audio that will make the tour more engaging and interesting to the people viewing the application. Soon your users will be expecting more and more library information on their iPhone – this is covered in later chapters. The videos you might use for this chapter can be output from the Mac’s iMovie software program.

Actually, the videos that I created for this application came from utilizing low-cost video cameras and then formatted for the iPhone screen using iMovie. Formatting the video for the iPhone means you are outputting the video in a display size for the smaller screen of the iPhone.

Customize the layout in canvas view

Taking a look at the interface in canvas view, notice that in Figure 4.2 is an Items list. On the opposite column is a navigation arrow; this arrow indicates to the user that clicking on an item of the list bar will ‘drill down’ to a more specific component of the app. The list of ‘items’ will be drawn from the JSON data source. To edit the source we are going to go into the component files of this app (if you want to delve into the component files right now, simply go to the bottom of the project window – the lower navigator bar – and click on the icon that looks like a list with bullet points; this is the file view).

Figure 4.2 This is the canvas view of the Browser template. It is the basic layout of many mobile websites

Figure 4.3 This is the browser window the app scrolls to after the ‘Item’ bar is tapped. Note that there are two layers of the browser app

The next step involves brainstorming: now is the time for you to do some creative thinking about what types of drilling down into content you might want to provide your library users with. For the app that I am designing here, I will let each ‘ITEM’ bar represent a particular service of the library. ‘Drilling down’ is simply the navigation of a traditional webpage with hyperlinks, where clicking on a link brings you to other more specific component parts of the website, but clearly it leaves out all but the most essential of website attributes. When designing for a mobile browser, we need to omit a main graphic or something of that sort and leave a lot of screen space to work with; the app is clearly the basic pared down elements of a website. The browser template that we are working from gives us a powerful way to organize lists of things that describe the library in hyperlinked form. This is simply what we are doing here: making lists in hyperlinked form on a web-based browser. The content will be in our Javascript file, which is part of the step-by-step workflow process.

For example, I suggest here some ideas for the items. Let each item bar represent either:

1. Library Sections – these can be ranges of shelves like call numbers, or perhaps the different floors of your library.

2. Library services (the example app being designed here) – the functions of Reference, Circulation, ILL, Computer Labs or Equipment.

3. Library directions, where each ‘Item’ bar takes you up to a certain landmark in your building.

For the second level, i.e. what the arrow links off to (referred to in the upper level Navigator2 as the detailLevel), you can incorporate additional information (unique videos for each linked-to page) into our sample data source.

Once your users are at this second level of content, you are going to be able to provide them with video. Similar to the server source of the RSS feed app that we made earlier, the video content that you provide here will have to originate from the server that hosts the app itself.

Now is the time to make any additional cosmetic customizations to the app, in terms of appearance of the interface. Also, decide on a name for your application and put that in the canvas screen title. In the upper level of the navigator window you can also modify the webpage title, which will be displayed in the top bar of the webpage when it is run through the Safari window. One portion that will not be required for the functionality of the app is the description line in that top box; I will delete this element now.

Dashcode workflow step 1: layout interface

Configuring the interface involves deciding what types of elements we need for the app’s functionality. The layout interface step requires us to take the video element from the Library and then drag that element onto the canvas view. There is a parts library in the upper right corner of the Dashcode screen; this is the button with three books and ‘Library’ written beneath. Clicking on this icon will load a menu of objects you can use in your projects. This is where we’re going to get the video object and drop that into our project.3 You will notice that there are two more tabs: one for JavaScript code and for photos. We can drop photos from the iPhoto program into our application if we choose to. The re-usable JavaScript code may not make much sense right now. If you’re like me, you might know just enough about programming to know you don’t want to know anything about coding. Re-using JavaScript code is discussed later in the book. The good news about this menu is that there is already much that has been done for us that we can re-use – and with regard to JavaScript generally, you will be able to find many existing scripts on the Web so that really the only thing you have to know about JavaScript is that it does some of the more performance-based functions on your webpage (like the clicking of a button) or perhaps different interactive components of the app.

So, if you haven’t done so already, go ahead and take that video button and pull it into the canvas. The video button is the one with the QuickTime symbol. Make sure that in the canvas, we are looking at the detailLevel. (The main page doesn’t have any space for a video box, as you’ll see.) Once you have pulled the video icon button into the canvas view it will look like Figure 4.4. Basically, you’ve now got a video player in your app.

Figure 4.4 This is what your canvas view will look like after you have dropped the QuickTime video element onto the second level of the browser

Regarding file formats, the iPhone will only accept certain ones to play.4 In order to make the videos available to the app, I have uploaded to my server a video which is formatted for the iPhone, the .m4v file format. If you have video tutorials that you have already made for your library (if they are in a usable format) those can be used here as well. You can use any Mac computer’s iMovie program to export to QuickTime the specific file format you want, and also you can specify the usage. So, even if you have large video files in, for example, a .mov format, with a little formatting you can get these into a condition which will be acceptable for the iPhone and will work for your web-based application.

For this example, the browser template is set up such that the video is now going to appear on all of the detailLevel pages. You can certainly continue to drop additional Library elements into this page and have multiple elements on a page if you choose. You may not want to use too many element buttons in one application. Use the parts as needed. I am using ‘as needed’ here to indicate that the elements are chosen by you in the design of what you want the user to be able to accomplish as a result of using this application – the web-based application you design and deliver to your users is essentially a tool that they can use to accomplish a specific purpose. Revisit your user narrative and ask yourself if this element is contributing to that narrative in an effective way. Building an iPhone application differs from designing the traditional web page, which you might be building for a variety of uses. Although we are using web-based tools and techniques, it’s best not to think of this as too much like the traditional desktop-accessed web page. The web-based app tour guide we have created here will accomplish the specific objective of letting your users discover orientation information about your library on their own, and with their own iPod touch or iPhone device.

Dashcode workflow step 2: customize data by editing the data source

Next we want to fill in the gaps – to connect the dots between the user narrative, the parts you’ve pulled onto the application interface to enable the narrative and the actions behind those parts. Some of the dots to connect include specifying how the app knows where the videos are for each portion of the tour, and how the user knows which part of the app corresponds to what part of your library? For this information we need to access the SampleData.js file to specify either where the data exist or what the portions of the library tour are.

Let us start by locating the component files of the app from the lower portion of the left-hand side of the screen, the lowest part of the Navigator. The sampleData.js is where that string of ‘items’ you see in the canvas originates. We are going to edit these by clicking on the sampleData.js file. Note that the elements of the JSON file already provided include a ‘title’ of National Parks, followed by a set of ‘Items’ that include ‘name’ and ‘location’. Let us proceed by renaming the title. I’m going to create a Video app that is a library tour. So I name the title, ‘Library Tour’. And then each of the locations below this are going to be parts of the library that I want the users to know more about. I name the sections of the library as the component parts of the tour. For the location element, I fill in a short description of the tour location.

Before we continue with editing the JSON file I need to stress the importance of being detailed oriented – with a word about data structures in general and then JSON and XML specifically; but let me preface all of this by saying that although this is not programming in any sense of the word, this is the part of the book that challenges you to think about efficiency in mobile design and delivery. What we’re looking at here is a JSON data structure. When editing data structures, you need to be extremely attentive to detail, excruciatingly so. If you’ve ever edited an external CSS sheet or perhaps marked up an HTML file, then you know that each of these file types has certain permissible ways you can structure the information; these are sometimes known as formation rules. You might also think of the rules governing sentence structure. Importantly for JSON is the placement of punctuation.

The relational model is relevant here. We are essentially creating associations among the list of ‘Items’ and a video associated with that item. By creating this association, this JS file (or the data structure) could be used beyond iPhone development. This modelled relation could be ported to other systems like databases or other delivery mediums. This is a strategy for creating efficiencies for library systems when working with any kind of new service or technology.

The Dashcode program identifies how you can use the structure in your app. Dashcode identifies the component parts of the data source and also creates the framework for how that source can be used. If you click on the icon in the Navigator that looks like a bulls-eye, the Data Sources button, it will show you a list of all the identified data sources you can use. Specifically, we are interested in the List data source. Click on that to reveal the detail. Hovering over the Name in the first list, and then to the right of that, the ‘multiple’ button, you will reveal the object that these data parts have already been linked to.

Moving on from data structures, you’re probably wondering about how to configure the video element from the JSON data source. In order to add data describing the video we will need a new element to this data source. I am going to add the source location of the videos to the set of data. We have a string that looks like this:

{ name: ‘Reference Collection’, location: ‘upper level, undergraduate library’, }

Note: This is an example of a relational model.

We will add the data for the video file to this set

{ name: ‘Reference Collection’, location: cupper level, undergraduate library’, src: ‘http://sif.grainger.uiuc.edutour/htdocs/test.m4v, }

Again, every term between the brackets is a relation.

Other portions of the data set that I want to add include, for the purposes of the video element, a poster file which is basically a static shot of the movie. This is a graphic element that indicates to the users of the app that if they push play, the video will contain information about that graphic element. If you don’t put a poster file in the QuickTime video element, then the movie page will be black – this will confuse users, so you want to specify the contents of the movie with a static image.

This is the entirety of what my final JSON file looks like:

{

title: ‘Undergraduate Library’,

items: [

{ name: ‘Intro to UGL’, location: ‘Welcome to the Undergrad Library. The books are downstairs. If you need help completing your research paper, visit the Research Desk, we’re happy to help. (Hit it!)’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/introduction.rn 4v’, poster: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/intro.jpg’},

{ name: ‘Computers for you’, location: ‘Computer Lab on upper level, in the back. More computers on the Lower Level.’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/ computers.m4v, poster: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/computers2.jpg’},

{ name: ‘Group Study space’, location: ‘Located on the upper level of the Undergrad Library’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/groupstudym4v’, poster: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/groupstudy.jpg’},

{ name: ‘Technology checkout’, location: ‘Located at the Circulation Desk on the Upper Level’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/techforcheckout.m4v

poster:http://sif.grainger.uiuc.edu/uglfaq/htdocs/tech.jpg},

{ name: ‘DVDs for checkout’, location: ‘The collection is on the lower level. Take DVDs to the Circulation Desk to checkout.’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/ mediacollection.m4v’, poster: ‘http://sif.grainger.uiucedu/uglfaq/htdocs/dvds.jpg.’},

{ name: ‘Print your paper’, location: ‘The printers are located across from Circulation Desk on the upper level.’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/printing.’, poster: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/printers.jpg’},

{ name: ‘Media Viewing Booths’, location: ‘Located on the lower level. Go past the Media Collection, just behind all the history books.’, src: ‘http://sif.grainger.uiuc.edu/uglfaq/htdocs/viewingbooths.m4v ’, poster: ‘http://sifgrainger.uiuc.edu/uglfaq/htdocs/viewingbooths.jpg

]

}

Bindings of the data source

The next portion of data source functionality you need to configure is to link the data source to app components. In the Customize Data workflow step bar, there is an arrow ‘Data Sources’ that you need to select. What you have accomplished in the previous step is to build a data model for the app. This data model is presented graphically in the data sources screen. The data model will appear as in Figure 4.5.

Figure 4.5 The lower portion of the Dashcode window shows the graphical representation of my data model from the previous section

You will need to create bindings from the graphic representation of your model. There is a generic ‘creating bindings’ topic in the Dashcode documentation. The instructions below are more specific to creating a video tour app.

From the Data Source have the canvas view ListLevel option open. Take the ‘name’ element of the data array and link this to your list of ‘Items’ as shown in Figure 4.6. Linking a data element to a canvas part is simple. Just hover next to the element you want to link and a open circle will appear. If you click the open circle, you will then be able to drag a segment onto the canvas. When you have the segment over the portion of the app you want to link the element to, simply release the segment. You have now created a binding. This will link all of the Name elements to one of the listed ‘items’. Run the simulator to ensure the binding is working.

Figure 4.6 By linking the relational source to your canvas you are creating a binding between the list of ‘Items’ and the data

Figure 4.6 shows an example of a data element segment being linked to a location on the canvas.

After you have made this link you will then have a ‘ListData’ data model you can use to link in the detaiLevel portion of your page. From the detailLevel portion of your browser (the page with the video element) link the elements of the JSON data array with the canvas elements here in the same way as you did above. You simply hover next to the element you want to link, and then drag the segment onto the portion of the canvas to link.

Figure 4.7 The portion of your JSON array that is named ‘src’ is the one that gets linked to the QuickTime video element

After you have created the bindings on the detailLevel view, you will want to run this in the simulator to be certain that everything is linked properly. You will see that the data source is linking properly if the name and location are showing in the top box; in the lower box of the detailLevel view (if the files are on your server) the image for the poster and the Quick Time element should be active so that if you tap to play, the video begins to stream. You will notice that larger video files will take longer to load, so try to use short videos that do not take too long to stream. Figure 4.8 shows an example of the detailLevel view with proper data binding from within the iPhone simulator.

Figure 4.8 You can double check the functionality of any app from the simulator. This is especially useful after linking a data source

Dashcode workflow step 3: add handlers and code

We haven’t really progressed to the point where we would be required to customize our own JavaScript code for the application. The JavaScript parts, should we choose to use them, are actually one tab over from the parts library. The template includes the JavaScript we need. What is meant by the ‘handlers’ is simply what happens when a button is pushed on your app. The handler points to the portion of JavaScript that should be executed when a specified action occurs on the browser. There are differing types of actions which the handler could be set to respond to: the desktop paradigm uses the click when an object is selected; on the iPhone, with the multi-touch screen, it is the tap which usually triggers an action.

Each of these possible actions can trigger a script. Those functions that are available to use are in the code library.

You don’t have to know what the JavaScript command lines are, necessarily, but what is important to know is that these need to be paired together – the handler points to the function and the function will perform the intended action. Connecting these parts will be discussed in the next chapter, but it important to know that these things are located here and that in the templates we are working from this is what is happening behind the scenes.

Dashcode workflow step 4: design web clip icon

You should now be familiar with this workflow step. As you will recall from earlier sections, the Web Clip Icon is the portion of the app that is bookmarked to the iPhone home screen when the user bookmarks your app. You want to be certain that the image is uploaded with your other files when you make your app available as a web-based app. The guidelines for designing a web clip icon are packaged in the Dashcode documentation, which is easily accessible from the help menu.

Dashcode workflow step 5: test and share

Testing and sharing should also be a familiar Dashcode workflow step. This is the step of the Dashcode design process where you will save the generated web files to your Mac drive and then upload those generated files to your web server. Your app is now available to users who access the page from their mobile Safari browser. Should you want to make this app available on the iTunes App Store, the next step is to use the Xcode module of the iPhone SDK as well as the PhoneGap framework. This workflow is covered in Chapter 7 and 8.

Iteration based on use: questions to ask users about this app

Let’s assume the user is looking at the video tour app. What does he or she see: the title of the app. Does the title make sense? While we were designing – the title may have simply been the first words that occurred to us. If we decide to tweak the title of the app we’ll want to follow up and check to see if the new title makes sense to other users. This is the circle of iteration. We make a change and then we want to test it on real users to decide if the change makes sense – do enough people respond positively to what we’ve done?

Significantly, does the app perform the function in the hands of the user? The user should be able to do the thing you specified initially. If that fails, then the app functionality is broken. You may have specific benchmarks in mind for how well the user is able to make use of the intended functionality. These are the finer points (perhaps more time intensive for you) of application design, as you’ll want to go back and make incremental fixes to these specific hiccups in the software. By watching people use the video tour app I’ve noticed a few general attributes.

The longer the video, the more time it would take to stream. From the iPhone simulator running on my Mac Book Pro, the video streaming was not accurately reflecting how it would appear to users. Also, having tested the video on both an iPod touch running on my campus WiFi network, and then testing it on the iPhone 3G network, I noticed that the iPhone 3G network was achieving faster loading speeds. These are things that cannot be modeled using the iPhone simulator.

You will want to ask about the content of the text that you are using. Did the user read it at all? If the user does not make use of text in your app do you have a clear sense of why? Was the chosen font difficult to read on a small screen? Did the color take away from what you were trying to communicate? The text may not be necessary. Look at how you can pare the app down to the essentials. You may think you need text where it is not needed. Looking at my app, I can see that the words might be useful, but I don’t want to assume that anyone will spend a lot of time reading text on an iPhone. The screen is too small for lengthy reading. Because the app I am looking to design here is essentially a video app I want to draw the users’ attention to the video. Questions you might ask regarding the video: is it evident to the user that touching the arrow button over the video image will play the video. It may depend on your user population. It is a general characteristic of web use that an arrow over an image indicates that it is a video – but perhaps your users don’t see the connection. In that case you will want to make an iterative change that makes most sense to your population – and then follow up with more user tests – to be certain that the change you made actually is increasing your intended functionality for the app.

Regarding content, is the app communicating what you expected? Some questions you might want to ask about communicating your services in the video would include what the user can remember about the video orientation tour – certain parts may resonate more, depending on the video. You may want to go back and re-shoot parts of the video if you find that the content of your first pass was not being understood. Perhaps there are alternative ways of explaining the space that will resonate better. Have some prompts ready to ask your users – ‘I was hoping you would understand X topic about the library’; if that didn’t make sense to them, perhaps follow up with how they may have better picked up the topic.

You will also want to inquire about how color will impact the use of the app. Does your choice of app background color add to or take away from your communication? A survey of users could inquire about the layout and their feelings about its perceived design.

This all may seem to be a lot of time inquiring into these attributes of the app, almost as long as it takes to create the initial design, if not longer. If you stop to think about resources used, however, it will be a greater drain generally if you have taken the time to create an app that no one will be able to use. The full picture of app design will always include a step at the end in which you should be seeking input from those who would actually make use of the software you have spent a considerable investment of time in making.


1.http://store.apple.com/us/browse/home/education_routing

2.Dashcode User Guide terminology.

3.Should you choose to incorporate additional elements into your video tour guide app, such as an element that is a phone button to call a library staff member, or library service point here is where you can do so.

4.At the time of writing (mid 2010) the iPhone does not support Adobe Flash. Although a good percentage of the web actually uses Flash to support multimedia content you will find that this is not the case with the current iPhone operating system 3.1.2 [early indications are that the iPhone OS 3.2 (in beta release) does not have support either]. It is certainly something to be aware of, as other, later releases of the iPhone OS may support an Adobe Flash multimedia experience