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 } } ?>

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.

Using a feed from the BBC weather I’ve mashed up the data that i get from the temperature sensor with the weather feed to predict what the ‘weather’ will be like in my office. As a feature for my site (as i spend most of my time in my office) you can see what the weather’s like in my office at anytime by clicking the link in the menu at the top right of any page. We’re approaching winter over here in the UK so the temperature is dropping.

I thought it was a different way of displaying this kind of data by making it a bit fun, and you never know i may extend it in the future to include other aspects. I have a light sensor which is in full operation, which can be seen from the original mash-up here.

View The Latest Office Weather

Lets first take a look at the PHP page where we use CURL to parse the feed. You’ll need to make sure that your server has PHP5. Right at the top of the code we have the RSS feed source file stored in the variable $file, then the process section of code deals with the CURL request saving the result in the variable $data. We then use the Simple XmlElement to display the specific xml nodes in the right place.

The PHP

	//source
	$file = 'http://mediaservices.myspace.com/services/rss.ashx?fuseaction=vids.charts&RSSAction=VideoCharts';

	//process
	$ch = curl_init($file);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	$data = curl_exec($ch);
	curl_close($ch);

	//execute
	try
	{

	$i=0;

		$doc = new SimpleXmlElement($data, LIBXML_NOCDATA);
		function parseRSS($xml) {

			foreach($xml->channel->item as $entry) {
				$namespaces = $entry->getNameSpaces(true);
				$media = $entry->children($namespaces['media']);
				$myspace = $entry->children($namespaces['myspace']);
				$description = $entry->description;

	    $length = strlen($description);

	   if($length > 20){
	   $description = substr($description, 0, 20)."...";
	}

				if($entry->title) {
						if($odd = $i%2){$class='odd';}else{$class='even';}
					echo "<div class='vids ".$class."'>";
					echo '<div class="left"><a class="ms-video" target="_top" href="'.$entry->guid.'"><img width="100" border="0" src="'.$media->thumbnail->attributes()->url.'" alt="'.$entry->title.'" /></a></div>';
					echo '<div class="right"><div class="video-title"><a class="ms-video" target="_top" href="'.$entry->guid.'"><span>'.$media->title.'</span></a></div>';

					echo '<div class="video-description">'.$description.'</div>';
				    echo  $myspace->statistics->attributes()->plays.' Plays</div>';

					echo '<div class="clear"></div>';
						echo "</div>";
				}

					$i++;
			//end foreach
			}

		}

		if(isset($doc->channel->item)) {
			parseRSS($doc);
		} else {
			#no videos;
			exit;
		}
	} catch (Exception $e) {
		echo 'Bad XML file.';
		exit;
	}

The JavaScript

This must be the simplest JavaScript widget I’ve ever written. The basis of this code is to load in the results of an ajax request in to a div then with the help of the quick paginate jQuery plugin.You can see below that you if you want to adjust the number of results on each page just change the 3 to what ever you like.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script src="quickpaginate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
$('#content').hide();
$('#content').load('videofeed.php', function(){
	$('#content').fadeIn('slow');
$('.vids').quickpaginate({ perpage: 3, pager : $("#pagination") });
 });
});
</script>

You can use any RSS feed for this widget, you’ll just need to adjust the PHP file to accept a different feed.

The JavaScript

$(document).ready(function(){
$('#preview').hide();
$("#photo").click(update);
$("#title").keypress(update);
});

function update(){		

$('#preview').slideDown('slow');
var title = $("#title").val();
var photo = $("#photo").val();
$('#Displaytitle').html(title);
$('#image').html('<img src="'+photo+'"/>');
}

The HTML

  <div class="left">
    <form>
      Choose a site<br/>
      <select name="pic" class="click" id="photo">
        <option value="images/photo1.png">Tweet.me.it</option>
        <option value="images/photo2.png">Dotdashcreate.com</option>
        <option value="images/photo3.png">Papermashup.com</option>
      </select>
      <br/>
      Add a Tagline
      <textarea id="title" class="click" name="title" cols="40" rows="4">This is your default advert text. </textarea>
    </form>
  </div>
  <div class="right">
    <noscript>
    This is where you could put a link for users who have JavaScript disabled to see a preview
</noscript>
    <div id="preview"> This is how your advert will look
      <div id="image"></div>
      <div id="Displaytitle"></div>
    </div>
  </div>

<div class="clear"></div>

In the dom ready function we’re simply hiding the div ‘#preview’ as this is our container for the contents of our form preview. next we setup the ‘.click’ and ‘.keypress’ listeners that execute that function ‘update()’ to display the preview of our form contents. Next looking at the ‘update()’ function we firstly display the ‘#preview’ div. Then set the variables ‘title’ and ‘photo’ with the values of the form using the ‘.val()’ attribute. Then to update our form preview we use ‘.html()’ to replace the contents of the selected div.

Using .html .append & .prepend

Its useful to know that ‘.html’ will replace the contents of the div with whatever you specify as shown below.

.html()

<div id="replace">This will be replaced</div>

$('#replace').html('with this text');

You can however use ‘.prepend’ and ‘.append’ to add the new contents before or after the current contents as shown below.

.append()

<div id="time">The time is: </div>

$('#time').append('12:00pm');

.prepend()

<div id="time"> is the time</div>

$('#time').prepend('12:00pm');

So whats the point i hear you cry. This code is really only useful if your distributing and sharing widgets from your site. So say you have your own social network and you want to open up the data allow users to embed portions of your site on theirs, this code basically writes a standard iframe on the page using JavaScript, and instead of the user having to copy the whole iframe code (which can be long if you have inline-styles, and long source urls) all you need to include in your page to invoke the widget is the code below.

<!-- one line of JavaScript is all that is needed to generate the iframe. -->
<script language="JavaScript" src="/demos/javascript-iframe/javascript-iframe.js"></script>

And within the javascript file is the following code.

// Set path to the iframe file
var filePath = 'http://www.myspace.com';
// Setup the iframe target
var iframe='<iframe id="frame" name="widget" src ="#" width="100%" height="1" marginheight="0" marginwidth="0" frameborder="no" scrolling="no"></iframe>';
// Write the iframe to the page
document.write(iframe);

var myIframe = parent.document.getElementById("frame");
// Setup the width and height
myIframe.height = 350;
myIframe.width = 960;

myIframe.src = filePath;
// set the style of the iframe
myIframe.style.border = "1px solid #999";
myIframe.style.padding = "8px";

And that’s it, any questions or comments leave them below.

Widgets fit perfectly into a world where information makes it’s self available where ever the end user wants it. Widgets offer the great ability to be placed where the community will use it the most thus maximising a marketers message within the product.

Tracking widgets is easy with tools such as clearsprings and Gigya. These services allow users to virally spread your message throughout the net easily integrating your product in social networks and blogs. A site that’s bringing widget making to the masses is Sproutbuilder.com. Just out of Beta Sprout gives you the ability to create rich media widgets like the one below. Sprout offers a really great user interface built completely in Flex it’s a great example of an online application. Allowing you to embed RSS feeds, Twitter feeds, Yahoo maps, Google Forms, and much more. Design and style are completely up to you which is great as most sites only offer drag and drop interfaces with pre-set placeholders for content. templates are available for the less adventurous. Check out the video below on how to create your sprout.

Making money from widgets

Widgets are a great environment for brand advertising as they offer a real media experience and in time brands can leverage that experience to find ways to engage users with their product. We are seeing more and more brands sponsoring already popular widgets to get their message across.

Sites like Amazon and Ebay offer users affiliate programs encouraging them distribute their widgets with products. This is a great marketing initiative by these companies to take their products off the site and onto the users sites and networks, and the incentive to embed the widget is cash to the site owner of a visitor buys a product. So everyone wins. This has been a brief look at widgets and how your business can use this emerging form of media to target your audience.