Apple has released the new designed MacBooks. Gorgeous. But then the glossy screen would give me a headache (literally, migraine). So I had no choice but to replace my dying battery. My previous battery could not hold sufficient charge for a 2 hour lecture. This new battery has SMP cells, which should have a longer life than Sony cells. It reports I have 21 minutes left after using it for about 3 hours. Impressive.
Was tired working on school work so gave my entry a little touch up as relaxation. Everything updated today concern graphics. Previous blog post could be found here.
Not sure if anyone would notice, but no detail is too minor. I’ve added some drop shadow and gradients to the header. The banners are updated as well, see if you can spot the differences.
old banner
new banner
Very subtle differences. A shadow underneath the dog’s and cat’s head casted onto the body. A shadow of the dog and cat casted onto the background. A very subtle outer glow to provide more depth. The graphics are still not yet finalized though, would require a lot of touch ups.
In most webpages, clicking on the banner would bring you back to the home page. The Phark Image Replacement method I used previously would not allow this to be done. There is no anchor tag for me to setup a link, and besides the text contents would be forced to display out of page. So I used another method, the Fahrner Image Replacement instead.
I’ve added a favorite icon. Most modern browsers would take a png file of any dimensions as a file icon. I created a 32px square icon.
To see how it looks (and to see if your browser supports favorite icons), please visit my entry page.
To add a favorite icon, simply make an image larger than or equal to 16px by 16px and add the following link tag.
<link rel="icon" type="image/png" href="/img/favicon.png" />
I figured an iPhone webclip icon would be nice. In iPhone, you can add bookmarks to the home screen as an icon. All you have to do is to upload a 57px by 57px image named apple-touch-icon.png to the root directory. You can also do it by means of a link tag.
The glossy effect and rounded corners would be added automatically.
Added a new page to increase the content to code ratio. Added a few meta tags to pass “validations”. Still have a lot of work to do in the future.
Received an email from the Computer Science department about a web design contest called CityU eXtreme Web Designer Award, also known as the “CityU Web Hacker” Award. The contest goes this way:
The top 15 results from Google and Yahoo would be shortlisted and their design, content and accessibility would be assessed. The best ones win the award. Please read the official instructions here on their webpage.
The competition is not easy to win. There are a lot of students in the University who possess superior skills in designing. Most Computer Science students like me have limited creativity. So the way to win is to win technical-wise. But then, the source code is available to anyone, so any secret recipe could not be kept secret.
The page has to be ranked high in Google before it is even considered. I am not sure, but I think this would not be a major problem, considering I have a winsonli.com to build on. My page gets crawled almost everyday so the page should be properly indexed.
As web is about sharing, I decided to post a walk through of how my entry was created.
The rounded corners are basically background images. One for header, one for main body and one for the footer. 
The header, main and footer are three <div>s, each with their respective background image.
For the title in the header, I employed the Phark Image Replacement method. The font for the ampersand (awesomepersand) could not be found on Windows. Also, font smoothing in Windows is not as good as Mac OS. Therefore, I decided to show the title as an image.
height: 25px;
text-index: -5000px;
background: url(img/title.png) no-repeat center center;Basically, the original text would show 5000px to the left, which is out of the browser (i.e. you can’t see it). Then, the image is shown as a background. This way, even if you turn off CSS you still can see the original text.
One would be easily tempted to use a table to position the input fields. I aligned the forms by setting the label and input field as block elements and by assigning them a static width and float property.
As for the submit button, the rounded button is actually a background image which looks like this:
Two buttons in one image. Upper one is the normal button and the lower one is the image to show when the cursor is above it. The advantage is that the on hover image does not have to be preloaded. The on hover effect is achieved with pure CSS:
.submit{
background: url(img/button.png) no-repeat top center;
width: 200px;
}
submit:hover{
background: url(img/button.png) no-repeat bottom center;
width: 200px;
}The top part of the image is shown normally. When the cursor is over the button, the hover event would be triggered and the background image would shift upwards so that the bottom image is shown.
I love quotes. Quotes are so often used that they have their own html tag <blockquote>. The two quote symbols you see are two separate background images. Here’s how the HTML looks like:
<blockquote cite="http://en.wikipedia.org/Dogs/">
<p>
The dog (Canis lupus familiaris) is ...
</p>
</blockquote>Then we apply the CSS:
blockquote{
background: url(img/quoteTop.png) no-repeat top left;
}
blockquote p{
background: url(img/quoteBottom.png) no-repeat bottom right;
}The quotes would then show as a background image. All left is to adjust the padding and margin accordingly.
The page is XHTML 1.1 valid and CSS 2 valid. Even when you turn off CSS, the page is absolutely readable.
The page could be properly viewed on IE7+, Firefox 2+, Safari 2+ and all other standard compliant browser.
A Note on IE6: I have decided to drop IE6 support some time ago in response to a Save The Developers Campaign. IE6 is not a standard compliant browser and does not support transparent PNG. Web developers are now discontinuing IE6 support to give users an incentive to upgrade.