How to easily include maps in your startpage (like Webwag!)

Thanks to the new “Link to this page” feature of Google, you can easily embeed a map into you’re personnal start page.
Here is how to do it:

In Google map, press the “Link to this page” link, at the top left

Then, just select the “iframe” line, and in your webwag add an “HTML container” widget and copy the content of the iframe line into the HTML code section of the widget…and you’re done: you now have a direct link with this Google Map, from your start page. If the map is updated, your widget will be updated.

From Google LatLon blog

Facebook (iPhone) widget for Webwag!

Webwag is a small team, but very reactive! We already have the equivalent of the iPhone widget available on webwag, look:

How to do it? Just go to your webwag factory, and add an HTML container, and in this container, put the following code:
<iframe xsrc=”http://iphone.facebook.com” mce_src=”http://iphone.facebook.com” height=400 width=350 />

and that’s it…..

Yes, that is just embeeding the iPhone version of the Facebook site on Webwag, but this one is optimized for small screen, so it fit very well to be embeeded in a startpage like Webwag. I expect so to see more of these site optimized for mobile browsing, and then, these site will be easily embeeded in pages like Webwag. That’s an interesting side effect of the iPhone hype.
Identificateurs Technorati : , , ,

Creating your own mobile widget: part 1

As discussed earlier, our SDK is open to third party developers. To get it, just drop us an email at feedback@webwag.com .

It’s very easy to create your own mobile widget, with very little code. If you are a web widget developer, you will be familiar rapidely with mobile widget.

So let’s dig into a widget, and let’s see how we can create one very easily

A widget is made of two main part:

  • an XML description of the UI
  • a script, which contains the behavior of the widget.

Let’s start with the clock, which is one of the easiest one, and let’s jump directly into the source of the widget (source code is here ):

The widget is enclosed into a “widget” tag, and the first part contains the UI description:
- image tells the engine that there is an image to display, and the url of the image is “clock.png”. By default, URL will be relative to the source file of the widget itself.
- then, to “poly‘ elements. Poly are polygons (but limited to three points for now) that are displayed on screen. cx and cy define the center of the polygon relative to the origin of the widget, and poly contains the x,y pair of points that define the login. Here we have three point (p1={0,0},p2={0,0],p3={20,0}) which is basically a line.
borderColor define the border color of that polygon.
The last item, is a non visible one: timer, and this element will just call a callback at a specified interval , in that case, at every 200/10 seconds, so every 20 seconds….


the script is quite easy:
- a function (onTimerFired) and a “main” part which just call that function.

Note that onTimerFired will be the default function called by the timer element. The content of the function is simple:
time() return the current time in the form DD/MM/YY ss:mm, like 07/07/2007 13:12
then explode will convert this string in an array, using the space as a spearator.
So timeArr[3] will contains 13:12
Next line, 13:12 is then exploded once again and put in another array, so hour[0] will contains 13 while
hour[1] whil contains 12.

The next two line, just set the angle properties of the two polygons created earlier. nameCl and hourCl are
the name used in the definition of these polygons, so now the script can refer to them directly.

We could access to most of the attributes of the UI elements directly, like hourCl.cx=13 our minCl.borderColor=”0xFF0000″

So as you see, with less then 10 lines of code, we have created a nice looking analog clock running on most of the mobile devices….

More tutorial and full documentation are availables on our devleoper pages…..

Identificateurs Technorati : , ,