CSS Hack for browsers -

Hi all, browser compatibility one of the most complicated issue we face during our development. So whenever i get into problem, go and search on internet. Here, I like to share Paul Irish.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red  }
}


/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }



/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

UT Tool - Problem Steps Recorder – win7

Problem Steps Recorder – win7 [I m not sure about winXP or vista]
Purpose --- Records screen[visual] + User’s reaction[text]
Result----- MHML
Who can use ?
- support engineers as
- software developers
- UX engineers
Benefits---
- Easier to receive a bug or problem ticket in much more detail.
- Developers will be enable to reproduce the steps that is causing an error
- Support engineers or help desk responsibles will be able to visualize and catch the problem
- Screenshots with very light file size

Demo - http://www.istartedsomething.com/20090111/windows-7-problem-steps-recorder-miracle-tool/

Windows 7 Shutdown misleads User

Windows 7 shutdown mislead users
Reason -
1. On mouse over Shutdown and Arrow gets highlighted the same time. but other side.. both have different purpose
Shutdown - to shutdown system
Arrow - This gives different options

I have tested the same with different users, most of the users were not able to get Shutdown in first effort.

What happens... when user try to shutdown
Start >>Shutdown and Mouse Over Shutdown [shutdown and arrow gets highlight same time]

How it misleads
1. User's purpose is to shutdown OS, but because of Arrow User gets distracted
2. User clicks on Arrow, which shows some technical words like HIBERNATE | SWITCH user.. which are not common for all users.
3. Important there is no SHUTDOWN option here.

Solution -
Simply, both should be highlighted separately.

I got to know this, when my wife was trying to shutdown my WIN 7 OS... it was very interesting to see her effort :)

Drive C Partition on Dell Laptop

Love to share here.. may this is very useful for folks who are looking for partition manager for Windows 7. Story is like.. i have got new Dell Laptop from my company. It has only C-Drive with 220GB, no other drives. I strongly believe multimedia folks should have minium 2 drives on their PC. I got into problem, because am not good into admin kind of stuffs... was looking for solution. I did search on net and got number of blogs and forums. Strange.. most of the responses on net was negative. Finally did search on CNET. COM, really got the exact solution - paragon partition manager. Its wonderful, but after installing this.. i got into another problem. The moment i restarted my system, got message saying BOOTMGR IS MISSING - RESTART SYSTEM. You may also face this same problem.. NO need to Worry. Just follow this steps
1. Put your Windows 7 CD or DVD
2. Say RECOVERY
3. Select your operating system
4. This will restore your missing file and restart the system
5. This time, it will show you the complete process of partition

good luck!!!

Visual Tab Experience - Unique Feature

Latest opera 10.10 browser have some interesting UI features
Visual Tab – very similar in the line of WINDOWS 7 TASK BAR…

Unite – It supports file sharing….

check out this - http://www.opera.com/browser/

It gives me feel .. that browser is becoming very high end platform with great features, like we all know Google is coming with Web-based Chrome OS. I am curious to see and experience new world of web.

My Experience with Sketchflow - Wireframe Prototype

My First hand on SKETCHFLOW [expression blend], its great!! tool... it has really good tools and feature to create DYNAMIC Wireframe Prototype.
Great features are
1. Artistic HTML elements.. like text field, drop down, combo box.. .etc
- very stylish - drag and drop kind of tool
2. Great flexibility to do interaction part
3. Sketchflow player to see output, it has good tools to give feedback on run time.
4. Map option - this works like sitemap
5. Connector -- which is very helpful to create parent, child and connectors
6. Style sheets -- once we done with our low prototype, it helps to make it attractive colorful prototype

i m in just starting phase.. love to explore it.. definitely i will come up with good very basic level tutorial on this...
Demo
steps
1. Download Demo
2. Unzip
3. play TESTPAGE.HTML

3D particle system

while going through one discussion, got interested topic.... its about 3d particle system... very frank . i havent done any work or study on this.. m writing here only those points what i got from discussion.. hope u folks will like it..

Particle ? -- natural smoke and explosions to geometric or organic abstract motion graphics design elements.

better instead of writing ... give you good links and softwares here..

examples
1. http://www.youtube.com/watch?v=NnTyvWdHDvE&NR=1
2. http://www.openframeworks.cc/gallery
3. http://vimeo.com/6284199

Softwares -
1. http://www.trapcode.com/products_particular.html
2. http://www.nvidia.com/object/physx_new.html
3. http://www.flight404.com/blog/ [blog]
4. http://processing.org/
5. http://www.openframeworks.cc/

Third Party Window should get open in New Tab - "Latest Browsers"

There is one small .. or i can say this small is bigger than big issue ... :) sounds bit odd rite..
But true friends, this time i really got stuck.. my MENTAL MODEL is completely blocked.
I am trying my best to solve...
For this m putting this point to different people to get my answer.
ha ha ha. let me come to point..

This is about how to OPEN THIRD party site from your webpage
Q1. should it be in Same Window ?
Q2. Should it be in NEW WINDOW ?

Really love to see comments here on this

I would like to go for NEW WINDOW.. reason its very simple.. all latest browsers are having TABNAVIGATION which makes your browsing experience great with pseudo feature. For this point.. i have done small story...

here you go...

First Scenario –

Rajesh -- during visiting Site A -- got to see some interesting content and clicked on that.. finally got opened THIRD PARTY site B.

Here also there are good interesting information r there so by clicking B1 >> B1-a -- I am at B1-a










Again If I want to go to A --- Need to CLICK – browser’s Back button THREE times [ this really irritates user because he is not clear how many times he need to click]


Second Scenario –
The same time if Site B opens in new window from Site A and go to the same path

















In this case its very clear, where exactly i am.. and m not losing my PARENT SITE.. it will be there in BROWSER'S TAB NAVIGATION. this part works for me as a MAIN NAVIGATION..

Reason—all the latest browsers are having TAB concept, we can say Pseudo Navigation[notebook tabs] it clearly tells user about all the sites which are opened and help user to navigate based on his/her need.

I strongly believe... THIRD PARTY should open in New window only.

Like to hear from others.... request if any survey or metrics is there on same .. please share with me... Thanks - rajesh

How to set 100% height for Div

One of the very big problem.. i have faced in my development .. is setting the 100% height for my whole body Div Container

but now.. when i got this answer .. really its like .. i got a answer how to do magic with small TRICK..

really interesting... sharing here..

Private Browsing - Firefox 3.5.1

Good to share that finally Firefox has also started PRIVATE BROWSING [Tools >> start private browsing -- ctrl+shift+p] option.

Basically it doesn't leave any footmarks on disc/browse. So for any kind of confidential browsing, online transaction user can go for this option.

For more detail CLICK HERE

Thanks Firefox!!!

MOBLIN OS -- Intel + linux

MOBLIN OS for Netbooks --- its customized version of linux, from INTEL. It aims to provide visually rich and interactive UI experience to netbook users.

it has multitouch features with physics, animation and OpenGl... sounds great..

for more --- MOBLIN ---click here

HTML 5 - HyperText Markup Language Version 5

HTML 5 - Hypertext markup language version 5 is the next major version of the Browser's htm language. This is going to make our world of internet really very fast.

Basically this will have number of new elements, such as

for navigation,

for footer, more simplified version. And some of the html default properties will be dropped like..

, .. all this will be controlled by CSS.

for more Click here

What is igoogle and how to use ?

What is igoogle and how to use ?

iGoogle is a customizable homepage iGoogle lets you create a personalized homepage that contains a Google search box at the top, and your choice of any number of gadgets below. Gadgets come in lots of different forms and provide access to activities and information from all across the web, without ever having to leave your iGoogle page.

Graphical User Interface Gallery - GUIDEBOOK

Amazing site.... dont have words.. have got this one from online group discussion..
really...
" GUI guidebook, a website dedicated to preserving and showcasing Graphical User Interfaces, as well as various materials related to them. "

here u go --- http://www.guidebookgallery.org/

Tool for doing UI mockups

Here is one of the best online available tool for UI Mockups
http://www.balsamiq.com/

Click on the containers tab, and drag a new dialog/window onto the page. Click the dialog/window and then look at the little pop-up on the right. You can trivially add a scrollbar and indicate where the thumb should be. You can turn on/off the icons in the top right corner. Adjust the status bar region.

Its very user friendly and very easy to use .. we folks can have hand on this...
We need to download this for use...

here is the print screen of application

• 

Interesting point is even Microsoft Expression team is coming up with SketchFlow in its coming BLEND 3. This will be great for all ...
here u go for detail information Click Here

In addition to the SketchFlow and the infamous Balsamiq, I would also like to add another nifty tool called FlairBuilder.
Its good and impressive tool, please have a demo walkthrough. Click here

Text to Image [html + CSS + javascript] typeface.neocracy]

Great news for web developers and designers. We have been facing problem in FONT compatibility with browsers. For getting render any TRUE TYPE FONTS[License] on browser, client should have font installed on system.

There is solution for this, developer can go for Flash or Image base mechanism. In this case we need designer's help|expertise to create.... k lets come to the point

Now there is solution, got this information from Google Forum.. looks great

This is Javascript based solution,
What it does ?
Instead of creating images or using flash just to show your site's graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. This is a work in progress, but functional enough at least to render the the graphic text on this site.

Steps need to follow
Here's what it takes to get going:
1. Load the typeface.js library
2. Typeface.js fonts .......then proceed like normal:

Here u go ---- Click Here

Online Basic Drawing Tutorials

Today one of my friend asked me for some drawing tips and online tutorials.. and i was totally blank. Because of him, finally did some search on our Google Uncle.. here are the some interesting links....

http://www.morecoloringpages.com/
http://www.magickeys.com/books/color/
http://kidsfront.com/match-pictures/12.html
http://www.kinderart.com/drawing/
‎‎http://www.billybear4kids.com/colorme/colorbook-pages.html
http://www.allaboutnature.com/coloring/

software--- http://www.tuxpaint.org/

Error Prevention - during interaction modeling

One of the very important role of any UI expert to avoid or deal with mistaken or unsucceessful situations.
Some of these situations may be detected or predicted during interaction modeling.
here are the list of..

Passive Prevention: errors that are prevented by documentation or online instructions.

Active prevention: Errors that will be actively prevented by the system

Supported prevention: Situations which the system detects as being potential errors, but whose decision is left to the user.

Error Capture: Errors that are identified by the system and that should be notified to users

Supported error handling: errors that should be corrected by the user, with system support.

Rajesh R. Nair

How to make blog popular?

How to make your blog effective??

Let me try to put here in very layman angle...

• From the Content [King of your blog] side.. it should be RICH..
  RICH = TEXT + GRAPHIC + ANIMATION + VIDEO
• Your content should have tagging to key words [even m not following this properly].... Like wikipedia. But keep one thing in mind... whenever u hyperlink any keyword within your content. Make target = new window, so that user will not lose your page.
• Write proper TAGS / LABELS + DESCRIPTIONS + KEYWORDS ... its part of SEO [Search engine Optimizations]... it makes your blog searchable on internet.
• Register your site on all search engines [yahoo, live, aol .. google]...There are number of sites where you can register your blogs, that works for you as a SEO.. .like BLOGCATALOG, BLOGADDA..
  example:-- http://www.blogadda.com/blogs/artsmaths-artsrajesh/, http://www.blogcatalog.com/blogs/artsmaths.html
• Keep your blogs as a mail signature, it shows your presents on internet
• Keep update your blogs with latest informations
• There are very effective widgets from google-blogs, include those all in ur blogs example--- LABELS
• Most important, Visits others blog... write commments... leave your signature with blog address
• Make your profile on social and professional communities with blog address
  

For more…can do googling..... there are good ways... :)

Expand and Collapse Container

Expand and collapse option through JS and CSS
Follow steps
1. Copy this code in notepad
2. Save your note pad as .html or .htm
3. Open with browser... solution is ready :)

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<style type="text/css">
h4{
 color:#719500;
}
</style>
</head>

<script type="text/javascript">
var collapseDivs, collapseLinks;

function createDocumentStructure (tagName) {
  if (document.getElementsByTagName) {
    var elements = document.getElementsByTagName(tagName);
    collapseDivs = new Array(elements.length);
    collapseLinks = new Array(elements.length);
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var siblingContainer;
      if (document.createElement &&
          (siblingContainer = document.createElement('div')) &&
          siblingContainer.style)
      {
        var nextSibling = element.nextSibling;
        element.parentNode.insertBefore(siblingContainer,

nextSibling);
        var nextElement = elements[i + 1];
        while (nextSibling != nextElement && nextSibling != null) {
          var toMove = nextSibling;
          nextSibling = nextSibling.nextSibling;
          siblingContainer.appendChild(toMove);
        }
        siblingContainer.style.display = 'none';
   
        collapseDivs[i] = siblingContainer;
   
        createCollapseLink(element, siblingContainer, i);
      }
      else {
        // no dynamic creation of elements possible
        return;
      }
    }
    createCollapseExpandAll(elements[0]);
  }
}

function createCollapseLink (element, siblingContainer, index) {
  var span;
  if (document.createElement && (span = document.createElement

('span'))) {
    span.appendChild(document.createTextNode(String.fromCharCode

(160)));
    var link = document.createElement('a');
    link.collapseDiv = siblingContainer;
    link.href = '#';
    link.appendChild(document.createTextNode('[+]'));
    link.onclick = collapseExpandLink;
    collapseLinks[index] = link;
    span.appendChild(link);
    element.appendChild(span);
  }
}

function collapseExpandLink (evt) {
  if (this.collapseDiv.style.display == '') {
    this.parentNode.parentNode.nextSibling.style.display = 'none';
    this.firstChild.nodeValue = '[+]';
  }
  else {
    this.parentNode.parentNode.nextSibling.style.display = '';
    this.firstChild.nodeValue = '[-]';
  }

  if (evt && evt.preventDefault) {
    evt.preventDefault();
  }
  return false;
}




</script>
<script type="text/javascript">
<!--
function popup(url)
{
var width  = 1200;
var height = 927;
var left   = (screen.width  - width)/2;
var top    = (screen.height - height)/2;
var params = 'width='+width+', height='+height;
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
newwin=window.open(url,'windowname5', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<script type="text/javascript">
window.onload = function (evt) {
  createDocumentStructure('h4');
}
</script>

<style type="text/css">
h4{
 color:#719500;
}
</style>

<div style="width:70%; float:left;">
<DIV>
<H4>Question?  </H4>
<P>Answer</P>
</DIV>
</div>

You can write number of questions and answer, this is one of the best solution from the user experience angle. This helps to make layout without having vertical scroll bar.

Thanks folks.. coming days.. ll add some more interesting stuffs here...

Usability Testing Softwares

Usability Testing is one of the important phase of UCD process, its the last but most important part. Usability testing gives the exact information about the User's experience on product.

What is Usability Testing Software or Environment ?
The automated Usability Test Environment (UTE) Tool is software used to collect, analyze, and report the results of scenario-based Web site usability tests. The UTE Tool helps federal Web managers efficiently and effectively test their Web sites to make them more citizen-centric.

Recently I have came across some products which are very good

1. MOREA from Techsmith [licence--- WINDOWS]
2. Uservue from Techsmith [licence--- WINDOWS]
3. Userfocus [Free]
4. Jink [Free]
4. Silverbackapp [licence--- APPLE MAC]

+ Google Analytic is excellent tool .. it gives you the complete information about site, visitors, from which part of country, what content they r looking for, what keywords they r looking for, how long they r on ur site... .etc .etc. Lot of information with graphical representation. This helps you to understand your ROI part.

This is useful especially if you create a site for your business. Using Analytics's sophisticated and easy to use tools you can even find out which geographic area your visitors come from. To use Google Analytics on your site, all you have to do is sign-in to the Analytics website google/anaytics. You will be given tracking ID code. This need to be entered within your site, this simple javascript which helps Google/analytics to track your site.

To check the statistics, just sign in google/analytic with your google id. This will give you the dashboard with all valuable information, which will improve ROI of your website.

Morea
Use Morae to record exactly what customers do and say, discover patterns in the data, key in on significant moments, and build a compelling case for how to improve the customer experience.
To know in detail, how it works there is one good article here with description and graphis... please visit here
Thanks to JOEL SPOLSKY


Uservue
Want to see someone else’s screen and record what they’re doing? Talk to them as they’re using Web sites? Immediately understand what they’re doing?
Real users, real feedback

UserVue is an online service that lets you remotely observe and record users’ desktops as they navigate applications and sites:

• Perform user testing
• user research
• design feedback
• on projects

Userfocus
Most people use Microsoft Excel to analyse the results of usability tests, but did you know you can use it to collect the data too? This spreadsheet allows you to measure task completion rates, analyse questionnaire data, and summarise participant comments. It even includes a timer so you can measure time-on-task. The spreadsheet is highly customisable

Jink
It records what users see, do, and talk on a computer. With a web cam, you can also record their facial expression. The limitation is that recording time is capped at 15 minutes.
Video tutorial

Webnographer
Webnographer is a new tool for Asynchronous Un-Moderated Remote User Testing.

It enables fast user testing outside of the labs. Development team are able to get results back in a couple of hours using more than the normal number of participants, and far cheaper.
blog:- http://blog.feralabs.com/category/webnographer/
Product site:- http://www.webnographer.com/

Rajesh to U[online friends]:--- Please add more to this list if you know any Software or tool which helps to understand experience of users. Looking for responses... :)

SCORM

Published Paper in National level elearning conference "ELETECH India 2005"

For online here u go CLICK HERE
27-Experiences of SCORM Implementation Process in Cyber Security Course Content-Rajesh-27

Education scorm in elearning scorm

Wireframe Design

What is Wireframe ?

Website wireframes are simple line drawings that show the placement of elements on a web page[User interface].
This works like blue a print or skelton, before starting the actual design. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.

There are different approaches for this
- Can be very rough sketches on paper [Perfect method.... to get start .. before touching Powerpoint or visio]
- Sketches on board [its very similar to sketches on paper]
- Powerpoint wireframes [ its my fav method... for me its easy to show the navigation .. by using slides of powerpoint..]
- Visio approach [most popular:- beacause this tool has lot of readymade web elements, so user just need to drag and put in right places :)]

here are the some good examples... have got from net...sharing with all of you....
Please check Url of Matt Brett .... he has very good portfolio... CLICK HERE
check this too, please check the portfolio section one by one.. -- Nadine Schaeffer

POP up html window, javascript , Css

Number of times, i have tried to make html popup based application... finally i have got very good solution. Here m framing that code, its output is well enough. Take this and paste as it is in notepad and save it as a .html file.. and see the output. To make attractive, u can go for images within CSS.
follow these steps
1. Copy this code in notepad
2. Save notepad file with .html extension
3. Popup application is ready

<html>
<head>
  <title>Desktop Provisioining Portal</title>
  <style type="text/css">
      #child
      {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -365px;
          margin-top: -250px;
          z-index: 3;
          width: 730px;
          height: 520px;
          background-color:black;          
          background-repeat: repeat-x;
          border: solid 3px #2c7292;
      }
      #divTitleBar
      {
          position: relative;
          text-align: right;
          width: 100%;
          margin-top: 5px;
          margin-left: -5px;
      }
  </style>

  <script language="javascript">
  function show(HtmlPage)
  {
      var childDiv=document.getElementById('child');
      childDiv.style.display="block";
      var childWebPage=document.getElementById('childSite');
      childWebPage.src=HtmlPage;

  }
  function closeChild()
  {
      var childDiv=document.getElementById('child');
      childDiv.style.display="none";

  }
  </script>

</head>
<body>
  Primary Layer Contents
  <input type="button" value="window 1" onclick="show('http://artsrajesh.blogspot.com/');" />
  <input type="button" value="window 2" onclick="show('http://artsmaths.blogspot.com/');" />
  <input type="button" value="window 3" onclick="show('http://artseye.blogspot.com/');" />
  <div id="child" style="display: none">
      <div id="divTitleBar">
          <input type="button" value="close" alt="" onclick="closeChild();" />
      </div>
      <iframe id='childSite' style="width: 725px; height: 478px;"></iframe>
  </div>
</body>
</html>

Great Open Source free tools + CMS for web development

Hi all

Love to say thanks to Nathan Jeffery for sharing some of the great and useful open source tool links here with full description

m just doing mirror of Nathan's mail and adding some links from my end :)

Great Open Source tools for web development

Tools
-http://www.gimp.org/ (for editing images to use on your sites)
-http://inkscape.org/ (scalable vector creation and editing tool, can
also import other formats)
-http://www.blender.org/ (3d designs for really effective headers and
buttons)
-http://www.wampserver.com/en/ (a stack for windows of Apache, MySQL,
Php for local development)
-http://sourceforge.net/projects/notepad-plus/ (text editor for
creating your HTML, CSS and PHP)
-http://www.panic.com/coda/ (text editor for mac)
-http://macromates.com/ (text editor for mac)
-http://www.apple.com/downloads/macosx/development_tools/ (tools for
mac)
-http://www.netbeans.org/ (cross platform IDE, don't use the WYSIWYG
only use the text editor)
-http://www.python.org/ (for advanced cross platform programming)
-http://www.mysql.com/ (open source database engine)
-http://www.postgresql.org/ (opensource database engine)
-http://www.php.net/ (server side scripting language)
-http://www.google.com/webmasters/ (site and keyword analysis tools)
-http://browsershots.org/ (for getting an idea of what your site looks
like on different setups)
-http://www.quirk.biz/emarketingtextbook/download (free ebook on
emarketing)

Browsers: (it's good to test locally in as many environments as
possible)
-http://www.apple.com/safari/ (PC and Mac)
-http://www.mozilla-europe.org/en/firefox/ (cross platform)
-http://www.google.com/chrome (currently windows)
-http://www.opera.com/ (PC and Mac)

Skills
-http://w3schools.com/ (awesome learning centre)
-http://www.tizag.com/ (more learning resources)
-http://www.csszengarden.com/ (info on CSS, will save you tons of
time)
-http://www.oswd.org/ (example CSS websites and downloads to use and
learn from)
-http://www.w3.org/ (web standards and resources for learning, they
set the rules)

Content Management Systems (either use as is, modified or learn from
them they're opensource)
-http://www.joomla.org/
Online Tutorial for JOOMLA
-http://www.magentocommerce.com/
-http://oscommerce.com/
-http://drupal.org/
-http://typo3.org/
-Ning [Create Social Networking Site] -- http://artsrajesh.ning.com/
- Open Source CMS lists

Project Management Systems (either use as is, modified or learn from
them they're opensource)
-http://www.projectpier.org/ [Project Management Tool]
-http://www.37signals.com/
-http://www.taskfreak.com/

e-learning
- www.elearn.cdac.in

Browser Compaitibility test

www.browsershots.org is one of the best place to test websites in different browsers.
found interesting sharing here...

how to do blogging?

Blog

Get your own at Scribd or explore others:

How to get Creativity ?

VISUAL THINKING TIPS
1. Create an environment for creativity
2. Start the habit of drawing
3. Create a personal visual library [Start drawing objects in your own style example: Watch, Calculator .... .etc]
4. Create a personal metaphor library
5. Take creative and visual thinking breaks
6. Practice Creativity
7. Read more fiction literature
8. Start a visual thinking school

VISUAL THINKING TOOLKITS
- vertical lines
- Horizontal Lines
- Circles
- Spirals
- Wavy Lines
- Jagged Lines
- Star(success)
- Diamond(Decision)
- Spiral(Change in Direction)
- circle(harmony)
- Direction(arrow)
- straight
- Triangle (Relationship)

What Silverlight can do ?

User and developer have number of questions about silverlight capabilities, because we people are very use to flash and other technologies.

here i like to share a link which tells how can be a RIA,
http://www.mscui.net/PatientJourneyDemonstrator/

:) i think, now no need of giving any detailed

Please Launch and see the demos

UX Designer vs UX Researcher

It’s a very interesting point, true! Sometimes we find it difficult to define these terms such as User experience, Usability, Usability engineering, Usability testing..... .etc

Fine, let me try to define in a very simple way... because once we understand anything from a layman’s side or from the top... then its not difficult to put our own logic and drill it

I am just sharing my knowledge here, Please feel free to correct me if i am wrong in approach

Note: Any term like Usability, User, audience.. these comes into the picture when we are developing or creating any product for USERS.
I am mentioning this, because there are number of sites which are abstract.. they don’t worry about users, example most of Artist’s Profile on net.
Simply we can say USER is our Super hero of this development cycle

In brief.. there are different stages of any user related product/project [this is from the front hand[User interface] side..]

1. Research and Analysis
2. Information Architecture
3. Wireframe/ Blueprint/Prototype
4. Mood Boards
5. User Interface Design
6. Development
7. Usability Testing
8. Bug Fixing
9. Production

Just to make it very simple, I am just giving importance to User Experience Researcher and Designer’s Role

I. Research and Analysis, Information Architecture, Wireframe User Experience Researcher’s Role
Process of discovering…

• Who the users are
• How they think and work
• The Stake holders goals and objectives

Collecting Data on

• Users profiles
• Work environment
• Scenarios of how user’s will use the interface
• Task Analysis

II. Mood Boards, User Interface Design User Experience Designer’s Role
User Interface Skins/ template design

• Understanding the Brand guidelines of product/project, if its existing or setting new guidelines in case of new
• Template design based on wireframe and Mood boards

JAVAFX---- Answer to Flash and silverlight from JAVA ?

Came to know about new [for me its new :)] technology, called JAVAFX

JavaFX is a family of products for creating Rich internet applications.

The focus of this tool is to empower users proficient in web scripting technologies (such as HTML, CSS, AJAX, JavaScript and ActionScript) to create connected applications that run in standard web browsers as well as on the desktop.

These applications can be optimized to run on mobile devices as JavaFX Mobile is made available in the Spring 2009 and on other devices in the future

to know more in detail Click here

Internet Explorer 8 [IE8]

Internet Explorer 8 [IE8]

Microsoft has recently come up with Best User Friendly Browser tool for user. This IE8 is amazing tool for users, for me its difficult to believe this kind of tool can be possible from browser perspective. By seeing this I gets feel that Microsoft is able to full fill their promises. Some of the features which makes IE8 different and user friendly are....
1. Integrated Microsoft live within IE8
2. Search Suggestion with Visual

3. Accelerator:- A new feature, user can select key words and in One Click user can get lot of information for that keywords through other sites.














Example:

• User is looking for J-Lopez on Microsoft Live
• Can see the complete profile in one click from Wikipedia
• Can see the price and availability of music albums in ebay / Stumbleupon
• If any address information is existing can get the Map from Live Search
  

4. With a Right Click user can connect to My Space, Map with Live Search, Face book, Define with Dictionary.com and other third part communities














5. Provides Web developer tools to quickly debug html + CSS and scripts in a browser environment
6. Webslices [represented by small icon] is a new feature similar to that used in RSS Feed , which allows users to subscribe directly from a Web Page. And the web pages which are subscribed will be added to the favourites.
7. InPrivate feature, one of the very interesting and useful feature. User can browse in security mode, this will not store any kind of information in cache. This can be very helpful for banking/ secure kind of browsing

Click here for demo

Multimedia Course Development

Hi friends,
I am working on Course Syllabus for Diploma in Multimedia. Here is the presentation, have a look and give your comments. This will guide/help me to make proper syllabus.

Multimedia Course Syllabus - Upload a Document to Scribd

Read this document on Scribd: Multimedia Course Syllabus

USABILITY TESTING--- EYETRACKING---

USABILITY TESTING--- EYETRACKING---

DO YOU KNOW

• What your users are looking at?
• Which parts of your website are attracting the most attention?
• What information your users are ignoring?
• Which areas are merely distracting your users from finding what they really want?

Eye tracking is the important phase of usability testing, which answers all these questions allowing you to focus on making the most important information on your website also the most visible.
Demo of eye tracking [from http://www.etre.com]


In demo

• Dot shows user’s eye moments
• User looks, what attracts, likes, dislikes

Each circles will be displayed with scores, this gives clear picture how long user was there on that particular place on interface. Big circle or highest marks shows users interest in that content.

Results from Eye Tracking

• Series of random moments [graphically Zig Zag lines] represent that user was disturbed by layout
• Series of control moment [graphically linear lines] shows that user was reading

Final out put
INDIVIDUAL SESSION MAP
It tells most about individual behavior

HEAT MAPS
Tells the behavior of entire group of people

• bright colors map to show the entire result
• Warm color represents:-- Most Noticed
• Patch color represents:-- Gone through
• Black color represent:-- User ignored or didnt notice, This part will help out lot to understand the biggest negative part of interface.

Silverlight Anatomy

Silverlight Project [set of files]
-Root HTML file - provides basic entry to browser
-CreateSilverlight.js - specify the control size and reference the XAML
-Silverlight.js - isntantiates the silverlight control in the HTML page
-Page.XAML - defines UI of the page
-Page.xaml.cs - the event driven C# code

Key Characteristics
-Runtime for browser RIA's
-Cross browser (IE, Mozilla, Safari)
-Cross Platform (Windows, Linux and MAC)
-Flexible Programming Language (C#, VB, AJAX, Ruby , Javascript)
-Next generation Media Experience (Streaming audio, video)
-Robust Security Model

Features
-Compatibility
-Interoperability
-Light Weight
-High Performance RIA rendered
-Flexible Programming Model
-Mobile - Silverlgiht apps can be viewd on Mobiles
-DirectX and Direct3D support
-Integrates with ease
-XAML can be crawled
-High speed video streaming, web media, gaming

Visit silverlight official website for real time experience http://www.silverlight.net/

I got a very good link of silverlight demo, like to share with u http://www.mscui.net/PatientJourneyDemonstrator/

Blogs

My blogs
My canvas: http://artsrajesh.blogspot.com
My world: http://artseye.blogspot.com

Accessibility Guidelines

Accessibility Guidelines from W3C

Web Content Accessbility Guidelines 1.0
W3c Recommmendation 5-May-1999

Web Content Accessbility Guidelines 2.0
W3C Candidate Recommendation 30-April-2008

Adobe is going to reply Microsoft with Linux

Hi all,

Interesting news for multimedia and open source people, Adobe is going to comeup with LINUX versions of adobe suit, for users its going to be interesting. And one more news to give answer to silverlight Adobe has decided to shake hand with Moonlight. Moonlight is a opensource based RIA based output in the same line of silverlight, its developed on opensource flexible programming language.

here is the link which will put more light on this CLICK HERE...

Wireframe-prototyping software or tool

Wireframe/prototyping software or tool

while searching for prototyping tool, came across very interesting software which have most of the design elements.
it seems like a pluginn for VISIO.

here is the link, this can be downloaded from here...

Visio - the interaction designer's nail gun
http://www.guuui.com/issues/02_03_02.php
http://taubler.com/oversite/download.shtml

Ball animation in silverlight

Silverlight a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications.

expressionblend-silverlight - Upload a Document to Scribd

Read this document on Scribd: expressionblend-silverlight

My Canvas

mycanvas - Upload a Document to Scribd

Read this document on Scribd: mycanvas

Basic of Flash

flash - Upload a Document to Scribd

Read this document on Scribd: flash

SEO - Search Engine Optimization

What is SEO ?
Search engine optimization, the process of improving ranking in search engine results
here you go -- http://seo-blog-consultant.blogspot.com/

SEO Tools
http://www.ezbusinessneeds.com/seo-tools/
http://www.webmaster-toolkit.com/link-checker.shtml
http://www.xml-sitemaps.com/ [Very effective]
http://onlywire.com/
http://www.numion.com/Stopwatch/index.html

SEO - Upload a Document to Scribd

Read this document on Scribd: SEO

How to make graphical S++ or meeting request

S+ create - Upload a Document to Scribd

Read this document on Scribd: S+ create

Design Definition

DEFINITION OF DESIGN - Upload a Document to Scribd

Read this document on Scribd: DEFINITION OF DESIGN

Important links----Multimedia---

Hi all

I am sharing some of the best and useful links with all of you.... i m going to continue this and add more.. please wait for some more time... :) YOu all friends can suggest links....

Excellent example of Component based customize site:-
1. www.igoogle.com
2. www.netvibes.com
3. http://www.flexcapacitor.com/


Web guidelines sites
1. http://mail.google.com/mail/?zx=84u0rl9xt87&shva=1#inbox/11c716ef84db205e
2. http://www.thinkvitamin.com/features/design/product-pages-so-much-suck-so-easy-to-fix


Free Vector Graphic Tools, its like my brush
1. http://www.inkscape.org/download/

Images/Graphic sites
1. www.flickr.com
2. www.photo.net

Blog Sites
1. www.blogger.com

Best Usability sites
1. www.salesforce.com
2. www.bharatmatrimonial.com
3. http://wildfire.usgs.gov/ [checkout the graphs]
4. http://www.cleartrip.com/ [Process is easy to use, defect free and fast.]
5. Philips [interesting navigation]
6. Cricinfo


Open Source site
1. www.sourceforce.com

Best Tutorial / Knowledge Sharing sites
1. http://designinginterfaces.com/
2. http://www.w3schools.com/


Plugin for Firefox
1. Webdeveloper addon
2. Piclens for image viewer


Submitted Papers
1. Experiences of SCORM Implementation / e-Learning

Moss [Microsoft SharePoint Server ]
1. MOSS related questions

Best CSS based websites
CSS Templates

Best Javascript
CSS + Div + html + Js based tab component [very good example for notebook navigation layout]

Good Product Presentation or Demos on Internet
1. Frogbuzz
2. jingproject

beautiful poem from my SIS

I HAVE A THOUGHT

DO YOU KNOW WHAT?

I LOVE YOUR SONG

WHICH YOU MAKE YOUR OWN

I LOVE YOUR STORY

WHICH HAVE A QUERY

I LOVE YOUR LOGIC

WHICH HAVE A MAGIC

I LOVE YOUR SMILE

WHICH IS SWEET AND MILD

I LOVE YOUR ANGER

WHICH IS VERY DANGER

I LOVE YOUR CARE

WHICH IS ALWAYS THERE

I LOVE YOUR COMMENTS

WHICH HAVE A SENSE

I LOVE YOUR IMAGINATIONS

WHICH MAKES NEW CREATION

I LOVE YOUR THOUGHTS

WHICH ARE HIGH AND BROAD

THAT’S THE REASON BHAIYA

I LOVE YOU LOT.