The HTML, CSS and JS have all been tightened up and the pages are now a lot more lightweight and load much faster. I am proud to say that the biggest addition is my new DJ website which is a sister site of quirksmode containing mixes and information about myself as a producer and performer. It also is where you can find my custom midi script for the APC-40, something that I have been working on for a very long time and am so happy to finally be able to share it with the rest of the world. Multisite is not the only new WordPress feature that I have implemented, below is a list of some of my favorites (click the links for more information on each of these features):

• Nav Menu with Drop Down
• Post Thumbnails
• Custom Write Panels
• Themed Login and Registration
• Multisite

These improvements have allowed me to remove a vast amount of custom code that I had previously written, keeping things a lot simpler and allowing new content to be inserted so much easier than before. Keep your eyes peeled for more updates over the coming months, my next goal will be to improve the overall design of the site as it is nearly 4 years old now and in desperate need of a lick of paint!!

Admittedly my commute to work is a bit of a killer at 1:10 mins, but Virgin Trains are pretty comfy (though always late!) and it allows me time to catch up on the important things in life e.g. music production, watching movies etc.

Back onto subject, I have just moved into the Rotunda, an Urban Splash renovation, situated right at the heart of Birmingham in the city centre. It’s brand new and I think I was actually the first person to move in. The flat itself is amazing, up on the 11th floor with an amazing view of the town centre. Check out the photos below.

After much consideration I have decided to migrate away from the permanent sector and try my hand at contracting as I feel this style of work will suit me and I always enjoy a fresh new challenge. I have been extremely fortunate in securing my first contract at Camelot, working on the National Lottery Website for the next 3 months. Where I go from there, only time will tell, but of course I will keep you all updated, wish me luck…

Anyways, here’s my list of the top 6 developer add-ons for firefox. They make life so much easier when it comes to developing websites and I heartily recommend you check them out.

1. Web Developer Toolbar
   Adds a menu and a toolbar with various developer tools.
2. Html Validator
   Adds HTML validation to the View Page Source of the browser. The validation is done by Tidy or a SGML Parser from W3c
3. MeasureIt
   Draw out a ruler to get the pixel width and height of any elements on a webpage
4. ColorZilla
   Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.
5. IE Tab
   Enables you to use the embedded IE engine within Mozilla/Firefox.
6. Firebug
   Integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
7. YSlow
   An extension of Firebug, YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. YSlow gives you a performance report card, HTTP/HTML summary, list of components in the page and tools including JSLint.

It’s a Y reg (2001) Silver Golf GTI Turbo and when you consider that this car was built seven years ago, you realise what an amazing job VW did with it. It’s certainly a lot safer than my old Pug (RIP), which can only be a good thing considering how much faster it is as well.

sIFR 3

When I first heard about sIFR I had to double take because it almost seemed too good to be true. One of htmls many limitations was the inability to use a bespoke font that differed from those supported by the operating systems and therefore run the risk of it not displaying properly on a users screen. To quote sIFR’s website:

“sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL.”

It basically allows you to use which ever font you desire, even if it doesn’t exist on the users operating system. You can choose which elements you wish to apply the transformation to e.g. h1, h2, p.aClassName and even style them exactly how you want. For Quirksmode I have applied sIFR to the h1′s using a font called Corbel, you can test the difference by disabling javascript or the stylesheet.

A few things to watch out for

1. sIFR does not work when opened straight from the local filesystem. You must load sIFR from a web server.
2. You can’t change the size of the browser text on the fly, you must click refresh for the changes to take effect
3. Javascript must be enabled for your Flash Text to display
4. Flash must be enabled/installed for your Flash Text to display

Alternative to sIFR

If you want to show off your fancy new fonts and don’t want to run the risk of a user not having flash or javascript enabled, then the other solution I have come across would be to use an image and hide the html text by positioning it off screen. The following css will do just that:

h1.logo{
background:url(http://www.quirksmode.co.uk/wp-content/uploads/2008/03/mainlogo.jpg) no-repeat;
width:284px;
height:65px;
text-indent:-9999px;
outline:none;
}


1. AJAX Calendar by John Godley — A version of the WordPress calendar that uses AJAX to allow the user to step through the months without updating the page. Additionally, a click on the ‘expand’ link shows all the posts within that month, inside the calendar. Caching of content can be enabled to increase speed.
2. AStickyPostOrderER by AndreSC — AStickyPostOrderER lets you customize the order in which posts are displayed per category, per tag, or over-all, in WordPress 2.3+ blog. Useful when using WordPress as a Content Management System. Now with category or tag based meta-stickyness!
3. Access Keys by Aaron Harun — This plugin allows you to add Access Keys to Category and Page navigation menus to make your website far more accessible.
4. Advanced Tag Entry by Jennifer Hodgdon, Poplar ProductivityWare — Adds more advanced tag management to the post edit screen.
5. Akismet by Matt Mullenweg — Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it. You can review the spam it catches under “Comments.” To show off your Akismet stats just put <?php akismet_counter(); ?> in your template. See also: WP Stats plugin.
6. All in One SEO Pack by uberdose — Out-of-the-box SEO for your WordPress blog.
7. Breadcrumb NavXT – Adminstration Interface by John Havlik — Adds a breadcrumb navigation showing the visitor’s path to their current location. For details on how to use this plugin visit Breadcrumb NavXT.
8. Dagon Design Sitemap Generator by Dagon Design — Generates a fully customizable sitemap
9. Easy Gravatars by Dougal Campbell — Add Gravatars to your comments, without requiring any modifications to your theme files. Just activate, and you’re done!
10. Fold Page List by Rob Schumann — Provides PHP functions to display a folding page tree
11. Google Analytics for WordPress by Joost de Valk — This plugin makes it simple to add Google Analytics with extra search engines and automatic clickout and download tracking to your WordPress blog.
12. Google XML Sitemaps by Arne Brachhold — This plugin will generate a sitemaps.org compatible sitemap of your WordPress blog which is supported by Ask.com, Google, MSN Search and YAHOO. Configuration Page
13. Gravatar Signup by Mark Jaquith — Allows commenters to sign up for a gravatar by clicking a checkbox and filling in a desired password
14. My Page Order by froman118 — A WordPress plugin to let you set the order of your pages
15. Plugins Used Plugin by Andrew Chen — This plugin will give you a function to display what plugins you are using. Thanks to Sören Weber for submitting a fix for a display problem. Now sorts by plugin name instead of plugin file name as it had.
16. Search Everything by Dan Cameron — Adds search functionality with little setup. Including options to search pages, excerpts, attachments, drafts, comments, tags and custom fields (metadata). Also offers the ability to exclude specific pages and posts. Does not search password-protected content.
17. Simple Tags by Amaury BALMER — Simple Tags : Extended Tagging for WordPress 2.3. Autocompletion, Suggested Tags, Tag Cloud Widgets, Related Posts, Mass edit tags !
18. Sociable by Joost de Valk — Automatically add links on your posts to popular social bookmarking sites. Go to Options -> Sociable for setup.
19. Subscribe To Comments by Mark Jaquith — Allows readers to receive notifications of new comments that are posted to an entry. Based on version 1 from Scriptygoddess
20. Viper’s Plugins Used by Viper007Bond — Allows you to display alphabetically what plugins you have enabled on your blog in either a table or unordered list. Also allows you to set custom descriptions for the plugins in the output.
21. WordPress Admin Bar by Viper007Bond — Creates an admin bar inspired by the one at WordPress.com. Credits for the look of this plugin go to them.
22. WordPress Database Backup by Austin Matzko — On-demand backup of your WordPress database. Navigate to Manage → Backup to get started.
23. WordPress.com Stats by Andy Skelton — Tracks views, post/page views, referrers, and clicks. Requires a WordPress.com API key.
24. cforms II by Oliver Seidel — cforms II offers unparalleled flexibility in deploying contact forms across your blog. Features include: comprehensive SPAM protection, Ajax support, Backup & Restore, Multi-Recipients, Role Manager support, Database tracking and many more. Please see the VERSION HISTORY for what’s new and current bugfixes.
25. runPHP by James Van Lommel — Allows you to put PHP code into a post and have it eval()’d.
26. the_excerpt Reloaded by Kaf Oseo — This mod of WordPress’ template function the_excerpt() knows there is no spoon.
27. wp-cache by Ricardo Galli Granada — Very fast cache module. It’s composed of several modules, this plugin can configure and manage the whole system. Once enabled, go to “Options” and select “WP-Cache”.

Perhaps it’s the simple fact that you will never be happy with the end result and this is why I have decided to name this first release “Phase one”, with lots more improvements and features to soon follow. This website is a custom built WordPress theme, which also operates as my content management system. My initial plans were to create a static portfolio, but after spending some time experimenting with WordPress, I realised that with some heavy tweaking it could more than suit my CMS needs. It’s a real mix of different technologies, which I hope have blended together successfully. The flash banner at the top is just a holding image at the moment, but I have some big plans for something special to go there soon. I really got to grips with Jquery over the last year or so and it has proven to be so useful for adding a little extra spice to an otherwise static page. The portfolio section features this the most; including two rather useful plugins for the image slider and lightbox.

Great care was taken to ensure this website is accessible and all code fully standards compliant. SEO seems to be pretty tight and have started to get some good page rankings for my primary keywords. I use a great SEO plugin by uberdose which has proven very useful so many thanks to him for that. A full list of all the different plugins I have used for this website can be found here. I find that these are the key to transforming WordPress into a fully functioning CMS and I really hope that we will start to see them being incorporated into later releases as standard.

Overall I am really happy with how it has all turned out. As I have already mentioned, building your own website will often prove to be the hardest, but once it’s finally online it is definitely all worth it. Please let me know your thoughts on this website, I am really open to comments/suggestions and will endeavor to get back to anyone that takes time to get in touch.

David Plunkett

Because this is multi lingual a large amount of focus was applied to ensuring the design allowed for all the information to be displayed correctly. The design is based on the P&O Ferries tourist website allowing for a consistent look and feel across all their online web products.

I chose XML to store the content because this is something that marketing were already familiar with. There are plans in place for me to update this so the info is stored securely in a database and uploaded/downloaded through a more detailed admin section.

Great care was taken to ensure the website looks the same across all browsers, if there are still any problems then these will be fixed for the next release, along with the new content designs which you can preview by using the image slider to the left.

Designing this website has been a challenge, but a really enjoyable one and has allowed me to learn so much about designing/developing large, accessible corporate websites. It’s worth mentioning that since this redesign we have seen an increase of 70% in sales conversions making this website a real success story.

Flash became my chosen technology as it was the one I felt the most comfortable with and would more than meet marketing’s needs. This whole application is powered by a custom built CMS I created using Actionscript and XML. All marketing need to do is edit the XML and upload the photos, with an organised folder structure to define the language.

Similar to the movie player application, I intend to redesign/rebuild this to include a more detailed admin section in the near future.

Point bonuses feature heavily in this game with a strong emphasis on stringing headshots together without getting hit. Different parts of the body result in different points and all stats are registered and displayed at the end of each level. Multiple weapons can be used and the enemy paintballs are randomised with the accuracy increasing depending on the level.

A PHP/MySQL highscore table allows the users to save their scores with the winner for that week receiving a free day’s paintballing. Emails are also retained allowing for a mailing list to be generated.

I chose to use flash for this site because it allowed me to add some style to what could of been a set of static textual web pages. I was also able to implement some HTML style features such as a working browser back button.

The music was created and arranged using a combination of Acid and Soundforge. This may not run correctly from the CD due to the large movie that’s found at the start of the presentation. If you have any problems then please copy the files to your hard drive and run it from there.

For my project I decided to firstly look at how a night club could be developed to enhance the experience for the end user. My ideas were eventually narrowed down to one, which was for an interactive table that could be used for various functions including ordering drinks, communication with other customers and changing the music. This presentation describes the table and contains an animated demonstration at the end which shows the table in use.

This application begins with a short intro that says “Hi, and welcome to student house. Please click on the buttons below to access the various rooms”. There will be a panel along the bottom that contains a set of buttons. The left hand side buttons control the main photo of the room. The right hand side buttons access the different pages. When u roll over an image and it appears blue with a red border, then you can click on this to hear the corresponding sound.

This project was designed and created from scratch using Flash for my final year module entitled “Information Design”. Before work could begin it was important to firstly learn about what good information design actually was. A variety of websites and books were consulted and conclusions drawn up in the form of a design checklist. This checklist was then used as a guide during the design and development phases.

Every step of the walk was photographed, with each photo being used to represent each stage of the interactive tour. A guide was filmed to offer knowledge about each section of the walk along with a map that displays your current location.

Deciding to take a different approach to everyone else I decided to write and photograph a short story about a bank robbery, compose the music and then build the presentation around that.

All the voices and sounds were recorded in a sound studio; the music was created using Sonic Foundry’s Acid. The limitations of only being allowed to use power point proved to be a huge hurdle during the creation of this presentation.