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.

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

Matt

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.

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

More to add to the todo list – Make the accessibility bar moveable, so it is not always there. Also maybe set the users accessibility preferences in a cookie that will carry for other pages, may have to use a session. Possibly also save if the user has hidden the accessibility menu, so they will not get annoyed at it.

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

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 

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!:

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