A simple graphical representation of my portal’s Live Chat with a Doctor feature…

Four principles of Design: Balance, Emphasis, Rythm & Unity. Below are some tips on the same.

Read the rest of this entry »

I found a CSS Gallery somewhere on the web few days (I can’t find the link to that site, If found I will update the link here). It was pretty simple & starlight forward CSS to build an image gallery. Recently, I needed to put all supporting articles on BabyMagic in an easy navigation, Modified it a bit and out it under a rounded DIV’s. I wanted to create a bookshelf kind of UI so that anyone can easily navigate through the documents. A live demo is up, click the image at the end of this post see the demo. The good thing about this CSS Gallery is there’s no JS/AJAX, all pure CSS sweetness & it looks great! All the used images can be downloaded at Demo.

Here are the CSS & XHTML I used for it…

CSS for the Gallery

   1: #gallery {

   2:   padding:0;

   3:   margin:0 auto;

   4:   list-style-type:none;

   5:   overflow:hidden;

   6:   width:700px;

   7:   height:100px;

   8:   border:0px solid #888;

   9:   background:#fff url(../images/win_backh.gif);

  10:   }

  11: #gallery li {

  12:   float:left;

  13:   }

  14: #gallery li a {

  15:   display:block;

  16:   height:100px;

  17:   width:24px;

  18:   overflow:hidden;

  19:   float:left;

  20:   text-decoration:none;

  21:   border-right:1px solid #fff;

  22:   cursor:default;

  23:   }

  24: #gallery li a img {border:0;

  25:   }

  26: #gallery li a:hover {

  27:   background:#eee;

  28:   width:100px;

  29:   }

CSS for the Rounded DIVs

   1: .search_gallery {

   2:     text-align:left;

   3:     width:730px;

   4:     margin-left:35px;

   5:     position:relative;

   6: }

   7: .search_gallery .head {

   8:     background-image:url(../images/babytop.gif);

   9:     background-repeat:no-repeat;

  10:     width:100%;

  11:     height:35px;

  12: }

  13: .search_gallery .body {

  14:     background-image:url(../images/babyrepeat.gif);

  15:     background-repeat:repeat-y;

  16:     width:100%;

  17:     height:100%;

  18:     text-align:left;

  19:     padding-left:0px;

  20:     padding-right:0px;

  21: }

  22: .search_gallery .foot2 {

  23:     background-image:url(../images/foot1.gif);

  24:     background-repeat:no-repeat;

  25:     height:16px;

  26: }

XHTML for the Gallery

   1: <div class="search_gallery">

   2:     <div class="head"></div>

   3:     <div class="body">

   4:

   5: <ul id="gallery">

   6:

   7:         <li><a href="suppdocs/newborn.html"><img src="imagewin00.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>

   8:

   9:         <li><a href="suppdocs/breastfeeding.html"><img src="imagewin1.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>

  10:

  11:         <li><a href="suppdocs/breastfeeding_tech.html"><img src="imagewin2.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  12:

  13:         <li><a href="suppdocs/changesinbody.html"><img src="imagewin6.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  14:

  15:         <li><a href="suppdocs/comonprobs2.html"><img src="imagewin5.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  16:

  17:         <li><a href="suppdocs/comonprobs.html"><img src="imagewin4.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>

  18: </ul>

  19:

  20: <div class="foot2"> </div>

  21:   </div></div>

Rob Christensen from Adobe Labs has written a great article on Six must-see Adobe AIR Applications (AIR; formerly code-named Apollo).

The goal of Adobe AIR is to make it very easy to build desktop applications with the skills and technologies web developers are already familiar with such as HTML, JavaScript, AJAX, Flash, ActionScript and Flex. Just as Flash and HTML are designed to run the same on different operating systems, the objective of Adobe AIR is to extend that same concept to desktop applications.

Once the AIR runtime is installed, the same file can be installed on a Mac or Windows (Linux coming soon). Applications built using Adobe AIR have read and write access to the local file system just like a native application. Other features include local SQLite database, drag’n’drop between applications, clipboard support, a simple and painless install, native file pickers, code signing, support for embedding PDF’s and more. Since a web browser is built-in (WebKit), you can also use your favorite AJAX libraries to build applications entirely in HTML and JavaScript. Or, if you want more creative control, you can use Flash and Flex. There are several tools for building AIR applications including Dreamweaver CS3, Aptana (open source), and Flex Builder 3 (public beta). Since the command line tool for building applications is included in the AIR SDK, you can technically use whatever your code editing tool you’re comfortable with.

Rob Wrote: “Since the alpha release of Adobe® Integrated Runtime (AIR; formerly code-named Apollo) on March 19, dozens of next-generation rich Internet applications (RIAs) built on top of the Adobe® AIR™ runtime have been designed, developed, and distributed across the Internet. Internally, the development teams have been inspired by the imagination, creativity, and resourcefulness reflected in the Adobe AIR applications released so far.” …. more»

Rob listed 6 AIR applications, which are:

• Twitter | Download Twitter
• kuler desktop | Download kuler
• Fresh | Download Fresh
• Finetune Desktop | Download Finetune Desktop
• DiggTop | Download DigTop
• SearchCoders/Dashboard | Download SearchCoders/Dashboard

One more recently launched AIR Application I just saw is Pownce by Digg’s Kevin Rose.

Rob’s Article | Adobe AIR | AIR SDK | More AIR Apps