Atelier Winsonli

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.

Banner Touch Up

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.

Banner Link

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.

Favorite Icon

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" />

iPhone Webclip Icon

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.

Other Stuff

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:

1. Create a webpage themed cats and dogs following standards
2. Make it look web 2.0
3. Make it rank high in Google.

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.

Rounded Corners

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.

Title

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.

Form

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.

Quotes

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.

Accessibility

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.

Credits and Acknowledgement

1. Awesomepersands from simplebits.com
2. Background pattern derived from Flying Saucers from colourlovers.com
3. Web Standard Solutions by Dan Cederholm

Was playing with the current Penryn MacBook Pros at Broadway today. Noticed that the Penryn keybard is updated. The Penryn MacBook Pro has been released for quite some time (since 26 February) and should be replaced by new MacBook Pros in October 2008.

The functions keys on the Penryn MacBook Pro are revised:

Penryn Function Keys

Santa Rosa Function Keys

Apart from the captions F1, F2, etc. being smaller and located on the lower right corner, the following changes have been made:

1. F1 & F2 remains unchanged. Screen brightness control.
2. Keyboard backlight brightness control is F5 & F6 on Penryn; F8, F9 & F10 on Santa Rosa.
3. Volume control is F10, F11 & F12 on Penryn; F3, F4 & F5 on Santa Rosa.
4. F3 & F4 activates Exposè and Dashboard on Penryn.
5. Number lock key (F6) on Santa Rosa is not included on Penryn.
6. Playback controls are included on the Penryn, keys F7, F8 & F9.
7. I don’t know what the F7 key on Santa Rosa does.

Improvement? I don’t think so. Most of us would check the “use F1, F2, etc keys as standard function keys in system preferences. That means if we want to volume up on the Santa Rosa, we would have to hold the fn key (keyboard lower left) and press F5.

Santa Rosa Keyboard

Now there’s a problem. On the Santa Rosa keyboard, I can press both the fn key and volume up key (F5) with one hand. However, on the Penryn one, I have to do so with two hands, as the buttons are too far apart.

I have average sized hands, and the furthest button I can press while holding the fn key with my right hand is the F8 key. (I can touch the F9 key but it feels kind of awkward). That means frequently used keys should be located on the left, before the F8 key. The keyboard backlight brightness control, a key which I never use, is found on the Penryn as keys F5 & F6. The most frequent key I use, the volume control, is set as F11 - F13. I personally do not like this at all.

Apple made the Penryn function keys more difficult to use. I feel that Apple’s design is becoming less and less user friendly (or intuitive as they say, their selling point). There is one good thing about the Penryn keyboard though. The number lock function is removed. No one actually uses number lock on a notebook keyboard.

Penryn Keyboard - no number pad keys

Santa Rosa Keyboard - number pad keys present

The keyboard looks cleaner this way. However, I would still prefer the Santa Rosa keyboard for it has better positioned function keys.

The handle of my Moshi Codex (MacBook Pro case) is about the fall off. Bought this for a year already, but have been really using it for these 3 weeks only since school started. Been taking this out for no more than 50 times, and it is starting to tear. I’ll see if I can get it repaired at those stores fixing leather bags and shoes

By the way, check out the video on their site. It is quite well made.

Loved the USB Owl toy so much, decided to make it the wallpaper of my iPod Touch. Used the pen tool in Photoshop to create a cutout of the owl.

Added a black background, and the iPod now looks like this:

It looked like this before, the WL ace of spades cutout:

Went to MUJI to get two pencil holders to hold my Lamy Collection.

They are made with MUJI signature material - acrylic. Looks perfect. Used the small one to hold Lamy ink cartridges and the big one to hold fountain pens.

Black Safari: Fine nib. Black ink.
Graphite AlStar: Extra fine nib. Blue ink.
White Safari: Fine nib. Turquoise ink.

I got myself a matte screen protector (anti glare screen protector) and love it. The screen is now smoother to touch while finger prints and grease won’t show. This is a must have for iPod Touch and iPhone.

Before and after pictures to demonstrates its anti-reflectiveness:

Before

After - with anti glare screen protector

The pictures won’t show its justice. All I can say is, the iPod Touch is now more fun to touch. You won’t be rubbing on the iPod Touch screen anymore, but gliding.

Apple has released the firmware 2.0 for iPod touch or some time already. The new firmware include the iTunes App Store which allows you to download applications for the iPod and iPod touch. I have pwned the 2.0 firmware with Pwnage Tool.

Pwning the iPod Touch allows you to download even more third party apps through Cydia (previously known as Installer). The reason I pwned mine is as I want to use custom themes.

Follow these steps to pwn your iPod Touch.

1. First you’ll need firmware 2.0, I bought it from the iTunes App Store. I believe there are other methods to obtain it though.
2. Download Pwnage Tool 2.0.1 (Windows user download WinPwn)
3. Use it to create a custom firmware
4. Enter DFU mode by following the on screen instructions
5. Open iTunes, go to the iPod Touch page
6. Alt + click Restore (shift + click for Windows user) then select the custom firmware

Wait for the custom firmware to be installed on your iPod Touch. All your notes, clocks, weather and other settings will be synced back to your iPod, so no worries.

I was using the mystique theme before. Now I want something more simple, just like a plain black background without the dock.

To remove the dock, follow these steps:

1. Open Cydia, install WinterBoard, MobileTerminal and Open SSH.
2. Tap on terminal, wait for the first line to appear.
3. You then need to gain admin rights by follow the instructions below. Skip to step 7 if you have done so already.
4. Change the password by typing “passwd”
5. If it asks for your old password, use “alpine”
6. Type in your new password, and confirm it
7. Login as root, type “su root”
8. Type in the password you just set
9. Navigate to the themes folder by typing “cd Library/SummerBoard/Themes” (case sensitive!)
10. Create a folder called Blank by typing “mkdir Blank”
11. Enter the folder by typing “cd Blank”
12. Create an empty Dock.png by typing “touch Dock.png”

Press the home button (the physical button below your screen) to quit, SummerBoard should restart. Unlock your iPod to see the changes.

I listed the steps from my memory. If you followed the steps and could not remove the dock, please let me know.

I exchanged my Mighty Mouse as my previous copy was unable to scroll right. Not only the problem persisted, it got worse. I was able to scroll to the right while applying pressure on the scroll ball. Scrolling left was normal just like scrolling vertically. With the replacement, I am able to scroll left or right only when applying mild pressure to the scroll ball.

I guess I would settle with this one, as I believe the whole batch of mice are suffering from the problem. Not something shocking with Apple products. Besides, having the same problem on both sides is better than having it on only one due to symmetry.

The mouse is, however, less laggy than the previous one. I am not sure if I got used to the mighty mouse or if this one is better, but that is the first impression I had.

To be honest, I lost confidence in Apple already. My first Apple product, the iPod nano had a misaligned click wheel and could not power off properly. I had it replaced for something which I believed was a “brand new unit” as told by an Apple representative. In another phone conversation, they told me it was a “refurbished unit”, having a new exterior and battery with used internal parts. I had it refunded after a six week battle with the supervisor Mr Eric who never called back.

My second purchase is the MacBook Pro, which arrived with a dead pixel and a squeaking space bar. I didn’t even bother taking it for service as I predicted the hassle ahead. I chose to live with it and the squeaky space bar brought me a lot of attention in the library.

The iPod Touch is my third purchase which came with glue all over the frame. I believe the glue adhering the frame to the body was not so well applied and got all over the place. I chose to live with it as I got a case to cover the mess.

My fourth and recent purchase, the mighty mouse, had a scroll ball which won’t scroll to the right. The replacement I had won’t scroll to the left or right without applying mild pressure.

Problems are expected with Apple products, especially new ones. Famous ones include color discolorations on MacBooks, Random Shutdown Syndrome on MacBooks and the cracking of the brand new iPhone 3G.

Who to blame? I think the quality problem is what “Designed by Apple in California, Assembled in China” translates to.

Heard so many good things about the Apple Wireless Mighty Mouse from Hayashi, decided to get one myself.

Usual Apple quality. Well designed by Apple in California, not so good assembled in Malaysia (or China). Apart from a cosmetic flaw at the bottom, my copy also can’t scroll to the right and I’ll get it exchanged tomorrow.

Anyway, some reservations on Apple’s usual “form over function” philosophy, especially on this mouse. Five points are advertised on the packaging. Would do a short review on this Apple Wireless Mighty Mouse.

1. Click. You can left click with it (otherwise known as secondary click) by having your index finger not touching the shell and clicking with the middle finger. In other words, lift up your index finger, click with the middle finger. Otherwise a left click would be recorded.

   The good: Looks. Clean design.
   The bad: Need to get used to. Unable to left click and right click at the same time.

2. Roll. The scroll ball could also be clicked. Think of this as the middle click. You could define the what it does in the preferences pane (Dashboard, Exposé, etc.) or let your Applications decide (set it as Button 3).

   The good: Looks. Clean design. Functional.
   The bad: None.

3. Squeeze. Squeeze the mouse to activate a function of your preference. I assigned it to launch Dashboard. The first squeeze required some force. However, subsequent ones became better. You won’t accidentally activate Dashboard, but you can’t easily activate it as well. You have to hold the mouse between your thumb and middle finger to squeeze it.

   The good:Functional. Hard to accidentally trigger.
   The bad: Hard to trigger.

4. Scroll. Vertical scrolling works fine. Would comment later when I exchange the current one for a working one.
5. Laser. I was brainwashed that an optical mouse which utilizes laser can operate on all surfaces, but it can’t. Not on glass nor acrylic that the salesman claimed it would. The tracking speed of the mouse is slow even when set to the maximum in preferences, leaving me no option but to download MouseZoom to push the limits further. MouseZoom is written by Ben which adds a pane in the system preferences to set tracking speeds higher than the OS X default.

   The good: Supposed to be precise, although not compared to regular optical mice.
   The bad: Won’t operate on all surfaces. At least not on the glass tabletop I tried.

Would like to comment on the Bluetooth connection as well. The mouse is a bit laggy, but is expected from a wireless mouse. As for stableness, I paired my mouse once, and I can use the mouse right away when Leopard boots or wakes from sleep.

If you want to get a wireless bluetooth mouse which is designed for Macs by Apple, the Mighty Mouse would be a good purchase. I am unable to comment on the scroll ball yet as it is defective on mine. Would post a follow up when I get it replaced.