Mobile Native App Cross Platform Development on Single Framework

I did my mid-term paper on mobile web app, which supposedly would operate on any smart phone’s browser. The major benefit for mobile web app is its ability to cross platform since it work only via your browser. By using frameworks such as PhoneGap and Sencha Touch you can build a kind of hybrid between regular webpage and native app that work on mobile browsers and use native features of mobile phone. For instance geolocation can be used on Google Map and microphone feature can implement on search text box. In order to create web app native feel and integrate with native features, it would count on HTML5, CSS3, and JavaScript.

The idea of cross platform enticed me. However, since the web app work via browser there are bound to have some limitations that wouldn’t match with native app. Furthermore, few weeks ago I heard a speaker from the Mobile UX Camp said, in order to create native-like user experience such as continuous flow of scroll gesture, hundred lines code of JavaScript needed to be written to have the same effect. This is cumbersome for the developer and the performance might even act sluggish.

Then I read this.
Xamarin debuts iOS and Android app development inside Visual Studio for C# programmers

To say it in simple way, Xamarin is an integrated development environment that uses C# code to develop mobile native app, also it can work as plug-in on Microsoft Visual Studio. C# Developers can now use Xamarin to create iOS and Android applications.You can have different UI depend on the platform, but the code behind can be the same and written in C#.

The concept to develop native apps that cross multiple platforms via a single framework intrigues me. In the past (?) time, applications on certain platform have to be coded by its dedicated language, Objective-C for iOS, Java for Android, and C++ for Windows. Each platform also has their own main framework, Xcode for iOS, Eclipse for Android, and Visual Studio for Windows. For developer, the burden to learn and familiarize with these abundant of computer languages and frameworks seems like a never ending journey. It would be awesome if I could use one coding language to create cross platform native app!

Back in college I had learned Java and Visual Basic. When I worked as web developer I fumbled with C#, which turned out all right for me. When mobile apps became famed, new and old languages all wanted to take the lead of market, which made diverge of codes and user interface. Could Xamarin become the savior (for developer) for the code behind as we follow the UI guideline (AKA the bible) of Apple, Google, and Windows?

In recent years, the vast varieties of frameworks that work on development of mobile web app thrived and probably have reached its climax. Never had I thought there is a framework to build cross platform native app. Perhaps it will create another trend in the future, and become the foundation to develop mobile solution.

Xamarin
http://xamarin.com/

Flashcards on Mobile

"People judge you by the word you use." - Verbal Advantage

Learning English vocabularies seems like endless journey. I remember I had to use a variety of strategies and equipment to study new words. In the old day when I was little I had to carry a brick of dictionary with me to school, and it was such a laborious work for an elementary kid. When I was in high school the electronic dictionary came out. This device was once a black and white screen novelty, within 3 to 5 years it became a ubiquitous tool with colorful display. The sources to learn vocabularies didn’t change much before I entered graduate school – books, printed materials, flash cards, and online learning sites. However, this suddenly all changed once I received my iPad.
I like to learn a few vocabularies when I go to foreign countries so I can ask about route, order food, and buy souvenirs. Back at home I have books about Japanese, German, French, Thai, and Cantonese. With my iPad, I no longer have to print out my reading material, I can use the downloaded dictionary to look up translation or use the inbuilt dictionary for English meanings, I can hear the rather robotic pronunciations and best of all don’t have to carry all those books and devices anymore.

Recently I found a website and its app that help me learn vocabularies, the Quizlet.
http://quizlet.com/
Quizlet allows you create your own study set or use other people’s set as study material. Although their website and app’s interface was a bit confusing at first, trying to find other people’s set that fit your needs was a bit challenging, and it seems their mobile app isn’t fully developed yet. What made me really like about their mobile app was their focus on three key things on learning new vocabulary: the vocabulary/term, its meaning, and its pronunciation. It’s organized and easy to use. Unlike you need 2 to 3 steps to define or speak a word on iBook, in Quizlet the word and definition is juxtapose and the audio is just one click away. Literally the main feature is to act as the electronic flashcards.

Unfortunately, not all languages’ pronunciation is supported, such as Thai and Hebrew. I don’t know their source of audio, but on their webpage they said it supported 18 languages.
http://quizlet.com/help/how-does-audio-work-on-quizlet

I would love to have this app in my yet to be seen iPhone so I can study when I’m commuting. I also hoped in the future there will be be some way I could combine the content of the books and audio of CDs to put them all into my mobile device.

Mobile in the Night Market

Yesterday, the Taiwanese Student Association (TSA) held a traditional Taiwanese night market at UW’s Red Square. The place was packed with enormous amount of people, and there were long lines to buy the food. Sadly, I didn’t eat any food because it was too pricy for me, but some things other than food caught my attention.

A somehow rare scene, someone scan QR code

Look at this! I quickly took a snap at this man, who was scanning a QR code on the flyer. This flyer’s content was nothing more than a hyperlink and QR code, and the man choose to scan it! The QR code will bring you to the night market’s mobile website, which includes various information like food stands, menu, parking places, maps, and etc. There was no printed catalog for the event. I thought this was a great idea for tourism. At Taiwan’s tourist attractions, you would see different types of language’s brochure and catalog. In a place like National Palace Museum, there are at least 10 different language of pamphlet. What if the catalog of certain languages is all out? Sometime even I have to use the English map because they were out of Chinese. In this case they could print a notice at bottom of shelf and say “please link to xxx to get info” with a QR code for quick access. This way people could get a quick update, and these site could update instantly without forgo their whole batch of pamphlets just because misspelling (which happened a lot).
QR code might be dead in few years, but until there are better ways to replace how people access information, QR code can still stand for the competition.


Another thing interested me was the exchange money stand.

Square device used as ATM machine

Didn’t bring your cash? No problem! Swipe your credit card by using the Square device and get your cash instantly! This was quite new to me because I always thought the Square device was for ordinary b2b or b2c, like buy lemonade on food stand or pay your tuition to your spiritual mentor on the Alps. However, this redefined Square as walking ATM machine.
What if… this is applied in an underground gambling site? Didn’t bring your cash? No problem! Just swipe your card and you can get your chips. Instead getting your merchant, you receive a monetized currency as a product you bought.


Finally, I was probably one of very few people who took pictures with a digital camera (and it’s not even mine…). Most people took pictures and videos of the performance on stage by their cell phone. This reminded me the photo comparison between 2005 and 2013 papal conclave photo. How shocking it is technologies have changed within few years. It is not even a decade and new technologies have shifted our behaviors and interactions on different events.

People use their mobile devices to record events on stage

Papal conclave

http://gothamist.com/2013/05/03/instagram_your_meals_study_says_you.php
Few days ago there were articles about people who obsessed with taking pictures on food may have mental issues. With the new Google Glass, would this device turn into as new equipment for food fetish voyeurism?
OS: Hey! Stop staring at my cheese! That's creepy!

Mobile Websites of iSchools

Although I use iPad, which the mobile Safari and Chrome always download the iPad version, I could download the Dolphin browser iPhone version to mimic the viewport of iPhone to have applicable mobile phone experience.

Since our midterm project is on making MCDM website mobile, I thought might as well take a look on other academic institute’s website and see how they appear.
Most of the major institutions such as Stanford, Harvard, and UCLA had configured their main homepage mobile friendly. However, if you deep dive and take a look at departments’ website, it’s totally different and chaotic. Innovative and prestige programs like MIT Media Lab and UCLA Computer Science doesn’t have a mobile website or responsive design. This made me wondered, what is the percentage for a department to have a mobile compatible website?

MIT Media Lab and UCLS CS website weren't mobile friendly

To find out the answer, the iSchools worldwide were probably the best entities to observe. In my opinion the iSchools should be specialized in information system management, web development, and user experience. They are the pioneers in building bridges between human and the Internet. There’s even an iSchools.org organization dedicated to the iSchools of the world. It’s better (and easier) to examine the 41 departments which have joined iSchools.org to gain understanding and learn pros and cons from their design. Ironically, the iSchool.org itself has a major flaw if you browse through your mobile phone. Its responsive design made its mobile page pop out a HUGE menu icon, which takes scroll 3~4 pages and it’s another 2~3 pages to find the link after open the menu tab.
http://ischools.org/


The result was quite surprising - only 9 out of 41 iSchools have their web site made mobile friendly. Means if you visit an iSchool’s webpage through mobile phone, less than 22% of chances it would appear as a mobile site. Furthermore, not every mobile website turned out to be fine. Just liked the iSchools.org, there were pages have their functions or buttons misplaced, or information of contents appeared in a hideous crowded way.

iSchool.org, it's a menu tab, not a list of links

Here are the 9 iSchools that have their website go mobile, and few comments on them.

Responsive site – Use a menu button to direct as main navigation
Singapore Management University: average website
University of Illinois-Graduate School of Library and Information Science (GSLIS): Menu button redirect to bottom of page, where all the navigation tabs are.
University of Maryland, Baltimore County (UMBC)-Department of Information Systems: Long list of verbose options, in a bad way. However I once saw a tornado warning on top of page, useful.

U of Illinois, the menu button directs you to bottom of page

Responsive site – Assign tool bar or tab on top of page as main navigation
University of Amsterdam-Graduate School of Humanities (Archives and Information Studies): Clean, simple, very good on making contrast between different elements.
University of Maryland-College of Information Studies: Very simple, clean page
University of Melbourne-Melbourne School of Information: The layout was not designed, everything is not organized.
University of Texas, Austin-School of Information: Good design on labels, but the events got cramped, shown in an uncomfortable way.
University of Washington-Information School: The tabs are the same as full webpage version. But a dropdown list pop out on mobile page, specific for finding information, really handy.

U of Amsterdam, nice responsive design, although in full page mode it's kinda quirky

Tele-

commu-

nications

U of Texas in Austin, do you like to read in this way?

Dedicated Mobile Site
University of North Carolina-School of Information and Library Science: It's a web app, you could tell difference by compare the views with desktop browser. Offer install as a web app to your phone's screen on first time entry. Very clean, like U of Amsterdam. The shortest in page's height.

U of North Carolina, web app!