The Gap theory of UI Design

Webstock '11: John Gruber - The Gap Theory of UI Design from Webstock on Vimeo.

[Technotes] Android UI - Dialogs

First of all, what is a dialog?

"A dialog is usually a small window that appears in front of the current Activity. The underlying Activity loses focus and the dialog accepts all user interaction." - Android Dev Guide

Android UI API has some native Dialog objects for you to use. For most general purposes, AlertDialog is sufficient.

Read this page yourself before creating dialogs boxes in your Android application. The sections I think is useful for learning and application development is the following:

• Dismissing a dialog
• Creating an AlertDialog
• Creating a custom dialog

[Technotes] invalidate() method

In android system, the class View (android.view.View) is an important interface for rendering UI objects. Inside it, a method called invalidate() plays a key role.

The function of invalidate is simple, it marks a region on the view to be 'dirty', which tells the android system that region must be redrawn soon in the near future. The region can be the whole View or just a designated region passed to invalidate. And obviously, invalidating only a small portion of the view can have some performance advantages for the UI system. Therefore, make sure you use invalidate() wisely!

Also, an important point: never call any drawing functions except in the onDraw( ) method (a method of class View). Instead, you use the invalidate( ) method to mark rectangles as dirty. The window manager will combine all the dirty rectangles at some point in the future and call onDraw( ) again for you. The dirty rectangles become the clip region, so screen updates are optimized to only those areas that change.

[Tech notes] What is Anti-aliasing?

Basically it is a technique to make your image/graphics smoother or reduce jagged edges of your graphics.

See the references below:

http://www.pantherproducts.co.uk/Articles/Graphics/anti_aliasing.shtml
http://en.wikipedia.org/wiki/Spatial_anti-aliasing

What is focus in computing?

'In computing, the focus indicates the component of the graphical user interface which is currently selected to receive input. Moving the focus away from a specific user interface element is known as a blur event in relation to this element.'

By convention, the tab key is used to move the focus to the next focusable component and shift + tab to the previous one.

There are several window management policies for focus:

Click to focus

On most mainstream user-interfaces, such as ones made by Microsoft and Apple, where one must click the mouse inside of the window for that window to gain focus.

Focus follows pointer

Another common policy on UNIX systems using X11 is the "focus follows mouse" policy (or FFM), where the focus automatically follows the current placement of the pointer.

[Tech notes] Android UI basics overview

Some overviews of Android UI programming:

• Layout
• Widgets
• UI Events
• Menus

Key classes of UI system: 

• View
  
• ViewGroup
  
• Widget classes
  

[Tech notes] Android UI basics

In an Android application, the user interface is built using View and ViewGroup objects. There are many types of views and view groups, each of which is a descendant of the View class.

View objects are the basic units of user interface expression on the Android platform. The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons.

The ViewGroup class serves as the base for subclasses called "layouts," which offer different kinds of layout architecture, like linear, tabular and relative.

On the Android platform, you define an Activity's UI using a hierarchy of View and ViewGroup nodes (as shown here). In order to attach the view hierarchy tree to the screen for rendering, your Activity must call the setContentView() method and pass a reference to the root node object. The Android system receives this reference and uses it to invalidate, measure, and draw the tree. The root node of the hierarchy requests that its child nodes draw themselves — in turn, each view group node is responsible for calling upon each of its own child views to draw themselves.

Android parses the elements of your layout in-order (from the top of the hierarchy tree), instantiating the Views and adding them to their parent(s). Because these are drawn in-order, if there are elements that overlap positions, the last one to be drawn will lie on top of others previously drawn to that space.

Useit.com Alerbox Column - Changing the color of visited links

A subtle but essential web design tip about link colors - visited links should have different colors than unvisited links. Useit.com tells you why:

http://www.useit.com/alertbox/20040503.html

So, this becomes your first web UI lesson.

Additionally, this web site is a web UI guru's website, which means you can learn how to design a clear and neat web page from viewing its source codes. Notice that this website doesn't involves Javascript! Go check its CSS style sheets!

CSS selectors

• CSS selectors
  CSS selector reference from W3C
  tags: css selectors w3c cascading style sheets

Posted from Diigo. The rest of my favorite links are here.

Best CSS reference is from W3C!