mobiweather.net

http://mobiweather.net

Update: Project has changed the name and moved to new address! Please update your bookmarks :)

It's been a long time I've wanted to create a mobile site, using one of the many currently popular mobile frameworks, but I just couldn't find the time. Recently I had some spare time, so I figured it will be good opportunity to glance at the framework options one has nowadays. I was mostly impressed, it's an area heavy with advancements, but one framework got mine attention since it's based on jQuery.

jQuery Mobile

Premise is simple: you include jQuery and jQuery Mobile framework in your code, define pages and elements on them and let it do the rest. Extensive documentation is riddled with examples and real-life examples, so I haven't got any problem whatsoever. Also, they include a nifty Themeroller engine which enables you to create custom theme in just a few drag & drops, assuming you want to remain in default layout. But customizing it it's pretty easy, since everything can be done through CSS overrides, it's just a matter of finding right class.

The thing I wanted to learn most was responsive design, e.g. how to position elements on the page depending on the various screen sizes of devices out there. jQuery Mobile implements @media CSS directives which makes it ultra easy. If you are using built-in layout grids for content formatting (ui-grid), you can be up and running in no time. Just define widths of screen which are your border line cases, and it should work.

Proof of concept

So, I set out to make a sample site, one of the first ideas that popped in my head was a mobile weather site. National weather service of my country has very limited site, which is literally unreadable on small screens, and has some other problems (inability to click links, etc). First I thought maybe an Android app was a better option, but finally I went for the mobile site.

Data

First, I needed some data, so a fetching script was in order. PHP is very effective in this because of robust regular expressions support, so I made a couple of scripts for different data which scans the site, and outputs JSON feeds. Also I'm fetching some images with interesting data on regular intervals (namely radar and satellite images).

Data was then put to use with an AJAX call from the mobile page. It's used to populate elements on the page (icons, numbers, etc). This approach makes for much speedier experience on slow connections, since only new JSON call is initiated without a full page refresh.

I do not have explicit permission for this data, this project is strictly unofficial, but I figure since it's work of public service company I should be safe (also everybody is doing it!). I know that there are some foreign sites with appropriate APIs and all, but quality of their data is not a match for national ones.

UX

jQuery has some interesting events, swipe is my favorite. I used it to switch between 3- and 5-day forecast. Site also intelligently records user preferences, so everything should be as you left it when you revisit :)

Geo-location

This is pretty straightforward, and works out-of-the-box in all modern browsers (using navigator.geolocation object). When the script gets user location, it calculates distance to all the cities and towns in the list, and switches automatically to nearest one.

Sunrise/sunset times

I thought it would be great if icons for nighttime conditions would be different from those in the daytime. After all, icon set had these icons with moon instead of sun for clear weather. I found excellent implementation of solar positioning for javascript, and the script passes current city latitude and longitude in order to get super precise sunrise and sunset times :)

Result

Result can be seen here. As I said, it's strictly unofficial and non-profit, and time will tell if it's gonna be popular (but I know I'm gonna use it). It's on a shared hosting server right now and it's a little bit on the slow side, but so are mobile connections where I live :) AWS to the rescue! Site was moved, so it should be much snappier :)

All data courtesy of RHMZ
Weather icons by MerlinTheRed