Atelier Winsonli

I’ve always been using Rhodia notepads to keep my ideas organized. Lately, I’ve been working on a redesign of my personal homepage and have been using the notepads quite often. After using about 40 pages, I encountered a problem. The notepad won’t stay open for me to write on as the pages won’t fold back. I usually tear off pages to solve the problem, but this time I can’t as I need to frequently refer back to previous notes.

Then there is a second problem. Each time I need to write, I need to dig deep into my bag to look for a pen. I wanted a way to hold a pen together with a Rhodia notepad.

Yesterday, I found a solution. I bought this Midori clip on pen holder from Log On.

They come in two sizes and two colors, small and medium, in black or brown. I got the medium one, and it just fits my MUJI gel ink pen. The pen is a narrow one, about the thickness of a pencil. I wonder what pens could fit into the small sized one. (Update: For the small sized one, you insert the pen’s clip into the loop. I’ve read it from kobucha blog.)

The pen holder beautifully holds a pen besides the notepad, solving the pen problem. But then, there’s also the difficulty of keeping the notepad open.

By clipping the pen holder on the flipped open pages, it acts as a paperweight to keep the fold down. Now I can write comfortably.

If you look closely into the above picture, there is a yellow tag on the page. I use that as a bookmarking system to mark important notes. The tags are from MUJI and a set includes five colors. I have my own coloring scheme, indicating high priority stuff, to-dos, etc.

I keep the tags on the back of the notepads, so they are handy each time I need them.

A good solution to keep track of ideas should be simple, just as this one. It makes my work efficient and the planning process fun. I spend more time on paper, so when I sit at the computer I get my work done almost instantly.

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.

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.