Category Archives: Websites

Aber LINKS Website – The old and the new

As I live in fear of loosing data, I have extensive backups of important/valuable data such as the Aber LINKS site. I was having a look through the old backups, and found it interesting to see how the colour schemes and other parts of the site had changed, like the changing of the top banner from the English logos to the Welsh ones. This is the site through the ages, the top 2 images are from back when the site used just HTML without PHP includes and other features. The last image is the site as it looks now.

Site old and new

Site old and new

Matt

Interactive Web Programming – Ministar Galactica

Ministar Galactica is handed in and complete!

Since the last post, many things have been added including:

Powerups!

  • Health
  • Nuke
  • Super Laser
  • Shield
  • Ally
  • Stealth
These were great fun to think up, draw then implement. Really adds a bit of fun to the game.
Other things added:
  • Pause button / in-game help button that pauses the game and shows help to the user
  • Added some more hotkeys – “p” to pause, “o” to turn music off
  • Many fixes
  • Made the game get increasingly harder as the levels progress
  • A fading in and out “LEVEL X” indicator when a user goes up a level
  • High scores page
  • About page
  • End game stats such as powerups used, enemies killed, bullets fired, accuracy
  • New table “Accuracy” to the database, and it prints also to the high scores page
And much more. Anyway, if you want to go and play it, head over to: http://www.matthewrobbins.co.uk/ministar/ and post a high score!
Had great fun creating this assignment, and hope to work on it in the future!
Matt

Interactive Web Programming – HTML5 – Progress

Almost one week and over 1000 lines of code later, I have my little HTML5 (well JavaScript really) game in a presentable format. Features of my assignment now include:

  • Sign up feature to create an account
  • Log in feature (name and password) that checks if the user exists and the password is correct
  • High scores – the top 2 high scores are featured on the game page, along with the person that set them (got from their logged in account username)
  • Added the concept of levels and an increasing difficulty as the game went on
  • A mute button to mute the entire program
  • Volume fixes to make the sounds generally quieter and more consistent
  • Fixes to stop the enemies falling off the left edge so much
  • A website to contain the game
Its been tough, but fun at the same time – creating something that actually works and I can play with. All I have left to do is an “about” page and a couple of other small bits and bobs.
In other news, helped out with the ATC (Air Training Core) Cadets again a couple of times this week, had a great time helping teach them first aid with scenarios involving cars etc. Had a lot of talking about Weetabix allergies in their attempts to keep me concious, discussions of tea when a child’s teapot was found in the back of one of the cars, and the most memorable quote of the evening “I feel like treasure” said a girl who just had an “X” marked on her forehead to indicate an injury.
Matt

Interactive Web Programming Assignment – HTML5

I haven’t posted on this blog in a while, partly because the very interesting Human Computer Interaction assignment is complete and handed in, for which I was improving the Aber LINKS site, and many new assignments have now taken its place over Easter. One I am currently working on for a module called “Interactive Web Programming” involves making a game using HTML5 (and mainly the HTML5 canvas) with a lot of JavaScript.  After reading up on some of the new additions to HTML5, and following a couple of tutorials, I have been able to start making a game from scratch.

In my little game, you have control of a a little “Viper” spaceship, which can be moved around with the arrow keys. At the moment, you can just fire one type of bullet that will destroy the enemy Cylon Raiders, and in turn increase your score. There have been many challenges with this assignment, mainly just creating a 2d game in JavaScript – and learning how JavaScript does have a version of constructors, objects and methods for those objects. Other challenges have included getting the game to respond to 2/3 key inputs at once (e.g telling the spacecraft to go up and left, and shoot), having the enemy ships move around the screen randomly without falling off the sides, and only allowing so many bullets to be fired per second.

Space Game

Currently, I have a moveable spacecraft that can fire bullets to destroy enemy craft. The enemy spawn at the top of the screen and move down in a seemingly random fashion, with many random calculations, some deciding sets of movements so some enemies movements are much different to another’s. When a bullet hits an enemy, the enemy explodes (need to add sound clip) and is destroyed along with the bullet, whilst the player’s score is incremented.

I still have much I would like to do including adding more  guns/bullets, possibly getting the enemy to fire back, different levels with harder opponents, a help menu, and a high score leader board.

A fun week of JavaScript lies ahead!

Matt

Aber LINKS Website – URL Redirecting From “/news.php” to “/news” With .htaccess

Had an Idea – well I have always wanted to be able to type www.aber-links.co.uk/contact rather than /contact.php to get to the contact page – and the only idea I had myself was creating a directory called /contact with an index.php file in there, either that or a redirection to the actual /contact.php. I thought surely there must be a better way, and after a little searching online and reading – I found a way.

If you have a site, in the root directory (or /public_html) there should be a file called “.htaccess”. This file is a configuration file for web servers, so you can give it some rules. For example, mine has a line:

ErrorDocument 404 /notfound.php

This redirects the user to the page “notfound.php” if they get a 404 error (page not found). To redirect the user from an input like “www.aber-links.co.uk/news” to the /news.php page, you need the following lines:

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_fileNAME} !-d
RewriteCond %{REQUEST_fileNAME} !-f
RewriteRule ^(([^/]+/)*[^./]+)$ /$1.php [L]

If your site is .html files, change the .php to .html or .htm – whatever you use.

news URL example

I read this article to learn about what to put: http://www.webmasterworld.com/apache/3715021.htm

Matt

Aber LINKS Website – Colouring Nav Links

To let the user know which page they are on, I wanted the corresponding link in the nav bar to be different to indicate that they were on that page. Until now, I thought the only way would be having a separate nav bar for each page, each with one link as a certain style.

A few days ago, I had an idea – can PHP determine what page it is on (almost like Java’s Reflection). It turns out yes, yes it can! I was talking to a colleague and they had just implemented what I had been thinking about, and a short time later, it is all done and working. I first tried underlining the current nav location with a large orange line, and then colouring the background grey – but neither looked too good. I had the idea of making the background white with black text so that it looked like the top tab of the current page. This wasn’t easy to implement as I was trying to style an anchor that did not want to change it’s colour. In the end I chose to surround each nav item with a div – “highDiv” or “lowDiv” depending on if they were on that page that link points to or not.

Example of highlighted nav item

The vital code for each of my nav items is:

<li><div <?php if(basename(strtolower($_SERVER['SCRIPT_NAME'])) == ‘index.php’) {echo ” id=\”highDiv\”";} else  {echo ” id=\”lowDiv\”";} ?>><a href=”index.php”>Home</a></div></li>

Explanation:

Each nav item is a list item, and inside that thre is a div – the id of which is controlled by PHP. The PHP asks if the SCRIPT_NAME (page name) is equal to ‘index.php’ (for the “Home” link), and if so, it will give the div the id “highDiv” – which colours the background white and the text black. If that statement is false, it will give it the id of “lowDiv” – just normal.

I have a feeling this could be streamlined by using an array of pages (replace the index.php with pageArray[i] in a big for loop) and an array of link texts [to replace "Home" etc]. I assume this is what people do for big sites that have changing link menus.

Hope this helps!

Matt

Aber LINKS Website – Font Size and Google Search Box

I am currently doing a User Centred Design and Human Computer Interaction module at university, for which the assignment requires us to create a website that is user friendly and conforms to many design standards. These standards have been created to ensure that a website is as accessible as possible to all users, especially catering for disabled users. We are allowed to use websites that we have already created for this assignment, so I had the choice of using my personal site, the Aber LINKS site, or my CS25010 games website. I chose to use the Aber LINKS site, as it would benefit most from the improvements researched and implemented in this assignment, as well as giving the marker something physically real to mark full of real data with a real purpose, rather than junk data.

The first thing I did was make a bar at the top of the page for the accessibility options, and the search bar. I may move the search bar to the right end of the nav bar later on.

The Google search bar took a bit of fiddling and 3-4 different implementations before I found one that worked. This one is quite simple, and takes only the code pasted below to take your search term and search Google for that term within your site.

<form id="searchForm" method="get" action="http://www.google.com/search">

<table border="0" cellpadding="0">
	<tr>
		<td>
		<input type="text" name="q" size="25"
		 maxlength="255" value="Search Site.." onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
		<input id="searchButton" type="submit" value="Search" />
		</td>
	</tr>
	<tr>
		<td align="center" style="font-size:75%">
			<input type="hidden"  name="sitesearch" value="aber-links.co.uk" checked="checked" />
		</td>
	</tr>
</table>
</form>

This code makes a search box with a default  value that is cleared by JavaScript if the text box is clicked or focused (e.g by tabbing to it) on.

 

Font Size

Although not essential for our assignment, I thought it would be relevant to include a facility to allow users to change the size of the main text, to allow them to read text easier if they have sight or other problems.

I learnt about most of the information and code here.

I swapped out the hyperlink text for a “+” and “-” image that I created in Fireworks, and the following code calls the JavaScript to tell it to decrease or increase the font size:

<a href="javascript:changeFontSize(1)"><img src="images/fontPlus.png" alt="Increase Font Size" /></a>
<a href="javascript:changeFontSize(-1)"><img src="images/fontMinus.png" alt="Decrease Font Size" /></a>

The JavaScript called will then add or subtract one from the current paragraph size value:

<script type="text/javascript">
<!--
function changeFontSize(inc)
{
  var p = document.getElementsByTagName('p');
  for(n=0; n<p.length; n++) {
    if(p[n].style.fontSize) {
       var size = parseInt(p[n].style.fontSize.replace("px", ""));
    } else {
       var size = 20;
    }
    p[n].style.fontSize = size+inc + 'px';
   }
}
-->
</script>

And that’s about it. A bit of styling later, and all is looking well. The font changes size when the buttons are clicked, allowing the user to select a size suitable for them, without destroying the overall layout of the page.

Matt

Aber LINKS Website – News Feed

Hello again,

Yesterday I posted about finishing putting WordPress into one of my custom XHTML pages. One thing I found when playing with WordPress’s code was a new word: “excerpt” – meaning: a short extract. I did play with and test out this code, and it worked – it would show you the first so many characters of a post then a “[...] Read more” where you could click and it would direct you to where that post lived [on the /blog WordPress actual page]. This gave me an idea – how about putting a news feed on the home page of the LINKS site, perhaps on the (blank white) right hand side – so visitors would be able to quickly see recent news, and read further if it interested them.

So today I went back to the “excerpt” code and started playing, and in the end settled for some code that produced the last (up to) 10 titles of posts. These were hyperlinks to the main news story – but over on the WordPress page in the /blog directory. Not what I wanted. I wanted it to point NOT to where it really lives, but where I was having it generated and shown on the News page. It was easy enough to change the hyperlinks to all direct to that .php page, but they would land you at the top of the page, regardless of how far down the page the news story you want to read is.

I am currently taking a Human-Computer Interaction and User Interface course – this combined with my previous need to always strive to build sites that give high ease of use to the user meant that many results of my new-found tinkering just wouldn’t do. I therefore had a genius idea of how to put the user onto MY news page, but at the story they want.

As you may or may not know –  if you are on a long web page, and click a link – sometimes it will just move you to another part of that page by adding  e.g “#sectionFive” to the end of your URL. This would be essential to my plan, as each post could have a different div id – this is what generates the #variable. As these posts were being generated by WordPress’s “Loop”, I knew if I could get it to name each div itself, I would be rolling – so that’s what I did.

<div id=”<?php the_title(); ?>”>

This code sets the div id to be the title of the post, but the PHP does it before the HTML loads, so the HTML doesn’t notice as it just gets a nice string of text, something perfectly acceptable for a div id. Now all that is left to do is to get a hyperlink to link to this new div id – append it to the end of the page URL.

<a href=”/indexblogtest2.php#<?php the_title(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a><br />

This code links the user to: /newspage.php#story_they_are_going_to. My code there says indexblogtest2.php - that’s where I was developing this code before it went live. The actual hyperlink text is also the title – this code snippet was taken and modified from previous WordPress post code – it is standard to output a hyperlinked title. I had also moved my (right hand side) news section out to a php include now. I added the date and a horizontal rule [loving these now] to each news item too.

Styling was a bit of a pain – I tried with an unordered list <ul> and list items <li> for each news heading, but it didn’t look great, and insisted on budging everything far to the right, and it took a lot of margin-left:0px; to make it right. In the end, I settled on just normal paragraphs, which look fine. Getting this to look good on IE was a pain too.. and I am toying with the idea of taking away its custom stylesheet and embedding some CSS in an IF [IE] section in the header – resulting in one stylesheet, with one property being overridden for IE. Bit more maintainable, but I almost made some more IE-only modifications today..

Anyway that’s all for now – I was ecstatic when that custom linked worked perfectly.. decided to record my thoughts here.

Matt 

Aber LINKS Website – WordPress Integration

A while ago I created a website for my St John first aid society, and recently had an idea to make the site less static and old by adding a news section to the home page (or nearby). This way, visitors such as prospective members, public, possible customers [who may want first aid cover] or people higher up in St John can see that we are active and are taking part in many things right now. News could also cover information on training nights and socials, as well as courses and other events that the society takes part in. This would allow visitors to the site to read about our current activities, and maybe encourage them to join or contact us.

Getting the news in

The solution I chose to get the news onto the site, was to integrate some of WordPress [the blogging software I am using now to write this] into one of our own pages – keeping our style consistent (so as not to confuse users), and to utilise the immense functionality and versatility of WordPress. A major reason for using WordPress is the fact that it has a GUI [Graphical User Interface - buttons and text boxes rather than needing to write code] to allow users to add posts, meaning that non-technical people could add and amends this new news page. I started off by reading about how others have integrated WordPress into their existing pages, and then had to go on to look at how WordPress was coded to understand how I was going to transfer which parts I wanted.

WordPress uses “The Loop“, a PHP loop that prints out the title, post content, author and date etc for as many posts as needed on a page. It turned out in fact to be fairly simple to integrate this code into mine, I just needed a PHP require to pull in some needed WordPress code (wp-load.php or the header, depending on which way you do it). I used the following code:

<?php
// Include WordPress
define('WP_USE_THEMES', false);
require('./blog/wp-load.php');
query_posts('showposts=10');
?>

This code will load the vital code needed, and sets the amount of max posts I want to show to 10.

The next piece of code is The Loop – where each post is printed out. There is different parts (such as title / content / author) that can be put in as you wish, and I would recommend this WordPress article to read about them. [Other recommended reading to help you further down this post].

This was what I ended up with for the loop:

<div id="blog">
	<?php while (have_posts()): the_post(); ?>
		<div class="blogTitle">
		<h2 class="blogTitleText"><?php the_title(); ?></h2>
		<hr />
		</div>

		<div class="blogContent">
		<?php the_content(); ?>
		</div>

		<div class="blogFooterInfo">
		<p class="blogFooterInfoText">Posted on: <?php the_time('F jS, Y') ?> by <?php the_author() ?> </p>
		</div>
	<br />
	<?php endwhile; ?>
	</div>

 

This displays the title, the content, and some footer info – the time and author of the post (as different committee members may be posting). I am able to style each part by giving the header of paragraph an id that I can use in the attached stylesheet.

Speaking of the stylesheet – I have put some WordPress PHP and HTML code into my site, but not any of it’s CSS. This meant when I told WordPress to put an image in the middle of a post (centre justify) – it didn’t know how to, and left it on the left. I did somehow manage to later force it into the middle, but for a more reliable way – I needed to use some of the WordPress CSS to style the WordPress elements. I made another post with broken centre-justified images, and used Google Chrome’s “Inspect Element” feature to see which ID/Class WordPress had given to the centre justified images –  ”aligncenter”. I then headed over to my WordPress CSS and found out this element, copied it to my CSS – and bingo! All worked fine. Whilst in the WordPress CSS, I found a section labelled “WP” – WordPress. I decided that the other CSS in that section may be useful too – and copied it to my CSS as well. The code for me is pasted below [may vary with theme - I am using lightword again]:

.aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;}
blockquote{margin:20px 10px 10px 5px;border-left:4px solid #DDD;padding:0 5px 0 5px;text-align:justify;}
.commenttext blockquote{border-left:4px solid #B6B6B5;}
.wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;}
.gallery-caption{ border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px; }
.wp-caption img{border:none;margin:0;padding:0;}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;color:#111;margin:0;padding:0 4px 5px;}
.alignleft,img.alignleft{float:left;margin:5px 10px 5px 0;}
.alignright,img.alignright{float:right;margin:5px 0 5px 10px;}
.aligncenter,div.aligncenter,img.aligncenter{text-align:center;display:block;margin:10px auto;}
abbr, acronym, span.abbr{cursor:help;border-bottom:1px dotted #000;}

And here is the finished result!:

Image of blog in Aber LINKS site

A great success! Even the XHTML and CSS validate (after changing some div elements to class ones, as they were being displayed with each post, and divs should only be used once per page). At the moment, the news section is located at a test page, pending further approval: http://www.aber-links.co.uk/indexblogtest2.php . In the future (when you may be reading this, it may be located at the home page (http://www.aber-links.co.uk/index.php) or it may be a separate news page: (http://www.aber-links.co.uk/news.php).

Matt

 

Recommended reading:

WordPress.org : Integrating WordPress with Your Website: http://codex.wordpress.org/Integrating_WordPress_with_Your_Website

The Loop: http://codex.wordpress.org/The_Loop

Template Tags: http://codex.wordpress.org/Template_Tags