Category Archives: Aber LINKS Site

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

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

Aber LINKS Website – IE Specific CSS Problems and Solution

During my testing of the site (I feel it is necessary to test extensively on many browsers, operating systems and screen sizes – to ensure no users are needlessly excluded), I found that Internet Explorer displayed the site wrong – the “main area” was displayed 5px or so too high, and it’s side borders were eating into the nav bar. Looked messy, unprofessional, and with the reality that a lot of companies may be reluctant to get away from the horrible old IE browser, I needed to do something to allow IE users to view  the site properly.

Why?

Why does IE display it wrong when Firefox, Chrome, Safari, Opera, Konqueror etc all display it perfectly happily?

After a small amount of research, I found it is because IE does not render the W3C box model correctly. (W3C – World Wide Web Consortium – the people that make the standards and protocols that everyone should adhere to.) So every other browser complies with (at least this part) of the W3C recommendation, but IE still does not, or at least the IE8 that I have and the ones before it don’t. I found the information on why it doesn’t render correctly here.

So what to do? IE isn’t quite sure about heights, widths, margins and padding etc, but every other browser is. I decided I needed to make the site display properly in IE, as although in my opinion it is a terrible browser, many people still use it (9.51% of people to the LINKS site currently use IE – but bear in mind this includes a lot of university students, who are likely to be using newer, better browsers on personal computers).

How to pick out IE users

After trying to redesign my CSS so that it would work happily in both IE and others, (basically changing the code so IE displayed it properly, but then finding the now wrong code obviously displayed incorrectly in every other browser), I decided that IE needed to be using some different code to all of the other browsers. I found it is actually very easy to pick out the IE users, and give them some different code by using “<!– [if IE]>” in your code. What is that? Basically the code is singling out IE users with the [if IE], but it is put in a comment so all other browsers ignore it.

This “if” is actually quite versatile, as you can specify certain IEs [if IE 6] or if it is earlier than a certain one [if lt IE7] (lt for less than, gt for greater than). You can also use [if !IE] – if it is not IE. I found out about this here.

Fixing CSS for IE

So with the “if” in place to catch IE users, I now give them their own stylesheet (style2ie.css). This overrides/overwrites the previously given styelsheet that is for all pages. Other browsers will see their correct CSS, and ignore the IE one in the commented “if” statement.

This IE stylesheet is exactly the same as the normal one except that I have added 5px of padding to the bottom of my nav bar, to force the main area down by 5px. It’s a bit of a hack, but it works fine for my purposes. At this time, it is also a good idea to add “a img {border: none; } ” to your code, to stop IE putting blue boxes around all the links that it sees. See the snippet of code from my main CSS below. SiteNavigation is the div around the navbar. It doesn’t matter if you have the “a img” part available in the main CSS – it doesn’t seem to affect the other browsers. It is just for IE.

Code for IE

 

Aber LINKS Website – PHP

I have used PHP on the Aber LINKS site to make the site more interactive and maintainable. The main use I have used it for at the moment is server side includes – where some common code across many pages is pulled from just one file. This means the code is written just once, and only has to be modified once to affect all pages. I also created a “template” page – with the headers, footers, nav bar, menu and main area all set out ready to receive content. This allows for easy page adding whilst keeping all pages consistent.

Adding a new page

How hard is it? It’s only as hard as you make it. Using PHP, it can be really easy and I follow the following steps with my site:

  1. Make a copy of my template page
  2. Add the content into the main area for the new page
  3. Update the menu and nav bar includes to include the link to the new page
  4. Upload the new page, and updated nav bar and menu.
As you  can see it is very easy to add a new page – as the layout is all done and ready for me. To modify the menu and nav bar across all pages, I have to modify just one file each.
What else to use PHP for?
Currently I also use PHP mail for the contact form. I learnt this code from W3Schools – click here for a link to their page on Secure E-mail with PHP. I have also found it is easy to add another recipient to the PHP mail, by just simply adding “,anotheremail@domain.com” (remember the comma) to the String of who the mail will be sent to.
We currently have no real use for an SQL database at the moment, however I would be ready to use one after doing this assignment.

[It is worth saying at this point, when I refer to Aber LINKS - I do mean Aberystwyth LINKS (St John Cymru - Wales First Aid Society at Aberystwyth University), just in case another place gets a LINKS unit (Aberdeen, Aberdovey etc) and calls themselves Aber LINKS. ]

Aber LINKS Website

Aber LINKS site

Recently I have been tasked with designing, building and maintaining a website for the St John LINKS First Aid society that I am a part of at university. A couple of weeks ago I started the XHTML and CSS code, using my old website as a base to design on.  The design of my old website has a container around the bulk of the page, with a “main area” in the centre – where the content for each page goes. For the LINKS website, I chose to design the page to be central and  relatively thin compared to my wide 20″ monitors. The main area is 600 px wide, and the content (that differs between pages) goes in here. The whole page is about 866px wide, and this displays fine on 10.1 inch netbook screens, without the user needing to scroll to see things. I work hard to ensure that the sites I build are easily and pleasurable to view on all screen sizes.

Above the main area, there is the horizontal navigation bar. Above that is the top header image of the site. To the left of the main area is a menu of all the pages, which isn’t vitally needed as I have a nav bar, but I prefer to let the user choose which to use – as they will naturally use whichever they are used to. Below the main area, there is a footer that contains the date and a Google +1 button. I have tried to add a Facebook like button, but placing it has proved very problematic. I will also possibly add a “Copyright Aber LINKS” at some point too.

Over the past few weeks, I have worked closely with the President and PR and Media Officer to perfect the site, and ensure that it complies with all the St John procedures – as we don’t want to be putting on pictures of things being done wrong. Also the difference between St John (England) and St John Cymru – Wales has became evident, as I am not aloud to use some of the nice “LINKS” logos that I found – as they are the English ones. Nothing can ever be simple, can it? But I have adjusted and adapted where needed, and nothing but the odd image look has suffered really.

Another progress post coming up..

Matt