28 July 2010

translate website in multi languages

The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo’s Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers.
I wrote this script because I’ve been wanting to offer translation on my blog, and unfortunately all the scripts I looked at online had really clunky front ends. So I decided to write Translate-It: a really clean script that leverages Google’s translation tool.

Why you should use Translate-It

Translate-It is a nice script for several reasons. First, it’s incredibly easy to implement, with no CSS or images to upload. The script builds all the flags and links dynamically, so the only HTML markup you include is <div id="translateFlags"></div>. Besides keeping the document clean, this is great for SEO because there aren’t any extraneous links or content.
Another advantage to Translate-It is that it pulls in the flag icons using CSS sprites and a single image. This saves 9 HTTP requests.
Finally, in addition to being easy to use, Translate-It is also very customizable. Some options include choosing which languages are offered, and whether to use your own flags and styling or the default icons.

Putting Translate-It on your website

Integrating Translate-It into your site is a piece of cake. 
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>

<script type="text/javascript">
TranslateThis();
</script>
Make sure to modify the path to translate-it.js if necessary.
Finally, add this HTML wherever you want the flag icons on your page:
<div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate&lt/a></div>
And that’s it, your website has become much more global, with translation into tons of languages!

Customizing Translate-It

To customize Translate-It, first open up translate-it.js and look towards the top for the config section. This area is easy to modify and any non-developers should only work within this section.
By default only 10 languages are enabled, but you can include up to 34 languages by editing theusedLangs array. You can also change the order that the flags appear with this array. Just make sure that the last item doesn’t have a comma at the end, or it will throw an error in IE.
Additionally, if you want to use your own imagery, or just want to host the flags locally, you can modify the bgImage variable. If you do want to style the flags yourself, you’ll want to setuseFlagCSS to 0 (zero).
Also, if your site is in a language other than English to begin with, make sure to change thefromLang variable.
Finally, if you want to use a different id than ‘translateFlags’, either set the flagsWrap variable statically, or pass the id into TranslateThis(); to change it on the fly.

Supported Languages

Arabic, Bulgarian, Catalan, Chinese (Simplified), Croatian, Czech, Danish, Dutch, English, Filipino, Finnish, French, German, Greek, Hebrew, Hindi, Indonesian, Italian, Japanese, Korean, Latvian, Lithuanian, Norwegian, Polish, Portugese, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Ukranian, Vietnamese
Example with most of the options set:
<script type="text/javascript">
TranslateThis({
    GA : true, // Google Analytics tracking
    scope : 'content', // ID to confine translation
    wrapper : 'translate-this', // ID of the TranslateThis wrapper
    
    onLoad : function() { alert('loaded') }, // Callback function
    onClick : function() { alert('translation started') },
    onComplete : function() { alert('translation finished') },
    
    cookie : 'tt-lang', // Name of the cookie - set to 0 to disable
    
    panelText : 'Translate Into:', // Panel header text
    moreText : '36 More Languages »', // More link text
    busyText : 'Translating page...',
    cancelText : 'cancel',
    doneText : 'Translated by the', // Completion message text
    undoText : 'Undo »', // Text for untranslate link
    
    fromLang : 'en', // Native language of your site
    
    ddLangs : [ // Languages in the dropdown
        'cs',
        'pt-PT',
        'it',
        'ru',
        'ar',
        'zh-CN',
        'ja',
        'ko'
    ],
    
    noBtn : false, //whether to disable the button styling
    btnImg : 'http://x.translateth.is/tt-btn1.png',
    btnWidth : 180,
    btnHeight : 18,
    
    noImg : false, // whether to disable flag imagery
    imgHeight : 12, // height of flag icons
    imgWidth : 8, // width of flag icons
    bgImg : 'http://x.translateth.is/tt-sprite.png',
    
    maxLength : 900, // maxLength of strings passed to Google
    reparse : true // whether to reparse the DOM for each translation
    
});
</script>

For more Details go here
http://translateth.is/


24 July 2010

stylish TextboxList from Mootool

Here you can see it.


Enter tags (with commas)
Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate

The HTML
Enter tags (with commas)
<div style="width: 500px;">
<input class="input" id="myListBox1" name="myListBox1" type="text" value="" /></div>
<div class="note">
Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate</div>

The CSS


<style type="text/css">
.textboxlist { font: 11px "Lucida Grande", Verdana; cursor: text; }
.textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 3px 4px 0; border: 1px solid #999; *padding-bottom: 3px; }
.textboxlist-bit { list-style-type: none; float: left; display: block; padding: 0; margin: 0 5px 3px 0; cursor: default; }
.textboxlist-bit-editable { border: 1px solid #fff; }
.textboxlist-bit-editable-input { border: 0; padding: 2px 0; *padding-bottom: 0; height: 14px; font: 11px "Lucida Grande", Verdana; }
.textboxlist-bit-editable-input:focus { outline: 0; }
.textboxlist-bit-box { position: relative; line-height: 18px; padding: 0 5px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; border: 1px solid #CAD8F3; background: #DEE7F8; cursor: default; }
.textboxlist-bit-box-deletable { padding-right: 15px; }
.textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 6px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('http://davidwalsh.name/dw-content/TextboxList0.5/close.gif'); }
.textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; }
.textboxlist-bit-box-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
.textboxlist-bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
.textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; }
</style>

The JAVASCRIPT



<script>
// With custom adding keys
window.addEvent('domready',function() {
var myList = new TextboxList('myListBox',{
bitsOptions:{
editable:{
addKeys: 188
}
}
});
myList.add('MooTools').add('FTW');
})
</script>
The above example is an extremely simple usage — type a name, add a comma, and you can see the effect immediately. What’s even more awesome is that the plugin is keyboard-compatible, meaning you can press the arrow keys to move "over" or between items, and even delete them. Essentially you never have to use your mouse. Also of note is that Guillermo’s TextboxList class works with a bundled autocomplete plugin so you may quickly hook TextboxList in with your database.

22 July 2010

Sexy Link Transformations with CSS

I was recently visiting MooTools Developer Christoph Pojer’s website and noticed a sexy link hover effect: when you hover the link, the the link animates and tilts to the left or the right. To enhance the effect, the background color of the link is changed. I scoped out his JavaScript file to see how he created the effect but there were no link effects in it — the effects were being created with just CSS!

.sexy-links a {
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.sexy-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.sexy-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

18 July 2010

Why I moved from Prototype to jQuery

jQuery is a JavaScript library which follows unobtrusive paradigm for application development using JavaScript. jQuery inherently supports Behavior driven development and is based on traversing HTML documents using CSS Selectors. On the other hand, Prototype is a JavaScript library for Class driven development which makes life easier working with JavaScript. Prototype library has a good support in Ruby on Rails via helper functions.
I have always used Prototype library for most of my projects until I was introduced to jQuery three months back ... and it enchanted me.

The reasons

  1. Behavior driven development (BDD)
    Using jQuery, behavior(s) of HTML elements is defined separately from HTML code similar to defining style of an element using CSS. Lets look at a simple example to display alert box on click of an element
    1
    2
    3
    4
    5
    6
    
    
    
    $(element).click(function(){
      alert("warning");
      //fill stub for confirming this action from user
    });
    
    A complex example: All elements of class "speciallinks" should emit the following behavior:
    1. change their href link to "javascript:void(0);"
    2. generate logs on click
    3. onhover should change background color.
    1
    2
    3
    4
    5
    
    
    $("div.speciallinks").attr("href","javascript:void(0)")
        .click(function() {console.log("div.speciallinks clicked");})
        .hover(function(){$(this).addClass("hovered");}, 
                 function(){$(this).removeClass("hovered");});
    
  2. MVC + J
    MVC framework divides web development into 3 separate parts Model-View-Controller and Ruby on Rails is a great MVC framework. The View part of MVC framework comprises of HTML, CSS and JavaScript which is bulky, combining three different parts of GUI development into one. Moreover, using Prototype helpers in Ruby on Rails views messes up HTML and JavaScript together. Here, jQuery fits in nicely (due to BDD) to separate JavaScript(J) from Views(V) to visualize the framework as MVC + J which I find very powerful especially working with Ajax.
    Using jQuery, I keep all my HTML files are clean and clear as all the JavaScript code is kept in .js files defining behavior of HTML elements.
  3. Chaining of actions
    Chaining of actions for a HTML element follows DRY principals and increases readability of JavaScript code. If I want to add a bunch of operations on a single/multiple elements, it can be as simple as:
    1
    2
    3
    4
    5
    
    
    $("div.message").show()
      .append("Action has been executed successfully")
      .addClass("flash");
    // chained functions can be on separate lines :)
    
    Now, this is possible because every method within jQuery returns the query object itself on which further methods can be applied to form a chain of methods on "selected" HTML elements.
  4. CSS Selector rocks!
    CSS Selectors are very powerful when playing with HTML DOM. jQuery is based on CSS Selectors to identify elements in a HTML document, which avoids tedious job of managing idattribute for each of my HTML tags. Most of id attributes can be avoided using right CSS Selector. Prototype does supports CSS Selectors via $$ function, but it doesn't fully leverages the power of CSS Selectors. I find Prototype working best with element's id attribute.
  5. No more checks for presence of an element
    In prototype, I always need to check if an element exists before applying an action to it. For example: I want to display user specific content in a div{id='user-box'} only if user is logged in (this div will exist on rendered page only if user is logged in). In Prototype I will do :
    1
    2
    3
    4
    5
    
    
    if ($('user-box')!=null) {
      // this if block is redundant with jQuery
      $("user-box").style.backgroundColor = "red";
    }
    
  6. Aids development process
    Using jQuery HTML code is clean and nearly untouched. My web designer can easily modify html and stylesheets without learning the Prototype library.


I miss prototype

  1. On Ajax request, when a div is updated with a partial and this partial contains elements with JavaScript behavior, the behavior needs to be activated/reactivated. In jQuery I do not have to write a lot of code for this, but still I have to keep this in mind every time a partial is loaded with Ajax. In Prototype, each HTML element use to contain the corresponding JavaScript code along with it in the partial.
  2. Ruby on Rails helpers for Prototype library are awesome and makes life a lot easier working with JavaScript and Ajax.
  3. Prototype library provides Ruby like syntax in JavaScript for functions on arrays, objects, etc which further makes development easier and faster.
  4. With jQuery, element behavior gets activated only after DOM has been built and JavaScript files have been downloaded. For slow connections, this can be painful as there is a delay in activation of behavior.

Conclusion:

Jquery and prototype are both great libraries. For me, jQuery's philosophy (type less, do more, keeping things intuitive and unobstrusive) makes a big difference. But, I miss prototype core javascript additions. Waiting for jquery-rails integration. Some steps have been taken toward this goal. I would love to listen some of your personal experiences in shifting.


03 July 2010

SEO Tips for Small Business Owners

Search engines do not discriminate between small and big businesses. This makes Search Engine marketing a level playing ground, where size does matter – Size of your marketing acumen!!
In your pursuit of gaining supremacy in the realm of Search engine marketing, Search Engine Optimization (SEO) will act as a potent tool.
Not only does SEO help in reaching to a wider audience, it is also the most economical Online marketing tool available, a tool that will help small website owners take on the Goliaths in their business domain.
Whether you want to do the SEO of your site yourself or hire an SEO firm, understanding the SEO strategies is very essential. In this edition of our newsletter, we will discuss 5 essential points that every small website owner must remember while carrying out SEO of their websites.
Dealing with the technicalities
  • Site map: Making a site map for your website is very necessary as far as SEO is concerned. It shows the position of all the relevant pages at one place. A site map helps the visitors as well the spiders to find all the relevant pages of the website. This facilitates smooth website navigation.
  • SEO compliant URLs: Another important aspect which you need to accentuate on is to make static URL for your web pages. This helps the spiders to crawl the URL of your web pages without any difficulty.Dynamic URLs on the another hand includes certain symbols such as ?, &, % etc. due to which the spiders can not crawl the URL of your web pages. If the spiders do not crawl the web pages, the pages will not get indexed, and hence will not rank in the Search Engines.
  • Title tags: It is one of the most vital factor which plays a crucial role in on-page optimization. Make sure to put the most relevant and different keywords in your title tag that exactly matches the content of the each page of your website.
  • Improving the site's speed: Since Google has included speed as an important ranking parameter, you need not make sure to improve the loading time of your website. This will also help the visitors to start their site visit faster. This is critical as the attention span of an average visitor is going down.
Doing the keyword analysis: This factor provides the primary step for the effectiveness of your website’ SEO. If relevant keywords are targeted then promoting your website on the vast online arena will be worth the effort. A good way to start keyword research is to map your competitors, for the keywords they are targeting. This will help you to drive classified visitors to your website.
Optimizing the local search: It is believed that nearly 60-65% of the consumers come online to seek information about domestic company. The small scale business owners can create free local business listings in various search engines such as Google local listing.
Fresh content: For best SEO results, it is mandatory that the content through out the website is unique, and compelling. It should not be copied from other sources. The content should highlight the USP of the business and engage the audience to develop a relationship.
Promotion: The website owners can make their own blog which can be used for providing information about their respective industries. Search Engines love unique content and continuously updating your blog with the fresh content will augment the SEO efforts for your website. Writing alone is not enough but you need to also promote it on various relevant sources, such as Social bookmarking sites. This will help your blog to get indexed in lesser time. Also you need to be active on various social media sites such as twitter, facebook etc. This will further help you to enhance the online presence for your website.
Hiring an SEO expert or Online marketing firm: In case you decide to engage an SEO firm for your requirements, the above points will help you to establish the course of action. In the preliminary stage, you should not hesitate to ask questions about the risk involved, the time lines in which you will start seeing the results etc. All these factors will play a crucial role in the success of your SEO campaign. Before hiring an SEO firm, it would also help to carry out extensive research with regards to the credibility of the firm, and understand what extra features you will be getting.
SEO helps small website owners with modest budgets to compete against the bigwigs of their business. The above points are intended to help you to make a well calculated foray into the SEO world, and actualize your dreams.