Developing native applications for mobile devices is expensive, especially when considering that at least two (iPhone, Android) if not more (BlackBerry, Windows Phone 7, Palm WebOS, Nokia Maemo, Samsung Bada) versions have to be created. Sounds like a mobile Web Application, i.e. a Web site that is optimized for viewing on the iPhone, Android, etc., is an easy, inexpensive, and quick way to avoid costly mobile application development. Moreover, on the Desktop, the Rich-Client-Application versus Web-Application debate was decisively won long ago, by AJAX powered WebApps like gmail.com, mint.com, etc

It’s the Mobile User, stupid

What is it with these mobile phone users, why aren’t they getting the message that web-apps are cool and native-apps are a lame remembrance of the past?

The mobile experience is still hampered by an unreliable and often slow cell-network, which at times (inside Airplanes, geographic location / coverage map) may not be available at all. Even more importantly, size, performance, battery-life, and  data-input capabilities, significantly influence the usability of a mobile device. And much more than on the Desktop, Privacy, Data-transfer Costs, and Power-consumption are always on the mind of the mobile user.

What’s not good enough needs to be optimized; and only what’s already good enough can be disintegrated and modularized

Web applications have come a long way and (at least on fast Laptop and Desktop machines) Web browsers perform stunningly. Web applications have been disintegrated, following the principal of separation of concerns. I.e. the content it stored in HTML document, the presentation is defined in CSS cascading style sheets, and the interaction and validation behavior is defined in JavaScript files. All these kinds of documents are downloaded and interpreted by the Web browser at runtime. Additionally AJAX with the information being encoded in JSON or XML before transfer, allows the Web browser application to communicate with the Web server at will.

All this works beautifully on the Desktop, with a fast multi gigahertz processor and multi megabits per second constant Internet connection. However, mobile users prefer a different approach, one that is optimized instead of prematurely disintegrated.

A mobile application once installed is immediately available. Like the gmail application or the usatoday application for instance, it may have cached information from the last session i.e. it is useful even before connecting to the server. Since connectivity must still be considered unreliable and not constantly available, the mobile experience gains greatly from information caching. Providing a useful experience without requiring a constant connection to the server also address two other concerns: data-transfer cost and power-consumption.

User Interaction

The User Experience however has to be optimized above all other concerns. Given the still cumbersome data entry procedure (gestures, keyboard, virtual keypad, voice recognition), mobile users need to be empowered to get to their information destination with as little input / interaction as possible.

Content versus Service

When on a Desktop, users perceive the Web as source for content, when using a mobile phone, the Web becomes the source for services.

Only native mobile application have full access to the inherent features of the mobile device, features important enough that the user chose that particular device over any other. That alone however doesn’t explain why users, if given a choice, overwhelmingly prefer applications over web-apps

Moreover, recently some great solution for Web developers (like PhoneGap) became available, to Web-enable native device functionality with HTML, CSS and JavaScript,

Still, native application can address the mobile user’s concerns as well as the shortcoming of the mobile experience much better than mobile web applications. Native applications are (much) more expensive to build but you are giving your mobile users what you paid for.

Every couple of years my personal web presence gets a major overhaul. This time it took a little longer, meaning wolfpaulus.com had the same look and feel for quite some time now and I had to use WayBack machine at http://web.archive.org/ to find out for how long …

This time to focus of the upgrade was mainly to make content creation and syndication easier but it also resulted in what I think is great look and feel. If you happen to read this in an RSS feed reader, I encourage you to go to http://wolfpaulus.com and take look.

Content Creation

Until now, I had rolled my own PHP driven content management and syndication system; a simple file based system that was looking for some proprietary tags in the text content. Building your own system certainly has a lot of advantages and I also learned a lot developing and running it. However, eventually I spent too much time in the PHP, time I would rather use to add content to this site.

Looking at all the available options, I ended up with WordPress. Instead of going directly to http://wordpress.com/, I’m running WordPress 3.0 at Arvixe, my web hosting provider, giving my at least the sense of being in control.

Using WordPress opens the door to a multitude of tools, supporting writing, editing, publishing, and syndicating.

Look and Feel

Some time back, all WordPress based sites looked pretty much the same. Not anymore, ever since professional theme creators got into the business of selling WordPress Themes, sites became more distinguishable and way more attractive.

Content Features

All the relevant content has been transferred over from the file based system into WordPress. However, all Permalinks changed. Recently added QR Codes are also available on the new site as is a great printing feature, allowing not only to conveniently print and preview but also to tweet, email, and convert into PDF.

I don’t know yet how useful the the display of recent tweets and the TagClout really are, but it certainly looks cool.

Browsing wolfpaulus.com with a Droid

Mobile Clients get special treatment

For the best possible experience, when visiting the site with a mobile client, like your Android or iPhone, a specially tailored Theme is used, showing content beautifully. It scales images, captions and videos automatically. Breaks up content with ‘Load More’ links that use ajax to make browsing snappy. However, there is also an easy way to get to the regularly formatted site, when visiting with your

Feedback

WordPress also has a great and easy to use feedback system and there are plugins that filter out spam automatically.

So if you like the new site and even if you don’t, why not leave a brief reply below.

Virtual Private Network

Being born and raised in Germany, most of my extended family lives over there and even after all these years, a simple phone call easily reconnects me with family and friends. Almost like a secret handshake, dialing a number and hearing each others voice makes me part of their networkover there.

With a little bit of work, the same can be had for your computer. Even if you travel, being away from home for an extended period of time, your computer can still be made part of your home-network, with just a click of a button …

I cannot believe that it’s really that long ago, but back in March 2008, I wrote about how to Protect your online privacy when on the road by using your Home Router as a Secure Socket Proxy. This is still very relevant and works just like I had written then, but using an ssh tunnel falls short when you want to turn the remote machine into an equal member of your home network; for this we need a Virtual Private Network.

General

1. Enter a name for your connection.
2. Enter the IP address or preferably the name of your router (DynDns to the rescue, if you don’t have a static IP).
3. Enter a valid port number, like 1195
4. Select udp as the protocol
5. Select tab as the interface type.
6. Select the Enable DHCP option.
7. Select the Enable DNS support option.

Certificates

1. Select Static Key as the type.
2. Navigate to the static.key file, you created earlier. Viscosity will copy its content and keep it in ~/Library/Application Support/Viscosity/OpenVPN.
3. Select Default for direction.

Options

1. Only have these options checked:
2. Persist Tun
3. Persist Key
4. Use LZO Compression
5. No Bind

Networking

1. Check Send all traffic over VPN connection.
2. Enter your router’s internal IP address, something like 192.168.1.1
3. Leave everything else empty

Leave Proxy and Advanced settings empty and move along to the router side of things:

Router-Side

Installing TomatoVPN on your router works just like upgrading any router software and if you are already familiar with Tomato, the only difference you will notice is the newly added menu-item on the lefthand side: VPN Tunneling, which allows setting up the router as a VPN client and/or server. Obviously, we are more interested in the server part here, which has 4 tabs: Basic, Advanced, Keys, and Status.

Basic

1. Check the Start with Router option.
2. Select TAB as the interface type.
3. Select UDP as the protocol
4. Enter a valid port number, like 1195 (same you were using when setting up the client software)
5. Select Automatic as the firewall setting.
6. Select Static Key as the authorization mode
7. Save your configuration.

Advanced

1. Select the Respond to DNS option.
2. Select Use Default for encryption cipher.
3. Select Adaptive for compression.
4. Leave the custom configuration field empty.
5. Save your configuration.

Keys

1. Copy the content form the earlier create static.key file into the Static Key field.
2. Save your configuration.

It’s finally time to hit the Start Now button.

Now with the router listening for VPN requests on port 1195, everything is ready to go and the next time you’re away from home, start Viscosity and select Connect after clicking on the new icon that just appeared in your menu bar. Also, select Details.. to find out what’s going on. Select the log icon in the dialog window for debugging.

Helpful Information Elsewhere

• Tomato Router Firmware
• TomatoVPN
• Advanced OS X: Surf a Secure Tunnel via SSH
• How to Setup Openvpn in Tomato
• OpenSSH
• OpenVPN Mini Howto
• Viscosity

TiffanyScreens is a presentation tool that continuously captures the content of the presenter’s screen and sends it to multiple other computers at the same time. Best of all, any computer can seamlessly become the presenting computer, no matter if connected wirelessly or through an Ethernet cable.

The User Interface has been refined and many new features like password protected screen-sharing or refresh-rate regulation have recently been introduced to and tested by TiffanyScreens’ loyal user base. Most importantly however, TiffanyScreens 3.0 got faster – a lot faster. When installed on Apple’s new OS X 10.6 Snow Leopard for instance, TiffanyScreens makes full use of the underlaying 64-bit technology and becomes screaming fast but even on OS X 10.5 or Windows XP, the performance improvement are very much noticeable.
TiffanyScreens 1.x and 2.x licenses continue to work with TiffanyScreens 3.0.

It’s Code Camp time again in Southern California and lots of Coders, Programers, Engineers, Geeks, and Hackers will meet at the California State University Fullerton this coming Saturday and Sunday, January 24 and 25.
Code Camp is a community driven event for developers of all platforms, programming languages and disciplines – well that’s the idea at least. Looking at the session table, one cannot shake the feeling that .net, asp.net, Azure and Silverlight seem a little over represented – but there are also a couple platform independent, embedded, and Java specific talks scheduled as well.
My sessions: Turning a WiFi Router into a general-purpose Network Device and Java UI Generation at Runtime with SwiXML have been scheduled to take place on Saturday, before dinner. I hope to see you Saturday afternoon at the CSFU Campus in H-123 … when you Twitter about the event, please use #SoCalCodeCamp in your tweet so we can track.

Turning a WiFi Router into a general-purpose Network Device

CSFU Campus, H 123, Sat. 01/24/2009, 3:45 – 5:00 PM

Embedded systems are increasingly present in our life and quite a few of them can be repurposed (a.k.a. hacked), to make them even more useful.
The purpose of this session is to have fun and give you some inside of what’s involved in turning a $30 wireless router into a general purpose embedded network device, running the LINUX OS and a full featured Java Runtime environment.
We will take a closer look at some popular Router OS distributions, like OpenWrt, DD-WRT, FreeWRT, Tomato, or X-Wrt and show how to flash the Fonera (FON) WiFi router with a vanilla OpenWrt distribution. The FON is a very small, relatively simple, and inexpensive router, built on the AR531x/231x Atheros WiSoC (Wireless System-on-a-Chip) with an integrated 32-bit MIPS R4000-class processor running at 183.5 MHz, comes with 8 Mbytes Flash Memory and 16 MByte RAM. In short, it has all the attributes required to be added our digital playground.

Embedded OS Development / Kernel Architecture, Implementation and port for Embedded Systems
OpenWrt is a Linux distribution optimized especially for embedded devices and surprisingly, the OpenWrt kernel configuration is done with the help of a character based UI. OpenWrt also comes with a lightweight package management system (IPKG or more recently OPKG), meaning that features that have not already been built into the kernel, can be added later, at runtime. As an example, we will take a look at how a JavaVM could be built, packaged, and deployed, or built directly into the kernel.

Java UI Generation at Runtime with SwiXML

CSFU Campus, H 123, Sat. 01/24/2009, 2:30 – 3:45 AM

SwiXML is a small GUI generating engine for Java applications and applets. Graphical User Interfaces are described in XML documents that are parsed at runtime and rendered into javax.swing objects. Theoretically, you can look at SwiXML as an XML based domain-specific language, allowing to declare Java Swing GUIs. The SwiXML engine will then later at runtime, take a GUI declaration and create that User-Interface on the fly, just like a Web Browser would do with an HTML document.
SwiXML doesn’t introduce any new layout managers or component classes. Instead, it operates directly on the Swing component classes using introspection.

QR Codes (Quick Response Codes) are two dimensional bar codes, developed back in 1994 by Denso-Wave, and are currently very popular in Japan, mostly used for marketing.
With more mobile phones are now equipped with a reasonably good digital camera, QR Codes are used for storing addresses and URLs (known as mobile tagging), allowing mobile phone users to easily and virtually error free bookmark and/or launch URLs in a mobile browser.

While probably more for fun than actually usefulness, this blog now contains QR Codes at the end of every blog entry – well, in the printed version, there may really be a good use-case for including a QR-Code. Anyway, there are a couple of ways how to dynamically generate the QR Code images on the fly.

• Y.Swetake for instance makes Perl, CGI, and PHP scripts available that can be deployed on a Web Server.
• Even easier, Google’s Chart API can be used on a dynamic site, to create QR-Codes on the fly without having to install any additional libraries, see example below.

Generating QR Codes dynamically on the fly, using Google’s Chart API

function getGoogleQR($url,$size ='150',$EC_level='L',$margin='0') {
$url = urlencode($url);
$gapi= 'http://chart.apis.google.com/chart';
return '<img src=".'$gapi'.?chs='.$size.'x'.$size.'&cht=qr&chld='.$EC_level.'|'.$margin.'&chl='.$url.'" alt="QR-Code" width="'.$size.'" height="'.$size.'"/>';
}


Give it a try, there are lots of sites allowing you to generate QR-Codes on the Web. Here is just one: KAYWA QR-Code Generator. A QR Code Decoder, converting an image back to the original test string can be found at http://www.drhu.org/QRCode/QRDecoder.php
Btw, ALT-based NeoMedia Technologies’ free iPhone application NeoReader performs beautifully, encoding QR codes and launching URLs in Mobile Safari.