Rebooting the University of Baguio Science High School website (v3.5)
Website redesigns have always fascinated me. “Modernizing” an old tabled-HTML design into a standards-compliant website is both an opportunity to design something fresh AND a test of patience when it comes to retaining the identity of the client. Sadly, I’ve seen some website reboots that may have created a brand-new online experience like never seen before, but also consequently muddied the original identity of the website. This, of course, would be trivial if we were just designing for our personal blogs and portfolios.
The unique challenge with the UB Science High School website was it already had an award-winning design that I made about 18 months ago. In fact, the site has been featured in almost all the CSS design galleries that I know of, counting by the number of hits we get from those sites; it’s been one of the web’s most popular high school websites. The site was also a Finalist at the 10th Philippine Web Awards in the Schools Category. Version 3.0 of the design I made in early 2007 sported a prominent horizontal red gradient with a white header and gold-yellow highlights. The front page randomly presented the visitor with the top-performing students/alumni with a “verb” accompanying each featured person, depending on his or her achievements. So significant was this “Verb Campaign”, originally conceptualized exclusively for the website, that it eventually affected all the school’s ad campaigns for the next 18 months… even the school paper!

The “Version 3.0” really didn’t have many problems, it was easy to maintain and the design was unique but simple enough to make it design-worthy for a couple of years. And like most other easy-to-navigate sites, simplified tabbed navigation made site-wide browsing generally painless. One issue kept cropping up though; the sub-navigation of inside pages seemed to baffle the non-internet-savvy, most notably the parents! The sub-navigation for the main sections of the site was simple text links at the right side of the main content. It was gold when the current page was selected, or gray when just a hyperlink. Apparently this arrangement wasn’t obvious enough for noobies. Every now and then I would get an email asking about information which was already on the website, and I always replied back with a direct link to the page they needed and some minor scolding. I tried different styles of menu navigation for that area but it just didn’t seem to fit well with the overall look of the site. The conspiracy theory I’ve been playing with is that Windows users aren’t “oriented” properly with all their desktop icons on the left-side, having the menu on the right probably baffled them (Mac users have the icons on the right side… which is the right side, since the Mac OS did come before Windows). I guess in this case function-follows-form.
We made plans to join this year’s 11th Philippine Web Awards after last year’s disappointing defeat to Enderun College’s non-compliant website. It was also a chance to reboot the Science High website and play around with concepts.
I’ve grown tired of the red in all the designs I’ve created for the Science High School, I couldn’t help it, IT WAS the school’s colors; Red, Gray and White. I’ve dreaded using Gray since I felt it would make the site dreary and lifeless… and even remind old-timers of Netscape’s default background color back in the day. White was out of the question as it was too common nowadays. After surfing through some sites, I ignored my apprehension and went ahead to use Gray as the primary color for the redesign.
Plain Gray (usually 50% of pure black) is just plain ugly if used improperly, not to mention hard to match colors with. The solution it seemed, if Gray was to become the primary color, is to use a gradient of dark Grays with the darkest almost set to Black. The new site now sports the vertical gradient with a steep darkness change midway, placed in such a way as to create the effect of a darkened room with gray floors and dark gray walls. Honoring the previous design, I just used a white background for the content areas with text. The upside to using Gray was it made the colors standout more than it would normally do if placed on another color. Instead of gold, bright Red is now used as the highlight color. The tabbed navigation has given way to simple text links at the upper right corner.

Less is more, and true to my design philosophy any unneeded design embellishments have been banished. Probably the only “borloloy” (a penchant of Filipino designers) left is the colorful photograph at the top of the content areas.
Overall, I’m quite happy with the new design; even though it isn’t as loud as the old one it’s a bit more straightforward. Hopefully the relocated sub-menu navigation on the left side shouldn’t confuse noobs anymore.
I hope you like it!
Make your YouTube embed code validate as xHTML 1.0 Strict
After rebooting the University of Baguio Science High School up to version 3.5, I ran into some xHTML validation errors with the MultiMedia page which features some TV Commercials of the school hosted on YouTube. It appears that the deceptively simple HTML code that YouTube provides fails to pass the W3C HTML Validator.
Here’s the embed code that YouTube supplied for the UBSHS Belong TV Commercial:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/LuV_Nd8iyQA">
</param>
<embed src="http://www.youtube.com/v/LuV_Nd8iyQA" type="application/x-shockwave-flash" width="425" height="350"> </embed>
</object>
Based on this code, the W3C Mark-up Validator put out several warnings that included errors on the “element ‘embed’ undefined”. Any page that includes YouTube’s generic embed code will thus fail validation. While this may come as no consequence to most people, since the video will generally work with most browsers, any self-respecting web developer would find the generic embed code rather cumbersome.
With the goal of making the embed code pass validation, some redundant and outdated code can be removed and we get the following:
<object type="application/x-shockwave-flash" width="425" height="350" data=" http://www.youtube.com/v/LuV_Nd8iyQA ">
<param name="movie" value=" http://www.youtube.com/v/LuV_Nd8iyQA” />
</object>
Now that’s better! We’ve effectively reduced the number of characters in the embed code from 227 down to 183 in a less cluttered 3 lines. This modified YouTube code passes validation as xHTML 1.0 Strict and the video plays just as well as the original!
Download Kim Possible’s Kimmunicator MP3 Ringtone for your iPhone

Let’s face it. Long ring tones, no matter how cool, are annoying.
This brings us to Kim Possible. She carries a handy-dandy communicator, fondly called the “Kimmunicator”, which is a video phone, pager, computer, analyzer, do anything kind of gizmo. Hmmm, can your iPhone do that?
But the best part is, the Kimmunicator has a very cool, very short ringtone. Four quick notes and it’s done. Most people don’t even notice it. Though if you are in a crowd you may see some some kids looking around wondering where Kim is.
I couldn’t find an official version anywhere, so I used an audio capture utility and nabbed those four notes from one of the episodes.
Anyway, I thought I’d share. So here it is… MP3 file, 6KB… have fun!







Make OpenOffice run faster in Mac OS X
(The following screenshots were made from Open-Office 3.0RC1 and Mac OS X Leopard 10.5.4, making the same optimizations with Open-Office 2.x should be quite similar since the same preferences appear across the 2.x and 3.x versions)
Firstly, fire up Open-Office 3.0 from your Applications folder…
You should be greeted with the OpenOffice new document panel with options to make word-processing, spreadsheets, and other types of documents. Just select “Text Document” to make things consistent with this tutorial.
After the OpenOffice Word Processor opens, select Preferences from the application menu. Alternatively, you can also select Options from the Tools menu.
In the Preferences dialog, select Memory from the options on the left side of the dialog window.
Change the some of the settings to the following:
• Reduce the Undo > Number of steps to 25
• Increase the setting for Graphics cache > Use for OpenOffice.org to 128MB (originally just 6MB)
• Increase the setting for Graphics cache > Memory per object to 20MB (originally just 0.5MB)
• Set the Cache for inserted objects > Number of objects to 20
After doing all of that, select Java from the options on the left side of the dialog window. Wait for OpenOffice to detect the Apple Java Runtime Engine. Now uncheck Use a Java runtime environment under Java options.
Restart OpenOffice.org 3.0 and you should notice a considerable improvement in launch times and document interaction.
As noted above, you can also use this optimization tip for lower versions of OpenOffice in Ubuntu and other distros.