Ben Argo

Week 27 in PAL

Ben — Mon, 30 Jan 2012 17:00:05 +0000

This week in PAL we looked in detail at CSS. We ran over the basics with a CSS document structure, in particular the three key areas:

Selectors
Attributes
Values

CSS

section h3 { font-family: sans-serif; }

We talked about the methods which you can use to include CSS documents.

HTML

CSS

@import url("./path/to/file.css");

To conclude we held a quick test on CSS selectors. The questions and answers are included in the attached PowerPoint.

Resources Used

PowerPoint presentation

O2′s Data Scandal

Ben — Wed, 25 Jan 2012 17:10:22 +0000

If you are running on O2 or another network that uses O2′s infrastructure (namely Tesco Mobile and giffgaff), it is likely that your mobile phone number has been transmitted to every website you have visited over the past 15 days. The Information Commissioner’s Office said it is considering whether to investigate further, although a spokesman said there was no immediate breach of the Data Protection Act. This is because the DPA does not class mobile phone numbers as personally identifiable information.

However, if you have received telemarketing text messages or calls over the last 15 days that you believe may have been caused by your mobile phone number being released, there may be grounds on which you can either cancel your contract or claim compensation.

NB: Please do not take this advice as a legal footing, I am not a lawyer. Please check with your solicitor to see if you have valid legal grounds before entering a dispute with O2.

There is an European Union directive, 2002/58/EC, that instructs under Article 13 “Member States shall take appropriate measures to ensure that, free of charge, unsolicited communications for purposes of direct marketing… are not allowed either without the consent of the subscribers concerned or in respect of subscribers who do not wish to receive these communications…”

By “communications,” this implies emails, text (SMS) messages and telephone calls. This directive means that there should be some form of legal context within the Data Protection Act on which you can claim compensation, based on what the UK government did to implement this directive. If you manage to find the clause in the DPA which covers this, please let me know.

Google Weather + Character Encodings

Ben — Tue, 24 Jan 2012 18:55:19 +0000

I’m building an application for my “Data, Schemas & Applications” module at university, which manipulates data from Google to display the weather for given locations. Google’s weather API is fairly simple to understand, and is run through a REST base service and does not require the use of an API key.

You can use PHP to download a copy of the weather data for your chosen city, and subsequently process it to output the weather in whatever way you choose. Prakash has provided a function which can be used on the University campus for loading files through the proxy. It looks like the following:

function get_file($uri) {

/*********************************************************
* @function: get_file
* @author: Chris Wallace
* @created: 30 November 2009
* @updated: 20 January 2012
* @source: http://www.cems.uwe.ac.uk/~pchatter/php/dsa/dsa_utility.phps
*
* This function will get any file through the UWE proxy.
*
* It has been adapted so that if we
* are running on our local testing server, we do not
* need to use this function, as Ben's private server
* does not have proxy requirements.
*********************************************************/

// Conditional: Do we need to use the proxy?
if(substr($_SERVER['HTTP_HOST'], 4) == 'cems.uwe.ac.uk') { // Conditional @value: Yes

// Create a context for the PHP file_get_contents function
$context = stream_context_create(array('http'=> array('proxy'=>'proxysg.uwe.ac.uk:8080', 'header'=>'Cache-Control: no-cache')));

// Get the contents of the requested URI
$contents = file_get_contents($uri, false, $context);

} else { // Conditional @value: No

// Get the contents of the requres URI without use of the proxy
$contents = file_get_contents($uri, false);

} // End Conditional

// And return the contents of the file
return $contents;

}

We later use that function to get a SimpleXML instance of the Google Weather XML file. However, there’s an issue with using Google’s API and PHP’s SimpleXML class, and that is one of character encodings. Every text file generated by computers uses some kind of character encoding, and it’s used by computers to interpret what certain bytes should be rendered as. Common character sets used in everyday situations include:

ASCII – American Standard Code for Information Interchange
UTF-8 – UCS Transformation Format, the most common format used on the World Wide Web.
ISO/IEC 8859-1 – more commonly known as Latin1, a common choice for storing data in MySQL databases.

As it turns out, Google API returns XML documents encoded in an encoding called “GB_18030,” which is a Chinese government standard, and includes a lot of Latin characters (commonly used in English, French, Italian and other European languages), as well as Chinese, Japanese and other east-Asian characters, thereby allowing the API to work in those countries.

However, PHP’s SimpleXML class expects us to load a file in UTF-8. Because of that, we need to convert our returned XML file into UTF-8; which, as it turns out, is fairly simple.

PHP has a module called “iconv.” This module is able to convert an object or a string’s character encoding. Through the following code we can easily switch the character encoding of Google’s XML file to UTF-8.

// We created the get_file function earlier, so we'll use that here.
$file = get_file($this->weather);

// The following line converts the XML file, $file, from "GB18030" to "utf-8".
// Bear in mind that the information portrayed below is case-sensitive.
$xml = iconv("GB18030", "utf-8", $file);

// Finally we return an SimpleXML object of the re-encoded XML file.
// The @ symbol before the function simplexml_load_string makes sure that
// if we were given an invalid XML file, it will now throw an error.
$xml = @simplexml_load_string($xml, NULL, LIBXML_NOCDATA);

I hope this explains the issue and the solution in as simple form as possible. However, if you have any questions on how this works, please post them in the comments section below.

Week 26 in PAL

Ben — Mon, 23 Jan 2012 17:00:56 +0000

This week in PAL, after a quick overview of what the term details, we looked (in detail) at semester 2′s assignment brief. The assignment is mostly about creating a website to your own drawn-up specifications. Luckily you’re able to base it on an interesting band, whereas I was stuck with David Bowie last year.

Attached files:

Reverting Themes

Ben — Sat, 21 Jan 2012 07:00:58 +0000

Well, over recent months I’ve noticed that the WordPress theme I hastily made to fit the general style of my site hasn’t really worked. Therefore, since I really want to get back into blogging properly, and I haven’t the time (what with coursework assignments and the hunt for a placement) to build a new WordPress theme, I’ve reverted to the default one until the summer.

After all, surely the blog should be a method of communication more than a demonstration of my WordPress theme building skills (which is something I want to learn). The content I post is far more valuable than the PHP, HTML and CSS that forms the backbone of the design.

To conclude, please forgive me for allowing the blog to differ from the rest of my website, but I guarantee the increase in posts will be worth it.

Sam Boyd’s Custom-Made Surfboards

Ben — Thu, 08 Dec 2011 14:00:50 +0000

This static website, created for my ‘Web Design Principles’ module, demonstrates the importance of working to client specifications. Based on a composite image that had been previously created, the task was to transform that image into a full-featured website.

See the full site…

Week 19 in PAL

Ben — Mon, 28 Nov 2011 17:00:54 +0000

This is the final week for assignment work. Remember that the assignment is due in this Thursday (1st December) at 2pm. Because of the rush at the project room I suggest you hand it in the day before.

The assignment requires that your work is published in the correct folder with a specific file name, I have put together a little application that can test whether you have published your assignment correctly. You can find it here: http://www.cems.uwe.ac.uk/~b2-argo/ittwpal/charity-check.php. Please use the application well andreport any problems to Ben.

I have published my report from last year for you to download and view on Dropbox. Please do not copy it though, and reference it if you use any content or structure from it.

Week 18 in PAL

Ben — Mon, 21 Nov 2011 17:00:32 +0000

In this week’s sessions I mostly let you get along with your work – but the main issue most people seemed to have had was with validation. In the second session on Tuesday (apologies for not covering this in the others) I showed you some useful tips and advice regarding form validation.

Proper, fancy from-scratch JavaScript validation

A tutorial I have found most helpful regarding good validation is actually from Apple. This was taken down for no discernible reason, but fortunately it’s been archived.

This is the solution I ended up going for - and some of you should be able to implement it too without too much hassle. For the Audio and Music Tech students, JavaScript has a C-like syntax, so it shouldn’t be too difficult to grasp the syntax. Looking through the Javascript validation practical you went to should help too.

Simple jQuery validation

However, if you’re a bit behind and you don’t think you’ll be able to complete a proper form validation in time, you might want to go for this solution. Done is better than perfect!

jQuery validation requires very little work from your side. All you need to do is effectively include the Javascript library jQuery (for more info on jQuery see Ben’s round-up from Week 7) and the jQuery Validation plug-in to your service, name your form elements appropriately and you’re sorted. Here’s an example (hosted on a blank page so only the relevant code is included).

Other relevant notes

The assignment deadline is now fairly close – we’re all very busy people now. The next session (and the last before the assignment deadline) will just be a pure coursework-session where I help you out as usual.

Week 15 in PAL

Ben — Mon, 07 Nov 2011 17:00:48 +0000

You should now be coming along okay with your charity websites. In this session, we aim to look at something called jQuery, which is a JavaScript framework created with the vision of allowing users to “write less, do more.” It is now fairly common among the web world, with key users including Directgov, the BBC andUWE.

We will cover basic jQuery syntax, since whilst its quite like normal JavaScript (actually it is normal JavaScript), it has some handlers that are different from the basic syntax.

jQuery is based around the dollar ($) symbol. You use it to target elements within a page, and then interact with them. jQuery is fully CSS3 compatible, which means that you can apply jQuery to anything you can target with CSS3.

The jQuery library includes a massive set of functions, which you can use to make common interactions such as animation, adding or removing CSS classes, changing the content inside, e.t.c. really easy. Full details of all the available functions are available on jQuery’s official API. If you ever need to look up a function to use within it, the easiest thing to do is just Google for “jquery {thing}”.

In addition, there are also a number of additional plugins available. These are bits of pre-written jQuery code that you can plug into your website to increase its functionality. UWE is perfectly happy for you to use these plugins within your own projects, provided you properly reference them. The one we will be looking at today is the jQuery Validation plugin.

Useful Websites

Week 14 in PAL

Ben — Mon, 31 Oct 2011 17:00:34 +0000

Week 6 is all about semantics. We will be looking at structuring HTML code up using the new HTML 5 elements. I have included a code example for you to look at. Take the code and update it to make it more semantic.