I gave a talk at this week’s Mobile Monday on how to adapt web applications in the age of the iPhone. Quite a few people liked enough to ask me for the slides. 
So, here you go …
BTW, do not forget to join the Austin iPhone developer group, if you are interested in iPhone dev:
http://groups.google.com/group/iphone-austin
It is a mailing list for now. But we will have face to face meetings (probably in junction with Mobile Monday) in the future …
TheServerSide Java Symposium is one of the premium conferences in enterprise Java. No matter whether you are attending the conference or not (I certainly hope you do attend and come to my talk on Friday ), you can now keep track of the latest happenings in the conference on your mobile phone.
For conference attendees, you will get instant access to
* the session schedule
* speaker’s blogs
* TSS front page stories / comments / tech articles
* community reactions
* Las Vegas local information (news and show schedules)
* and more …
All these on your iPhone / Blackberry / Windows Mobile / Nokia, without taking out your laptop and struggling with the often flaky hotel wiki. For those of you who do not attend but still want to keep track of the latest happenings, this is a great tool to keep yourself updated (and entertained) when you are at lunch or in public transit.
All access is free and no registration is required. Here is what you do. You can load the following URL directly on your mobile phone. It displays differently on different phones and automatically adapt to a format that is most suitable for your phone.
http://WebClip2Go.com/tssjs (Try web-based iPhone emulator, Safari and Firefox only)
Or, if you do not want type the long URL. Send a SMS text message tssjs to phone number 41411 and open the link in the returned text message. iPhone users: do not forget to bookmark the site on your home screen!
Finally, the entire application is written in the enterprise Java stack (JSF + Seam, no less). The underlying technology is WebClip2Go — a community effort sponsored by eZeeLabs to bring the regular web to all mobile phones. I will discuss it in detail in my presentation in TSSJS.
Please send me any comments you have about this conference guide. If you are a speaker and do not see your blog on my list, please contact me and I will get you added in time for the conference!
One of the great things about SXSW is the vibrant party scene! There are literally over a hundred vendor parties during that week in places all over the Austin downtown. How do you keep track of all these parties? Well, with the SXSW Mobile Companion http://webclip2go.com/sxsw08 (try iPhone), you can track those parties right there on your phone!
First off, we make it really easy to view the conference’s “official” parties on your phone. Just click on the “Official SXSW Parties” link from the web page. Here is how it shows on my Nokia.
Of course, the official parties are only a tiny portion of the SXSW party scene. A good place to find all SXSW parties is the Upcoming.org service from Yahoo. We adapted the upcoming service for mobile and displays SXSW related parties by day as they are announced or changed. Here is how it looks on the iPhone.
Keep track of your parties!
Apple announced the iPhone SDK today. I have to say that the demos are very impressive and the “app store” concept is very well thought of — it gets around the carrier and lets Apple become the “deck” for iPhone applications. I am sure that mobile developers would much rather work with Apple than with wireless carriers!
Now, with the $100m iFund bounty, I am sure every mobile developer is learning Object C as we speak and race to develop the coolest iPhone application now. But what kind of applications should you write? What kind of applications can best take advantage of the native SDK capabilities?
Some applications, for example our SXSW Mobile Companion: http://webclip2go.com/sxsw08, is quite sufficient as an iPhone rich web application — the additional hurdle of having to download the native app may not pay off.
Well, an obvious place to search for cool application ideas is the native application landscape for other smartphone devices! You can then adopt / optimize those applications for the iPhone! To see what people have done on the Nokia Symbian platform, and give yourself some inspiration on your big iPhone application, come to my SXSW book reading on this Sat for the Nokia Smartphone Hacks book!
For those who cannot attend, I will post the slides later this week …
Michael Yuan
=================
SXSW 08 Mobile Companion
http://webclip2go.com/sxsw08 (iphone simulator)
Thanks to eZee’s Elias Saucedo, WebClip2Go got a much needed facelift just in time for SXSW!
Elias made us a new logo and a much more polished web site. Check it out!
We also have a very nice new home screen icon for iphone.
Let me know what you think of the new design!
WebClip2Go is a free service that let users “clip” content from live web sites and make that content available on mobile phones. In essence, it lets you browse content from the regular Internet on your phone. Checkout the web-based iphone simulator (Safari or Firefox) for a quick sneak peek. WebClip2Go is a community-based open source project sponsored by the eZeeLabs (more on this later).
Okay, I hear you say: “Many of today’s smartphones can already render HTML sites (see the iphone!), and there are online services (google, mowser, or even opera mini, skyfire) that transcode the regular web sites for mobile. How is WebClip2Go different?” Well there are actually several compelling differences:
First, most web pages are designed for wide PC screens. They have loads of headers, menus, sidebars, javascript / flash elements, and are partitioned into horizontal columns — just look at New York Times. They display poorly even on advanced devices like the iphone (require a lot of scrolling and zooming). Furthermore, when the page is “adapted for mobile” through mobile browsers or online services, the least relevant information on the page (e.g, the header and left sidebar) tends to occupy the first several screens of the mobile browser. WebClip2Go lets YOU, the user, choose the most relevant content on the page, and show it directly on the mobile.
Second, since the web clip is only a small part of the original page, it loads much faster on the mobile phone. That is especially true for pages with a lot graphics — parallel loading of images is very slow on mobile networks. A very nice side effect is that you also save a lot of mobile data bandwidth if you are paying per KB for access.
Third, WebClip2Go provides a very easy way to read RSS-based web sites (e.g., blogs and news sites). You can quickly drill down from headlines to the full description, the full article, and full comments. That is much better than any mobile RSS reader I have seen. 
Fourth, WebClip2Go works on a variety of mobile phones including the iphone, blackberry, Palm, windows mobile, Nokia Symbian, Linux-based phones. We are trying hard to make the site appear “native” on each of those platforms. Again, checkout our web-based iphone simulator on Safari or Firefox to see what we mean here.
Last but not least, WebClip2Go lets you manage your favorite web clips through a “fave list” and a tagging system. An example is how we bundled together resources for the SXSW 2008 conference. Just bookmark http://webclip2go.com/ and all your favorite sites / blogs will be right at your finger tip!
Still interested? Here are some quick FAQs.
Q: Can I sign up and create my own web clips now?
Yes, of course! However, keep in mind that a big objective of this project is provide easy visual tools to help users clip web sites. Those tools are not in place yet. So, you will have to brave the rather technical web interface. It typically takes an hour for a technical person to master web clip transformation. I know this is a lot of time and effort. But I think you will find it both fun and challenging once you get it going! You can start by reading those two tutorials.
Q: What about the outgoing links in web clips?
So, you created a web clip, but what about the links in the clipped text? In WebClip2Go, you can create further clips to handle those outgoing links so that the linked pages are “clipped” as well. Please see the RSS tutorial for more. Or, you can simple use a standard mobile transcoder, such as Google and Mowser, to transcode outgoing links. Mowser is the default transcoder we use.
Q: Is WebClip2Go an open source project?
Yes, it is. The project is sponsored by eZeeLabs, and the code will most likely be licensed as GPL to the public. I think a project like this can only be successful as an open source project. Why? Well, first of all, mobile content adaption is an unsolved problem. A lot of the stuff we do at WebClip2Go are highly experimental. We can only hope to find the “right way” with a lot of open discussions / trial and errors from the community. Second, there are just too many smartphones out there for us to write view templates for them. Our iphone template works well but it also required a lot of work / time to develop. An open source contributor can really help out here by developing a kick-ass view template for his/her favorite phones! So, if you have any ideas you’d like to contribute, please contact me and we will work out how to work together!
Q: Does WebClip2Go require registration to use?
Not really. Many features in WebClip2Go are available to any un-registered user. You need registration to add your own web clips or to build a “fave list” for yourself. Even if you do not wish to register, I would still appreciate it if you can email me your comments / suggestions / requests on how to improve the service.
Q: Where did you get this “web clip” idea?
Well, “web clip” is a well known concept used by Google and Apple. My idea is to make “web clips” available on the mobile phone — hence the WebClip2Go name. The technology is rooted in the Mozilla Joey project, which I have been a key contributors to for quite sometime. Joey pioneers the idea of creating “microsummary” from web sites and sent it to your own mobile phone. WebClip2Go takes one step further and allows any user to create web clips for any site and shares it with the world.
If you are among the 6000+ technologists / entrepreneurs / designers attending this year’s SXSW conference (or are just interested in following what’s going on in the conference), check this out: The SXSW 2008 Mobile Companion (http://webclip2go.com/sxsw08) is a free mobile web application that lets you access everything about the South by Southwest conference right there on your mobile phone. Try it in a web-based iphone simulator (Safari and Firefox only). It works on iphone, Blackberry, Palm, Windows Mobile, Nokia, and just about any smartphone out there. The way it works is that it takes live content about the conferences from all over the web, and make the content suitable for display on small mobile phone browsers. Through the companion, you can check:
* Panel / presentation schedules by day
* Session abstracts
* Film / music performance schedules by day
* Official and unofficial conference news, blogs and wikis
* Blogs of conference speakers (full posts w/ comments)
* SXSW parties!
* Austin local news
* Music and film listings by venue in the Austin area
* and much more …
All you need is to load the following URL in your mobile phone browser. Or, if you do not want to type the URL, simply text the word sxsw08 to phone number 41411 to get a link returned in an SMS message (the SMS works in the US only!).
http://webclip2go.com/sxsw08 (Try web-based iphone simulator in your Safari or Firefox browser)
Why did I create it? Well, as a veteran technology conference speaker / attendee, I can tell you that conference WIFI is flaky at best in most big conferences. In fact, WIFI was the #1 problem in SXSW 2007. It is quite frustrating to take out your 8 lbs laptop just to find out that the WIFI is down or has no coverage in the Hall. Well, with the mobile companion, you can check out just about anything about the conference / speakers in real time on your phone. I personally would use it a lot. And I encourage you to try it out if you have an iphone / blackberry or other connected device. I plan to do the same for most other conferences I attend this year as well.
The technology behind the SXSW Mobile Companion is WebClip2Go. The goal was to let people clip live content from any existing web site / blog, so that those content can be viewed from mobile phones. It has become a hit among my friends — especially those with iphones, since the web content loads much faster and requires simpler navigation in WebClip2Go, compared with directly loading the original web site in iphone. Much still needs to be done to make WebClip2Go ready for the general Internet audience (e.g., we need a Firefox plugin that lets people “clip” web content via drag and drop). In any case, I will blog about WebClip2Go in a separate blog entry later this week. Stay tuned!
BTW, for my Seam readers, it might be comforting to know that the application is built on top of JBoss Seam technology.
Cool! Out of 4 sessions I submitted to JavaOne 2008, 2.5 are accepted! Given that JavaOne accepts less than 5% of all session proposals, this sounds like pretty good success rate. So, what exactly will I talk about in JavaOne?
First off, I will be giving a technical session on Building Interactive Mobile Messaging Applications. I will discuss how to build a SMS service like the Google SMS on a Java EE server. I think the information presented in the session will be useful for a large number of developers — for instance, for web application developers, it is often nice to have a “send to phone” button on your pages to send small pieces of information (e.g., alerts / reminders / links) to the user’s mobile phone. In the session, you will also learn how to make your application respond to requests from SMS (e.g., the user sends in a SMS to reschedule an appointment etc.). The session covers technologies used in such a solution, common design patterns / pitfalls, and third party players involved.
I will also run a BoF session on JBoss Seam: The Deep Integration Framework for Web Applications. I will try to dispel the notion that Seam is somehow a mere “web framework”. Yes, Seam is used in many web applications, but you can just use PHP or Ruby for a simple web site. The real value of Seam is to bring real Java enterprise infrastructure (e.g., business process engine, rules engine, asynchronous messaging infrastructure, advanced transaction services, scheduling service etc.) to the web application. That saves you from hard coding business workflow or rolling your own middleware frameworks in the web application. Come to the session and join the discussion!
Finally, they accepted my proposal on Developing Compelling Mobile Web Applications as a backup session — that is the 0.5 session here. This session covers mobile browser detection, multi-template based web site design, and special UI tricks for the iphone. From what I was told, there is a pretty good chance for backup sessions to be presented in the conference since some session presenters drop out at last minute for various reasons. We will see.
Hope to see y’all in JavaOne again this year!
New York Times had an article on The Risk of Innovation: Will Anyone Embrace It?. Overall, I think the article made some excellent points on how people embrace or resist innovations. It is a great read for people who try to sell new technology solutions to the general public.
However, I think the primary example used in the article was all wrong: The article talks about how the controls in Toyota Prius are un-intuitive (e.g., tap twice to start the car), and customers embrace the inconvenience anyway since Prius represents the kind of “green” innovation people want to be part of. Well, as a Prius owner, I can tell you that the “un-conventional” control is exactly what prompted me to buy a Prius. If I want conventional controls, I would have bought a Camery Hybrid or a Civic Hybrid — neither of those hybrids are sold nearly as hot as the Prius. Why?
The Prius has a rather large price premium over a comparable Corolla. Even with gas price at $3 per gallon, it still makes little economic sense to buy a Prius over a Corolla. The Prius is a “statement car” or a “fashion car”. People buy it for the same reason they pay extra for a low end luxury car. It is hence essential for Toyota to distinguish the Prius from the Corolla — to make people feel that they are driving a totally different car, not only in gas milage but also in “look and feel.” I think the “feel” of an “futuristic” car is what made a lot people forking over the extra cash.
The “usability barrier” here accelerates the adoption of innovation rather than impeding it. I think this is lesson we could also learn in designing a consumer mobile application.
Forbes.com ranked Austin TX the #3 best city for jobs in America for 2008. Of course, we all know that. It is kinda a tough for tech employers though — we have been trying to fill several Java / web positions for months. Almost every developer I know in town is gainfully employed.
In fact, according to the article, Texas in general is the best place to look for a job in 2008:
The Lone Star State shines brilliantly in a list of the best places to work in the U.S. when some economists peer into their crystal balls for 2008.
Austin, Fort Worth, Houston and San Antonio all rank high on the latest forecast data from Moody’s Economy.com. McAllen, Texas, is expected to have the highest job growth rate, as its leisure and hospitality, educational and health services and commercial construction jobs flourish.
Here is the detailed statistics for Austin. I noticed that Austin’s ranking is probably dragged down by its lower median income — that is very misleading since we have one of the nation’s largest public universities in town, and the students make very little income while they are still counted in the median. For people in the software field, Austin probably pays 10% less than San Francisco in raw salary but the cost of living is much much lower.
As a blog reader, one thing I’d love to do is to subscribe to my favorite blogs via SMS. And by “subscribing”, I do not mean simply getting an SMS alert telling me to “check it out on your PC”. I want the full post to be delivered to my phone — so that I can read it while I am driving (kidding!).
Well, thanks to the good folks at textmarks and mowser, I just did exactly that for my own wordpress blog (See how it works). As promised, I am releasing my little wordpress plugin here. Here is what you need to do to mobilize your blog:
1. Sign up for a free keyword at textmarks. This is the keyword people will text in to subscribe to your blog.
2. Request for a free API key from textmarks. This key is needed to broadcast SMS messages.
3. Get my plugin here, unzip it and drop the textmarks_alerts.php file in your wp-content/plugins directory, and then activate the plugin from your wordpress admin console.
4. Go to the Options –> Textmarks Options tab, and fill in your account and keyword information from textmarks. You will also need to fill in the root URL of your wordpress blog. You can choose to use Google or Moswer to adapt your blog pages for mobile screen viewing. Choose “none” if you already have Andy Moore’s wordpress mobile plugin installed. See more explanation on the plugin options page.
That’s it folks! Your readers can simply subscribe your blog by texting in your keyword to short number 41411. The subscribers will get a mobile web link for every new post from now on!
Okay, if all those sound too complicated but you still want to use the plugin. Send me $100 and I will take care of everything for ya.
cheers
Michael
PS. The scripts uses Binny V A’s free PHP load() function (from bin-co.com) to make make network connections. It is gets around the sometimes blocked file_get_content() call. Thanks Binny!
I recently had the pleasure to write an iphone application using JSF + Facelets + Seam. It is mostly a smooth experience but there are also some gotchas I'd like to share with the Seam community.
Okay, first things first, what is an "iphone application", you ask? The iphone SDK has not been released yet! Well, I am referring to a web application that simulates iphone's native look-and-feel via JavaScript and special Safari markups. In particular, I am using the iui library. It works great on an iphone (or even in a desktop browser -- try the official iui demo here)!
So, what are the issues using the iui library with JSF + Facelets + Seam?
The first and biggest issue is that iui and Safari expects the page to be in text/html while Facelets + Seam renders text/xhtml. For some obscure reason (a bug in Safari as Firefox does not display the same issue), this really messes up the navigation. To fix that, you can put the page content inside a pair of <f:view> tags to set the content type properly. Your page will look something like this:
Notice that the viewport meta data is very useful in iphone development. By default, iphone displays the "thumbnail view" of most web pages when the page is loaded. The words on the page are unreadable in the thumbnail mode. The user is expected to zoom in to read via finger gestures. That works for most large web pages designed for deskto browsers. But you do not want this if your site is optimized for the iphone -- you want the site to display as it is from start up. The viewport element allows you to specify the zooming behavior for this page.
The second issue is that when iui loads pages, it tries to load page fragments via Ajax to provide nice page transition visual effects, as well as nice navigation buttons. To do that some of your dynamic web pages must be provided without the <html> or <body> tags. The facelets <ui:composition> is ideal for this. Here is how one of my pages look like
When the user clicks a link to this page, the dynamically generated <ul> list will be rendered according to iui stylesheet, with all the bells and whistles of the "wait" animation and "sliding door" page transition in effect.
Anyway, aside from those two issues, developing for the iphone is really a breeze. What is the application I am writing? Well, you will know in a few days! Subscribe to this blog via SMS!
My little holiday project was to write a very simple wordpress plugin that allows people to get SMS notifications, along with "mobile web links", whenever a wordpress blog is updated. I just tried it on my own blog and it worked like a charm:
1. You can subscribe to my blog feed by entering your phone number below. Or, you can text in word yuan to short number 41411 to subscribe.
2. When I post a new blog entry, you will get a SMS message on your phone with a link to the post, which you can open directly on your phone's web browser (if you have a mobile data plan, as all iphone users, all blackberry users, and many smartphone users do)
That is it! Have fun guys! In the next post (probably on Monday), I will release the wordpress plugin and explain how to use it. Stay tuned! (Actually, subscribe now so that you do not miss my next post! )
Here is how the service works on a real phone:
1. Get a SMS link when the blog is updated
2. Open the link in the SMS
3. See the page in action on the phone!
Courtesy to Textmarks for providing the SMS services (including the short number 41411), and Mowser for providing transcoding services to re-format my blog pages for better display on small phone screens.
PS. This service only works on US phone numbers. Sorry guys, but if you find an equivalent to textmarks in Europe or Asia, please please let me know! Thanks.
Opera Mini 4 is a web browser for mobile phones. I have been using it for a couple of days now, and in terms of usability, Opera Mini beats the Webkit-based browser on my Nokia N80 -- It is a "desktop fidelity" browser that delivers "iphone-like" user experience. (Actually, the iphone browser itself is webkit-based too.) And the best of all: Opera Mini is a Java ME application (with a significant server side component). It is one of the most polished Java ME applications I had used.
A "desktop fidelity" browser renders web pages just as they are -- there is no attempt to "re-format" a wide web page into a single column (or into WML markup) for mobile display. Reformatting web pages to mobile often renders the page un-readable since the transcoder is not intelligent enough to distinguish important content from the noise (e.g., the ads and long navigation menus etc.) So, a "desktop fidelity" mobile browser first displays the entire width of a web page as a thumbnail on the screen. You can still scroll vertically as you would do in a desktop browser. Here is how the New York Times home page looks like in the Opera Mini 4 browser:
Notice that there is a small box that you can move around on the page. When you clicks on the keypad, the display zooms into the box and you can now view the page content, click on the links etc. Once roomed in, you can also scroll around to see the rest of the page, and/or zoom out to see the page overview.
Of course, the "zoom and view" idea itself is not new. The webkit browser shipped with my Nokia N80 can do this almost one year before the Apple iphone. What make the Opera Mini rock are the implementation details:
* Opera Mini 4 supports the landscape mode as you can see from the above screen shots. That is a huge plus for "zoom and view" browsing since it minimizes the "un-natural" horizontal scrolling when you are zoomed in.
* Opera Mini 4 is backed by a proxy server. When you request a web page, the proxy server goes out to fetch the page first, and it resizes all images before sending them to the phone. That not only makes those images display better on the phone screen, but also saves preciously bandwidth and reduces page load time.
* Opera Mini 4 runs CSS and JavaScript very well. Google ads, ajax data fields, complex CSS-based designs all show up very well in the browser. That is pretty crucial for accessing web 2.0 sites.
* Opera Mini 4 provides an intuitive and very configurable set of keypad shortcuts to access core features and your own bookmarks (it is called "speed dial"). Just dial *1 and watch your favorite web site come up. Very useful for the phone.
* Opera Mini 4 has a very good bookmaking system. You can easily go back and forward in your browsing history and bookmark any page you have accessed. You can even share bookmarks with your Opera browser on the PC.
* Opera Mini 4 provides the iphone-like "slide-out" visual effects when the web page changes. This is a small feature but makes the browser pleasant to use.
All in all, Opera Mini 4 is a very solid mobile browser. Its "desktop fidelity" browsing is a significant improvement over Opera Mini 3, which mostly reformat web pages to a single column mobile page. Having used many Java ME applications and wrote a couple of my own, I am very impressed by the quality of overall user experience delivered by Opera Mini 4. Try it out on your Java phone!
I just upgraded Google Mobile Maps application on my Nokia N80 to the latest v2.0. The biggest feature in v2.0 is that it can now automatically locate yourself on the map. If the phone has GPS (integrated or bluetooth-based), it will obviously use the GPS location data. But if the phone does not have GPS, or if the GPS signal is not available (e.g., inside a building), it can figure out your appropriate location via the ID of the cell tower nearby. I tried out the GPS-less location from my house and my office:
The the green arrow is my house and the blue dot is the location Google gave when I am in the house. The blue circle is the estimated location uncertainty provided by Google. The radius of the circle is around one mile. As you can see the actual location is well within the uncertainty.
Here is a closeup.
This is the result from my office. The building in the middle of parking lot is my office where I ran the test.
The location is not super accurate, and it is certainly not goo enough for driving directions. But for everything else (e.g., search for businesses around you, quickly load maps around you etc), it is more than sufficient.