Tuesday, August 3, 2010

Simple Tips to Improve your Web Accessibility


Web accessibility is the idea of making websites easily accessed by all types of people including those with certain disabilities, different languages, or lack of access to certain technology. The notion is derived from the fact that all people should be given equal opportunity to access websites regardless of their limitations. It is important for you to consider that a certain percentage of your site’s visitors will be in this category. Moreover, if your website is easily accessible to all people, this will increase the frequency people will view and use your website. When websites are properly designed, developed and edited, your web accessibility will increase because all people will be able to use, function, and navigate through your site with ease. To state the obvious, people will not visit a site that they find difficult to utilize. Therefore, increasing your web accessibility is a precursor to increasing your site’s traffic. Below is a list of various ways to increase your web accessibility, through simple modifications to your website. In my opinion, no matter what stage you are in the website process, every step of the way, you should consider making your website more user-friendly. Please do not hesitate to contact me if you have questions, and remember to post comments. Enjoy!

Thursday, June 17, 2010

How To Backup Your Gmail Account To YOUR Hard Drive






Do you use Gmail? Of course you do – doesn’t everybody?

The Google gives you tons of space to store your precious email and attachments. We have found ways to use that space for our evil practical ways.

We all know The Google backs up regularly and runs some of the biggest redundant data centers in the world, but do you really trust your emails from your long lost girlfriend attachments of your trip to that sci fi convention important work emails and attachments with them?

Wouldn’t you feel safer with a backup of your own?

Of course you would young Admin! It is one of the rules I preach daily as a Network Administrator.

BACKUP BACKUP BACKUP! He who laughs last usually has a backup…

Friday, May 21, 2010

Set up an online survey in minutes and start collecting responses in real-time!

Online Surveys

Survey your users, customers or staff to find out what they think. Our online surveys provide a powerful tools to help you dig deep into the market research data you collect

Stunning Poll Widgets

What's your favorite soda? Who are you voting for? Which television should I buy? These are the questions that we ask ourselves and the people around us every day. With our polls, you can pose these questions to anyone you want - your Facebook friends, your WordPress blog readers, your Twitter followers - or anyone else on the web.


  • Surveys
  • Polls
  • Ratings

JOT FORM Easiest Form Builder

Powerful Online Survey Creator, Simple and Free


Questionform is a web application for creating, publishing and analysing online surveys and forms.
1. It is easy and fun, with drag and drop and a few clicks, you can build powerful online surveys in no time.
2. Easily integrate the survey with your web page, blog  or send by email and track who has responded.
3. Track your survey responses in real time, analyse the results, create reports and export the data to your favorite spreadsheet

Monday, May 17, 2010

Qtip Improving Your Website Look and Feel


qTip.

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.
Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all... it's completely free under the MIT license!

Jquery Combobox

A combobox is technically a 'Select' HTML element. A combobox is also be known as a drop down list.
This control was written due to the fact that the standard Select element cannot be styled, or is limited in what can be styled.
For instance, in Internet Explorer 6,  the individual items in the list (HTML Options) are very restricted in styling, allowing only the background-color and color and a few other CSS properties.
The other reason for creating this control is the need for a simple way of setting up a control. Other custom comboboxes are not so easily setup, requiring technical knowledge before-hand.
The custom combobox relies on the jquery library, without which, this control would not have been created. The jquery library allows a developer to focus on the problems of your specific requirements rather than focus on technical issues surround cross-browser standards and the like.
note: at the moment the jquery.combobox behaves as a dropdown list and not a full combbox. it does not currently accept text input.

features

  • easy to set up
  • control over style of combobox using CSS
  • supports keyboard navigation
  • cross-browser support with firefox 2, internet explorer 6 and opera 9*
  • different style of animation for dropdown
  • original Select html control is still available for access and control and reflects the user's selection
  • works the same with forms and server-side form processing, retaining the original control's ID and updated values
* - partial testing in this beta stage of development

requirements

Make image buttons a part of input fields


If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have "embedded" image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.
Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

If you want to add some functionality to some input field (like adding a calendar icon that will popup some calendar), you would probably do it like on the image below.
  
The code could look like this:
<fieldset id="sampleForm">
    <label for="txtName">Full name</label>
    <input id="txtName" type="text" />
    <label for ="txtDOB">Date of birth</label>
    <input id="txtDOB" type="text" class="inputWithImge" />
    <img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />
    <label for="txtCity">City</label>
    <input id="txtCity" type="text" />
    <label for="txtPostCode">Post code</label>
    <input id="txtPostCode" type="text" />
    <label for="txtCountry">Country</label>
    <input id="txtCountry" type="text" />
    <label for="txtBank">Bank</label>
    <input id="txtBank" type="text" class="inputWithImge" />
    <img src="bank.png" alt="Click to popup the bank window!" onclick="alert('Popup some window here!');" />
</fieldset>
<button id="btnNothingToDo">Do nothing</button>
And we could have CSS classes like these:
body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
#sampleForm label { display:block; margin-top:10px;}
#sampleForm input[type="text"] { width:200px; border:solid 1px #000; padding:3px 0px;}
#sampleForm img { vertical-align:middle; cursor:pointer; }
However, your clients want it to be like on the image below. Image button has to be a part of an input field and everything has to be aligned.
inside_the_box
So what could you do? You can wrap input field and image button in some div and set black border to that wrapper div. You will also have to remove border form input field, and make it a little bit shorter, so that image can fit inside the wrapper div.
schema
But if you work on applications that have tens of forms, there is a probability you will have to do this tens or even hundreds of times. Insane, really.

But, remember jQuery?

You can add just one line of the code to make it work on all of your pages. Ok, here is the explanation so pay attention because this might sounds tricky.
We want to find a set of two elements (input field and image) that repeats in the fieldset and wrap it inside the div. How to find these sets? This is what jQuery will do. We'll assign a class to each input field that we want to wrap. That class will also remove border form input field. So, here is the HTML code:
<fieldset id="sampleForm">
    <label for="txtName">Full name</label>
    <input id="txtName" type="text" />
    <label for ="txtDOB">Date of birth</label>
    <input id="txtDOB" type="text" class="inputWithImge" />
    <img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />
    <label for="txtCity">City</label>
    <input id="txtCity" type="text" />
    <label for="txtPostCode">Post code</label>
    <input id="txtPostCode" type="text" />
    <label for="txtCountry">Country</label>
    <input id="txtCountry" type="text" />
    <label for="txtBank">Bank</label>
    <input id="txtBank" type="text" class="inputWithImge" />
    <img src="bank.png" alt="Click to popup the bank window!" onclick="alert('Popup some window here!');" />
</fieldset>
<button id="btnNothingToDo">Do nothing</button>
and this is what jQuery has to do:
$(document).ready(function() {
    $(".inputWithImge").each(function(){
        $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
    });
});
All that is left to do is to add two more classes that will define styles for our wrapper div and input field that will be wrapped.
.imageInputWrapper{ width:200px; border:solid 1px #000;  }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}

 Download Sample Code Here 

Pretty Check boxes

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability.

How to use

Nothing is easier to use. First include the jQuery library then include the prettyCheckboxes javascript in the head of the page(s) where you want to use prettyCheckboxes.

Pixelmatrix Design For Form Elements

As a UI designer, I have to deal with form controls quite a bit. I hate how I can’t make selects, checkboxes, and radio buttons look consistent in all the browsers, so I wrote a plugin to solve just that. Introducing Uniform, a plugin for jQuery that lets you style select, radio, and checkboxes however you desire.
It works by hiding the original form elements using opacity, and wrapping div and span tags around the elements. Then, as the different events take place, the plugin applies certain classes to the elements. I’ve seen this method used a few places on the web, but never as an accessible, easy-to-use jQuery plugin.
Uniform supports the major browsers other than IE6, which has an issue due to the way they draw their form controls. In the case of IE6, it just ignores the form elements, so you can still use the form the same way. IE7 works perfectly.
There is a demo here that you can use to see what you could do. The demo utilizes Progressive Enhancement to style the form controls, which means that Safari and Firefox show a nicer version of the controls, but you could style them however you like. I suggest using Progressive Enhancement or utilizing CSS sprites of some type.
This plugin is very 1.0, so don’t expect it to be 100% perfect. If you find a bug, please email me and i’ll take a look at it.
The code generated looks like this:

Monday, March 8, 2010

Zen Flash Gallery

Zen Flash Gallery combines simplicity and elegance.

Main Features:
- Flash component (cs3) and swf-xml versions available
- Elegant author’s design
- Smart usability
- Multiple image folders
- Gallery parameters configuration via XML
- Image captions
- Slideshow mode
- Sound effects
- Gallery code is optimized for high productivity

TiltViewer

TiltViewer is a free, customizable 3D Flash image viewing application.

 

Controls

Mouse
  • Click images to zoom-in, click again to zoom-out.
  • Click the background to zoom-out.
  • Click the 'reload' button (below the image grid) to load a new set of images.
  • Click the 'flip' button (bottom-right of a zoomed-in image) to see image details.
Keyboard
  • Cursor keys to navigate between images.
  • Space-bar to zoom in/out.
  • 'F' key to flip an image (when zoomed in).
Right-Click Menu
  • Go Fullscreen. Opens TiltViewer in fullscreen mode.

TiltViewer Standard Features

  • Use on any website.
  • No Flash® IDE needed. Customization via HTML.
  • Intuitive image navigation.
  • Smart image pre-loading.
  • Resizable interface scales to fit browser window.
  • Cross platform. Supports Windows, Mac and Linux.
  • Built-in Flash detection and ugrade prompt.
  • Load images from Flickr or via XML.
  • Free!

Flash Gallery


Flash Gallery is FREE. It may be used in any kinds of personal and/or commercial projects. Flash Gallery may not be redistributed or resold to other companies or third parties. Please ensure that the Flash Gallery link in the left right corner is clearly visible.

Thursday, January 7, 2010

Alternate Table Rows Color

Let's start with an ordinary html table. Whether the table contains head/foot elements doesn't matter in this case:
0 - some txt
1 - some txt
 
2 - some txt
 
3 - some txt
 
4 - some txt
     

Now, we need to check that the browser is fairly new and has the necessary JavaScript capabilities (i.e. W3C DOM support). The following line performs this check, disqualifying Netscape 4 and others of that generation. Such browsers will make no attempt to color the table.
if(document.getElementById)
Also note that common to all these examples is this code:
var table = document.getElementById(id);  
var rows = table.getElementsByTagName("tr");  
for(i = 0; i < rows.length; i++){          
   //manipulate rows
     ...

Example 1

blogger templates | Make Money Online