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

Animated GIF

A GIF [Graphics Interchange Format] is a type of image format, but one that you can animate – and they were very popular in the earlier days of the internet, along with the marquee and blink HTML tags. It is now 2012, and GIFs are certainly still here, but are not as used as they once were – but today I decided I would make an animated one to see how they worked.

I already had my favourite image editor – Macromedia Fireworks [Adobe now own them] – open, and found the “Frames” panel under the “Window” menu. With this panel open, it was easy enough to add/duplicate frames, and edit the image on each one – similar to Macromedia Flash animation.

With my task complete, here is the result:

Matt

Industrial Year Placement – Google

The course that I am studying, G401 Computer Science, included a mandatory year in industry as our third year, our fourth year being the last year of teaching. Although it is possible to not do the year in industry, I can see nothing but positives to be gained from a year being immersed into the real world of work, gaining vital and valuable experience about the field of employment you may wish to pursue for the foreseeable future. As well as earning some money to go towards paying back our University fees, it gives a chance for employers to get to know you, and for you to demonstrate your natural abilities and work ethics in a more genuine environment over the course of the placement, rather than under pressure in a short hour long interview.

Upon hearing about industrial year placements, and discovering the benefits mentioned above, I decided that it would be a very good idea, and when the second year started, I began researching the companies and placements that interested me, earlier than the majority of my colleagues. Why so early? Knowing that sometimes placements get filled before their application deadlines, and being the sort of person that likes back-up options and fall-back plans as standard,  I started preparing my CV for the applications. I started off by applying to the places I really wanted to work for, such as Google, Intel and HP. I also then applied to about another 4 companies or so, to ensure I had enough back-up options I was not successful in obtaining one of my preferred placements.

I started applying for these placements in late November last year,  after our University trip to Gregynog [where employers helped us improve our CV's and interview techniques]. It is now February, and I still have not heard from many companies, however I have heard from a few, and a few important ones…

I was relatively sure I would not hear from Peugeot-Citeroen, as their application website kept loosing my progress, and not submitting my application. Despite creating a new account, and trying again – still no luck as the site threw errors and lost my progress. HP said they were very busy, as they had many applications. ProspectSoft gave me a phone interview and a coding challenge a while back, but I have since heard nothing from them. Gloversure offered me an interview very recently. Those were mainly my back-up choices, running along side my preferred applications.

Intel gave me a phone interview, online test, and I also attended an assessment centre. It provided me with great experience, and I was offered the placement there, which did look brilliant, but I was still pursuing the Google internship, the one I really wanted more than anything. My trip down to Google last summer for the Google BOLD immersion programme had made me see what a clever, logical and innovative company Google was, and I knew that I would love to be a part of their team.

I have now been offered an Internship with Google, and can’t wait to go to work for them. I really look forward to going somewhere where I can be happy, make a difference, and have my innovative, logical ideas listened to, ideas that can save time, money and other resources. I have found it frustrating in the past to see the companies that employ me waste money where there is no need, and are unwilling to listen to other’s advice. I am now very much looking forward to July, where new experiences, people and knowledge will be found.

Matt out.

 

HTML5 – Chrome <3

The main browser I use is Google Chrome. In the past, I have used Internet Explorer, Opera and Firefox a lot. Firefox was pretty fast, with many add-ons to make things easier/more useful. Opera had some cool features like typing “w orange” and it would search Wikipedia for “orange”. This also worked with Google, eBay (YouTube?) etc.. It also had some cool gestures to open a new tab from a link, flicking the link to the top of the screen. A few years ago I moved from Firefox (my main browser) to Chrome. Why? Firefox, although miles faster than IE, still seemed slower than Chrome. It also kept crashing, and I always felt the tabs were fairly unstable.

Chrome runs each tab in a seperate thread, so hopefully if one tab crashes – the browser doesn’t die completely. (I still continue to have problems with YouTube crashing everything for no reason, though). Chrome is quick, snappy, and seems quite light. I also have my custom searches implemented to the main bar, e.g “wiki JFK” will search Wikipedia for JFK. Same with eBay, YouTube, Facebook (whois Matt Robbins..) etc.

Whilst reading up about HTML5, I found the following tables of information on W3 Schools:

Table of compatability

 

Which is the only browser that supports ALL video formats. Which is the browser that also supports ALL audio formats?

Need any more reasons to switch?

Then here is one last one, of the error message when a tab crashes:

Matt out.

HTML5 – It has started.

Now the group project code is in and done, I finally have a bit more free time to do other things that have been waiting due to a lower priority.

http://www.w3.org/html/logo/

One of these is HTML5, which I have already had a bit of a look at on w3schools’s site. I have now started watching some tutorials from thenewboston about HTML5 and CSS3. It all looks fantastic at the moment, with many DIV’s being replaced by meaningful tags such as <header> <article> and <footer>. I will probably change my main website, and maybe aber-links to HTML5 when I have learnt a sufficient amount about it, to make the sites look better and be a bit less static.

Matt out

Group Project – Software Development Life Cycle

This week is designated as Computer Science’s “Coding Week”. This week is set aside for our allocated 8 person groups to code their group projects.

Our project is to create an Android phone application that uses geocaching with a pirate theme to help children aged 9-16 advance their mathematics. In the past few months, I have been leading my group [group 08] as we prepared design and test specifications for the project, and it has finally come to coding week where the majority of our code will be written.

Today we have been adding more functionality to the app, such as the log in authentication and ability to create a new account. To create a new account, we are using a PHP page to directly add a user into the Users table in the MySQL database running on one of our group’s servers. I am currently building that PHP page, and I am having to take into account that this page is going to be viewed on small ~3 inch phone screens. I normally design pages to use W3′s nromal XHTML DTD. However, after searching the internet I found that there is also a DTD especially for XHTML written for mobile devices:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"

"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">

Rather than

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

See the image below for an example of what the page may look like in the end on a 3.5inch iPhone screen:

Pirate Game add a user screenIt looks so much better than even a modified normal XHTML page, and I am glad I found out about the mobile XHTML DTD when I did! Now a bit of work on JavaScript validation, and get it ready to send SQL statements!

Matt out.

 

Games Website Marks – CS250 Project

A while back I made a webshop for games as part of a CS250 Web Programming assignment, a project which I really enjoyed doing. The results are in, and I scored 94%! Not bad for a project I had a great deal of fun creating and perfecting. The games shop was made in XHTML+CSS using JavaScript for some client-side validation, and PHP for many features such as includes and sessions. The games were pulled from an SQL database, and I implemented many buttons and options so the user would be able to narrow down the results to a certain platform, price range, or games that contain words. Each of these required a new SQL statement which turned out to be quite intuitive and logical to do.

If you fancy having a play with it, visit it here: http://users.aber.ac.uk/mcr1/cs25010/

If you are curious as to how I built the site and a few technical details, you can see the extensive about page here, be warned – it is rather large.

Next semester it looks like I will be creating a project in HTML5, which is very interesting, especially when combined with CSS3.

Matt out.