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:
We talked about the methods which you can use to include CSS documents.
To conclude we held a quick test on CSS selectors. The questions and answers are included in the attached PowerPoint.
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:
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:
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.
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.
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:
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.
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.
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. 
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).
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.
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.
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.
The assignment is out. It looks the same as what we did last year. A copy is available for you to download here. We’ve compiled a list of example work from last year for you to browse for inspiration.
| Name | Practical Work | Charity Website | Blog |
|---|---|---|---|
| Alex Jegtnes | Practical Work | The Society for Starving Students | The Blog That Shouldn’t Have Been |
| Ben Argo | Practical Work | Piers Crispin Heart Foundation | Introduction to the Wub |
| Charlie Tizard | Not Available | PETZ | Wubstep |
| Dushyant Kanungo | Practical Work | Scholar | My Blog |
| Grey Hargreaves | Practical Work | Save the Spycrab | Grey’s Introduction to the Web* |
* Grey’s blog is “Intentionally terrible since 2010.” Please do not use it as a good example.
The remainder of the session will be spent looking at further HTML structures, directory structures and an introduction to CSS. More content will follow here.
Week 3 is aptly named “Dive into HTML 5.” There is a very good website that we used as a great resource last year with the same name, which we suggest you look at. It’s also available as a purchasable book.
We plan to be throwing you straight into practicing HTML, and as such we’ve devised a small practical assignment that should get you comfortable with working with it. The best way for learning HTML is really through playing with it.
First we want to get you comfortable with making a basic HTML structure. An example one can be found below. Take a look at it, study it, and then set about creating your own, including whatever information you deem necessary.
Secondly, we need to get you aware of what goes inside the <head> section of an HTML document. The head is where we include information that handles what happens on the page, how it interacts with search engines, and where we can include stylesheets and scripts. For an example, see the source code of this page.
Finally, there’s a list of valid HTML 5 tags available here (Don’t use the W3Schools version). Please choose 5 of them, preferably ones you don’t already know, find out what their usage is and create an HTML page with the basic structure we made above and practice playing with each of the tags. Below (or within) each of the tags, try to write a couple of sentences about its usage, where, when & why it should be used, and what it means semantically.
For week two we covered a mix of topics. During the first half we recapped the concepts of theory discussed within the lectures, namely:
For the second half we took a look at HTML. The idea is for the next few weeks we will continue to play with HTML so you become comfortable with it.