Expressing IT

This ones old school , but as usual it is my memory supplement …
So is disabled=”true” and disabled=”false” same?Yes
… Don’t believe, well! thats the way it is … here is some quick explanation…
“disabled” is an attribute of any form element/field and hence can accept any value by its nature.

As long as this attribute is present, the element will be disabled regardless of its value. for eg.
<input type=”text” value=”This is disabled” disabled>
<input type=”text” value=”This is disabled” disabled=”disabled”>
<input type=”text” value=”This is disabled” disabled=”true”>
<input type=”text” value=”This is disabled” disabled=”false”>

All of the above will make the this form field “DISABLED”.

Simply not providing the attribute “DISABLED” keeps the Field “ABLED” … like below

<input type=”text” value=”This is not disabled” />

Remember “Any value (or no value at all) of the disabled attribute, the browser will render it disabled” . To keep things clear in our minds W3C recommends that we use disabled=”disabled” in these situations.

This is difference though when we use this attribute in javascript …

document.form.element.disabled = true; //the element will be disabled
document.form.element.disabled = false; //the element will be enabled

The above arguments are also true for these attributes and elements :

• checked (radio button and checkbox)
• selected (option)
• nowrap (td)

Google starts a movement prompt people to dump IE6 … By bugging IE6 users with a POPUP on page load… may be not a very good idea … but being a UI developer , I have to join this band wagon … one less browser for me worry about … Sorry selfish it is! but I have include this javascript … ( TRY THIS PAGE IN IE6) …
Hey ! and on the brighter note … See it is a display of the POWER of JAVASCRIPT …. it can even bring down a giant (or once it was )

SO … Help rid the world of IE6 with one line of javascript!

http://code.google.com/p/sevenup/

With another browser to take care from tomorrow! (IE8 comes out of its Beta State tomorrow) … Its really high time IE6 is given its Long Due Mercy Death … United we stand for the fall of IE6 

“IE6 is the new Netscape 4. The hacks needed to support IE6 are increasingly viewed as excess freight. Like Netscape 4 in 2000, IE6 is perceived to be holding back the web.”

Jeff Zeldman, standards guru

And meanwhile  for those  like me who will be flooded with calls of  breaking CSS layouts in IE8,  here is the old work around/fix using Meta Tags (meta http-equiv=”X-UA-Compatible”) you could try…

Mis-behaving IE8 : CSS Layout breakages (Targeting a browser version using Meta Tags in IE8)

 
Neither I am very new to User Interface(UI) development nor  am I  a veteran and as I always put it, I fit into the profile of UI developer more than that of a designer, with no regrets. Oh Well! What was I writing about? … For a while( must be in years not any less) now , every now and then when I do get into a bit of UI Design ( when the professional designer has gone on a holiday), I  always cant stop thinking  whether my design should be properly complient or not (sincerely,  not that I could achive 100% standards compliance, If I wanted too ).  Then I tell myself,  what crap! …  The design should be simple, nice  and primarily seem usable ,  it should not make visitors run away… or bounce ( to be technical).  What good would  a nice tableless CSS layout be  to the visitor, who is oblivious to all the smart HYPERTEXT and Cascading Style Sheet  under the skin of your webpage…  Zilch!
It should look nice and be easy to use …  then comes the all standards stuff.

I stumbbled accross this blog entry by  Jason Fried of 37 Signals (For those who are not aware 37 signals  are  the onces who have created some awesome web apps like Basecamp, Campfire etc)  who wrote something similar in 2004 and believe me, almost 5 years and  not much changed since that …  I was happy to read his post , as I totally agree with what he has to say and the also the fact , her is not sure about what is telling about its just his gut feeling and so is mine

Jason Fried  : “There’s way too much talk about CSS and XHTML and Standards and Accessibility and not enough talk about people. CSS and Standards Compliant Code are just tools — you have to know what to build with these tools. Great, I’m glad your UI doesn’t use tables. So what? Who cares if it still doesn’t let people achieve their goals. Web standards are great, but people’s own standards include getting things done (and that’s still too hard to do online).

UI designers are making the same old fundamental “forgetting about the human being on the other side” mistakes — except this time their code looks better. Humans — not code validators — use interfaces.”

Checkout Jason Fried’s full article

DISCALIMER :  This doesnt mean that we shouldn’t bother about standards at all.  Standards are good to have and stick to them as much as possible .  We only have to understand that Good UI design doesnt always mean 100% Standards Complience or Vice-Versa ….

From my list of my lessons learnt,  I follow a few UI Design and Development Golden Rules …  Heres the TOP 10 … not that you have follow them too … 

1. Take care of your users. The users can make or break your site. DONOT make user look like an total idoit , utterly incapable of using your website. That is BAD!

2. Keep Simplicity and Ease of  Use your primary guidlines. Too many  things  on the screen, the higher the probability that a user will get confused or distracted from their original task.

3.  Be in the LIMITS … DONOT indulge too much into USABILITY,  ACCESSIBILITY and STANDARDs.  Use standards effectively and make them understood to the team . This will ensure right consistency in the product

4. Prototype the requirement. Since , these days the Use Interfaces are RICH , Prototyping always is better  than  just making simple wireframes and the latter is void of decent interactions, it would fail to provide the client a clear picture of the final product that is being developed. Always, It is easier to convert the prototypes into final deliverables. Also! with prototyping any interaction issues could be ironed out earlier in the development cycle.

5. Consistency in your design and interaction is very Important. Donot confuse your user with unpredictable interactions and gizmos.

6. Understand your “Design Mission Statement” .  Aways focus on the primary action of the page beign designed. Also, make a list of  your seconday actions on the page, and prioritise them.

7. Provide proper feedback to the site users.   With most of the websites designed around AJAX , provide visual cues to the user about changes to page . The user has to given an acknowledgement of the completion of  any task he performs.  Donot make the user wait and guess, for eg. provide progress indicators for file uplaods.

8. Use controls  appropriately. For e.g  Use  Select drop down list  for small lists only , donot let the user choose one of 200 cities using select boxes.  Understand the difference between a button and a link. A link and button have different purposes , donot use one for the other . Provide the right control  to make interacting with a page easier.  Avoid using Menus, that are more that two levels deep. Do not reinvent the wheel. Use standard controls, customise them only if very necessary. Define any custom controls required for your site  first hand, so that they could be created and tested independently, ready for use accross site.

9. Donot  ITERATE too much on the design. Remember! The whole  product consists more that design alone.  Build appropriate timelines  into your project schedule for design iterations and stick to it.  Iteration helps us to find out what works and what doesnt , pick out the trouble spots.  As a good interface takes time,  provide time for iterations  in the begining of the development cycle,  so that  design iterations doesnot directly equate to REWORK.  Too much rework could jeopradize deadlines.

10. Sit back and think like a user sometimes.

I’m so excited about the increasing number of page views on my blog, that I check my Google Analytics almost everyday. I noticed that my blog is being referred to by sites in many other languages and by people around the world. SO Nice !!!!
To make life a bit easier for my NON-ENGLISH viewer ship, I have added a Google Widget/Plugin called “Global Translator”.

The Global Translator says that it “Automatically translates a blog in 41 different languages by wrapping four different online translation engines (Google Translation Engine, Babelfish Translation Engine, FreeTranslations.com, Promt)” … If you want to add it to your own wordpress installation … check it out here http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Not sure, how good the translation is but I sincerely hope that it helps a few fellow developers out there, who end up reaching my blog, only to be disappointed , that it is in English ….

The translator links are at the Bottom of Side Bar ….

Heres another little peice of Javascript trickery that I had to dig around because the situation commaned it. In one of my web sites, I had this situation where I had to implement “windows.onload” twice. The first thing that would came to an inexperienced mind like mine ( I have to honestly say that, since I have been using javascript Frameworks and libraries, I have forgotton to do simple things on my own… sad but true), is the following method…

window.onload=onloadfn1;
window.onload=onloadfn2;
window.onload=onloadfn3;
etc...

Sorry to say but, this wont work… dont want to discuss the execution science of Javascript much … but according to my recent experience, only the last function (onloadfn3) will ill actually get executed.

In normal situations, unlike mine (which I’ll talk about a little later)… you could do one of the following to execute mutliple onload functions ….

OR something like this

function doOnLoad() {
        onloadfn1();
        onloadfn2();
        onloadfn3();
}
window.onload = doOnLoad;

For my current situation , I cannot use either of the above…
Why did I need to call windows.onload twice, rather that calling two functions within a single onload function? Here is quick look at my problem statement…

“My Site pages are structured like the WORDPRESS theme…. i.e. there is a common Header.php and Footer.php that gets included into all the site pages. There is an onload function implementaion in the Footer.php to do some common onload functions. AND there are few pages that need to something of their own ONLOAD , apart from those done by the common onload function. If I assign callback function directly to the window.onload handler, it will over-ride previously assigned callbacks in the Footer.php”

…. Is my problem understood ?

Well! there are few solutions that I did find. They all are very similar and mainly implementions of a solution given by Simon Willison (http://simonwillison.net/2004/May/26/addLoadEvent/)…

Solution :

Simply add this javascript code to site …

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
       window.onload = func
    } else {
       window.onload = function() {
           if (oldonload) {
                  oldonload()
          }
          func()
       }
   }
}

And call it instead of the usual “windows.onload”

addLoadEvent(FunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load *
}); 

Advantages of this code snippet …
1. Primarily, It lets you have multiple windows.onload events, called from seperate parts of your code, without overridding the previous definition
2. It is really unobtrusive. It can be placed in a file with your other scripts or in a separate file.
3. It works even if window.onload has already been set.

I thought this one will be a doodle to find in google, as many you us UI and script writers would need to do this on a day to day basis, that is include a bit of peice of PHP code snippet(.php) into a Smarty Template (.tpl).  I realized that easier/popular  your query, even more difficult to find the exact answer…   a million search results but most of them reffered to “file” includes in Smarty … which has the following syntax

    {include file=”include/header.php”}

This actually inlcuded the file fine but as text , What I wanted was the result of  included file .(Note the above is used include template inside a template file). Finally with a bit persiverance …. I stumbled across a slighty modified syntax, which was the answer to my requirement … so here it is… if you havn’t found  one already

{include_php file=”include/header.php” }

Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!

In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”’s ) about Using CSS Clip Property for show off only

Original Image

CSS DropShadow Results

View Demo  | Download sourcefiles

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. . You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

Original Thumbnal/Image	Clip Requirements for Sqaure Thumbmail

CSS Clip Results

View Demo  |  Download sourcefiles

This question crossed my mind a few times before, when I was working on sites earlier too, which used WordPress to show blogs or new kind of content in some part of the site/portal.Being a novice in PHP and around WordPress, I kept procastinating it, thinking ” this isnt my peice of cake”. Finally! this requirement came upto my nose, when started diggin around a bit for solution.
I was surprised to find that it really was easier than I actually thought it was, to display a list of headlines or the latest post on any other page outside of the Wordpress-powered section, just using a little bit of PHP and the Wordpress API.

Here is what to do :-
For reasons of explanation, assume that your site is http://www.inchembur.com/ and you have the news section for this site on http://news.inchembur.com/ ( which is running WordPress). Now the requirement is to show the latest post from http://news.inchembur.com/ on the home page of the main site ,i.e. http://www.inchembur.com/index.php

Step1: In your index.php add the following peice of code , Include the Wordpress API file. You can add this to the top of the page you want your post to appear on.

<?php
define(‘WP_USE_THEMES’, false); // Disbable use of Wordpress Theme
require (‘/var/news.inchembur.com/wp-blog-header.php’); // Include Wordpress API
query_posts(’showposts=1′); // Get Latest Post
?>

In the above peice of include , we are getting only the single most recent post. if you want to try more variations feel free to dig into, query_posts() documentation .

Step 2: Now, In the part of the Index/Home page where you want to show the latest Wordpress post from http://news.inchembur.com , use the following code. Needless to say, feel free to ad your styling divisions, spans and classes as per your design needs.

Step3 : There is no Step 3 … Thats it … you are done!

How show a specific post/page as opposed to the latest post:-
This can easily achived by altering the arguments to query_posts() to include the page ID or page slug

query_posts(‘page_id=7′);
query_posts(‘pagename=about’);

or You can control the number of posts:
query_posts(showposts=3);