Skip to content

Vodafone Mobile Clicks Open to Spanish Entrants

August 11, 2010

Hola todos! Vodafone’s Mobile Clicks competition is now well underway with registration open until August the 22nd. For those of you who are unaware, the aim is to find the best mobile internet startup from participating countries, with entrants competing for a total prize fund worth 150,000 euros! The winners from each country are invited to the PICNIC event in Amsterdam in September where the overall winner and runner up will be selected.

After last year’s success in the Netherlands and United Kingdom, the competition has been extended to include Portugal. Now seeing the interest generated among the rest of Europe, Vodafone are delighted to announce that they will also be opening Clicks to Spain! This means a whole new wave of talent will be joining us so don’t miss out.

If you would like to know more about the competition or how to sign up then head over to vodafonemobileclicks.com and don’t forget to check out Mobile Monday’s blog post too. You can also follow the action through Twitter using the tag #vmc2010.

Advertisements

Building Scalable Mobile Widgets – With Examples

July 29, 2010

This is the first in a series of posts that will attempt to address building mobile widgets that will scale properly between multiple devices. We will look at how we can deal with multiple screen resolutions, varying screen PPI (pixel per inch) densities, as well as gracefully switching between portrait and landscape modes.

This article is going to build on the concepts that were introduced in the “How to really cope with varying screen sizes and pixel resolutions in Vodafone Widgets”. Here we will actually build a sample widget that scales dynamically.

This post is going to set the stage by addressing the layout issue. Future posts will dive into more advanced topics and customizations.

The Goal

Our goal is to create a widget that will scale properly, no matter what mobile device it’s loaded on. Here are our objectives:

  • Allow for dynamic resizing when switching between portrait and landscape modes
  • Render properly on different screen sizes
  • Render properly on screen sizes with different PPI (Pixel Per Inch) densities (using CSS media queries)

It is said that a picture is worth a thousand words. Here are two mocks showing our end result in both portrait and landscape modes.

Portrait mock:

landscape mock

Landscape mock:

landscape mock

The Markup

Since this article is meant for developers, let’s just jump into the markup. Since we’re building a basic widget here, a foundation if you would, the markup is quite simple and self explanatory.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Header Footer Sample Layout Widget</title>
        <link rel="stylesheet" type="text/css" href="css/layout.css"/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    </head>
    <body>

    <div id="layout">
        <div class="header">
            <div class="header-left">
                <button class="button">home</button>
            </div>
            <div class="header-right">
                <button class="button">options</button>
            </div>
        </div>

        <div id="containerWrapper">
            <div id="container">
                Your content goes here...<br/><br/>
                And will grow vertically (with scrolling) as needed.
            </div>
        </div>

        <div class="footer">
            <div class="footer-text">
                Footer Options
            </div>
        </div>

    </div>

    </body>
</html>

The CSS

Below is the CSS we’ve used to get this layout. Notice the use of media queries to deal with various screen PPI densities.

/* resets and font sizing */
html, body{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
}

body {
    background-color: #FFFFFF;
    font-size: 1em;
}

@media all and (min-resolution: 50dpi) {
    body {
        font-size: 0.88em;
    }
}

/* Added Media-Query support for Low resolution Nokia (I.E N95,E65…) */
@media all and (min-resolution: 96dpi) {
    /* Here you can specify your own classes and attributes */
    body {
        font-size: 1.0em;
    }
}

@media all and (min-resolution: 145dpi) {
    body {
        font-size: 1.13em;
    }
}

/* Added Media-Query support for Medium resolution Nokia (I.E N97,Nokia 5800…) */
@media all and (min-resolution: 200dpi) {
    body {
        font-size: 1.25em;
    }
}

/* includes Nexus One (JIL reports ~240dpi vs 252 to spec) */
@media all and (min-resolution: 240dpi) {
    body {
        font-size: 1.5em;
    }
}

/* Main Layout */
#layout{
    background-color: #FFFFFF;
    color: #000000;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#container{
    padding: 1em;
    text-align: center;
    background-color: #FFFFFF;
}

#containerWrapper{
    height: 76%;
    background-color: #DDDDDD;
    overflow: auto;
}

/* Header */
.header{
    background-color: #444444;
    color: #FFFFFF;
    height: 12%;
    position: relative;
    display: table;
    width: 100%;
}

.header-left{
    height: 100%;
    margin-left: 3em;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.header-right{
    height: 100%;
    margin-right: 3em;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.button {
    width: 5em;
}

/* Footer */
.footer{
    background-color: #444444;
    color: #FFFFFF;
    height: 12%;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: table;
}

.footer-text{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

Notice that we have set the header and footer sections to be 12% of the total available height. We did this so that we can maintain as much space for content when switching between portrait and landscape modes. You can also define the height in pixels so that you’ll always have fixed height. The choice is yours 🙂

The Results

So what does it actually look like? We use the Ripple Mobile Environment Emulator (FREE for use while in beta) for most of our testing, so here are a couple of screen shots showing off our dynamic widget in portrait and landscape modes.

Now we must also always test on real devices. Here are a couple of screen shots of our widget loaded on different phones using the Perfecto Mobile service. Access the Perfecto Mobile service for FREE, details here in the testing section.

perfect screen shot

Resources

If you’d like to get the full source code for this widgets, we invite you to visit the open source repository.

Repo: http://github.com/tinyhippos/MobileWidgets

The sample widget: http://github.com/tinyhippos/MobileWidgets/tree/master/sampleWidgets/HeaderFooterLayout/

Stay tuned for more posts in this series where we will get into more advanced topics. We will continue to enhance this widget with features like route based navigation, using the Accelerometer, GPS, as well as explore other parts of the JIL API .

Happy coding!

Dan Silivestru – CTO at http://tinyhippos.com

Wholesale Applications Community Accelerates Delivery of Open Applications Platform

July 27, 2010

The Wholesale Applications Community (WAC), an alliance of telecommunications companies committed to building an open applications platform, today announced its formation as a corporate entity, as well as the organisation’s leadership and board of directors. The company also announced that it will join forces with the Joint Innovation Lab (JIL), accelerating the commercial launch of WAC-enabled application stores.

At launch, WAC will allow operators to distribute applications through their respective application storefronts and charge users through their existing phone bill.  In this model, developers will set the application price and will receive a revenue share for the transaction. The revenue share will be defined on an operator-by-operator basis. This will ensure that revenue shares will be competitive in today’s application market. WAC is a not-for-profit organisation and will receive a small transaction fee for each application to cover its operating costs.

In the future, WAC will offer business models that enable additional purchases from within an application; leverage network capabilities, such as location, to enhance an application; and facilitate the serving of advertisements to end users.

WAC Specification and SDK Available in November

WAC will publish its initial specification and components of its SDK to developers in November. This specification will be based on W3C standards. WAC will also provide backwards compatibility for devices based upon the current JIL and BONDI specifications. Details of the developer roadmap and a preview of the WAC specifications will be available in September.

Developers currently creating JIL applications can continue working with the existing JIL specification, tools and software libraries and these applications can be deployed on JIL based devices immediately.  With the publication of the WAC specification, developers will also have a clear path to deploy applications on a wider range of devices supporting the WAC specification in 2011.

You can read the full press release here.

You can find out more about WAC here.

Vodafone Mobile Clicks 2010

July 27, 2010

Vodafone launches Mobile Clicks 2010, an international contest to find the best mobile internet startups. After last year’s success in the Netherlands and United Kingdom, this year’s event will also be open to startups from Portugal. The best entrants from each country in the competition will compete for a total prize fund of 150,000 Euros! Finalists from each country will go to the PICNIC event in Amsterdam, September 24th, where the winner and runner up will be selected.

Registration for this contest will start on July 27th, 2010 and end at midnight on August 22nd, 2010. Find out more here www.vodafonemobileclicks.com and follow the news via the Twitter tag #vmc2010.

Vodafone Dev Days – Spain event review

July 26, 2010

Earlier this month we ran the first in a series of Vodafone “Dev Days” events in Madrid, Spain. Luckily the event coincided with Spain winning the world cup and the return of the team to Madrid, so we had a room full of very happy developers.

The event was run over two days, with presentations covering an Introduction to Widgets, W3C Specs, Developing with JIL, Publishing, Passing QA and marketing your apps. You can view the presentations here,  and see more pictures from the event here.

During the event I managed to catch up with a couple of the presenters. Firstly with Charles McCathieNevile from Opera who presented a session on W3C specs, see the video below,

And then Nikolai Onken from Uxebu, who presented a session on cross platform development, see the video here,

During the event there were also live demos and open coding sessions which resulted in a number of the developers coding through the night to then demonstrate working apps the next day.

Javier Campos, Rubén Blanco and Julián Oliver developed and presented an app that is used for real-time detection of the number of bicycles available at the nearest free bicycle station in Valencia. David Bueno Vallejo who is an Associate Professor at the University of Málaga coded through the night to develop an app to train waiters that uses the accelerometer API, see David’s blog post here (You can also read more in the developer spotlight about David that is appearing in this months newsletter, sign up here if you’d like to receive the newsletter). Aran Ziv gave an excellent presentation and demonstrated his app that displays the space remaining on your SD card. And finally, Tobias Sasse showed a location aware app that integrated with Google maps.

During October and November we’ll be repeating the event across Europe, visiting Italy, Ireland, Greece, Portugal, Germany and Netherlands. In the coming weeks we will be announcing the registration sites and dates for the events, so please keep an eye on our blog.

Vodafone developer monthly newsletter

July 23, 2010

This months Vodafone developer newsletter is due to go out next week, aiming for Wednesday 28th. If you want to get our monthly summary of developer news, events and app / developer spotlights etc, then please sign up here.

How to really cope with varying screen sizes and pixel resolutions in Vodafone Widgets

July 20, 2010

The sizing of text and graphical elements on different displays is a fairly complex problem in Web development. It is different to what you simulate when you drag your browser window to different sizes – because it is more about the pixel’s physical size. A working solution to this is built into the Vodafone Widget Manager and it’s only based on standards: CSS, CSS Media Queries and JavaScript.

Pixel-Density

Displays have two obvious characteristics: The sheer physical size and the number of pixels they are made of, often called “resolution”. However these two are actually combined into a third attribute, called the pixel-density. This is often measured in pixels per inch (ppi) and it specifies how many pixels fit onto one inch of screen width or screen height, assuming that pixels are square which they mostly are.

Typical displays

While printed magazine pages can reach up to 600 ppi, most computer displays are today within a range of 90 to 150 ppi. Mobile phone displays can go up to 330 ppi, but can also be as low as 130 ppi. It is to be expected that these numbers will continue to increase slightly in the future, but there is a maximum value that will probably not be exceeded. This value is given by the distance that you hold a display away from you and by how sharp your eyes can see. This means that pixel-density will not keep growing in the same way as memory or processor performance do.

HTC Tattoo iPhone 4
ppi HTC Tattoo ppi Apple Iphone4
320 x 240 960 x 640
2.8 inch 3.5 inch
143 ppi 330 ppi

Web content

First of all, the CSS specification defines the px unit as a relative one – relative to the output device. A user agent may decide to render one “CSS pixel” as 4 pixels if this makes sense, for example because of a high pixel-density. You can try a similar effect when you zoom in to a page in your Web-browser. Fonts are rendered larger and bitmap images are no longer rendered pixel-perfect, but get blurry or rough, depending on your OS.

For Vodafone Widgets, this strategy is perhaps the easiest part of the scaling concept. If your Widget has been developed in a fixed size and is too small for a S60 5th edition display (typically 640×360 at about 3.2 inch diagonal, meaning 230 ppi), it will be zoomed so that it fills the screen. This gives results that are usable. Unfortunately zooming is not available on all platforms, and you can make things look much better and make real use of the high resolution displays with the following strategies:

Use of relative units

There are units in CSS that are considered relative to other values, for example em. 1em is equal to the font-size of the element on which the unit is used. If you always use em, you will have one value that can be tweaked to adapt to higher resolutions – and that is the font-size of the body element. All your em values inherit from this value.

Switch via Media Queries

There is a ‘resolution’ keyword for Media Queries, that is supported in Vodafone Widget runtimes. It lets you define CSS rules that only apply on a given ppi value. This means you redefine the font-size of the body element, and everything still looks great in a higher-resolution environment. In CSS you have to use the unit dpi instead of ppi, because in CSS pixels are always meant relatively, as explained above. A template similar to the following one is included in the Widget Packager tool that is part of the Vodafone Widget SDK.

body {
  background-color: #FFF;
  font-size: 12px;
}

@media all and (min-resolution: 150dpi) {
  body {
    font-size: 15px;
  }
}

@media all and (min-resolution: 200dpi) {
  body {
    font-size: 20px;
  }
}

@media all and (min-resolution: 250dpi) {
  body {
    font-size: 25px;
  }
}

@media all and (min-resolution: 300dpi) {
  body {
    font-size: 30px;
  }
}

However this still leaves the bitmap images unchanged, because if you size them in em, they will get blurry because they will be scaled on the client side. It’s still better to size them in px, just using the size the actual pixel image is in. This way they will appear smaller on a high-res display, but they will still be rendered in a high quality and not scaled up.

Use different resources for higher resolutions

With the power of the ‘resolution’ Media Query you could also swap images and use them in a higher resolution, but that only works if they are set in CSS (as content, background, border-image or list-image). If your image is the src of an img tag, you can swap it through JavaScript, but you have to do a little trick to find out what the ppi value is, because there is no direct interface to Media Queries from JavaScript.

function getPPI(){
  // create an empty element
  var div = document.createElement("div");
  // give it an absolute size of one inch
  div.style.width="1in";
  // append it to the body
  var body = document.getElementsByTagName("body")[0];
  body.appendChild(div);
  // read the computed width
  var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
  // remove it again
  body.removeChild(div);
  // and return the value
  return parseFloat(ppi);
}

The fixed size use-case: Use of absolute units

There is a third aspect to the scaling solution in Vodafone Widgets. In most browsers, a value of 1cm in CSS would be interpreted as 37.8px, because the OS tells the browser it’s running on 96 ppi, and it will be converted to pixels, according to this. But because the Widget runtime is aware of the pixel-density, the value can be calculated by taking the actual pixel density into account. This enables you to show a picture of something in its real size, for example a wristwatch, a ring, or a phone.

Also it would let you define font-size in an absolute unit like 9pt, which is very interesting. However I still recommend the Media Query solution, because it keeps you in full control of what is going to be rendered. It enables you to test how your layout will react in different resolutions, just by commenting out the conditions. Also it can make sense to make fonts slightly smaller, the more ppi a display has, because the extra pixels a font is rendered with make it more clear to read. Users are often used to seeing more content that makes use of their sharp screens.

The outer size of the Widget

One thing that shouldn’t be forgotten, is to also make the outer size of your Widget adapt to the available space on the display. The widget element in your config.xml has a width and a height attribute. One solution to make your widget display in fullscreen is to set huge values for both attributes. The disadvantage is that this won’t let you use the same widget on a desktop, where you will want to display the widget smaller.

The best recommendation here is to use a value that works on the desktop, and use a few lines of JavaScript to maximize on a mobile device. Deciding if you are mobile or not can only be done based on the widgetMode the widget is running in. The following code is also included in the templates inside the Widget Packager tool.

// check to scale the widget to full-screen 
function checkFullscreen() { 
  // only scale when there is a lowercase widget object, and when it's 
  // safe to say we're running on mobile, widget-mode will be "widget" 
  // on desktop 
  if (window.widget && widget.widgetMode === "application") { 
    window.resizeTo(screen.availWidth, screen.availHeight); 
  } 
} 

// react on widget resolution/orientation changes 
if(window.widget) { 
  widget.addEventListener("resolution", function () { 
    checkFullscreen(); 
  }, false ); 

  // do it now, as part of the startup process 
  checkFullscreen(); 
}

Future Outlook

The solution presented here is maybe not the easiest one, but it demonstrates how Web content can really leverage high-resolution displays. With the work of the W3C, it is certain that there will be changes to the viewing concepts and modes. Please see the view-mode spec for further reference. Outside of the widget world, concepts about pixel-density are also moving quickly, and there are several competing ones. The viewport meta tag is what is relied on mostly, though it cannot replace the exact ppi that are available to the website author. The Vodafone Widget Manager solution is a proven solution that works with all of the mentioned use-cases, Widgets work across three platforms and numerous devices with alternating pixel-density.

Daniel Herzog (twitter.com/danfooo), Vodafone Group Services