We’ve also integrated our blog, added a Labs area for our Open Source projects and content, and the site is fully searchable now!

In the coming months we’ll be adding more content, features and functionality to the site so please bookmark us and keep an eye on our updates.

Overall the competition had a stunning total of 160 competing mobile startups. This made it a big challenge for our jury and it was a close call on many occasions, which really shows the quality of this year’s entries!

The jury selected the very best entries based on the 5 criteria mentioned below:

- Originality, creativity and innovativeness
- Technical and operational ability
- Economic and financial viability (business case)
- Use case and end-user value
- The quality of the members of the (management) team (e.g. their experience, knowledge, skills, relationships)

Here are the nominees (in alphabetical order)

Spain:

The Netherlands:

Portugal:

United Kingdom:

Many thanks to all participating startups for their time and effort and congrats to the 20 nominees!

More details about this announcement can be seen here.

The Vodafone 360 Shop Image Style Guide is a document for anyone that wants to submit content to the Vodafone 360 Shop. The guide contains information regarding the necessary imagery that is required when submitting content to the Vodafone 360 Shop.

Below are a couple of examples from the guide,

The floating mode is that state where the widget runs on the home screen, in a square container, the size of 4 widget/application icons. Multiple widgets can run in floating mode at the same time.

In order to enable floating mode for a widget, the following setting is required in the config.xml file:

• Opera/W3C config format: <widget … floatable=”yes” … >
• JIL 1.2 format: <widget … viewmodes=”fullscreen, floating” … >

On Samsung H1/M1, the runtime will start the widget in floating mode (if this mode was enabled in config.xml). Taping a second time on the widget will cause it to go to full screen mode. From the full screen mode, the user can go back to floating mode (the button in the top-right corner) or he can close the widget.

An important aspect between switching from floating mode to full screen mode and back is to adjust the user interface. In floating mode, since there is less space available, a stripped-down version of the full screen interface should be presented.

The widget object (lowercase ‘w’) has the ‘widgetMode’ property that we can use the find the current mode and it also has the ‘widgetmodechange’ event, which gets fired every time the mode is changed. Putting it all together we get the following Javascript code that we can use to adjust the user interface:

if (window.widget) {
  widget.addEventListener("widgetmodechange", function (e) {
    switch (e.mode) { // we can use e.mode or widget.widgetMode
      case 'floating':
        // adjust user interface for floating mode
        break;
      case 'application':
        // display full screen interface
        break;
    }
  },
  false);
}

If you only want to make some CSS adjustments or show/hide divs when the mode changes, you could use the ‘-o-widget-mode’ media query extension. It takes a widget mode name as argument and applies the corresponding style when the widget is in that mode:

@media all and (-o-widget-mode: floating) {
  .fullScreenContainer { display: none; }
  .floatingContainer { display: block; }
}

The floating mode is a nice way for a widget to provide some useful information, without requiring the user’s undivided attention and taking up the whole phone screen.

The Vodafone developer Support Team

This is a great opportunity to network and learn from likeminded JavaScript developers.

The current schedule looks like this:

• 9:00am: Meet & Greet, Introduction
• 9:30am: Talks about Client-side JS
• 12:00pm: Lunch
• 12:45pm: Talks about Server-side JS
• 2:30pm-4:30pm: Talks about Mobile JS
• 4:30-5:00 Wrap-up
• 5:00-? Union Bar

Find out more about the event, see who’s attending and sign up here.

Directions to the Vodafone Paddington offices can be found here – How to get to One Kingdom Street.

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.

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:

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.

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

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.