Mobile Education – Using Your iMagination For Your School’s SmartPhone Outreach
Roger Casey
With numerous colleges throughout the country releasing native apps for iOS, Android, and the ever-growing iPad as portals for interaction between teachers, students, alumni, and other constituents, the writing is certainly on the wall for major changes in the way schools think about digital communication with their constituents. Mashable Tech writer Jeff Kirchick’s recent article about “5 Ways Higher Education is Leveraging Mobile Tech” will definitely jog your imagination about what mobile development might be able to accomplish for you as an innovator in your institution’s technology department.
As a fairly recent graduate, it’s very exciting to watch the proliferation of mobile development in academic institutions first-hand. The idea of having a University of Virginia app probably would have seemed a touch ridiculous while I was still slogging through McIntire, but now that I’m on the ground floor of university app development, it’s a little hard to believe that I relied solely on e-mails and desktop-based collaboration portals for information that could have been walking with me the whole time. But we’re not just talking about tonight’s homework assignment or the hours for the career services office – Kirchick’s article shines a light on functionality that makes a university mobile app more than just a simple tool of convenience.
Imagine grabbing your textbooks in a crowded school bookstore and checking out with a single swipe of your SmartPhone rather than painfully waiting in a long line with about 30 pounds of paper on your back. Imagine touring a campus with the ability to point your iPhone or Android camera at a building to get its full history and purpose. Imagine instantly polling all of your students on a classroom question with graphically-displayed outputs on the projection screen in real-time.
Guess what: there’s really no need to imagine – these things are already here. Kirchick’s Five Ways are just a sampling of some of the marvels that our grade-school teachers probably smiled about in their sleep that are now at the behest of any academic institution willing to take the leap.
We at WillowTree Apps are certainly doing everything we can to lead the charge. With our robust iOS and Android apps for educational institutions like the University of Virginia, Syracuse University, and the McKinney Independent School District, we are working with academic institutions to keep them on the cusp of mobile academic innovation. Find our apps in the iTunes store or the Android Marketplace and see for yourself how we can help your institution bring your imagination to life.
Bringing Mockups to Life…Without Developers?
Tes Tabilas
As designers, we seek for a better method of delivering our flat mockup images to our clients’ devices. Seeing our designs come to life really doesn’t happen until our developers get a hold of them. This leaves me wanting a little more, and greatly anticipating the final build. After designing, I already want my designs to magically be implemented to a workable app—simply for the reason of getting a hold of it on my device and tapping away. That is the whole essence of a touch screen – to touch. Without this action, what’s the point?
Sans developers, how can designers turn mockups into a tappable model? Prototypes, a Mac desktop application that was introduced to WillowTree Apps back in May has done such. At it’s core, it allows you to take mockup images, and link them together to create a navigable “prototype.” Thank you, Duncan Wilcox and Keith Lang! These two individuals have greatly helped convey our designs in a new way before the development phase.
- Import your mockup images into Prototypes
- Create hotspots and link screens together
- Upload to the integrated and free ptyp.es site (a secure pin code is generated)
- Share! Sharing the generated pin allows the prototype to run on an iPhone or iPod Touch as a web app
The program itself is pretty intuitive, and a useful tool that allows you to easily create interactive prototypes. Check out prototypesapp.com/ and test this application out!
Developing for the web across desktop & mobile with template selection.
ron.duplain
First, let’s talk about why you’d want to have two completely distinct layouts of a site, and not just two styles. We have three major themes of mobile web here at WillowTree Apps:
- The mobile site is for someone on the go. The information is lean (for fast transfer on cell networks) and tends toward fast-access information like directions, contact details, quick lookups, and hours of operation, and includes links to open in other apps, like the Google Maps app.
- The mobile site uses a framework like jQuery Mobile which has specific requirements of page flow.
- The mobile pages are designed to be viewed inside a web view of a native app.
Now for the implementation. We use Flask for rapid development of our mobile sites. Flask allows for template loader hooks, which makes for clean integration of server-side browser detection logic for selecting templates:
https://gist.github.com/1355170
This snippet selects a mobile template if it detects a mobile browser, and falls back to the default template if you did not provide a mobile version of the template. To keep the response lean, simply have the mobile version cherry-pick the context you provide in the render template call. With this approach, all of your server-side logic is shared across desktop and mobile versions — only the HTML/HTML5 templates are different.
There are other ways of template selection in Flask, but this approach:
- keeps the detection in the framework and out of the application
- allows for upgrading Flask without breaking your extensions (Flask explicitly provides these hooks)
- allows for straightforward unit testing, and we like 100% test coverage of our mobile web frameworks
As for browser detection, the User-Agent provides a quick fix but falls apart when (a) the user wants the desktop site, (b) the user has e.g. an Android tablet [which has a similar agent to the handset, though it can be done], or (c) the agent is switched/spoofed or from an alternative browser. User-Agent might work for you; that’s up to your acceptance tests. Otherwise, you can work with sessions or URL arguments.
For most simple sites, we use User-Agent detection and test all of the target devices. It’s cheap and gets the job done. For more sophisticated detection, we use a simple heuristic based on User-Agent to detect the browser, and keep a session to track the user’s decision to switch to the desktop version. This session can also support embedded webview logic when the site is part of a native app.
NCCS Pocket Cancer Care App is live….
Tobias Dengel
The Pocket Cancer Care iPhone app by the National Coalition for Cancer Survivorship (NCCS) has gone live, designed and developed by WillowTree Apps. This app provides invaluable services to cancer patients and loved ones by helping them manage their communications with doctors and other health care professionals. It also includes a cancer glossary and integration with the iPhone’s calendar to manage appointments and medications. Download the NCCS Cancer Care app from iTunes here.
WillowTree Apps at New Media Summit 2011
Blake Sirach
Our very own CEO, Tobias Dengel, will be speaking at the New Media Summit 2011 in San Antonio on October 27th. Tobias will present about sound mobile strategy for iOS, Android, and mobile website development.
Check it out here.
Android Locale and DateFormatter: Two Problems and Solutions
derekbrameyer
Recently I deployed an application that was able to be downloaded worldwide, but really only served English content. I used a DateFormatter object to properly set up the date and time of fetched RSS data.
Problem #1: Defining the following:
public static DateFormat parsedDateFormatter = new SimpleDateFormat(“EEE, dd MMM yyyy HH:mm:ss zzzz”);
This works great in the United States locale. When viewed from a locale that uses different date formatting, however, it throws exceptions all over the place. There’s a fairly simple workaround for this:
public static DateFormat parsedDateFormatter = new SimpleDateFormat(“EEE, dd MMM yyyy HH:mm:ss zzzz”, Locale.US);
This will “force” the formatter to return based on the United States locale. Here’s where Problem #2 rears its ugly head:
Problem #2: TOO MANY “Loaded time zone names for en_US in x ms.”!!!
Because I was fetching an RSS feed, this date formatting was occurring tens to hundreds of times per feed. The call was being made for each parsed date that I wanted to be returned, and I had assumed that this simple addition of preferring the U.S. locale wouldn’t take too long. Boy was I wrong. Where before the app would parse hundreds of dates in a matter of seconds, there were timeouts all over the place with the new code. Each call tends to take 1500-3000 ms, and that adds up quickly.
My solution was to simply refactor the DateFormatters which I needed into a public DateFormatHelper class. I needed to define a handful of them since I wanted multiple different outputs. The result is that the app parses the data (and more importantly, the dates!) near instantaneously. The solution is actually probably overkill for this scenario, but I wanted something clean and quick, and the helper class satisfied both requirements.
An Android Developer’s Thoughts on Ice Cream Sandwich and the Galaxy Nexus
derekbrameyer
tl;dr: ICS introduces a new design philosophy, revamped notification bar, improved browsing, photo, and video, and a ton of behind-the-scenes SDK changes that comprise an evolution of the Android operating system.
Last night, Google and Samsung presented the next iteration of the Android operating system, version 4.0, Ice Cream Sandwich (ICS). In conjunction with the new OS, they launched the new Google Experience phone, the Samsung Galaxy Nexus. A Google Experience phone indicates that it will not have any carrier or manufacturer modifications; that is, it will be a “vanilla” Ice Cream Sandwich phone. And how delicious that will be!
I want to go over some important features introduced last night, mainly focusing on ICS from a developer’s and end user’s perspective. These are ordered mainly by how important I think they will be to both devs and customers.
Roboto and Design Philosophy
ICS introduces a huge overall shift in Android’s UI and design, considering it’s a jump from Gingerbread. With Honeycomb (a tablet-only OS), Android moved to a very futuristic, almost Tron-like design. This has been toned down with ICS, and Google has introduced Roboto as a new font to replace Droid Sans. From the looks of it, Roboto improves readability dramatically and looks great on the Galaxy Nexus’s 1280×720 screen.
With Roboto, Android shifts from the possibly too-futuristic design of Honeycomb to a muted but still modern feel. It’s not just a new font, and Google wanted to emphasize that Roboto introduces a new design philosophy that is geared towards simpler user interaction and a faster and more intuitive overall experience.
Notification Bar
The new notification bar looks flat-out gorgeous. It’s simple, elegant, much more usable, and remains one of the greatest core features of Android. To devs, last night’s highlight of the notification bar was huge. Google has added swipe deletion to individual notifications, which is intuitive and very quick (and CM7 has had it for quite some time!). The stock AOSP Music player offers controls _directly_ in the notification tray. This information cannot be underscored enough, as it looks like developers will be able to place widgets in the notification tray for enhanced user experience (though if this is not the case, I will be slightly disappointed). Finally, the notification tray can be viewed directly from the unlock screen, and individual notifications will take the user directly to the app. This is again huge as it offers incredibly fast UX and makes notifications even more powerful than they had been previously.
Easy Data Usage Handling
This section of ICS will undoubtedly be a controversial one, but it’s nonetheless a feature that benefits end users immensely. Data usage has become a huge focus in the mobile realm, with carriers moving away from unlimited data plans and customers becoming increasingly concerned with month-to-month consumption. With ICS, users have some of the most powerful tools I’ve ever seen to examine their mobile data usage.
Users can instantly check how much total data they’ve used in the form of real numbers and a slick-looking graph. In addition to this, data usage on a per-app basis is shown, allowing users to single out Random App 6 as a data hog. The graph is interactive, and users can drill down to certain time periods to look at what apps used the most data for a given period of time.
A customer can also specify warnings and hard cut-offs for data usage. For example, if I had a 2 GB data plan, I could create a warning notification at 1.5 GB and a hard cut-off to stop all data usage at 2 GB. One of the best features that the new data meter offers is the disabling of background data on a per-app case. Thus if my fantasy sports app is updating constantly and costing me hundreds of MB in data usage, I can turn that background data off and save some money.
I really hope that carriers do not choose to disable this feature, as it is one of the most beneficial features of ICS and Android that we’ve seen in a long while.
Improved Browser
There have been rumors of Google releasing a version of Chrome for Android and other mobile operating systems, and it looks like that could be the case, but we’ll have to wait for it. The new browser with ICS, however, improves dramatically on the previous experience (coming from Gingerbread). Users can now sync bookmarks with Chrome on their desktop. It also looks like Google has built in two possible user agents, as an action item allows users to instantly turn their mobile browser into a desktop client, eliminating some annoyances when trying to view “Classic” sites that automatically switch to mobile sites. Finally, users can save pages for offline viewing, which is helpful for those that take the subway.
Instant Voice Dictation
I was wondering if Google would be able to one-up Siri, and while they don’t have anything on the level of Apple’s personal assistant (though Iris looks pretty nifty), the new speech-to-text functionality offers near-instant conversion. I have a hunch that it still requires a connection to Google’s servers, which is both a blessing and a curse, but the new system is blazingly fast and a lot more intelligent. It successfully converted “period”, “question mark”, and “smiley face” into “.”, “?”, and “:-)” respectively, all on-the-fly. I only want to know what will happen when I want to tell my friends about the popular rap song LOL Smiley Face…what then, Google?!?
Keyboard
The keyboard has undergone a bit of a face lift and offers better recognition and suggestions. Text input has also been revamped with a very easy spell correction mechanism and enhanced dictionary control. That feature is going to be a highly underrated one, as text input has always been one of the more annoying things to do in Android. I can’t remember how many times I’ve wanted to not just correct the word, but also add it to the dictionary, and the old UX to do so was clunky at best. The improved suggestions for individual words is also going to make correcting typos very easy.
“Quick Response”
ICS offers a new way to interact with received calls that you don’t want to take. You can swipe up on the call and then choose from a set of predefined messages to instantly text back to the caller. Very helpful if you want to let a person know that you’ll be able to talk to them sooner or later.
Photo/Video
This is no doubt going to be a huge improvement for the end user, and it looks like Google has improved camera and gallery functionality by leaps and bounds. There is now near-zero shutter lag with the camera. The response time was also incredible; it looked like the tester was taking > 1 photo per second, which is amazingly fast. Image quality did not appear to suffer; most of the blur can be attributed to the rapid movement of the tester’s hands as he was point-and-clicking everywhere. The user can now instantly take photos from the unlock screen, similar to the iPhone. There is also a nifty panorama/stitching mode, which is nothing incredible but still nice. Video has been reworked, and here the Galaxy Nexus’s 1080p camera shines. Time-lapse video, manual white balancing, and hi-res pictures _while_ taking video are all really great features. Finally, the new Gallery app has integrated a ton of brilliant photo editing features, and finally looks to be powerful enough to do some in-phone editing before posting.
Screenshots
You can FINALLY take screenshots from your Android device. Holding the Power button and Volume Down button together sends a screenshot to your saved photos.
Near-Field Communication and Android Beam
NFC has yet to really take off but the possibilities with every Android phone integrating NFC could open up a lot of opportunities for developers. Android Beam’s interface for sharing looked simple and intuitive. It will be interesting to see how often NFC is used, and I think there’s a lot of research that can still be done in this field. After some digging in the new API docs, it seems like NFC is going to be pretty simple to implement; I would expect to see an NFC bubble similar to the location-based service bubble hitting mobile right now.
The People App
This new app offers a one-stop shop for all of your contacts. You can view their recent social network updates and other important information. From a developer perspective, I’m curious how they linked up to other apps, primarily with how the new ACTION_SEND Intent will work. How does the app prefer the official LinkedIn app? How does it prefer the official Twitter app and not some other client I have installed like Seesmic? I also want to see how they did the ViewPager and top header bar, which looks very WP7-esque and extraordinarily sleek.
Widgets
Widgets are now resizable, which is a nice enhancement but one that has been possible with third-party launchers like Launcher Pro for quite some time. Not a huge deal (IMO) but nice to see at the OS level.
Folder Creation and Usage
Android took a page out of iOS and folders are now intuitive and easy to create. Dragging an icon onto another icon creates a folder, and users can easily reorder and name their folders directly from the home screen.
Voicemail Enhancements
Users can now speed up and slow down playback of a message to get to a certain point.
Facial Recognition Unlock
Despite the demo not working, this seems like an interesting way to unlock your phone. I honestly don’t see it being used a whole lot, but I also didn’t think Siri would get that much usage. This seems like a fun feature, but what I really want to see is what percentage of users lock down their Android device with a PIN or unlock gesture.
Gmail
Google has introduced offline search for the past 30 days of e-mails, which is huge. Gmail is just going to become that much more responsive with this enhancement.
Calendar
Pinch-to-zoom has been implemented to give users more information where they have a ton of events on their calendar.
Other Thoughts
It looks like Google is taking the ViewPager design pattern and running with it. I think ViewPager is a very intuitive alternative to the tab-style interface offered in previous Android versions and iOS. With ViewPager, there is a smaller bar at the top with a simple text and arrow indicator for which screen you are on. Users can tap that bar to switch between screens, but they can also swipe left and right to move between screens, a very intuitive gesture.
The Galaxy Nexus itself is amazing. The screen is light years ahead of anything else and is likely to stay there for at least 6-8 months. 1280×720 AMOLED in the palm of my hand on a phone that’s really no bigger than the current Nexus S? That’s crazy talk. I’m slightly disappointed in processor speed and SoC choice, but other than that I’m very happy with the phone specifications. I haven’t read anywhere that it offers a MicroSD slot, and if so, that’s a bit underwhelming.
It looks like some of ICS’s new apps take design cues from WP7, and some of ICS’s improvements are influenced by iOS. These features really enhance UI (e.g. the People app, photo enhancements, folder creation). Many folks pined recently about Apple doing a similar thing in taking features from Android, Blackberry, and WP7, but when it’s a feature that’s a no-brainer (e.g. the notification bar), why not? It’s also quite clear that Google has innovated a ton beyond just simple copypasta of existing competing features.
I really hope ICS gets pushed to the Android Open Source Project (AOSP) soon. Really soon. As in, I want to look at that People app right NOW.
I and the other Android devs here at WillowTree will be playing around with the 4.0 SDK over the next few days, so stay tuned for another post that will dig deeper into what exciting features are introduced with that!
Lastly, what are your thoughts on the presentation? Which new features do you think are the most important? What did Google miss out on? Is the Galaxy Nexus really the best thing since sliced bread? We would love to hear your thoughts!
iOS Game Development: Breaker
Joel Garrett
I threw together a simple brick breaker clone last night using only UIKit and Quartz. Once it’s polished up a bit I will follow with a tutorial so you can build it from scratch. Check it out on github.com.
https://github.com/Nitewriter/Breaker-iOS
Joel Garrett
Lead iOS Engineer
UINavigationController: Custom navigation bar
Joel Garrett
A common problem iOS developers face with themed/custom UI implementations is the inability to effectively apply these designs to the navigation bar. Faced with this challenge on a recurring basis, the team and I decided to come up with a clean solution. Harnessing the power of runtime memory manipulation we were able to effectively provide the ability to substitute the vanilla navigation bar with a custom subclassed version. By doing this we now have the ability to apply any custom design and respond properly to adjustments as the context of the navigation bar changes. This solution has been tested and works on both iOS 4.x and 5.0. Follow the link below to see our implementation.
https://gist.github.com/1253807
Joel Garrett
Lead iOS Engineer
Manta Android Business Search App is live
Tobias Dengel
We’ve finished development and launched the Android version of Manta’s Business Search app — the iPhone version has been ranked a Top 20 Free Business search by Apple’s iTunes store since launch. Download the Android app here and send us your comments: https://market.android.com/details?id=com.manta.android
Recent Comments