The Logic Code

Lets have a quick run through at what the project consists of. Firstly we use the simplexml_load_file() PHP function to get the xml data for the given location. We then check to see if the current weather condition is in the XML file. If it doesn’t exist then we can make the assumption that the API feed couldn’t determine the location, bear in mind this is very basic error checking and if the feed fails it will still return this error.

We now do some basic data checking to to see what extra data we can give the user. Firstly we check on line 14 to see if the current weather and forecast are different, if they are different we’ll display the forecast if not we show just the current weather.

Next on lines 21 and 28 we do a simple check to see if the temperature is higher or lower than 20 degrees and echo whether it’s likely to be hot or cold.

Finally on lines 35 we check to see if the current or future forecast contains any rain or storms so we can recommend the user takes an umbrella. This is done using some basic PHP regular expression.

	// load the XML feeds for the Google Weather API
	$xml = simplexml_load_file('http://www.google.com/ig/api?weather='.urlencode($_GET['location']));
	$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
	$forecast = $xml->xpath("/xml_api_reply/weather/forecast_conditions");

	// do a basic error check to see if we can get the current weather condition for the given location
	// if no return an error.
	if(!$current[0]->condition['data']){

		$error = 'Couldn\'t determine this location';

		}

	// is the current weather the same as the forecast? if not display the forecast
	if(strtolower($current[0]->condition['data'])!=strtolower($forecast[0]->condition['data'])){

	$outlook = 'but the forecast says '.strtolower($forecast[0]->condition['data']);	

		}

	// if the temp in degrees c is below 20 i.e. cold
	if($current[0]->temp_c['data']<=20){

	$coat = 'If you\'re going outside i\'d wrap up warm.';	

		}	

	// if the temp in degrees c is over 21 i.e. Warm / Hot
	if($current[0]->temp_c['data']>=21){

	$coat = 'You should be ok without warm clothes today.';	

		}		

	// check to see if there is rain or storms forecast
	if (preg_match("/\brain\b/i", $current[0]->condition['data']) ||
		preg_match("/\brain\b/i", $forecast[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $current[0]->condition['data']) ||
		preg_match("/\bstorm\b/i", $forecast[0]->condition['data'])
		){

		$umbrella = ' But <u>don\'t forget to take an umbrella</u>!';
		}

Displaying the data

<form action="" method="get">
<label for="location">Location</label>
<input type="text" class="location" name="location" value="<?php echo $_GET['location'];?>"/>
</form> 

<?php if(!empty($_GET['location'])){

	if($error){ echo '<div class="errors">'.$error.'</div>'; }else{

?>

<div class="weather_app">

<h1>Weather Summary for <?php echo $_GET['location'];?></h1>

<ul>
<li><?php echo '<img src="http://google.com'.$current[0]->icon['data'].'"/>'; ?> The weather in <?php echo $_GET['location'];?> is <strong><?php echo strtolower($current[0]->condition['data']).' '. $outlook;?></strong>. The temperature is currently <strong><?php echo $current[0]->temp_c['data']; ?>&deg;c (<?php echo $current[0]->temp_f['data']; ?>&deg;f)</strong>. <?php echo $coat;?> <?php echo $umbrella;?></li>
</ul>

</div>

<?php } } ?>

Add a Mobile Stylesheet

In the code below we’ve included two stylesheets, the first main.css targets desktop computers and laptops using the ‘screen’ media type, while the second mobile.css targets mobile devices. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both.

<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Make phone numbers clickable

It’s easy to make phone numbers clickable, just like we can use ‘mailto:’ to link email addresses through (although this isn’t advised due to email harvesting) we can add ‘tel:’ followed by the number as shown below.

<a href="tel:+44203948578" class="phone-link">(+44) 203 94 8578</a>

Make filling in forms easier

HTML5 input types allows us to make it easier for users to fill in forms by providing the correct keyboard configuration. this can be achieved by changing the input type to either ‘email’ or ‘tel’.

<input type="email" name="email" />
<input type="tel" name="telephone"/>

Take if a step further with JavaScript and jQuery

jQuery just released the mobile version of its popular framework that allows you to use Its lightweight code is built with progressive enhancement, which also has a flexible, easily themeable design.

jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

Create the icon

You will need to produce an image in PNG format that:

• Measures 57 x 57 pixels, with square corners the (if the image measures other than this size, iPhone OS scales it)
• Does not use alpha transparency
• Does not have any shine or gloss

The Code

This part is extremely easy. there are two options, if you have access to your root directory (usually where your index.html file is kept) you can save your icon as apple-touch-icon-precomposed.png and the iphone or ipod will do the rest.

Or you can add a line of meta code to the head of your page which specifies the link to your icon.

Glossy icon:

<link rel="apple-touch-icon" href="/images/iphone_icon.png" />

Non glossy icon:

<link rel="apple-touch-icon-precomposed" href="/images/iphone_icon.png" />

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.

<?php

$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');

if(in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
}

if($mobile_browser>0) {
   // do something
}
else {
   // do something else
}   

?>

Hope you find it useful