ionorbit.com – Creations and Solutions by Kevin Wong

Connect via Facebook
Connect via LinkedIn
Subscribe via Tweeter
Subscribe via RSS

Header size and usability creativeness.

Category: Main, User Interface

Have you ever noticed when you sign up for a site or log into a site,  the header of the page becomes slimmer? A classic example of this is the Facebook page.  Before you are logged in or signed up, you will get a decently sized ( and readable ) top blue bar with an obvious ‘facebook’ logo as the branding.  However, once you registered and logged in, the top bar becomes about 40% of the height.  Following are screen captures of the example:

Read the rest of this entry »

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Pownce
  • Reddit
  • Slashdot

Tags: , , , , , , , ,

Posted on December 13th, 2009 by by kevin | Print This Post

Binary Clock using jQuery and no Images.

Category: Freebies, Main, Programming, Projects

Had a little time to touch up on my Javascript. Having some fun creating a binary clock.  Following is the code and demo for it.  If I have time, I will certainly create a plugin or widget for Wordpress.

Screenshot

Demo

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Pownce
  • Reddit
  • Slashdot

Tags: , , , , , ,

Posted on December 2nd, 2009 by by kevin | Print This Post

Looking at Photo Meta Data

Category: Main, Technology

Many of us take photos because we want to capture the memorable moment and create an snapshot of what we experienced at the very moment.  I recently looked into GPS integration with cameras and are fascinated by how a photo with the proper coordinates can tell me about the photo.  Before digital cameras existed knowing when the photo is taken was a big problem.  There were time stamps you can expose on the photo but that pretty much destroys the photo with that ugly numbers on the bottom right corner.    Now I can show GPS data on a map where I’ve been on a trip and have the pictures and video associated with it.  Digital information tagging on valuable personal documents has come a long way.  It’s far from perfect.

Read the rest of this entry »

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Pownce
  • Reddit
  • Slashdot

Tags: , , , , , , , , ,

Posted on December 2nd, 2009 by by kevin | Print This Post

Avoid text in images in Web development.

Category: Main, Programming, User Interface

Many Web designers and Web developers make one common mistake: it is to represent text as images. The most common scenario is hover action images. Mostly used with a string of text within an image to illustrate to the user that they can activate the link/button.

There are solutions in accomplishing this is to use a div with set width and height and format your text or anchor tags inside of the div background image. With the help of jQuery, you can easily make a div tag clickable. This is a lot more work to align your text and effect but the end result what you are going to achieve is far greater than when you don’t.

So what is the big deal having text in images you might ask? There are 2 major flaws that comes to mind. Your images cannot be searched if you have no ‘alt=’ attribute and the biggest factor is ability to change the text without generating the image again. You might argue that this is non-sense and it doesn’t take long for firing up your image editor to reword the text; however, how about changing your text in microseconds via Google Translate?  Your site becomes less functional and less usable since your image text will be stuck in the language your images were designed in. Read the rest of this entry »

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Pownce
  • Reddit
  • Slashdot

Tags: , , , , , , , , , , ,

Posted on December 1st, 2009 by by kevin | Print This Post

ionorbit.com – New Theme – ionorbit.com Take 3

Category: Main, Projects, User Interface

Since I wanted to review my PHP and jQuery for a couple of job applications, I thought it was a good idea to re-theme my site. Plus the old theme looks very ancient now. It ought to get replaced with a modern look ( something that looks more personal to promote my web presence and show my portfolio of Web programming skills).  On top of that, I am looking to make my site more functional in terms of user interface end and usability.   I haven’t touched CSS and layouts in detail for a good 6 to 7 months and I feel rusty already. However, this exercise of making a new theme has been a great learning experience and got me back up to gears programming with CSS, layouts and PHP. All that has been lost has come right back.

After finishing my design and making it live, I was surprised I actually drew almost all the graphics and icon except the twitter bird which I borrowed from ProductiveDreams (I made some color and extra bits to it after ). I first started out with the swanky theme . After heavy modification (with a silhouette design in mind), all were changed except the top menu and three column body. Those two elements were the things that stood out for me when I picked it.  The footer is my personal favourite.  Somehow I think my bottom of the page looks better than most people’s top of the page (or even my own page for that matter).    Since this is the third revision of the site, I have called it ionorbit.com Take 3.

This theme is much more manageable and allows easy modification. There are a few more minor details like comment box and pagination navigation that needs to be worked on. Again thanks for visiting. ( Next up re-theme my photo gallery and Twtiter. )

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Pownce
  • Reddit
  • Slashdot

Tags: , , , , , , ,

Posted on November 30th, 2009 by by kevin | Print This Post