Category Archives: Websites

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.

Lets Get Things In Order – Custom Post Order

As you may know if you use WordPress, newer blog posts are shown at the top of pages, and they push old posts further down. This is fine for someone blogging bits of news and interesting stories, but didn’t quite cut it for my posts on my computer build. I wanted users to be able to read from the beginning and see it being built up and progressing – rather than reading the posts backwards and seeing it being disassembled into components.

I also wanted just my “Build 2.0” category and other progression based topics to have this styling, not all of them. One idea I had was to make a webpage in HTML as a sort of contents or index of my build. This way I could order the links to each blog post in any way I wanted(using their permalink addresses). This doesn’t make it very readable, as users would have to open each link as a new tab for each tiny bit of the story, and also I would have to remember to grab the permalink for each new post and add it to the HTML page… “There’s gotta be a better way..”

After looking on the internet for some sort of “WordPress Organiser”, I found many people had searched for “WordPress Order”. Well ordering my posts – that was exactly what I wanted. It seemed the best plugin for the job was “Custom Post Order

Very easy to use, I installed by going wp-admin –> Plugins and searched and installed it from there.

To configure, go Settings –> Custom Post Order. From there you can tell your posts WHAT to order by (names, dates, titles etc), HOW to order (Ascending / Descending) and WHICH posts you would like it to apply to (specify categories or all)

Here are the options you get:

Order By




Order Direction

Apply To

You then see your list of categories (and sub categories!!) that you can check to apply it too.

Very useful plugin, did exactly what I wanted to :). If you want it too, search for “Custom Post Order” or go to their WordPress plugin page here.

Matt

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