| CARVIEW |
Sridhar: Web Unplugged!!!!
Thank god. It Isnt a Brain Surgery, Its a Web App!!!Yahoo SDK & YUI are simply awesome!!!!
I must appreciate the fact on how much Yahoo gives freedom and power to developers through libraries and toolkits.
I am currently using YUI and Yahoo SDK for building a small application and I am highly impressed with the libraries.
For sure Y! are doing great job, making our life lil more simpler 🙂
I have been using some libraries like Rico, scriptaculous, Dojo and trust me when I say, YUI stands tall here.
If you havent tried it yet, get yourself hooked on https://developer.yahoo.com. Loads of tutorials, code, demos. For FREE
Try it now…
Cheerz
Shri
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 {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Creating cheap Indic web pages!!!
Yes, “cheap” in terms of ease to create a Indic language web pages.
For instance, first have a look at this Yahoo site in Hindi language. That would give a clear picture.
Now, how many apps we have which helps us create simple Indic web pages? Yes, we have enough CMS packages available and great applications like Yudit. But how much easy it is actually?
I figured out it is not “really” simple to do that, simple for me is something which a lay man can also understand and use.
So what can be the solutions for the problem?
1. Create a application like Yudit from scratch
2. Just build a simple Plug-In for the existing CMS editors which can be used with ease and effectively.
I am trying on something which if it works, could add up as second solutions. And, yes it is ofcourse under OpenKey project.
Any other solutions have u tried? or come across which helps u build simple Indic Web pages? Drop in comments and share with us.
Cheerz
Shri
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 {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Why should bloggers have all the fun????
And, when I use the word bloggers here, it refers to people who are using https://blogger.com
After the launch of Google indic translator, now bloggers can easily type in Hindi but what about WordPress users? <wink>I perosnally love wordpress platform</wink>
So, now Im trying to create a plugin by integrating my project OpenKey with TinyMCE{ the editor which WP is using}
Yes, we already have one such thing, thats from Indic Joomla group. But that doesnt fill the gap. So Im trying to that 🙂
For now, you take a look at how it would look when we are using it.
The picture you are looking at is TinyMCE editor being hacked for indic purpose.
What do u think about it? Would it be useful for u? Drop in ur comments
Cheerz
Shri
- in CSS, Designing, Entrepreneurs, FOSS Stuff, Javascript, PHP, Techie, Tutorial, UI, Web 2.0
- 3 Comments
Web Tip #1: Yellow Fade Technique (YFT)
Web 2.0, Web 2.0 *Yawn Yawn*
I guess the web is half full with Web 2.0 jagron. I wont go deep in explaning what exactly web 2.0 is, but I would stress on one point.
“No Refreshing of Whole Page” {AJAX, as we call it}
I surf web for more than 20 websites {new} a day, one thing I find pretty common and uncommon is the UI. Some sites suck so-much that I never visit them again, and some are so awesome that i fall in love with them.
So here, I am starting a new section “Web Tips” for web workers to plan and design sites in a way to impress the users.
Web Tips #1: Yellow Fade Technique
When you are using AJAX in your site, often one feels it’s a big deal to implement AJAX and then they feel like next Google. But, most of them fail to understand that the user is unaware of what happened just now? For god sake, he doesnt understand AJAX 🙂
So the user panics, can be to an extent, he says “Goodbye”
What can be done to avoid such things? Tell the user you have posted/got the data.
How? Simple
Yellow Fade Technique
Just change the background of the DIV to light yellow and then once the operation is done, again with a time duration fade it out to the original color. This really helps users in understanding that something has happened.
If you are one of the fans of WordPress, it has that implementation in the comments tab.
I am implementing it as well, so you can expect a YFT treat tutorial soon from me.
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 {My Book} at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Cheerz
Sridhar
- in Designing, FOSS Stuff, How-To's, Javascript, MySQL, PHP, Techie, Tutorial, UI, Web 2.0
- 55 Comments
Tutorial: How-To make a Tag Cloud using PHP & MySQL
How to make Tag Cloud using PHP & MySQL
Tag Clouds are pretty common now-a-days in almost all the web 2.0 company sites. Be it Technorati, Zoom CLouds, WordPress, Blogger etc.
Why Tag Clouds are important?
Pretty much for the same reasoon: Appealing Users.
On seeing all these even I have decided to introduce the Tag Cloud feature in our project.
Now, the very important question: How do we code to create a Tag Cloud using PHP & MySql?
Here I will show you how to code it.
First the logic:
1. Collect all the tags & Count{how-many times it has been tagged} from DB{MySQL}
2. Put them into a array {PHP}
3. Calculate the maximum and minimum count of the tags used
4. Now, loop through each tag and just change the size of the font.
5. Define a simple class say “wrapper” which will contain the tag clouds
6. Call the function to generate the tag cloud. {Javascript}
Now, since Im falling short of time, so I will cut the crap and you guys take the code directly.
Yes, a word from me, I will surely update it as time permits in full detail.
Cheerz
Srinix
PS: Download the Code here: Tag Cloud Code
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.
PHP and Script.aculo.us Book
CHECK out and BUY the PHP and Script.aculo.us book at Packt official site
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
- in Blogging, CSS, Designing, Education, FOSS Stuff, How-To's, Javascript, MySQL, Personal, PHP, Techie, Tutorial, Web 2.0, Webonic
- 3 Comments
Web tutorials *Yawn Yawn*: Webonic
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.
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
- in Designing, Education, FOSS Stuff, How-To's, Javascript, RICO, Techie, Tutorial, UI, Web 2.0
- 3 Comments
How-To create Rounded Corners using RICO Library!!!
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.
<body>
<div id=”roundMe” style=”position:absolute;top:240px;left:35px;width:250px;background:’lightblue’;color:’red’;”>
<div id=”Content” style=”height:200px;width:250px;padding:8px;”>
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.
<script type=”text/javascript”>
Rico.Corner.round(’roundMe’); // The parameter is the id of the outer DIV tag
</script>
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
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
How to make a Modal Window using Prototype?
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.
<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” mce_src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” mce_src=”scripts/lightbox.js” type=”text/javascript”></script>
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
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Tutorial: How to make Script.aculo.us Based Slideshow
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!!!
<script type=”text/javascript”>
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.
<body onload=”start_slideshow()”>
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
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Tutorial: How to use Script.aculo.us effects?
Okay, so its been a long time since I have posted any How-To’s. So, I decided to write down one for How to use Script.aculo.us effects?
Script.aculo.us is an javascript library to enhance the UI and the user experience. We are also using the same in our OpenIndx projects as well. I have mentioned it here in my previous post also.
Before, you get to hack this library, grab it from here.
Now, presuming that you have the library with you, lets rock!!!
A simple HTML file : index.html
<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>
<body>
<h2>Hello AJAX Effects</h2>
<div id=”test_this”> {Div which we will be adding effects to}
<table> {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div> {DIV ends}
</body> {Close body}
</html> {Close HTML}
Now, this was just a simple html code to insert a table which will be having fields username, password and submit button.
Lets add some Script.aculo.us effects to this code.
<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>
<body>
<h2>Hello AJAX Effects</h2>
<div id=”test_this”> {Div which we will be adding effects to}
<table> {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div>
<a href=”#” mce_href=”#” onclick=”Effect.Fade(‘test_this’);”> {here ‘test_this’ mention the “div” you need to add effect to} Fade Me</a>
</body>
</html>
Similarly, you can also add other effects, in this flow.
<a href=”#” mce_href=”#” onclick=”Effect.Shake(‘test_this’);”> Shake Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Appear(‘test_this’);”>Appear Back</a>
<a href=”#” mce_href=”#” onclick=”visualeffects(‘test_this’,’slide’);”>Slide Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Grow(‘test_this’);”>See Me Grow</a>
For further reference on effects, please refer here
Do let me know if this helps you, in giving a overview of how-to use Script.aculo.us Effects. Drop in the comments, if you have any suggestions too.
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
https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Archives
- August 2017
- May 2017
- October 2015
- December 2014
- December 2013
- November 2013
- April 2012
- March 2012
- January 2012
- January 2009
- July 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
Categories
- Apple Inc
- Autobiography
- BarCamp
- Blogging
- Blogroll
- Books
- Code
- Cognizant
- CSS
- Designing
- Education
- Entrepreneurs
- flash
- Foodie
- FOSS Stuff
- Fun
- Gaming
- General
- How-To's
- India 2.0
- Indic Computing
- Indictrans Team
- Inspirational
- iWinkr
- Javascript
- Links
- Localization
- Music
- MySQL
- News
- OpenIndx
- Personal
- PHP
- Podcasting
- Podworks
- Project OpenKey
- Prototype
- Quick Code
- RICO
- Script.aculo.us
- Social
- Sports
- Start-up
- Techie
- Tutorial
- UI
- Uncategorized
- Unconferences
- Web 2.0
- Webonic
- WebStorm
- WebToons
- Yahoo
Meta
-
Subscribe
Subscribed
Already have a WordPress.com account? Log in now.
Sridhar: Web Unplugged!!!! 