projekt draco

Update 13/01/2007

Though the website in this article has been modified, viewing of the original page can still be done via web archives.

Some screenshots

Introduction

This example was done because:

• to show that the current Temasek Polytechnic homepage (as of Febuary 2006) can be converted into a standards-oriented layout
  without having much differences in most web browsers;
• since the school’s homepage will be revamped soon, I could preserve the current look as well;
• or simply put, I hope this can be an educational example to most because much of the visitors of
  this dumpsite would visit regularly, or at least used to do so.

I’d mailed the webmaster in-charge of Temasek Polytechnic with regards to this conversion, and the reply stated that they had hired
some company for a facelift and a migration to a content management system. And since I didn’t receive any violent objection
about writing about this conversion, I’ll go ahead.

Please bear in mind that I did not do this with the “holier-than-thou” attitude: this conversion is not about
how I can do better than the (current) designers, or to prove anyone wrong directly. I write with a tone of peace, so any of the mentioned point does not
directly nor indirectly undermine the efforts of the designers of the current site.

Several caveats/differences:

1. The standards-oriented layout is a true fixed width, flexible sides layout.
2. I did not put into considerations of constraints that the current webmaster(s) might have faced while
   designing the current site, so what I’ve done is just strictly a replica of the site’s appearance.
3. I have designed the site to at least meet the current table-based design’s recommendation of Optimised for 800 x 600 screens & IE5.5 and above.
4. All the Javascript has been stripped in the converted version.
   • The random banner javascript feature has been replaced by a PHP snippet instead (more about this later on)
   • That said, login, links and most other features will not work.
5. I’ve only been able to test the site in a Windows (XPSP2) environment, with the following web browsers (which I believe sums up an estimate 98% of the visitors to the site):
   • IE 5.01 (screenshot: 800×600, 1024×768)
     • There’re minor glitches over some images and texts with this version of IE, noted.
   • IE 5.5 (screenshot: 800×600, 1024×768)
     • This is the minimum requirement for viewing the current site, as stated in its footer. (read: point 2)
   • IE 6.0 (screenshot: 800×600, 1024×768)
   • IE 7 (screenshot: 800×600, 1024×768)
     • Horizontal scrollbar seen, as highlighted in the screenshot (read: check out the bottom right of scroll, noted).
   • Opera 8.5 (screenshot: 800×600, 1024×768)
   • Firefox 1.5 (screenshot: 800×600, 1024×768)
   • if you’re able to help with producing screenshots of the site in another operating system(e.g. Mac), do drop me a note!
6. There’s a image glitch with the left column when the resolution extends beyond 1280×960 due to the nature of the image size itself.

The random images

Since the files are saved according to numbers, namely mainpix1-4, all I have to do is to generate a number between 1 to 4 inclusively, and that’ll do the trick, as shown in code listing 1.

$pic_no = rand(1,4);
switch ($pic_no) {
	case '1': $alt_attr = 'Explore your creativity at TP!'; break;
	case '2': $alt_attr = 'Unleash your leadership potential at TP!'; break;
	case '3': $alt_attr = 'Experience a vibrant campus life at TP!'; break;
	case '4': $alt_attr = 'Sharpen your competitive edge at TP!'; break;
	default: break;
}

Since the images need alternate text attributes, switch-casing the random number generated would provide the neccessary attribute.

And then insert the following line: <img src="images/mainpix<?php echo $pic_no; ?>.jpg" alt="Come to TP: <?php echo $alt_attr ?>" width="435" height="187"> into where you want the image(s) to appear in the HTML source, and we’re done.

Random numbers will be generated to replace $pic_no and the image will appear with the appropriate alt text:

<img src=”images/mainpix2.jpg” alt=”Come to TP: Unleash your leadership potential at TP!” width=”435″ height=”187″>

Conclusion

All I hope for is that the next generation website of Temasek Polytechnic will be more standards-oriented instead of being a semantic mess. It’s a school that has courses teaching web design and what makes of them if they are not even doing things the right way?

Granted, I know the site is done by externally hired web professionals. But just think about it, if the so-called professionals aren’t following the standards that has been set for their field of work, isn’t that a major cause for concern? You make the call.

Please keep in mind that this version does not represent the best practices, but should be treated as a viable solution.

Accessing the site

All right, here we go.