Not too much to say about it right now, other than the fact that I’ve started working on my Independent Study!

By ’started’, what I mean is that I’m reading a book called Success in your Project which should give me some guidelines as to what I need to do. Once I’ve finished that, I’ll need to start working on my development plan, and then do lots more reading.

Anyway, apart from that, I have some good news. I got an A- for my Nature of Computing module, which is very nice considering I was aiming for a B, all I need now is another A, and a B, and I’ll graduate with a First! I get one of my remaining grades tomorrow, so I’ll report back then.

Update

Got my grade for Advanced Web Design earlier: A+ (I’m very happy about that.)

Just one exam, one more assignment, and I’m done for this semester. The exam is for my Database Management Systems module, a module which I’m more than happy to say I’m not enjoying at all, but a couple of days swotting up before it happens should give me a good enough grade to pass, which is all I’m looking for.

Alternatively, the assignment is for my Advanced Web Design module, a module which I’m thoroughly enjoying, even if a LOT of it is covering stuff that I already know. The problem is that the more I work on the assignment, the more I realise that I hate web design. (more…)

In an effort to report my progress with my assignment so far, listed below are the answers to the questions asked during the last lecture.

Establishing your basic ideas

• Topic for website: Attractions available along the river in Worcester.
• Target Audiences:
  • General desktop browser user (Firefox, Internet Explorer 7/8, Opera, Safari and Google Chrome Browsers)
  • Mobile phone user (Opera Mobile, Internet Explorer Mobile, iPhone and Nokia Browsers)
  • Printable pages
  • Screen reader software user (Jaws)

Planning your project

I’ve completed basic planning of the site, with a hand-drawn overview of what the different users will see with their respective browsers, but these need to be updated, polished and turned into a proper set of storyboards. I have, however, developed several prototypes to test different features for compatibility.

Building your project

The latest of the prototypes should be more than suitable for adaptation to assignment worthy work, but I’ve not yet started on a final build.

Reporting on your project

• What technologies do you intend using in your assignment and why?
  • XHTML and CSS will be used for the assignment as they’re the most robust technologies available at the moment, and the ones with which I have the most experience.
• How will your assignment satisfy the assignment criteria and at what level?
  • I’m planning on wowing the assignment markers with the quality and robustness of the build. For example, every decision taken will be justified with a view towards it’s usability and accessibility – for example, the mobile version of the site will work equally across many different hand held devices.

Although I’ve never created any XML code myself, I already have an understanding of what it is, and the structural rules that need to be followed for it to be valid. Popular types of XML include XHTML and RSS feeds, technologies which have used it to it’s full potential.

I’ve also experienced environments where XML was used to translate data from an Access database to that of an MySQL one, with the former creating XML documents, containing the relevant data, which a PHP script then translating this data into SQL queries for loading into the latter.

Whenever I look at XML, it always feels like a multi-dimensional array. I use these on occasion when programming PHP and often think that should I ever need to export the data contained within the array, XML would be a good way to do it – but so far have never needed to.

I’ve blitzed though the XML tutorial at Tizag as most of it’s content was very basic, but now I’ve reached the part on XSLT, I’m going to slow down and pay closer attention.

I found this online and wanted to share it.

Through my Twitter account, fellow Twitterites and myself have created the ultimate web developer/action movie.

It’s called Position:Absolute. It’s about z-index, played by Sylvester Stallone, a web developer who gets fired for supporting other browsers besides IE. The villain of the story would be Strikethrough, played by Jeremy Irons, who stole z-index’s code, had him fired and forced the entire web department to only support IE. Strikethrough’s sidekick Scope Creep would be played by Jack Black. Mos Def would be the token #000000 guy, named mos:def;. And Alyson Hannigan would play the spunky love interest of the story named Fire Fox.

This is also open to be part of a trilogy with Position: Fixed being the second part where z-index has been commissioned by FBI to stop a bunch of IE hacks (z-index’s FBI agent point of contact with would be played by Samual L. Jackson) and the final chapter, Position: Relative, would be about z-index’s son having to clear his dad’s name after he is wrongfully imprisoned.

Also, all the web development transition scenes would look like the hacking scenes from Hackers.

“This summer, Stallone is going to paint the town #FF0000! Rated R for violence and pwnage.”

This is pure Action-Blockbuster-Gold. I just have to wait for Hollywood to come calling.

Over the past few weeks I’ve been helping other students with the various problems they’ve encountered while trying to learn CSS. A lot of the time, the problems are easy to solve when using the correct tools, but without these tools, it becomes a long and complex process of trial and error to try and fix the problem.

Because of this, in an effort to help the rest of the class, the purpose of this post is to provide some information and links to some of the tools that I use for web design, with a quick explanation of why I use them, and how they help.

Software

• PortableApps – As already highlighted by Rowland, this lets you install copies of various applications on to your memory stick, meaning you’ll always have the software you want to use available to you. Although this is not strictly required for web design, it’s included here because each of the applications listed below can be installed to your memory stick via it.
• Firefox – The king of browsers. Not only is FF one of the more secure browsers available, the ability to extend it using community grown add-ons (highlighted below) makes it an invaluable tool for any and all web designers. The only additional advice I would give about browsers is that you should be sure to test that your designs work in all browsers, including Internet Explorer, Opera, Safari and Google Chrome (most of which can also be installed to your memory stick.)
• Notepad ++ – This is a very versatile text editor designed to replace Windows Notepad while including a lot of features useful to web designers. Specifically, for HTML and CSS editing, it uses syntax highlighting, which uses different colours to highlight the different elements within the source code, making the code easier to read. It also features syntax matching, which highlights where chosen tags start and end.
• FileZilla – A powerful – yet lightweight – FTP client. Use this to upload files to a remote server.

Firefox Add-ons

• Web Developer – Provides a range of tools useful to web designers. Using it you’re able to do things like disable CSS, outline specific elements, test forms, and a whole range of other useful features.
• HTML Validator – Lets you check if your source code validates correctly within your browser without needing to visit the W3C validation site. It also explain why the code isn’t valid, and teaches you how to fix it.
• ColorZilla – Not strictly required, but is a useful tool if you want to know what colour something within a web page is. Just click on the button – click on the colour you want to know about – and it’ll give you the hex code and RGB values for that specific colour.
• Firebug – This add-on lets you explore your design – element by element – displaying all the relevant information you could need, including what style formatting it has applied to it, and letting you edit elements to see what the changes look like in real-time. Very useful for debugging a site.

Advice

When you open a <div> tag, and choose to close it further down the page, make sure that you put a HTML comment next to it indicating which tag you are closing. This makes it much easier to see where your <div> tags start and finish, i.e:

<div id="wrapper">
	<div id="header">
	text and stuff
	</div><!-- /header -->
	<div id="content">
	text and stuff
	</div><!-- /content -->
	<div id="menu">
	text and stuff
	</div><!-- /menu -->
</div><!-- /wrapper -->

Anyone else?

That’s all I have for now, but if you have any killer apps or add-ons that help with web page design, please feel free to comment. Thank you.

I’ve decided, due to my existing knowledge of CSS, that I’m going to skip forward by a few sessions and start tackling some of the more advanced techniques discussed in the later sessions. I’m going to start with Activity 503 as I’ve actually completed both the tutorials shown in activities 501 and 502 previously.

Linked to this post is my example of a well designed web page. The purpose of this activity was to explore my CSS skills, and to produce a suitable design for a site using them.

Although basic (and probably not as good looking as it could be), I think this is a fairly good example of a well designed page because of the logical position of elements such as the navigation and main content area, and the size – and resize-ability – of the text on the page, allowing for easy reading. It is also deliberately thin, to aid in the ability to read the text (having no more than about 12 words across each line), and to ensure that even machines with lower resolution monitors can view everything without needing to scroll horizontally.

I do feel, however, that my design could be easily improved upon, as it feels a little claustrophobic and cluttered, probably because, in an effort to show off my CSS ability, I’ve added features which are not truly needed, such as the right-hand-side column (convention suggests that comments are often better positioned underneath posts, rather than to the side).

Linked in this post is a very quick and simple My First CSS Page site that I created for this, the second activity of the day.

I decided to use an external CSS file for this example as it will allow me to add additional pages to the site, each of which can use the same external CSS style information – although as this is just a single page used to demonstrate CSS knowledge, I could have got away with including the style information within the <head> tags of the site.

What I specifically decided not to do was to use inline styles as – although they do provide the fill power of CSS styling – they’re no better than the old-style <font> tags when it comes to using their power.

Just for experience sake, after my initial draft, I included the Eric Meyer’s Reset CSS to see how it would affect my initial design. I found that, in addition to ‘resetting’ some of the font sizes, it also removed a lot of padding and borders from some of the block elements, such as the <h1> tag. Based on this, I now know that if I’m to use the Reset CSS file again, I need to take things like this into account.

The purpose of this exercise is to test global access to files uploaded to my server. For this purpose, the linked file needs to be checked as accessable by one of my peers.