Wednesday, June 23, 2010

AS3.0 adding total time and lapsed time to a FLVPlayback Video Player

player.addEventListener(MetadataEvent.METADATA_RECEIVED, timeListener);

function timeListener(eventObject:MetadataEvent):void {
var totalSeconds = String(eventObject.info.duration);
var durationTime:String = (totalSeconds > 3600 ? Math.round(totalSeconds / 3600) + ":" : "") + (totalSeconds % 3600 < 600 ? "0" : "") + Math.round(totalSeconds % 3600/60) + ":" + (totalSeconds % 60 < 10 ? "0":"") + Math.round(totalSeconds % 60);
TxttotalTime.text = durationTime;
}

stage.addEventListener(Event.ENTER_FRAME, updateTime);

function updateTime (ev:Event):void {
var elapsedSeconds = String(player.playheadTime);
var runTime:String = (elapsedSeconds > 3600 ? Math.floor(elapsedSeconds / 3600) + ":" : "") + (elapsedSeconds % 3600 < 600 ? "0" : "") + Math.floor(elapsedSeconds % 3600/60) + ":" + (elapsedSeconds % 60 < 10 ? "0":"") + Math.floor(elapsedSeconds % 60) ;
elapsedTime.text = runTime;
}

Regards, Dipak

Wednesday, June 16, 2010

HTML textarea resize in Chrome & Safari(webkit)

The 'resize' CSS property is basically CSS 3 property and it's currently turned ON by default for textarea in webkit. Setting this property to 'none' will disable resizing.

Here is the example -

<textarea cols="50" rows="10" style="resize:none;">
You text
</textarea>

Regards,
Dipak.

Sunday, June 13, 2010

Myths of UI Design

Because user interface design is not an established and recognized discipline, the vacuum is filled by all sorts of people with very different skills.

MYTH: Good user interface developers can both design and code the user interface.

REALITY: An analogy would be to ask an HCI expert to design the user interface and the internals, and then go ahead and code the product. User interface coders implement designs; their skill is designing and coding the internals. Mitch Kapor's (1996) ideal of a software designer as distinct from software coder is not the current practice. Typically, user interface design is done by a coder on a part-time basis. This practice is attributed by Terry Winograd (1996) to the immaturity of software development. In building construction, the division of labor between architect and contractor evolved as the industry matured. Occasionally, an exceptional software developer can both design and code the user interface, but the majority do not have the critical skills for user interface design. These include:

  • The ability to apply the principles of navigation, selection, direct manipulation, consistency, and standard interaction styles
  • The ability to apply user input to design (wants and needs, tasks and scenarios, competitor information, feedback on user interface designs)
  • A grasp of high-level design (metaphors, user models, systems design, usefulness and conceptual consistency, task flow)
  • An understanding of user interface paradigms (form-based, menu-based, application-oriented graphical user interfaces, multiple-document interfaces, object-oriented interfaces, compound-document interfaces) and knowledge of what makes a good hybrid

Of course, a coder needs to appreciate design (just as a designer needs to appreciate implementation constraints). Each has their own expertise. Communicating their designs is at least half the job for user interface designers. This task continues right up to the product ship date, in order to avoid the "last person to touch the code is the user interface designer" phenomenon. Communication between practitioners of these two disciplines is a fascinating subject worthy of further analysis.


Source: http://www.ibm.com/developerworks/library/us-myth.html


Kind regards,

Dipak.

Thursday, June 10, 2010

UI Design objectives

Here are the major objec­tives in con­struct­ing a UI: con­sis­tency, usabil­ity, nav­i­ga­tion, visual appeal, inter­op­er­abil­ity, per­for­mance, and accessibility.

Consistency

If I were to say that there was a foundation to others it would be consistency. Without consistency such things as usability, navigation, etc. couldn’t exist. Consistency applies to every aspect of the user interface. Some things to keep in mind when thinking about this:

* Does the layout of our application stay the same with minimal aberrations?
* Is the navigation clear and consistent, or is every click a gamble?
* Do even small details such as the link color/behavior stay the same throughout?


Usability

Usability is the endeavor that is often skipped during development due to resources, which is a shame, because many errors could be discovered earlier. Usability brings the application to the people that will actually use it. How many requirements meetings have you been in that revolve around your end users? Most of the time, whether intentional or not, we tend to project our personal preferences onto this mythical “iUser” that doesn’t exist. If your application is not usable then guess what? No one’s going to use it.

* Have you brought in a sample of your demographic to test the application?
* Does your application adhere to common “best practices”?
* Have you read Steve Krug’s Don’t Make Me Think?

Navigation

Navigation is to an application as table of contents are to a book. At a glance I should be able to know where I’m at, where I’ve been, and where I’m going. In other words, navigation should answer the question: Where Am I? I see this as being the aspect that we tend to have the tendency of projecting our preferences onto a design. Navigation should also encompass the taxonomy you have for your site so I know the content of your site.

* What are sites that you find easy/hard to navigate, and do you consider that when designing?
* Does your navigation truly serve the purpose of navigation?
* Is your navigation hidden, or is it prominent, clear, and usable?

Visual Appeal

The fact that we want to design something that is in fact visually appealing is not a bad desire to have. The only problem is when we design interfaces for visual appeal at the expense of the others on this list. We also need to separate the thought that visual appeal corresponds to filling the entire page. One of aspect of “Web 2.0 style” (yep, I said it) is a proper use of white space. Your design shouldn’t look like you applied some “Make My Logo Bigger Cream”.

* Have you ensured that your desire for visual appeal hasn’t come at the expense of usability, accessibility, etc.?
* Does your site look good without all the fluff? In a syndication world we need to make sure that our content stays the primary focus.
* Does your site contain stock photos? If so, abandon quickly.

Interoperability

Web standards have, at their core, a focus on increasing interoperability. Wouldn’t it be nice that if we followed a standard that regardless of browser our design would look the same, and regardless of device our content will be delivered? Sometimes it is appropriate to design for a specific demographic, but most of need to consider at least the major players in the browser/OS market. I should never again see a “this page is best viewed in…” message again.

* Does my application perform well in various environments including the presentation and behavior?
* Are you using hacks to target certain browsers? Well, then stop it.
* Is my content tied to my interface, or does my interface allow syndication?

Performance

Remember the good olĂ©’ days of dial-up? Ya, I’d rather not remember that either. We live in a broadband world now, but we still have to be conscientious that our application doesn’t make us cook dinner while we wait for it to load. Standards-based design helps in this regard. With cleaner, semantic markup and abstracting the presentation from the structure we reduce the performance concern?

* Does your markup look beautiful?
* Does your content perform well in a non-desktop environment (i.e. mobile)?
* Are you using tools like YSlow to find performance bottlenecks?

Accessibility

Accessibility usually all had to be pushed from a social responsibility perspective (which many managers outside of the government could care less about) until we could start masking it under the guise that Google’s spider was the #1 blind web user. The truth is that accessibility is important, and even CSS 2.1 added markup to help with screen readers. Remember that you don’t want to alienate anyone from viewing your content. And yes, it’s true that accessibility does help your SEO if you need another reason to sell it.

* Have you considered the accessibility standards such as Section 508 and/or the Web Accessibility Initiative (WAI)?
* Have you tried to browse your site with a screen reader?
* Do you lock in the font sizes, or do you allow and even encourage the user to increase/decrease the font?

Conclusion

Developing user interfaces is a complex process that deserves a lot of foresight and ability to adapt to your users, industry trends, and changing technologies. If you keep these considerations in mind you will be well on your way to creating an application that is usable, flexible, scalable, and so much more!

Tuesday, June 8, 2010

Applying color to ordered list numbers, NOT content

It's a little tough task to have different colors to the list numbers and its content without much of hacks.

Here's a simple solution to it: Demo