Archive: Mobile

Recently I set out to find a more robust way of synchronizing my Google Calendars to my iPhone, thankfully I found one.

To date I have been using the Google Calendar to iCal sync tool “Calaboration“. In terms of functionality it’s great. My Google Calendars sync seamlessly with my local iCal program and once I plug in my iPhone in the calendars update. Perfect – right?

Notice: iPhone development will be one of the many topics covered at The Future of Web Apps London 1-2 October 2009.
(more…)

If you’re a web developer or designer, there’s a really exciting development happening right now called ‘mobile widgets’. Carsonified is working with Betavine to spread the word about mobile widgets, so we recently spent four days building one in order to see how hard or easy they are to build. The result was Twiggy, a Twitter search widget, and today we’re going to talk about how we built it.

So what is a mobile widget?

A mobile widget is a simple web app that’s built with open web technology like HTML, CSS and JavaScript (we used jQuery). You don’t have to write a line of Java or any proprietary code and you don’t have to understand anything about ‘mobile development’. The files are packaged up into a zip file and downloaded to the phone. The device installs the widget locally, and then it can talk to the web. Widgets can currently run on Nokia S60 phones (currently 1M+ and growing).

Widgets have access to a permanent storage facility for settings and downloaded data. This mechanism is similar to cookies, but the storage capacity is larger and does not automatically expire after a given time.

Why are they a good idea?

We think mobile widgets are a really good idea because they allow you to reach a huge non-iPhone audience. Don’t get me wrong, everyone at Carsonified has iPhones and we love The Steve, but we’re not ‘normal’ and as web designers and developers, we have to consider there are a heck of a lot of people out there who would really benefit from useful widgets that ran on their phones. (They also run on Opera.)

Also, you can easily port mobile widgets to iPhone with a few simple tweaks. Here’s the version of Twiggy that works on an iPhone.

Here’s a quick video to show widgets in action, on a Nokia N96:

Cold hard cash

To encourage people to try building mobile widgets, Betavine are running a competition with a prize of £20,000. There’s no obligation to Betavine, you keep the IP to the code and they promote the widget to Vodafone customers, so it’s a pretty nifty deal.

What’s in a widget?

As I mentioned above, a widget is built with HTML, CSS and JavaScript and packaged as a regular zip file, renamed to use the extension .wgt.

Here’s what’s in the zip:

1. A widget configuration file. This is an XML file in the root of the widget structure that holds information about your widget including its size, name, author, and security information.
2. An index document. Like on a web page, this document contains the basic skeleton/content of the widget. Widgets content can be created using any markup that browsers handle natively, for example HTML, SVG, or XML files. This file also lives in the root of the widget structure.
3. Images. These are contained in a single images folder.
4. JavaScript files. These are contained in a single script folder.
5. Stylesheets. These are contained in a single style folder.

I’m going to hand it over to Elliott Kember, who built Twiggy, to go into detail about how Twiggy was built, and what hurdles we had to overcome. Over to you bud …

Mobile widget tutorial

Thanks, Ryan!

Hey everyone, I’m Elliott and I built Twiggy. I’m going to take you through a brief walk-through of how to build a widget.

First, you’ll need a directory. In that directory, make an “index.html” file, a “style.css” file, a “scripts” directory, and an “images” directory. You can structure your files any way you feel most comfortable with. If you want to split your CSS files up by contents later on, that’s fine.

Now, in your HTML file, put some content. For our widget, we’re using this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Twiggy</title>
    <!-- This is for the Opera Widget Emulator. -->
    <script type="text/javascript">if(window.parent&&
    parent.emulator)parent.emulator.begin(window)</script>
    <link rel="stylesheet" href="style.css">
   </head>
   <body>
  </body>
</html>

You can open it in a browser, and see what it looks like (it should be blank). Now, get a copy of jQuery and put it in your “scripts” directory, and add a line like this to your to include it.

<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>

Write all your application’s javascript in an “actions.js” file, which goes in your /scripts folder. Add it like this:

<script type="text/javascript" src="scripts/actions.js"></script>

If you want to use any other jQuery plugins, drop them in the /scripts folder and include them as normal:

<script type="text/javascript" src="scripts/plugin.jquery.js"></script>

Now, add these lines to your <head>, just in case you ever want to look at the page on your iPhone:

<meta name="viewport" content="initial-scale=1,
maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" />
<meta name="viewport" content="width=device-width;
initial-scale=1.2; maximum-scale=1.2; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style"
content="black-translucent" />

They tell the iPhone how to render the page, what level of zoom to use, and basically tell it to treat the page like a web-app.

In your <body>, insert the following divs:

<div id="home" class="panel">
  <form id="main-search" class="panel" action="#">
    <label for="search">What is your name?</label>
    <input id="search" />
    <input type="submit" id="bigsubmit" value="Go!"/>
  </form>
</div>
<div id="results" class="panel">
  <!-- result goes in here -->
</div>

Inside the body, we’ve put two divs with class “panel”. These are different pages of our application, and only one will show at a time. When we submit the form on the “home” panel, we want the home panel to hide, and the “results” panel to show.

The JavaScript

Now for some actions.js Javascript code:

var search = function(text){
  text = "Hello, "+text+"!";
  $('#home').hide();
  $('#results').text(text);
  $('.panel#results').fadeIn('fast');
  return false;
};

$('document').ready(function(){
  $('#search').focus();
  $('#results').hide();
  $('#main-search').submit(function(){
    value = $('#search').val();
    search(value);
  });
});

Rad! We’ve got ourselves a widget.

Making it look pretty

Now let’s add some style:

*{outline: none !important;}
input::-moz-focus-inner { border: 0 !important; }

html, body {
  padding: 0;
  margin: 0;
}

body {
  display: block;
  width: 100%;
  font-family: verdana;
  background: #007FC0;
  text-align: center;
  color: white;
}

#home.panel {
  padding: 20px 0;
  display: block;
}

#results.panel {
  background: #ff00ff;
}

#search {
  margin-top: 10px;
  padding: 4px;
  border: 1px solid #ff00ff;
  font-size: 13px;
}

And we’ve got the beginnings of a widget.

The configuration

Now, all you have to do is add a config.xml file, which looks like this:

<?xml version='1.0' encoding='UTF-8'?>
<widget dockable="yes">
  <widgetname>My Awesome Application</widgetname>
  <description>It asks you your name, and says hi!</description>
  <icon src="icon_64.png" />
  <width>240</width>
  <height>320</height>
  <author>
    <name>John Q. Developer</name>
  </author>
  <id>
    <name>My Awesome Application</name>
    <revised>2009-04-08</revised>
  </id>
</widget>

And you’ve got it. Feel free to open that in Opera just to test it out.

Searching Twitter

Now, if you want to search Twitter, include the plugin from tweet.seaofclouds.com after your jquery javascript file:

<script type="text/javascript" src="scripts/jquery.tweet.js"></script>

While you’re there, change your label to:

<label for="search">What are you looking for?</label>

Change your actions.js file to:

var search = function(text){
  $('#home').hide();
  $('#results').fadeIn('fast');
  $("#results").tweet({
              query: text,
              join_text: "auto",
              avatar_size: 32,
              count: 10,
              loading_text: "loading tweets...",
              auto_join_text_reply: '', auto_join_text_default:
              "", auto_join_text_ed: "",
              auto_join_text_ing: "", auto_join_text_reply:
              "", auto_join_text_url: "",
  });
  return false;
};

$('document').ready(function(){
  $('#search').focus();
  $('#results').hide();
  $('#main-search').submit(function(){
    value = $('#search').val();
    search(value);
    return false;
  });
});

And add this to your CSS:

#results { float: left; display: block; width: 100%; }
ul { margin: 0; padding :0; }

li {
  list-style-type: none;
  text-align: left;
  background: white;
  color: #333;
  line-height: 1.5;
  border-top: 1px solid #007FC0;
  float: left;
  display: block;
  padding: 5px 0;
  font-size: 12px;
  width: 100%;
}

li img {
  float: left;
  display: block;
  margin: 5px 8px 5px 5px ;
}

And you’re done! Zip everything in that folder up into a file called “search.wgt” (zip -r search.wgt *) and put it on your phone via USB cable. When you run it, it’ll run as a widget.

Testing with an emulator

Go get the widget emulator and try it. It should look like this:

The good, the bad and the ugly

This is a cool experiment, because you now have a site that will work in just about anything. The iPhone will handle it, it’ll work as a dashboard slice, browsers like it, and it can be run as a widget. We’ve tried to port it to a PhoneGap app for the iPhone, but no success yet.

There’s really not too much to watch out for. You do, however, have to be careful with your 100% width layouts so that the application doesn’t scroll horizontally.

Here are some other gotchas:

• Auto-focus input fields wherever logical. Nobody likes using that !$?*! joystick mouse.
• Hover effects are important. Make buttons obvious, because getting to them is a nightmare.
• Make sure the phone has your typeface, and renders it nicely. I got caught out with italics.
• Don’t resize images with HTML – although this is pretty good advice anyway. The phone does it wrong, and it looks horrible.
• Even if you think you’re only bundling this on the phones, use CSS sprites – because once you’re done, you have a web app waiting to happen, and waiting for your button images to load on hover is lame.
• There’s no keypress-type event handling, which is a damn shame if you’re making a game. Poll instead.
• Remember, the phone is fast, but not as fast as your computer is. Neither is the network connection, so be thrifty.

Data storage for widgets

Storing stuff on the phone is done through some Javascript API calls. You don’t have access to anything juicy yet, but you can store and retrieve strings, using the widget.getPreferenceForKey() and widget.setPreference() methods. To be clever, include the jQuery Cookie plugin and do this:

var get_key = function(key){
  if (typeof(widget) != 'undefined'){ // A phone!
    return widget.preferenceForKey(key);
  }else{ // It's a browser!
    return $.cookie(key);
  }
}

var set_key = function(value, key){
  if (typeof(widget) != 'undefined'){
    return widget.setPreferenceForKey(value, key)
  }else{
    return($.cookie(key, value));
  }
}

This way, you can set and get keys without worrying about whether you’re saving to a cookie, or to the phone. Happy hunting!

Elliott is a freelance developer who lives in Bath, and used to work for Carsonified. He writes CSS, uses Rails and is generally available. He also likes long walks on the beach and candle-lit dinners. You can find him at @elliottkember or elliottkember.com.

At 280 North we’ve been working on a framework called Cappuccino for creating what we like to call desktop class applications. These are not your average web sites, but instead a new breed of web application that aims to replace many of the programs that currently run on your desktop. When we launched 280 Slides, the first application built on this framework, many people were surprised to see just what was possible in the browser. Since then, Cappuccino has been steadily progressing with over 40,000 downloads and code contributions from twenty-one individuals.

The goal of Cappuccino has always been to make it as simple as possible to build high quality applications in the browser, and up until now we’ve worked on providing built-in behavior for enabling such tasks as autosaving, undo/redo, and copy/paste. But recently we’ve been focusing on an entirely new product: Atlas. Atlas is a new IDE and visual layout editor that leverages the power of Cappuccino, but drastically reduces the amount of work required for creating a truly rich application experience on the web.

WYSIWYG

With Atlas you can build and style your entire interface using drag and drop. By default we provide you with a large library of built in widgets along with the new Aristo open source theme, meaning your application will look fantastic with no additional work. However, you can also skin these applications entirely from the editor and extend the library of widgets with Atlas’ plugin architecture. And unlike a lot of existing layout editor availabe today, Atlas is not a code generator. On the contrary, Atlas lets you edit the live JavaScript objects in memory and then takes a “snapshot” of them in place. When your application runs, it ‘thaws’ these objects out, making sure that you see exactly how your application will look before you run it.

Layout that Makes Sense

Atlas provides a new take on web layout that make it easy to define precisely the behavior you want, while simultaneously doing away with existing browser inconsistencies. Instead of having to learn the variety of different ways to position and resize elements in the browser, Atlas introduces the simple concept of ‘anchors and springs’. Anchoring an interface element to one of the edges around it ensures that it will stay “stuck” there when it’s container resizes. Activating the internal ’springs’ causes it to resize with its container.

While simple to learn, these two tools enable you to create incredibly complex and fluid layouts. More importantly, they’re guaranteed to behave the same way regardless of the browser you’re running your web app in. Atlas also provides a large selection of collection views to handle common layout tasks such as split views, table views, and scroll views.

Connections Reduce Glue Code

A common problem that has plagued layout editors in the past is the need for additional glue code to “talk” to the generated interface. In Atlas, much of this work can be done with a technology called ‘connections’. Connections allow you to visually define the interactions between interface elements and other objects. For example, you can define what action a slider should take when it is dragged:

Similarly, you can ‘bind’ the contents of an array to a table, so that when it changes the table automatically updates as well, all without having to ever touch the keyboard:

Model View Controller Built-In

Cappuccino is a Model-View-Controller framework, and Atlas takes this idea to the next level by allowing you to not only create visual elements, but abstract models and controllers as well. By allowing you to interact directly with the objects in your program visually, you can focus on building unique interactions instead of learning a myriad of APIs.

Atlas has gone a step further and provided a number of pre-built controllers to existing web services that you can simply drop in to their applications. You can then simply use connections to grab information from services like RSS and Twitter. Once again, Atlas’ plugin architecture allows you to create controllers for your own web services as well, which you can then share with others.

Multi-Platform Support

Cappuccino was built from the ground up in preparation for a world of multiple platforms. It is becoming increasingly important for applications to run in several different environments: browsers, social networks, handheld devices, and much more. In general, very little application logic or backend code has to change from platform to platform, but the interface usually needs to be recreated from scratch.

With Atlas, it is drop dead simple to create a unique and custom interface for different platforms like the web browser and the iPhone. Cappuccino will then intelligently load the correct interface for your application depending on the environment it is being run on, allowing you to reduce the amount of code you need to rewrite and as well as using just one language and API for all the platforms you deploy on. We call this idea ‘Write once, layout everywhere’, and we feel it is the right way to gaurantee a high quality experience everywhere you ship your application.

View full size

View full size

Atlas will be shipping this summer and you can sign up for email updates at 280atlas.com.

[Photo credit: flickr.com/photos/atelier_tee]