2007 May « Sridhar: Web Unplugged!!!!

Archive for May, 2007|Monthly archive page

Web tutorials Yawn Yawn: Webonic

Posted May 30, 2007
Filed under: AJAX, Blogging, CSS, Designing, Education, FOSS Stuff, How-To's, Javascript, MySQL, PHP, Personal, Techie, Tutorial, Web 2.0, Webonic |

Comments (3)

Do u also Yawn thinking of tutorials available on web? Be it Php, Mysql, CSS etc, Its all same stuff, again and again in new fonts!!!!

Its time for some real new useful stuff and not same yawning.

I have started a new blog, which I call it as my technology playground.

Its important to write code, and Its even more important to build some useful code and share it with community.

Since, this blog is more personal. I will write and collect all the tutorials which I will be working/learning for buliding my own web product.

http://webonic.blogspot.com/

Webonic will contain tutorials, code, demos related to PHP, MySQL, AJAX & CSS. Its not user-generated/collected, all will be stuff I am working on. You are free to add if you want to.

Happy Hacking
Sridhar

Webtoons for Podworks. Please leave your feedback.

Posted May 28, 2007
Filed under: Blogging, Personal, Unconferences, WebToons |

Comments (9)

I have been working on making some Webtoons for Podworks unconference.

I know you will hate me for delaying but I am sure, you know the pain of Day job as well. Dont you? Kool.

So Here I am with 4 of my webtoons. I have tried capturing them using my mobile so clarity is not that good. But if you like the concept or the webtoons itself. Please drop me a line.

Thanks to Amit Ranjan’s company Slideshare for easy sharing of slideshows

Your feedback can help me to improve things I am lacking.

Also let everyone know which one you liked???

Thanks
sridhar

How-To create Rounded Corners using RICO Library!!!

Posted May 23, 2007
Filed under: AJAX, Designing, Education, FOSS Stuff, How-To's, Javascript, RICO, Techie, Tutorial, UI, Web 2.0 |

Comments (3)

How-To create Rounded Corners using RICO Library!!!

In my previous two posts I have covered some tutorials using Script.aculo.us to enhance the User Experience. But, Script.aculo.us doesnt have the beauty of adding Rounded Corners, which RICO is rich in!!!!

1. Making a simple SlideShow using Script.aculo.us
2. How to Use Script.aculo.us Effects to add beauty

In this tutorial, we will explore yet another AJAX library. RICO Library

RICO is a powerful, creative ajax library which gives you control over UI designing as well as functionality.

In this tutorial, we will see how to create Rounded Edge Corners.
I assume these steps are already done before you see the naked code.

1. You have downloaded RICO library. If not, you can do it here
2. You have downloaded the Prototype Library. If not, you can do it here
3. Enable javascript in your system.

OKay, so lets see the code:

Include all the files{Rico & Prototype} inside the html code.

<head>
<script type=”text/javascript” src=”../src/rico.js” mce_src=”../src/rico.js”> {SRC should be ur rico.js path}
<script type=”text/javascript” src=”../src/prototype.js” mce_src=”../src/prototype.js”> {SRC should be ur prototype.js path}
</head>

so once, we are done with including the libraries to your html file.

Now, time to add some content to the Body of the html file.

Hello This is me, a Rounded Corner hell.

</div>
</div>
</body>

Understanding this particular code is very important, from the compatibility point of view. Coz if you skip some of the style parameters, this code wont work properly in IE.

U know IE sucks!!! {Keep an eye on Padding, it stinks in IE}

Okay, so no big deal here in code. Just two DIV tags and inside the child DIV the content is placed.

Simple, Isnt it? kooool. Lets go and add a simple line and see the magic.

Now, that we have decided the structure and included the libraries, what are we waiting for? Oh, yeah we still need to call the functions of RICO.

What else? Not much. Just save it and see the magic.

If you still want to keep on hacking other options, you are always welcome!!!

Just add these parameters to the same line.

Rico.Corner.round(’roundMe’,{color:’transparent’,compact:true,blend:true;});

What all other options one can add to Corners?

1. Color
2. Blend
3. Compact
4. Color
5. BgColor
6. Specify which corners to be rounded
7. border.

For more information. Visit Demos @officially site of RICO.

Yes, some folks out there can argue that we can do it with CSS also. I agree with you. But can you do it in just one line of code?

Sorry dude!!!

Anyways I have attached a simple code for the same at the bottom if you can want. Take it, use it, try it and please let me know as well, if I missed any.

Cheerz
Sridhar

Download COde: ROunded Corner Using RICO Library

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

UI Designing with CSS: Example login form

Posted May 18, 2007
Filed under: CSS, Designing, How-To's, Techie, Tutorial, UI, Web 2.0 |

Comments (2)

After the dot com bubble, start-ups are growing like mushrooms everywhere. And, 80% of these being either in Consumer Internet or Mobile.

So what do these web-based start-ups focus on mostly?

User Experience. Users have become powerful and above all decision makers. If users like the service, UI, application they will support it else they will kill them.

Talking about user experience, Its very important to understand what would a user appreciate? I will explain this taking a simple example of login form.

A simple login form would consits of normal buttons and a table.

Enter Name: <input type=”text”>

Enter Email: <input type=”text”>

No big deal. A simple two text boxes and a submit button. Simple?

Okay, so why not make small yet sweet changes to this code?

Through adding CSS{Cascading Style Sheets}!!!

Lets add some style on mouseover and mouseout operations.

In the style section just add the following piece of information.

Button {
background:green;
}

ButtonHover{
Background:lightgreen;
}

This would add the following functionality to our code.

Whenever the mouse is moved over the button the background is set to lightgreen and whenever removed again back to green.

Though there is no big deal here, the thing that needs to be taken care is that small useful things matter and count.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

How to make a Modal Window using Prototype?

Posted May 16, 2007
Filed under: AJAX, Education, FOSS Stuff, How-To's, Javascript, Prototype, Techie, Web 2.0 |

Comments (1)

Okay, its been somedays I was working on how to create a simple, beautiful yet powerful modal window for a project I am working on.

Modal Window sometimes called as Modal Dialogue box, are widely used across to increase the user experience.

After doing a lot of {re}search, I came across, Lightbox by Lokesh. Then, I came across this LightBox Gone Wild, yes by the folks behind Wufoo.

I must admit, these guys have done a great job!!! Thanks for sharing this.

Now, coming back to our tutorial.

You must have prototype AJAX library to use this {sorry for Non-prototype lovers}. Once, you have both Prototype and Lightbox Gone Wild.

Just add them to your html page.

Once, we have added the libraries to the html page. Now, we move on to create the lightboxes {a.k.a simple html files which will be shown in our Modal Window.}

Some HTML files, lets us say About.html

<p> About Us Page</p>
<h3>This is a simple About Me page, where you can add all HTML tags.</h3>

Now the important task: Activating the Lightbox

<a href=”About.html” mce_href=”About.html” class=”lbOn”>About Me</a>

Notice: the italics class=”lbOn”, onclick this will call the function to load the lightbox.

We can add all the HTML tags inside a lightbox, which means there are N number of options for you to surprise your friends.

De-Activating the Lightbox

<a href=”#” mce_href=”#” class=”lbAction” rel=”deactivate”>Close Lightbox.</a>
A simple link, clicking on which will take you back to the page.

Linking it to another Lighbox inside:

<a href=”confirm.html” mce_href=”confirm.html” class=”lbAction” rel=”insert”>Go to Another Lightbox</a>

Till here we saw how to Activate, Deactivate and Insert a lightbox inside a lightbox.

Now, AJAX stuff.

Lets say you want to give, a form to fill to user and collect the data using the modal window. We can do it, with the help of Prototype library. Use the following piece of code.

insert: function(e){
link = Event.element(e).parentNode;
Element.remove($(‘lbContent’));
var myAjax = new Ajax.Request(
link.href,
{method: ‘post’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)}
);
}

I am writing a code to add some more functionality like onload, on mouseover etc. Once done will share the code as well.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

A must to be read for every Indian!!!

Posted May 10, 2007
Filed under: Entrepreneurs, General, India 2.0, Inspirational |

Comments (1)

Please go through this, a must for all Entrepreneurs and educated sections of India.

A story about Suresh Kamat, Managing Director of LaserSoft Infosystems about how one can really make a difference.

Hats off to you Sir!!!

http://www.rediff.com/money/2007/may/10bspec.htm

Cheerz
Sridhar

I am a Blogger,I love Blogging!!!

Posted May 7, 2007
Filed under: Blogging, General, WebToons |

Comments (3)

I am a Blogger,I love Blogging!!!

Okay, to really prove this I have created a comic character for you all. Its called as a “Nerd Monster, who loves to blog”.

Take a look at the image below and let me know what you feel after seeing this. At the end of the post I have given what this image stands for:

Take a look, draw your conclusions, drop in comments and read what I was thinking when I created it.

Okay, now you want to know what I was thinking when I created it.

So many things in one snap.
1. Did u notice that the monster looks like a nerd? call it a Geek?
2. Did u notice that the blogger is challenging the people in Big Firms and Buildings?
3. Did u see the aggression on his face? Thats the power of blogger
4. Dont you think that, now-a-days Blogs speak louder than any Daily Newspaper?
5. Didnt u think that this blogger stands-apart from everyone else?

I thought so many things before creating this monster.

You are free to drop your comments/critics/feedbacks for improvement. Or above all just drop a line saying you liked it or not?

Thanks
Sridhar

Tutorial: How to make Script.aculo.us Based Slideshow

Posted May 2, 2007
Filed under: AJAX, Education, FOSS Stuff, Javascript, MySQL, PHP, Script.aculo.us, Techie, Tutorial, Web 2.0 |

Comments (26)

Before you go on to read this article. If your a newbie to using Script.Aculo.us AJAX library, I would recommend my previous post on getting started with Script.Aculo.us.

Read the article here

Okay, so I presume that you have gone through the previous tutorial. In this tutorial we will see how to make a simple slideshow for our website. You can also download the script along with HTML file at the bottom of the tutorial.

Slideshow’s are pretty common among webstites today. But, most of them being in Flash. Since we can add the same beauty using AJAX I thought of giving it a shot.

So lets get started!!! Start Javascript functionality here!!!

var slides = array(’slide1′,’slide2′,’slide3′); // we define a array with all the div-Id’s of the slides.

we have to define a variable “wait” so lets declare and assign some value to it.

var wait = 500; // interval and time in milliseconds

1. We need the slideshow to start as soon as the site is launched.

For that we have to define a javascript function.

function start_slideshow() {

setInterval(SlideShow(), wait); // This is a javascript function which acts as a timer.

}

Now, we need to define the actual functionality for the slideshow.

function SlideShow() {

Effect.Fade(Slides[i], { duration:1, from:1.0, to:0.0 });
i++;
if (i == 3) i = 0;
Effect.Appear(Slides[i], { duration:1, from:0.0, to:1.0 });

}

2. We have to add this to our html code.

3. Lets add some slides to the page.

<div id=”slideshow-content”>
<div class=”slide1″ id=”slide1″>
<h2>My First Slide</h2>
<p> Add some content for your first slide.
</p>
</div> // First slide div ends here
<div class=”slide2″ id=”slide2″ style=”display: none;”>
<h2>My Second Slide</h2>
<p> Add some content for your second slide.
</p>
</div> // Second slide div ends here
</div>

Imp Note: Note how we must use an outer DIV tag to use this. Its a must to have an outer DIV tag.

Now, just put all the code in one place and you can see your slideshow working!!!!

If you have tried/ have any suggestions to improve it pls drop in comments.

Cheerz
Shri

PS:
1] Planning to write a tutorial on slideshows based on images with various control effects.
2] You can also download the code in attachments.

Download the tutorial and see it working

Download: slideshow.txt

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

India is what Silicon Valley was some years back!!!

Posted May 2, 2007
Filed under: General, India 2.0 |

Comments (3)

India is what silicon valley was some years back. Why am I saying this?

I can see a lot of start-ups coming from ex-employees of either of Infosys, wipro, TCS etc. After gaining sufficient business knowledge and domain expertise people set out to start their own firms. This is what has happened some 10 years back in now “Silicon Valley”.

While reading the book , ICON-Steve Jobs. In this book a paragraph stuck me, with the companies like Intel etc getting started, growing and then some employees quitted to start their own firm.

Can we relate this with Indian scenario? Yes, we can!!!

I would rather say that now start-ups are growing are mushrooms in the valley. One reason I can figure out why is, coz there were start-ups, hence there are start-ups. Do I make sense?

For start-ups most important thing is mentoring. Mentoring can only be done by people who have taken extra risk to become now “famous”. In India, we can now find Angel investors like KB Chandra Shekar, Kanwal Rekhi etc and need not to say lot of VC firms are growing even faster than the start-ups.

In all, India needs to keep the momentum going by producing more and more of start-ups {again, only product based}. We will be lucky enough to see the whole Indian economy changing in next 10 years.

Cheerz
Sridhar

For wanna-be Entrepreneurs..Why Not to Start a Start-up?

Posted May 1, 2007
Filed under: Entrepreneurs, General, News, Techie |

Leave a Comment

I hear a lot of people around me, wishing but not willing to start a start-up. Reason?

“There can be a beautiful excuse if you dont want to do anything and there can be no reason why one cannot win if he wants to win”

But, there is more to this line. So being very obvious and general.

Paul Graham of YCombinator has a beautiful write-up on Why Not To Start a Start-up?

You can read it here!!!

I would say it’s a must for all wanna-be Entrepreneurs or for everyone!!!

Cheerz
Shri

	Markus on How to use JPGraph with PHP an…
	Kapil Dhingra on Tutorial: How to store UTF8 (i…
	Ramesh.P.K on An article from Mrs.Sudha…
	rosee on Tutorial: How to store UTF8 (i…
	Rose on Tutorial: How to store UTF8 (i…
	darshana on An article from Mrs.Sudha…
	womble on Tutorial: How to make Script.a…
	womble on Tutorial: How to make Script.a…

M	T	W	T	F	S	S
« Apr				Jun »
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Sridhar: Web Unplugged!!!!

Archive for May, 2007|Monthly archive page

Web tutorials Yawn Yawn: Webonic

Webtoons for Podworks. Please leave your feedback.

How-To create Rounded Corners using RICO Library!!!

UI Designing with CSS: Example login form

How to make a Modal Window using Prototype?

A must to be read for every Indian!!!

I am a Blogger,I love Blogging!!!

Tutorial: How to make Script.aculo.us Based Slideshow

India is what Silicon Valley was some years back!!!

For wanna-be Entrepreneurs..Why Not to Start a Start-up?

Pages

Quote of the Day

Top Posts

Recent Posts

Recent Comments

Take Some Feeds

Some More Feeds

c

Top Clicks

Lyrics Of The Week

Archives

Blog Stats

c

Spam Blocked

FeedBurner

Digg This

Blogroll

FOSS Stuff

Indictrans Team

Web Pals Blogs

Archive for May, 2007|Monthly archive page

Is Internet safe for girls???

Pages

Quote of the Day

Top Posts

Recent Posts

Recent Comments

Take Some Feeds

Some More Feeds

c

Top Clicks

Lyrics Of The Week

Archives

My Tag Cloud

Blog Stats

c

Spam Blocked

FeedBurner

Digg This

Blogroll

FOSS Stuff

Indictrans Team

Web Pals Blogs