Let me first set the scene. I have a laptop which I haul into work everyday and home again in the evening. At home we have a PC in the kitchen which is always on and connected to the internet. In my pocket I have an iPhone.

When I took charge of this iPad I was really excited about using it and to see how my wife and kids were going to use it. Straight away I installed the Twitter (for the iPad) app. So far so good. The app definitely provides a better user experience above that of the iPhone version. I can, for example, see shared links inline rather than having to open them in Safari. Next I downloaded the iPads’ Facebook app…. hang on, there isn’t one. Can you believe that? Disappointment starts to set in. Undeterred I go searching for ePaper apps. I decided to download the The Irish Times or The Irish Independents ePaper app so that I could purchase and peruse the paper while eating my Cheerios. Mmmm, not so fast. If you are to believe the customer reviews on the App Store, and I have no reason not to, they are rubbish. Ok, so forget about an ePaper app. What else can I get? AccuWeather, we love AccuWeather in our house (typically Irish, constantly wanting to know when the sun is going to come out). Alas, AccuWeather don’t have an iPad app. Sure, I can install their iPhone app on the iPad and double it’s size so that it takes up most of my nice new big iPad screen but hey, I want to move forwards not backwards. Forget AccuWeather. Let’s see, anything else? Found it. A few free games for the kids, which take good advantage of the accelerometer, and some stories from StoryChimes.

Maybe, I thought, I am trying to hard to find that “killer” app. Why not just use what is on it …. Safari and YouTube. All very nice, but I have a PC in the kitchen and a laptop at my desk. So, I pondered, when am I going to use it? So far it’s been on the couch while “watching” the box. There is no doubt that I am consuming more information now than before, I spend more time reading work related articles and it’s great for lying back and watching some Adobe TV clips. My wife occasionally uses it to check up on the latest fashion or dream about holiday destinations we probably wont ever get to.

The funny thing is, if you were to say “give it to me so, I’ll use it”, I’d reply “no way, it’s mine”. I live in hope.

A link to my presentation, “Facebook for Teachers”, is available at the end of this post.

The conference was kicked off by Christian Payne (aka Documentally) who spoke about “Mobile Story Making”. Christian is a great story teller, has a great presentation style and is interesting, funny and informative. If you don’t believe me, watch for yourself.

Next up was Ciaran McCormack whose presentation was entitled “Preparing our teachers for the Storytellers of tomorrow”. I wasn’t really surprise, but it’s still a bit of a shock to see it in writing, that a large proportion of our secondary school students think school is boring. What is interesting is that this boredom, for many, is due in no small part to how “exciting” life and learning is outside of the classroom environment due to kids being exposed to various forms of technology (games, phones, the internet). This certainly poses a real challenge for our schools and teachers. Another thing that caught my attention during Ciaran’s talk was how very simple use of technology can make for a very exciting and motivating learning environment, the FIS Bookclub being a great example. You can watch Ciaran’s presentation here (the audio improves a lot after about 8 minutes when someone hands Ciaran a microphone).

After this we all broke out into various workshops/talks, one of which was presented by my good self entitled “Facebook for Teachers” and, as promised, here it is for download.

Those who are interested in exploring the use of Facebook in the classroom might be interested in Facebook for Educators and Coolcat Teachers Blog Post Facebook Friending 101 for Schools.

If you see a black cat it’s unlucky but if it crosses your path it’s good look.

If you give a friend a brooch it pierces the friendship.

It’s bad luck to put new shoes on a table.

It’s bad luck to open an umbrella in a house.

If you spill salt you should throw it over your left shoulder to stave off bad luck.

Whistling women and crowing hens will bring you bad luck. (Another version of this, thanks to John, is: a whistling woman and a cackling hen, draw the devil from his den)

[update: April 2011]

Do a load of washing on New Year’s Day, you’ll wash a member of your family away.

It’s bad luck to buy your own wallet or purse.

If you gift a wallet to someone but a bit of money in it for good luck.

[update: May 2011]

Knife to the floor, stranger to the door.

So now my son and I are on a mission to find as many wives tales as we can. Surely there must be many more, do you know of others?

Here are the steps:

1. Create a Facebook Page
2. Create a Facebook Application (which is essentially the tab you want to add to your page).
3. Create a HTML page which contains the content you want displayed within the tab
4. Link the Facebook Application to the HTML page
5. Add the Facebook Application to your Facebook page

I am going to assume you already have a Facebook Page so first up is creating a Facebook Application. To do this you need to add the Facebook Developer application to your Facebook profile by going to http://www.facebook.com/developers/. This is a Facebook application that allows you to create Facebook applications. Once you have granted the Facebook Developer application access you then click on the “Set Up New App” button that is located in the top right of the page. You will be prompted to give your application a name and to agree to the terms and conditions.

Facebook will automatically redirect you to the “Edit settings” menu option of your newly created application. The “Edit settings” page has the following tabs:

Click on the About tab and give your application a name, description, icon and logo:

As you can see, I have given my application the name “Jabit’s latest posts” and an appropriate description. Note that the application name given here isn’t the name that will be associated with the final tab on your Facebook page. I have also given my application an icon which will be displayed beside the tab in my Facebook page:

Now click on the “Facebook Integration” tab located on the left. If you scroll down the page you will see a section called “Page Tabs”:

The tab name is what will appear as you tab text on your Facebook page. Select the IFrame radio button and in the Tab URL field enter the url of the html page which contains the content you want displayed when a user clicks on your tab.

Almost there. Click the “Save Changes” button which will bring you back to your “my apps” page on facebook. You should now see your application listed here. Each application has a set of menu options associated with it:

The “Edit settings” menu is the one you have just been through (after creating a Facebook application facebook automatically opens this menu option). Click on the “Application Profile Page” option. This will bring you to …. your applications profile page. All applications have their very own page on Facebook. Down the bottom left hand side if this page you should see a link “Add to my Page” which will allow you to add the application (tab) to one of the Facebook Pages you administer.

And finally, writing the html page that your Facebook applications loads into an iFrame. The html page that your tab loads should be no wider than 520px and no higher than 800px, otherwise Facebook will display scrolling bars. A simple way to achieve this is setting the width of your html body to 520 using CSS:

<style type="text/css">
body
{
  width:520px;
}
</style>

That’s about it. One other thing to note is that links in the html page that is getting displayed by your application should have target=”_blank” if you want them to appear outside of your Facebook tab.

I do, however, have a confession to make. The “Recent blogs” tab on my Facebook Page isn’t pointing to a html page. It’s actually pointing to a php page which dynamically queries my blog for the ten latest posts and returns the appropriate html.

If, for example, I use the Safari browser on my iPhone to go to www.jabit.com I will see something like this:

As you can see, at the bottom center of the screen there is a button (that looks like an arrow coming out of a box) that if I press displays the following:

If I click on the button “Add to Home Screen” I get this:

Notice that there is a nice icon displayed that the phone will use as the icon on the home screen of your phone. Within the html of my site I have specified this icon as the one to use, if I didn’t specify any icon then the phone will take a screen shot of my home page and use that instead. So how did I specify the icon?

There are two ways of doing this. The first is to simply create a 45×45 png image called apple-touch-icon.png of the icon you want to use and place it in the root of your website. Here’s mine:

The second way is to add a reference to the icon within the head section of your home page, something like:

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

The end result is:

Notice that the icon that gets displayed has rounded edges and a glossy finish, this is something that the iPhone automatically does.

Each year the college hosts an exhibition showcasing the work of students on the Creative Multimedia course. The exhibition is organised by third year students.

This year the photography competition will be judged by Clonmel based photographer Wojciech Ryzinski. The exhibition will also showcase student work in mediums such as video, audio, animation and flash applications.

For more information you can check out the website – www.penandpixel.ie, or follow @penandpixel2011 on Twitter.

Before I start, you might be interested in this comparison of Adobe AIR applications versus browser based Flash apps.

I’m going to keep it as simple as possible. Like everything, it’s all relatively straightforward once you know how. The main steps are:

1. Create a File object which represents the file you want to read/write
2. Create a FileStream object through which you will read/write from/to the file
3. Do the reading/writing
4. Close the FileStream object.

To get us started I am going to create a very simple AIR app that will write some text to a File. The app looks like:

The code for the app is as follows:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx">

	<fx:Script>
		<![CDATA[
			import flash.filesystem.File;
			import flash.filesystem.FileMode;
			import flash.filesystem.FileStream;

			protected function saveHandler(event:Event):void
			{
				/*
				Create a File object which 'points' to a file called test.txt in the
				applicationStorageDirectory for this AIR app.
				*/
				var localFile:File = File.applicationStorageDirectory.resolvePath("test.txt");

				/*
				Create a FileStream object which we will use to read/write content to/from
				a File object.
				*/
				var localFileStream:FileStream = new FileStream();

				/*
				Now ask the FileStream to open a File object. The FileMode.APPEND will open
				the file for writing and append new content to the end of the file. If the
				file does not yet exist it will be created.
				*/
				localFileStream.open(localFile, FileMode.APPEND);

				/*
				Write content to the File using the FileStream object. We use the writeMultiByte
				function on the FileStream object which accepts a String and the character
				encoding we wich to use (I'm using utf-8).
				*/
				localFileStream.writeMultiByte(myTI.text, "utf-8");

				/*
				All done, close the FileStream object.
				*/
				localFileStream.close();

			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<!-- Give the WindowedApplication a vertical layout -->
	<s:layout>
		<s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
	</s:layout>

	<s:HGroup width="100%">
		<s:Label text="Enter text here:"  paddingTop="5"/>
		<s:TextInput id="myTI" width="100%"/>
	</s:HGroup>

	<s:Button label="Save" click="saveHandler(event)"/>
</s:WindowedApplication>

As you can hopefully see from the code above, when the user clicks on the Save button I call the saveHandler function which, in turn, writes whatever text the user has entered into the TextInput to a file called test.txt. This file is located in the “applicationStorageDirectory” for the AIR app. To learn a little more about this please see here.

The code for actually writing the text to the file is well commented so please see the comments for a full explanation.

Ok, now to read a file. I am going to change the TextInput component to a TextArea component just to give me some more room and I’m going to add a load button. The app now looks like:

The main code change has been to add a loadHandler function that gets called when the user clicks on the Load button.

protected function loadHandler(event:Event):void
{
	/*
	Create a File object which 'points' to a file called test.txt in the
	applicationStorageDirectory for this AIR app.
	*/
	var localFile:File = File.applicationStorageDirectory.resolvePath("test.txt");

	/*
	Create a FileStream object which we will use to read/write content to/from
	a File object.
	*/
	var localFileStream:FileStream = new FileStream();

	/*
	Now ask the FileStream to open a File object. The FileMode.READ will open
	the file for reading.
	*/
	localFileStream.open(localFile, FileMode.READ);

	/*
	Create a String variable to hold the contents of the file.
	*/
	var fileContents:String;

	/*
	Call the readMultiByte function on the FileStream object which will return a String
	containing the file contents. The bytesAvailable property on the FileStream object
	stores the number of bytes available to read and the string "utf-8" specifies the
	character encoding of the file.
	*/
	fileContents = localFileStream.readMultiByte(localFileStream.bytesAvailable, "utf-8");

	/*
	All done, close the FileStream object.
	*/
	localFileStream.close();

	/*
	Set the text of the TextArea to the fileContents
	*/
	myTI.text = fileContents;
}

It’s all pretty simple but hopefully demonstrates the basics of File I/O within an AIR application.

The idea is simple, provide a list of counties in a web page and when the user clicks on a county, relevant information is displayed. This information is extracted from Wikipedia.

So how do you get information from Wikipedia? You could use the Wikipedia API but this will require quite a bit of upskilling on how the API works and how to render the information returned for display in a web page. An easier way is to use the Infochimps API which, although is limited to searching and retrieving Wikipedia article abstracts, is easy to use and provides us with what we want.

The Infochimps API is essentially an API that can be used to access data from a variety of supported datasets such as Wikipedia, Twitter and Yahoo. You issue an HTTP GET request using the appropriate query parameters and you are returned a JSON record. For example, issuing a HTTP GET request to this url:

http://api.infochimps.com/encyclopedic/dbpedia/wikipedia/articles/
abstract_search

along with the query parameters:

• q = your query (search) term
• apikey = your api key

will return you a JSON record containing an array of objects each containing a title, text and url property where title contains the title of the Wikipedia article, text will contain the article abstract (generally the first paragraph of the article) and url will contain the url to the article on Wikipedia.

The q parameter contains your search query. So if you wanted to search for Clonmel then set q=Clonmel. This would return all Wikipedia articles that have Clonmel in their title or abstract. If you wanted to only search for article titles which contain the word Clonmel then q would be set to q=title:Clonmel. Likewise, if you wanted to only search article abstracts which contained the word Clonmel then q would be set to q=abstract:Clonmel.

So, if I were to issue the following GET request, with MYKEY replaced with my real API key:

http://api.infochimps.com/encyclopedic/dbpedia/wikipedia/articles/
abstract_search?q=title:Clonmel&apikey=MYKEY

I would be returned a JSON record contains an array of JSON objects with an object for each Wikipedia article which has Clonmel in the title. Something like this:

{ "total": 16,
   "results": [
   { "title": "Clonmel",
     "abstract": "Clonmel is the county town of South Tipperary in Ireland. It is the largest town in the county. While the borough had a population of 15,482 in 2006, another 17,008 people were in the rural hinterland. The town is noted in Irish history for its resistance to the Cromwellian army which sacked both Drogheda and Wexford. It is in the barony of Iffa and Offa East.",
     "url": "http://en.wikipedia.org/wiki/Clonmel" },
   { "title": "The Kings of Clonmel",
     "abstract": "The Kings of Clonmel is the eighth novel in the Ranger's Apprentice series by Australian author John Flanagan. It was released in Australia on 4 November 2008.",
     "url": "http://en.wikipedia.org/wiki/The_Kings_of_Clonmel" },
   { "title": "Marlfield, Clonmel",
     "abstract": "Marlfield, is a village three kilometres west of Clonmel, County Tipperary, Ireland. It replaced an older settlement named Abbey which had developed near the 12th century Cistercian community of Inislounaght.",
     "url": "http://en.wikipedia.org/wiki/Marlfield,_Clonmel" },
   ...
}

As you can see, I am returned a JSON object which has two properties: total which is equal to the total number of articles found (in this case 16) and results which is itself an array of JSON objects. The first object in the array has a title property equal to Clonmel, an abstract property equal to "Clonmel is the county town ..." and a url property equal to http://en.wikipedia.org/wiki/Clonmel.

This poses a slight problem for me as I want only the page about "Clonmel" and not the other pages i.e. "The Kings of Clonmel" and "Marlfield, Clonmel". I will need to search through the result objects and extract the object whose title is "Clonmel".

The next question is, how do I issue such a GET request using PHP and how do I parse the JSON returned? The answer, I hope, is relatively straightforward.

In the past the students have used CURL to retrieve XML so the following php function should be familiar to them:

function getData($theURL)
{
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $theURL);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$response= curl_exec($ch);
	curl_close($ch);
	return $response;
}

The function getData issues a HTTP GET request to the URL specified and returns the resulting response.

Next, we need to call the getData function with an appropriate URL.

// This function will be passed the place name (e.g. Clonmel) to search for
function displayWikiAdstract($placename)
{
   $place = urlencode($placename);

   $APIKey = "YOUR-API-KEY";
   $infoChimpsEndPoint = "http://api.infochimps.com/encyclopedic/dbpedia/wikipedia/articles/abstract_search?";
   $apiParams = "q=title:" . $place . "&apikey=". $APIKey;

    $url = $infoChimpsEndPoint . $apiParams;

    // Call the getData function and store the response
    $rsp = getData($url, true);

   // Decode the JSON response
   $jsonResultObject= json_decode($rsp);

   // Loop through each of the JSON objects in the results array
   foreach ($jsonResultObject->results as $result)
   {
		// If the title of the result object is equal to
		// the placename that I am searching for
		// then echo it out.
		if ($result->title == $placename)
		{
			echo "<h1>" . $result->title . "</h1>";

			$abstract = unenc_utf16_code_units($result->abstract);
			$abstract = str_replace('\\"', '"', $abstract );

			echo "<p>" .$result->abstract . "</p>";
			echo "<p>" . $abstract . "</p>";
			echo "<p><a href='" . $result->url . "'>Link</a></p>";

			// break out of the for loop, I have found
			// what I am looking for
		}
   }
}

Most of the code should be familiar to the students with the possible exception of a few lines.

In line 16 I decode the JSON response. The data returned is a string representation of a JavaScript object, the json_decode function takes in the returned string and a creates a JavaScript object from it.

In line 28 I am calling a the function unenc_utf16_code_units and passing it the abstract of the article. The reason for this is that I noticed the abstract contains such text as "Ireland\u2019s". This text should be "Ireland's" but the single quote(') is encoded using UTF, that is, the UTF encoding for a single quote is \u2019, which is known as a code unit. The unenc_utf16_code_units function unencodes any UTF code units in a given string so, for example, "Ireland\u2019s" will become "Ireland's". I didn't write the unenc_utf16_code_units function, I found it here.

In line 29 I am replacing all occurrences of \" with " as I noticed that the abstract text also contains text such as \"people\" which should be "people".

Finally, to bring it all together I have a simple form

<form>
Enter a County:
<select name="county">
	<option value="County Tipperary">Tipperary</option>
    <option value="County Kilkenny">Kilkenny</option>
</select>
<input type="submit" name="submit"/>
</form>

and supporting PHP code

if (isset($_GET['submit']))
{
	displayWikiAdstract($_GET['county']);
}

The complete code can be downloaded here.

package services
{
	import mx.collections.ArrayCollection;
	import mx.collections.XMLListCollection;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.mxml.HTTPService;

	import valueObjects.RSSPost;

	public class RSSService extends HTTPService
	{
		[Bindable]
		public var posts:ArrayCollection;

		public var title:String;

		public function RSSService(rootURL:String=null, destination:String=null)
		{
			super(rootURL, destination);

			this.resultFormat="e4x";

			addEventListener(ResultEvent.RESULT, onFeedLoadedFromRssService);
		}

		private function onFeedLoadedFromRssService(event:ResultEvent):void
		{
			trace("RSSService::onFeedLoadedFromRssService");
			title=event.result.channel.title;
			var postsArray:Array=new Array();
			var resultData:XMLList=new XMLList(event.result.channel.item);

			for each (var p:XML in resultData)
			{
				var post:RSSPost=RSSPost.buildPost(p);
				postsArray.push(post);
			}

			posts=new ArrayCollection(postsArray);

		}
	}
}

Here is the code for the RSSPost class (note how the content namespace is handled).

package valueObjects
{

	[Bindable]
	public class RSSPost
	{
		public var title:String;
		public var description:String;
		public var content:String;

		public function RSSPost(theTitle:String, theDescription:String)
		{
			this.title = theTitle;
			this.description = theDescription;
			this.content = theContent;
		}

		public static function buildPost(data:XML):RSSPost
		{
			var post:RSSPost;

			var content:Namespace;
			var encodedContent:String;

			content = new Namespace("http://purl.org/rss/1.0/modules/content/");
			encodedContent = data.content::encoded;

			post = new RSSPost(data.title, data.description, encodedContent);
			return post;
		}
	}
}

A RSS feed has the following structure:
<channel>
<title>…</title>
…

<item>
<title>…</title>
<content:encoded xmlns:content=”http://purl.org/rss/1.0/modules/content/”>…     </content>
</item>
<item>
<title>…</title>
<content:encoded xmlns:content=”http://purl.org/rss/1.0/modules/content/”>…</content>
</item>
…
</channel>

The encoded tag is using the namespace ‘content’. This tag contains CDATA containing the ‘raw’ html of a post. The code below will read the html contained in the encoded tag into a String.

anItem:XML;
// initialise anItem to an xml item element
var content:Namespace;
var encodedContent:String;
content = new Namespace("http://purl.org/rss/1.0/modules/content/");
encodedContent = data.content::encoded;
//encodedData now contains the html contained with the
//content:encoded element.

That’s it.