Category Archives: Development

Web Site Upgrades

Lately we’ve been doing some major upgrades to our site. First of all, we have extended our JavaScript API and the game / quiz routes are now also playable on web. Feel free to try them out:

All POI content now appear within iframe, which basically means that all route content is stripped from any additional CSS styling and is presented just the way user has configured it to be presented. We are now using our own modal dialog JavaScript component instead of using good ol’ Fancybox (which, of course, is still a great little plugin). This new component fits our needs perfectly and is more usable and versatile than any 3rd party plugin would ever be.

I’d like to think that 3rd party plugins work fine up to some point, but as things get more complicated and extra versatility is needed, it’s better to do things by yourself from start to finish. So, put it to test: Head on to our site and open up a route and some POI view. Click around, test it with another browser, resize your browser window back and forth, blast it with a bazooka. If you run into any bugs or strange behaviour, please don’t hesitate to contact us. It’s all been tested on a range of browsers, but you never know, right?

Citynomadi HTML5 application

Hello!

For some time, we have been developing HTML5 applications in the side of our native apps. These applications are directed for the users who haven’t got time or need to install programs to their mobile devices. With this new application, we are striving to bring our service a bit closer to the user and make it even handier. Of course, the best benefit for our service you can still get from our native applications. However the aim of HTML5 applications isn’t to replace the native ones, but create a new way of utilization in different situations.

Now we are introducing the first version of HTML5 based application that is optimized for as many mobile browsers as possible. So far we have tested the application on iOS, Android and Windows Phone 8 devices. Through testing we have managed to remove various platform-specific problems, and we don’t see any reason why the technology wouldn’t work on other platforms as well.  Naturally, we need lots of feedback on how our application has functioned on each platform.

For the first version, we have minimized the number of features and we have basically built the application so that the existing routes would show up correctly. In the future we will also add some extra features as devices get faster and more robust.

Route searching

First, we will go through how the route search function works. The user interface quite simple and it pretty much resembles the one used in Citynomadi.com. In the future, there will definitely be some improvements to the UI, as we continue to eliminate the problems caused by small screens.

In the text field you can write any keyword that pops into your head, for example a name of city. Our database contains the place-names for the location coordinates of the route. You also might find some routes even by typing a name of a district. However, the database doesn’t know everything, but at least the city names are included.

You can also different kind of searches, e.g. according to the popularity of the route. By switching on the “Show routes near me” switch, the application retrieves all the routes located within one kilometer radius.

Try the route search on m.citynomadi.com or scan the QR-codes provided below.

search

Map view

We have strived to simplify the map view, so that there’ll be enough space even on a small screen. Compared to the Citynomadi.com map view, we have sifted out some features, but in the future those features will be also brought to the HTML5 application, given that they will work properly in all devices.

Our HTML5 application will not automatically start figuring out your current location. To allow the app to use your current location, you will have to press the button that looks like a crosshair on the top-left side of the screen. After that, your browser should ask you if it’s OK to use your current location. The button that looks like a knot returns you back to the route searching. At the bottom of the screen you’ll find Layer and Map menus, which are familiar from our other Web-UI’s. By clicking a Layer button you’ll get a list of all POIs on the route and by clicking a Map button you change the background map. Routes may have a different number of available background maps, this dependable on the route creator’s preference.

After pressing the Location icon, our dog logo-icon  (citynomadi_black) pops on the screen and points out your current location. For route creator it’s possible to change this icon, so don’t panic if you see some other kind of an icon – everything’s probably alright! We call this icon “Spotty”.

mobileview

When you click the point of interest (POI), a speech bubble will pop up above it. From the bubble you can read the title of the POI. When you click the speech bubble, you can read information stored to a POI. POIs can contain text, pictures and videos. From a POI view, You can also open the Google maps, if you need any further navigational aid to find this particular POI.

mobileview_poiauki

Adding the app to iPhone’s / iPad’s Home screen

Safari browser allows you to add a “bookmark” on iPhone’s / iPad’s home screen by using the “Share” button. By using the “Add to the home screen” functionality you can access the route search or any route directly from the home screen of your device. Remember, that this is only a link to the application, so it won’t work in offline mode yet. We are developing new features that allow user to save data to the device. This way, after loading the route data to the device, routes would also be available offline.

ioskuvakkeet

QR-codes

HTML5 application offers you completely new way to take advantage of Citynomadi services through the QR-codes. Here’s a few examples.

Code 1.

Opens the Route search view:

qrtosearch

Code 2.

Opens the route directly:

qrtotamperetop

Code 3.

Opens the Route search view with a keyword “Helsinki”:

qrforkeyrodhelsinki

Code 4.

Opens the search to the client’s wall. In this case the client is Southeast135°:

qrsearchtokaakkowall

Summary

HTML5 application is available on m.citynomadi.com. If you have some questions about using the QR-codes, please contact us: https://citynomadi.com/fi/yhteystiedot. We’d be glad to answer your questions about the HTML5 app and its possible ways of usage.

Also, send us some feedback! The mobile environment is very heterogeneous in terms of operating systems and software platforms. Because of that, we will never have enough time to take everything in consideration, nor do we have enough resources to test all features thoroughly. All kind of feedback is much appreciated, whether it is about making the routes or the about the apps.