Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb

Going Mobile – Extending a Maps API Project to Smart Phones

December 7, 2009 by admin

Campus MapThe Missouri State University Campus Map combines several different types of data into a single map site using the Google Maps API version 2. This past June, my office was approached by Jeffrey Thomas, a senior computer science student at the university, about software he had developed that uses BlackBerry phones as GPS devices. Jeffrey wanted to track in real time the location of buses in our campus transit system. As we looked at use cases, it didn’t take long for us to realize a large demand for such a service was going to be from the person standing at a bus stop with a mobile phone as opposed to the more traditional user on a laptop or desktop.

Version 3 API Issues

I began working on a proof of concept of such a site using the newly announced Google Maps API Version 3 but ended up having to postpone the project due to lack of features – especially polylines. After polylines were added, the first major snag I hit was lack of support for tile layers. So I wrote my own. I spent several days hammering out the code, followed by a substantial amount of time beyond that optimizing.

On our main map, we had been using invisible polygons to make our buildings clickable. I knew that strategy wasn’t going to perform well on a mobile device, so I changed to using an AJAX call that dynamically queried our database. The strategy worked so well we ended up implementing it on our main map as well. I’m even in the process of implementing the clickable tile layers that Pamela Fox described in her presentation at Google I/O on our main map.

Once these issues were handled, the major hurdles became less technical and more user-interface focused. I wasn’t happy with just having our bus routes and bus locations displayed on the map – I wanted a mobile map with the majority of the features offered on our main map.

Interacting on a Small Screen

Campus Map - Mobile VersionI struggled for a while with how to create an interface that maximized the actual map size but supported three different overlays (one with sub-options), geolocation and search. With feedback from coworkers, I ended up taking a cue from the default map application on the iPhone; I added a 44 pixel action bar to the bottom of the screen and used a combination of icons and text labels. Informal user testing has shown this approach to be effective as even people not familiar with either the iPhone or our campus have been able to effectively use the map.

Branding and the Fine Print

With screen real estate a precious commodity, I knew any type of header to the page was going to have to be small. Yet it was crucial to display our university logo and the page title. I settled on a thin band at the top. It was also a requirement to have some standard fine print on the page – typically reserved for the footer. I was not willing to shrink the map any more to accommodate such text. so I ended up developing an “about” button on my bottom toolbar which brought up an overlay with all of the required information.

Optimizing Everything

Once development was nearing completion, I moved to spending a considerable amount of time on improving performance. I took full advantage of the version 3 API support for marker icons using CSS sprites. I ended up also using CSS sprites for the action bar icons.

Fortunately, the Google Closure Compiler was just released. In order to use it for JavaScript minimization and optimization, I took the time to annotate my JavaScript (which was no small task).

The Allure of the Native App

Having our map site available in various app stores would provide exposure and better usability; however, I’m not willing to maintain additional versions of the map. That only really leaves me with the option of writing a shell application that simply embeds a browser (which may still happen). Now that the map has been optimized, the performance of the web application is very close to that of the native maps application on the iPhone.

Filed Under: web strategy and development Tagged With: app, design, feature, google, iphone, map, mobile, Search

iTunes U content available in new iPhone/iPod Touch OS

June 19, 2009 by

With this week’s OS 3.0 update to Apple’s iPhone and iPod Touch, users can now access Missouri State on iTunes U directly on their mobile device. The easiest way is to navigate to http://itunesu.missouristate.edu on your mobile browser and click on the ‘Open Missouri State on iTunes U’ button. This will automatically open iTunes on your device and go directly to Missouri State on iTunes U.

photo

Another option is to open iTunes on your mobile device and navigate to the ‘More’ tab, and then select iTunes U. Scroll down to Universities & Colleges, then scroll down to find Missouri State University. Here is what Missouri State on iTunes U will look like on your mobile device:

photo2

UPDATE: Apple now has a great video online showing you how to access iTunes U on your iPhone or iPod Touch.

Filed Under: News Tagged With: app, Apple, audio, blog, Blogs, content, iphone, ipod, iTunes U, lab, mobile, new, update, Video, Web

WordPress Upgrade to 2.7 + some new plugins

March 27, 2009 by

The WordPress upgrade to the new version 2.7 was successful yesterday. If you now login to your blog, you will see that the Dashboard is significantly different. We are currently working on updating all of our Blog Setup and Instructions pages to mirror the changes made to the Dashboard. These new instructions should be updated next week. *The instructions are now updated as of 3/30/09*

Our anti-spam plugin, Defensio, was not working correctly with the new upgraded version of WordPress, so it has been replaced with the WP-SpamFree plugin. I activated it on all of the blogs in our system, so you shouldn’t really see any changes. I also added the SI-Captcha plugin to all of the blogs that were not using it, just as an extra precaution. If someone is logged in the Captcha won’t show up on the comments, but if someone isn’t logged in it will appear.

The other two new plugins are WPtouch and the KB Advanced RSS Widget. WPtouch reformats your site with a mobile theme when viewed with an Apple iPhone, Apple iPod touch, Google Android or Blackberry Storm touch mobile device. It does not affect the look of your blog when viewed in a normal web browser. You can look at this blog on a mobile device to see an example of how it works (it’s really neat). The KB Advanced RSS Widget allows you to pull in RSS Feeds into a Sidebar Widget. You can add multiple widgets for different feeds. The ‘Media’ widget on the right sidebar of this blog is a working example of this new plugin.

Filed Under: WordPress blogs Tagged With: app, Apple, blog, Blogs, captcha, google, instructions, iphone, ipod, media, mobile, new, pages, Plugins, rss, update, upgrade, Web, WordPress

Help “Break the Wireless” and You Could Win a Wii

September 17, 2008 by Brian Heaton

Win a Nintendo Wii

Join us on Tuesday, September 23rd, for a “Break The Wireless” Event at the Student Union, and you could win a Nintendo Wii!

This event is to test how many devices the PSU wireless can service at one time.

Bring Your Wireless Device

For each laptop, Touch or iPhone (software version 2 and up), or Windows Mobile wireless device you bring and connect to the PSU wireless network, you’ll be given an entry in the drawing. Guest wireless passes will be given out at check-in.

Join us on Sept 23 at 3 PM

This event will take place between 3-4 PM at Plaster Student Union. You do not need to pre-register for this event. Simply arrive at 3 PM and check in at Room 308. We will be announcing the winner of the Wii at 3:45 PM. You must be present to win. Event will be limited to 450 devices on a first-come, first-served basis.

Filed Under: News Tagged With: iphone, mobile, wireless

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Omni CMS
  • Redesign
    • Academic websites
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: November 25, 2008
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © Board of Governors, Missouri State University
  • Contact Information
  • Healthcare MRFs
 

Loading Comments...