Web innovations and technology:fuzionpro

how to create sprite images for spritely jquery framework

2011-12-26T13:18:00.001+05:30

Today I will give an overview of creating sprite images for animating with spritely jquery framework .

I have already did a tutorial on adding spritely to blogger

http://www.fuzionpro.info/2010/09/animating-your-blogger-blog-with.html

Animation using spritely is very easy ,but without sprites images its impossible.its a strain to create sprite images though there are lot of online sprite sheet generators their limitation of image file size is limited.So, there is need for a sprite sheet generators softwares.Texturepacker comes to the rescue .

TexturePacker is a software available for both mac and windows for creating sprite sheets and texture atlases for game development, css sprites for web design and optimizes images for mobile platforms.With Texturepacker its very easy to create sprite sheets for animating.So with the combination of texturepacker and spritely animation becomes more easy for we developers.

Tutorials for using TexturePacker

http://www.texturepacker.com/texturepackertutorials/

how to add Animated title to blogger

2011-09-02T18:39:00.000+05:30

Today i am going to share a small snippet for animating the title with javascript for your blogger blog.You might wonder why you should be adding it to your site but your visitors or may be you might be interested to see the animation in the toolbar of the browser.So let me share you the snippet with you.........

just add the code after the title tag in the blogger html.
if you are using old dashboard..then follow this
design->edit html

new dashboard users follow this
template ->edit html

<script language="Javascript">

var tit = document.title;

var c = 0;

function writetitle() {

if (document.all || document.getElementById) {

 document.title = tit.substring(0,c);

 if (c==tit.length) {

 c = 0;

 setTimeout("writetitle()", 400) //

 }

 else {

 c++;

 setTimeout("writetitle()", 200) //

 }

}

}

writetitle()

</script>

for demo look it to my title in the browser

Facescribble a site for entertainment using pictures

2011-07-05T21:59:00.002+05:30

Facescribble is a small application for users to show their creativity by scribbling their photos or celebrity photos using the aviary tool and sharing to their preferred social media.facescribble is open for both facebook and non-facebook users follow the below link start scribbling

non-facebook
facebook

More Cool Mouse Cursors for blogger website

2011-05-20T22:31:00.000+05:30

More Cool mouse cursor for your blogger blog to attract visitors you visit your blog those who using blogspot you can click add to blogger button (no need to add a title) or copy the code and paste it in add CSS section of template designer and others you can copy the style to your css file.Any problem don't forget to ask me.

The Alien - Working In Background

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur805.ani), progress;}</style>

BUFF

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-8/cur756.cur), progress;}</style>

NIGHT DIAMOND SET

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-8/cur727.ani), progress;}</style>

ATTACK POINTER

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use155.cur), progress;}</style>

GREEN LATERN POINTER

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too993.cur), progress;}</style>

FANTASTIC FOUR POINTER

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/toons/too-10/too990.cur), progress;}</style>

GAIA 10 POINTER 3

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-6/cur580.cur), progress;}</style>

How to validate Email in yii

2011-03-26T13:31:00.000+05:30

Yii is a great framework for form validation,today i am going to show you how to validate the email field in the form before submitting.Its very simple just follow the below example

if you created a user model with email as one attribute
then in the rules function add the following code

public function rules()
 {
  
  return array(
   ...
   array('email', 'email','checkMX'=>true),
   ..
  );
 }

thats it

also look at the code i have added a checkMX=true(this is used for checking that domain exists),you could ignore it if you want

how to add ajax page loading effect to blogger

2011-03-10T12:01:00.001+05:30

how about giving a shocking effect to your visitors.Here’s a example to make your web page content display a ajax page loading effect to blogger.You can see the effect in action on my pages and here is one. another blogger example
how to add ajax page loading effect to blogger

Step1
Add the latest jquery library to your head section by going to edit html in designer of blogger.

Step2
Add the following code just below the <body> tag

<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>

Step3
Then go to your template designer and then to add css section add the following code

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
 background: #3c5a76 url(http://dl.dropbox.com/u/13256471/fuzionpro/109.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }

#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #7fb061;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(http://dl.dropbox.com/u/13256471/fuzionpro/fuzionpro.png) no-repeat center 25%;
 height: 100%;
 display: block;
}

Note:
.v2 property is the class attribute in html tag this is key of the effect

Step4
Then the magic using jquery add this script to the head section

<script>

(function($){

$("html").removeClass("v2"); 


$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

how to add shutter effect photo slider to blogger

2011-03-09T13:29:00.002+05:30

Shutter Effect Portfolio with jQuery and Canvas a wonderful and awesome tutorial from tutorialzine.i have replicated that tutorial to add that slider to blogger.you can see a working demo on blogger here http://jquerydem0.blogspot.com/2011/03/shutter-effect.html.
how to add shutter effect photo slider to blogger
copy the below code place it in a html-gadget or in your header it works pretty well also don't forget to add the jquery latest version above your head section

<div id="cont">
<ul>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/1.jpg" width="640" /></li>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/2.jpg" width="640" /></li>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/3.jpg" width="640" /></li>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/4.jpg" width="640" /></li>
</ul>
</div>

<style>
#cont{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#cont ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#cont img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>
<script src='http://dl.dropbox.com/u/13256471/jquery.shutter/assets/jquery.shutter/jquery.shutter.js'>
</script> 
<script src='http://dl.dropbox.com/u/13256471/jquery.shutter/assets/js/script.js'>
</script>

note:
if you are using your own hosting then you should change one thing in script.js and jquery.shutter.js

thats nothing but change imgsrc location in both js files

List of admin tools for mongodb like phpmyadmin for mysql

2011-03-08T09:36:00.000+05:30

Recently i made a post on How to install MongoDB to use with xampp on Windows.today i am going list few admin tools for mongodb which will be very much similar to phpmyadmin for mysql.

Several Admin UIs have been created to help developers visualize their data. Some popular free ones are:

Fang of Mongo – a web-based UI built with Django and jQuery.

Futon4Mongo – a clone of the CouchDB Futon web interface for MongoDB.

Mongo3 – a Ruby-based interface.

MongoHub– a native OS X application for managing MongoDB.

RockMongo – Full featured GUI, more like PHPMyAdmin, written in PHP

Opricot – a browser-based MongoDB shell written in PHP.

PHPMoAdmin – a GUI similar to PHPMyAdmin, written in PHP.

MongoVUE .NET based GUI for Windows

Commercial admin ui for mongodb

Database Master Modern and Intuitives GUI Tool for Windows

for more details

How to install MongoDB to use with xampp on Windows

2011-03-07T12:14:00.002+05:30

MongoDB is a NOSQL,schema-free and document-oriented database which is a good alternative to couchDB and MYSQL used extensively for high scalability and performance here you could find a list of website uses mongodb as there database

Foursquare
bit.ly
SourceForge
Github

Today i am going to tell How to install MongoDB to use with xampp on Windows where you could play around with php

Step1

Installing MongoDB

Download MongoDB from mongodb.org/display/DOCS/Downloads
Extract the archive
Open Command Prompt
Goto mongodb\bin folder
Type

mkdir C:\mongodb\db
mongod.exe --dbpath=C:\mongodb\db

Step2
Check your Php version by going to http://localhost/xampp/phpinfo.php
note down the following from the below image
first the php version(here 5.3) then the php extension build (here ts,vc6)

Download MongoDB driver from github.com/mongodb/mongo-php-driver/downloads
Extract driver and copy the dll that matches your php version installed on your xampp (here mongo-1.1.4-php5.3vc6ts) and put to php/ext folder
Open php.ini file
Append this extension=php_mongo.dll, save php.ini file, and then restart your web server.

if every thing went fine then

Point your browser at localhost and select your language, then phpinfo() from the left menu
Make sure there's a Mongo section

try out this example from here http://www.php.net/manual/en/mongo.tutorial.php to test mongodb is working

New way of login authentication using jquery and php

2011-02-28T19:35:00.000+05:30

In this tutorial i am going to show a new way of login authentication using jquery and php.These tutorial can be considered as an example of ajax.
The Idea
For login authentication we basically need 2 fields ,one is either email or username and the second password.

In order to get into your dashboard we have to click the login button.Here what i am going to do is disable the login button until the user provides both username and password correctly ,if so they provide the fields correctly the login button will be visible for clicking.

before providing form fields

after providing form fields

Online demo

the code for the above example can be taken from here

the only thing you have to change is jquery part just replace the code in default.js with following code below

$(function() {
    $('#password').change(function() { // when we release the key
        var pass = $('#password').val();
        if(pass.length >= 3) { // if there are more then 3 letters
            var data = 'username='+ $("#username").val() + '&amp;pass=' + pass;
            // ajax call
            $.ajax({
                type: "POST",
                url: "login.php",
                data: data,
                success: function(html){ // this happen after we get result
                    if(html !== '') {
                     $('form').append("<input type=\"button\" id=\"submit\" value=\"Login\">");
$('#username').attr('disabled', true);
$('#password').attr('disabled', true);
$('#submit').click(function(){
                        $("#form").hide(); // hiding form
                        $("#message").append(html);
                        $("#message").fadeIn(800);
}
                    }
              }
            });
        }
    });
});

the changes that i made are i replaced the .keyup with .change (it was creepy thing that i found if i use keyup)

then if the user has provided the fields correctly then the fields are again not editable they are disabled.

if anyone liked share your views

How to add zoomy.js to blogger

2011-02-11T20:06:00.002+05:30

Zoomy.js is a Prototype class that allows you to easily create image gallery: the script make simple magnification of images with customizable options, as popup and overlaying boxes.Zoomy is an alternative to lightbox.

Today i am to teach how to implement zoomy.js script to blogspot users to create a zoomy effect to theirs images in posts.Demo in blogger
Step1

Download the files from Here

and host it to your hosting(i prefer dropbox)

Step2

goto->design->edit html and paste the below code above </head>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/scriptaculous.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/zoomy.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/effects.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/13256471/zoomy/js/dragdrop.js" type="text/javascript">
</script>

Step3
create a gallery using the bellow code in your post or pages

<ul class="zoomy">
<li>
<a href="images/firefox-big.jpg" title="Firefox"><img src="images/firefox.jpg" alt="Firefox" /></a>
</li>
<li>
<a href="images/opera-big.jpg" title="Opera"><img src="images/opera.jpg" alt="Opera" /></a>
</li>
<li><a href="images/safari-big.jpg" title="Safari" ><img src="images/safari.jpg" alt="Safari" /></a>
</li>
<li><a href="images/prototype-big.jpg" title="Prototype Framework" ><img src="images/prototype.jpg" alt="Prototype Framework" /></a>
</li>
</ul>

then call the script to get zoomy effect in action

<script type="text/javascript">
Event.observe(window,"load",function() {

       $$("ul.zoomy a").each(function(element){

        new Zoomy(element, { hideCaption: true });     

       });

</script>

if you want a draggable effect then use the below code

<script type="text/javascript">
Event.observe(window,"load",function() {

      

    $$("ul.zoomy a").each(function(element){

        new Zoomy(element, { draggable: true });     

       });

    });
</script>

Installing Yii in xampp on Windows XP

2011-02-06T17:56:00.001+05:30

Yii is a new php framework which is going to be used widely in the near future.Here i am going to guide how to install Yii framework in xampp on windows platform.

Step1
Download the frame work from here
Step2
Unpack it and and put the folder in C:\xampp\htdocs\yii (or the path you installed xampp).
Step3
Start the Xampp control panel and start the apache server and mysql

Step4
Open the browser and got to
http://localhost/yii/requirements/

if you put folder correctly in htdocs you should be getting the above page

Creating web app from cmd windows(comand promtp)

How to use the yiic command to bootstrap the creation of a new
Yii application

Step1

right click "my computer"
go to "system properties" under "advanced" tab, click on "environment variables"
under "system variables" find for the variable named "PATH" and click on "Edit" button

in "Variable Value" append the php.exe path with a semi-colon like below
;C:\xampp\php

if you dont do the above step correctly you will get this error "php.exe is not recognized as an internal or external command"

Step2

open cmd and enter

cd c:\xampp\htdocs\yii\framework

then enter

yiic webapp ..\newapp

you will prompted with

New Web Fonts on Blogger template designer

2011-02-02T20:46:00.000+05:30

Blogger's Template designer now offers a wide variety of font choices for the various elements in your template, including both web-safe fonts and fonts from the Google Font API.

All of the fonts are availble directly through the Template Designer, under the Advanced tab.

for more information look

http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=1076355

How to add Piecemaker 2 to blogger

2011-01-14T21:40:00.002+05:30

Piecemaker is clone of Cuber3.i have done a tutorial on both of this you can find here

how to Add Piecemaker a Flash 3D image rotator to blogger

3D Slideshow With Cu3er for blogger-part1

Now its the new year special Piecemaker 2 is available for download

Download BLOGGER DEMO

What’s New?
Building on the original, the Piecemaker 2 now includes:

Unlimited transition effects
The ability to include SWF files and videos
Improved navigation (using tooltips)
Animated shadows

It’s also entirely XML-based, and the HTML/CSS parsing has been improved, allowing special characters to be used. Plus, images can now contain hyperlinks to other websites.

Step1
Copy the following code and paste it to your html/javscript gadget

<script src="http://dl.dropbox.com/u/13256471/piecemaker_2/scripts/swfobject/swfobject.js" type="text/javascript">
</script>

<center>

<div id="piecemaker">

Put your alternative Non Flash content here.

</div>

</center>


<script type="text/javascript">
      var flashvars = {};

      flashvars.cssSource = "http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.css";

      flashvars.xmlSource = "http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.xml";

  

      var params = {};

      params.play = "true";

      params.menu = "false";

      params.scale = "showall";

      params.wmode = "transparent";

      params.allowfullscreen = "true";

      params.allowscriptaccess = "always";

      params.allownetworking = "all";

   

      swfobject.embedSWF('http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,    

      params, null);

    

    
</script>

Step2
Edit the xml file for your convenience.make sure you add the full path to the image,video,swf in xml file

<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
  <Contents>
    <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/piecemaker1.png" Title="The Piecemaker 2"></Image>
    <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/piecemaker2.png" Title="Lots of new Features">
      <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of new features, making it even more slick.&lt;/p&gt;&lt;p&gt;Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.&lt;/p&gt;&lt;p&gt;We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.&lt;/p&gt;</Text>
      <Hyperlink URL="http://www.modularweb.net" Target="_blank" />
    </Image>
    <Flash Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/flash.swf" Title="Loaded SWF File">
      <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/flash-preview.png" />
    </Flash>
    <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/piecemaker3.png" Title="Editing made Easy"></Image>
    <Video Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video.mp4" Title="Video Example" Width="910" Height="365" Autoplay="true">
      <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video-preview.jpg" />
    </Video>
  </Contents>
  <Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280&#xD;&#xA;" ControlsAlign="center" TooltipHeight="30" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="10" FieldOfView="45"></Settings>
  <Transitions>
    <Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"></Transition>
    <Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"></Transition>
    <Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"></Transition>
    <Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"></Transition>
  </Transitions>
</Piecemaker>

Running ruby on rails 3 in heroku

2011-01-09T12:40:00.000+05:30

heroku is a hosting site that Offers a solution to deploy and host rails applications with git.The latest ROR 3 is also supported by heroku.it provide free as well as paid options.
we have been running our rails apps in our localhost (http://localhost:3000).but every one needs to implement online that is in real time integration with a domain name.heroku provides a great help to deploy our rails application online.
Create a account in heroku.
I will teach how to integrate your rails app to heroku step by step

I think every one who are following this example have already installed ROR3 on windows.if not follow this link

Step1:installing git on windows
Simply download and install the msysGit package.

Step2

Open Git bash

Step3
Enter the following command then heroku will be installed

gem install heroku

step4
create a ssh key in windows

$ ssh-keygen -t rsa -C "yourmailid@gmail.com"

output

Generating public/private rsa key pair.
Enter file in which to save the key (/home/tekkub/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db tekkub@gmail.com

step5
then enter the following command

heroku keys:add

step6
add the following commands one by one (instead of rails myapp you can also use rails new myapp)

screenshots

Step7
enter the following command to open the app in browser

heroku open

http://blazing-ice-281.heroku.com/ ----------demo

thats it you have a running rails app on heroku

for more information look heroku docs

Ruby on Rails(RoR) 3 basics

2010-12-27T10:11:00.002+05:30

Ruby on Rails is a framework build for the Ruby programming language,So it is mandatory that we should know about the language before we develop any web application from scratch.
What is Ruby?

It is a open source programming language
Object oriented programming language
It is dynamic,imperative,reflective.

Rails 3 supports Ruby 1.8.7 and higher and no more it doesn't support Ruby versions lesser than 1.8.7

Below are the links where you could have a clear idea of the Ruby language from scratch

Before you start first install Ruby on your computer.
Installing Ruby Tutorials

other resources like(single pack exe for windows with apache and mysql)
instantrails(ror version 2)
rubystack(ror 3)

If you don't want to install then you can try it online......Try Ruby! (in your browser)

Ruby editors

Resources
http://net.tutsplus.com/category/tutorials/ruby/
http://rubylearning.com/satishtalim/tutorial.html
http://en.wikibooks.org/wiki/Ruby_Programming
http://www.ruby-lang.org/en/documentation/

Ruby on Rails(RoR) 3 Syntax

2010-12-25T13:36:00.001+05:30

ROR scripting block
<% ..... %>

Where as the PHP scripting block
<? ..... ?>

comments
Line comments run from a bare '#' character to the end of the line
#

block comments

=begin
[Multi line comment]
=end

useful links

http://www.ruby-doc.org/docs/ruby-doc-bundle/Manual/man-1.4/syntax.html#embed_doc

http://articles.sitepoint.com/article/ruby-on-rails

http://net.tutsplus.com/articles/web-roundups/31-fascinating-ruby-on-rails-tutorials-guides/

Ruby on Rails(RoR) 3 Variables

2010-12-25T11:48:00.002+05:30

Variable of Ruby on Rails is as follows

local variables
constants
instance variable(object variables) .
class variables
global variables

Local Variables

A variable whose name begins with a lowercase letter (a-z) or underscore ( _ ) .

Example

distance

Instance Variables

A variable whose name begins with '@' is an instance variable of self.
Uninitialized instance variables have a value of nil

Example

@distance

Class Variables

A variable whose name begins with '@@'
A class variable is shared by all instances of a class
class variable is shared by all the descendants of the class

Example

@@distance

Global Variables

A variable whose name begins with '$'
can be accessed from anywhere within the program during runtime

Example

$distance

Constants

A variable whose name begins with an uppercase letter (A-Z)
A constant can be reassigned a value after its initialization, but doing so will generate a warning
Every class is a constant
Trying to access an uninitialized constant raises the NameError exception.

Example

DISTANCE

Pseudo Variables

self
nil
true
false

Pre-defined Variables

$!	The exception information message set by the last 'raise' (last exception thrown).
$@	Array of the backtrace of the last exception thrown.
$&	The string matched by the last successful pattern match in this scope.
$`	The string to the left of the last successful match.
$'	The string to the right of the last successful match.
$+	The last bracket matched by the last successful match.
$1 to $9	The Nth group of the last successful regexp match.
$~	The information about the last match in the current scope.
$=	The flag for case insensitive, nil by default (deprecated).
$/	The input record separator, newline by default.
$\	The output record separator for the print and IO#write. Default is nil.
$,	The output field separator for the print and Array#join.
$;	The default separator for String#split.
$.	The current input line number of the last file that was read.
$<	The virtual concatenation file of the files given on command line.
$>	The default output for print, printf. $stdout by default.
$_	The last input line of string by gets or readline.
$0	Contains the name of the script being executed. May be assignable.
$*	Command line arguments given for the script. Same as ARGV.
$$	The process number of the Ruby running this script. Same as Process.pid.
$?	The status of the last executed child process.
$:	Load path for scripts and binary modules by load or require.
$"	The array contains the module names loaded by require.
$LOADED_FEATURES	An english friendlier alias to $"
$DEBUG	The status of the -d switch. Assignable.
$FILENAME	Current input file from $<. Same as $<.filename.
$KCODE	Character encoding of the source code.
$LOAD_PATH	An alias to $:
$stderr	The current standard error output.
$stdin	The current standard input.
$stdout	The current standard output.
$VERBOSE	The verbose flag, which is set by the -v switch.
$-0	The alias to $/
$-a	True if option -a ("autosplit" mode) is set. Read-only variable.
$-d	The alias to $DEBUG.
$-F	The alias to $;
$-i	If in-place-edit mode is set, this variable holds the extension, otherwise nil.
$-I	The alias to $:
$-K	The alias to $KCODE.
$-l	True if option -l is set ("line-ending processing" is on). Read-only variable.
$-p	True if option -p is set ("loop" mode is on). Read-only variable.
$-v	The alias to $VERBOSE.
$-w	True if option -w is set.

default the values of the pre-defined variables will be nil
Pre-defined constants

__FILE__ (current file)
__LINE__ (current line)

SQL equivalence of Ruby on Rails Model syntax

2010-12-25T11:46:00.000+05:30

In Ruby on Rails, Model classes are handled through the Active Record. This means that for each table in database, there exists a corresponding class in the application. This class then has all functions needed to create, find, update, and delete rows in the database table. Usually, all the programmer needs to do is to subclass the ActiveRecord::Base class, and the program will automatically figure out which RDBMS table to use and what columns the table has.
For example, if there is a class Post, the following code:

a = Post.new
a.subject = "Example message"
a.body = "This is an example message."
a.save

is conceptually equivalent to the following SQL command:

INSERT INTO posts (subject, body)
VALUES ('Example message', 'This is an example message.');

and the following code:

b = Post.find(:all, :conditions => ['score > 80'])

is conceptually equivalent to the following SQL command:

SELECT * FROM posts WHERE score > 80;

Ruby on Rails(RoR) 3 concept

2010-12-24T18:36:00.000+05:30

Introduction

it is a opensource web application framework for the Ruby programming language
Helps to create powerful web application with less time and less code
A better alternative to PHP

What is RoR?

RoR stands for Ruby on Rails
Rails is a server side scripting language
RoR supports many databases such as

MySQL
PostgreSQL
SQLite
IBM DB2
Microsoft SQL Server
Oracle
Sybase
Firebird

RoR is an open source software
RoR is free to download and use
RoR uses Model-View-Controller Architecture
RoR uses REST(Representational State Transfer) web services

Look for this

Basic principles of Ruby on Rails (RoR 3)

RoR 3 components

Basic principles of Ruby on Rails (RoR 3)

2010-12-24T18:16:00.001+05:30

The basic principles of the emerging framework Ruby on Rails (RoR) are

Conventions over Configuration
DRY: Don’t Repeat Yourself
REST interface

Lets see the above mentioned principles in detail

Conventions over Configuration(CoC)

The concept conventions over configurations comes from the fact that Rails assumes a number of defaults.The naming conventions of rails application will be related to the database tables and generated models.

Examples makes you a clear view of CoC

Suppose you have a model named order then the rails will look for the database named orders.

in the above example the model name order is in singular and the database name orders is in plural.this means that rails is very much aware of plurals too.

Similarly, if we have a controller named Archive, then Rails assumes:

The class is called ArchiveController, saved in the file archive_controller.rb within the app/controllers/ directory.
That there exists a helper module called ArchiveHelper in the file archive_helper.rb within theapp/helpers/ directory.
The templates for the views of this controller reside in the app/views/archive/ directory.

Advantages of CoC principle

easier for other programmers to understand your code
possible to override the conventions.

DRY: Don’t Repeat Yourself

DRY (Don’t Repeat Yourself) sounds quite self-explanatory, developers are not encouraged to express a piece of information/knowledge/code repeatedly in more than one place.

Advantages of DRY

maintains clean code
reduces errors
reduces time

link :REST interface

for more details view of rails 3 principles look for following links
http://wiki.rubyonrails.org/getting-started/overview/tenets

RoR-understanding Representational state transfer(REST)

2010-12-24T18:13:00.001+05:30

What is REST?

REST stands for Representational State Transfer
It relies the HTTP protocol
World Wide Web itself, based on HTTP, can be viewed as a RESTful architecture.
REST uses HTTP for all four CRUD (Create/Read/Update/Delete) operations.
REST is alternative to Web Services (SOAP, WSDL, etc.).
REST is not a "standard".

For example, to a Rails application a request such as this:

DELETE /photos/17

would be understood to refer to a photo resource with the ID of 17, and to indicate a desired action – deleting that resource.

for more details refer to the following links

http://rest.elkstein.org/2008/02/what-is-rest.html

http://topfunky.com/clients/peepcode/REST-cheatsheet.pdf

http://guides.rubyonrails.org/routing.html

RoR 3 components

2010-12-24T12:29:00.000+05:30

The components of rails are as follows

Action Pack

Action Controller
Action Dispatch
Action View

Action Mailer
Active Model
Active Record
Active Resource
Active Support
Railties

Action Pack

Action Pack is a single gem that contains Action Controller, Action View and Action Dispatch. The “VC” part of “MVC”.

Action Controller

Controls the application flow
Controls the model and view
managing user sessions
routing external requests into internal actions
managing Rails caching features
managing helper modules

Action View

Renders both rhtml and rxml formats
views are implemented using ERb(embedded ruby) by default

There are three templating schemes known in Rails:

.rhtml, generates HTML views to users.
.rxml, lets developers construct XML documents using Ruby code, used widely to generate feeds in Rails-powered blogging engines.
.rjs, allows developers to create dynamic JavaScript codes, suitable for creating an AJAX interface.

Action Dispatch

handles routing of web requests

Action Mailer

framework for building e-mail services
receive and process incoming email
send simple plain text or complex multipart emails

Active model

provides a defined interface between the Action Pack gem services and Object Relationship Mapping gems such as Active Record

Active Record

It provides

database independence
basic Create, Read, Update and Delete(CRUD) functionality
advanced finding capabilities
ability to relate models to one another.

Active Resource

framework for managing the connection between business objects and RESTful web services

Active Support

collection of utility classes and standard Ruby library extensions.

Railties

Railties is the core Rails code that builds new Rails applications
glues the various frameworks and plugins together

RoR-Understanding Model-view-controller

2010-12-23T10:31:00.004+05:30

ROR(Ruby on Rails) uses the Model-View-Controller(MVC) Architecture.So as a beginner one should understand MVC before getting into Ruby on Rails.
Before understanding MVC lets differentiate between traditional application and MVC application

Traditional application

Browser directly accesses Page

MVC application

Browser directly accesses Controller

What is MVC

MVC is an Architectural Design pattern
MVC separates the web application into three different modules

To better understand MVC architecture let take a simple example

Your brother or sister is having birthday tomorrow.So you decided to buy a cake and visit a Bakery Shop.You request the baker to make a wonderful cake and the Baker collects all the ingredients to make the cake.After collecting all the ingredients the baker decides on how the cake should look like and selects the appropriate pan(it may be square,circle etc.).When the cake is ready the Baker responds i.e.gives you back the cake to celebrate your sisters or brothers birthday.I hope this example makes you clear view on how MVC architecture works.

MVC is a collection of Model/View/Controller

Benefits of MVC

it keeps your business logic separated from your (HTML-based) views
keeps your code clean and neat in one place

Model

Represents the information and the data from the database
Validation of the data

View

Data presentation and user data
Rendering models into one or more formats, such as HTML,XHTML, XML, or even Javascript

Controller

Dispatches requests and control flows
connects the model with the view
Process the data that comes from the model.

I think you would have got a clear idea about MVC.ok let look how RoR uses MVC for producing good web applications.

ROR and MVC

Ruby on rails uses MVC architecture that we know already, ok lets get cleared that how the MVC is structured for Ruby on rails 3

The above diagram is the MVC architecture of ROR.

In RoR

ActionRecord:Model
this module contains an Object/Relationship Mapping (ORM) library that can be used to abstract how data is actually accessed in the lower level. ORM library maps data stored in a database to a class in an application.

handles relationships
handles validations
contains business logic
encapsulates data access

ActionView:View

Renders both rhtml and rxml formats
views are implemented using ERb(embedded ruby) by default

There are three templating schemes known in Rails:

.rhtml, generates HTML views to users.
.rxml, lets developers construct XML documents using Ruby code, used widely to generate feeds in Rails-powered blogging engines.
.rjs, allows developers to create dynamic JavaScript codes, suitable for creating an AJAX interface.

ActionController:Controller

Controls the application flow
Controls the model and view
managing user sessions
routing external requests into internal actions
managing Rails caching features
managing helper modules

Apart from the above structure rails do contain one more structure called HELPER

Whats the need of Helper

When you have code that you use frequently in your views or that is too big/messy to put inside of a view, you can define a method for it inside of a helper. All methods defined in the helpers are automatically usable in the views.

Best practices

fat model and skinny controller
business logic should always be in the model
the view should have minimal code
Use helpers

References

http://www.slideshare.net/codeinmotion/mvc-demystified-essence-of-ruby-on-rails

http://en.wikibooks.org/wiki/Ruby_on_Rails/Getting_Started/Model-View-Controller

Best of flash 3d image slider 2010

2010-12-18T10:12:00.000+05:30

Flash is a big problem to search engines as it is difficult to index.For this reason flash is not preferred for sites that produce contents that should reach the audience.But Flash can be embedded in any part of your webpage.if you prefer that your images should not be indexed then you may go to flash, here are some fantastic 3d slideshows
Best of flash 3d image slider 2010
Cu3er
CU3ER is the Flash 3D image slider, EASY to set up, fully CUSTOMIZABLE, TAILORED to provide a UNIQUE look & feel, INSPIRING and FUN-to-USE

tutorial - 3D Slideshow With Cu3er for blogger
price:Shareware

Piecemaker

Piecemaker is open source and free to modify under GPL license.(.fla included)

tutorial - how to Add Piecemaker a Flash 3D image rotator

price:free