Archive | OpenIndx RSS for this section

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

PHP and Script.aculo.us Book

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

Advertisements

Now, after CamStudio. its Script.aculo.us + OpenIndx

I was like busy for now 2 weeks, deciding which AJAX library to use with OpenIndx.

I have tried enough of them now, which includes Dojo, OpenRico, YUI, Script.aculo.us.

What features am I looking for in a Javascript AJAX library?

These features are a must for OpenIndx:

Drag-n-Drop
Fade-In/Fade-out
Flexible with PHP
Inline Editors/Multi-Line editor/ Full-Fledge editor integration(TinyMCE/FCkeditor)
Sliders

After all these screening I have decided to go with script.aculo.us.

After All its about UI, Honey!!!

So if you are one who likes the AJAX-powered functionality in WordPress. I must tell you even wordpress is using Script.aculo.us

Who else using Script.aculo.us?

To name some of the key projects WordPress, Apple etc.

So what does it mean anyway?

Expect beautiful UI and powerful functionality.

When will we see it?

Did I tell you the release date is June 07. Yes, it would just be a alpha version with all basic features first. Based on your feedback we will be modifying and adding new features on requests.

okay, so keep hanging around. Be good, Take care

Cheerz
Shri

BarCamp Bangalore 3 is live…..

So, here I am live, with Bar Camp Bangalore 3 @ IIM-Bangalore.

I have finished my talk on OpenIndx project in social tech domain. And, now I am attending Sowmya Karmally’s talk on Mifos(Micro-Finance) of grameen foundation.

Will write u soon on more stuff from BCB3.

Cheerz

shri

BarCamp Bangalore 3: 31st March & 1st April, IIM Bangalore

BarCampBangalore 3 is going to held at IIM Bangalore on 31st March & 1st April.

Its one of the famous “unconferences” where you can get to meet many other Nerds/Geeks having same interest as you have.

Yes, I will be there and will talk about our project Kourse, Virtual Learning Environment.

Kourse, is a one of the projects we are working on in a set of families of Management suites, OpenIndx.

Its good to see that, Major IT companies have started sponsoring the events like BCB. This time TCS, Cognizant(our Company), ThoughtWorks etc are sponsors for BCB3.

If you are someone who has keen interest to attend. Please visit the site for more details.

http://barcampbangalore.org

And, if you are one who is from Bangalore and attending BCB, drop me a mail. and we can catch up during the event.

Cheerz
Shri

OpenIndx + CamStudio = Better Learning!!!

We thought of getting OpenIndx married with some effecient recording application.

So OpenIndx finally gets married with CamStudio.

Few days back, I contacted Nick, the project admin of CamStudio and he showed his interest in the concept and outcome of integrating both the projects.

Why Do we need CamStudio with OpenIndx?

CamStudio is no doubt one of the best open-source video recording applications and OpenIndx’s project, Kourse, an e-learning management suite so thought having demo’s is far better than just having a jargon.

Now, when we decided to integrate CamStudio, we are defining some headers so that for an end-user its very easy to port the videos and the flash files inside web page.

Our only aim to bring CamStudio into picture is to help and make learning a more better experience.

Keep looking more at this space for more updates.

Cheers

Shri

PS: Special thanks to Nick, project admin of CamStudio, who will guide us as well on how to make OpenIndx better using camstudio.

Get groovy with CSS!!!

Everyone loves to see beautiful sites on web. Everyone loves to see simple yet creative pages having appealing look-n-feel. How do we get our sites look groovy? with CSS.

Cascading Style Sheets (CSS), add style to your HTML. It defines how the page should look. Only style. Styles are generally stored in the Stylesheets.

All HTML files are stored in .htm/.html file formats, simillarly styles written are stored in the stylesheet formats i.e .css format

We can either embed stylesheets inside the code or can have an external stylesheet. External stylesheets are encouraged as they reduce a lot of rework and proves handy when dealing with frequent change in the code/design.

E.g <a href=”Some Link here” style=”text-decoration:none”> See the style tag</a> 

In the above piece of code, we are adding style for an anchor tag ‘text-decoration’ which will result in the anchor tag having no decoration like underline, bold etc etc.

Trap: The above style is only applicable for the specific tag for which we have defined.

There are other ways on how we can use styles in our HTML code.

<head>
 <style type=”text/css”>
a {   text-decoration: none;  }
</style>
</head>

Funda: This particular piece applies the style to all the anchor tags in the page. Moving forward if one wants to change the style of anchor tag, we need to change only at one place i.e is in the style and it will be reflected throughout the page.

Even simpler, we can seperate out the style from the html code and put in some different file i.e Stylesheet. Out html code will contain some anchor tags.

We need to create a file –> style.css

Add the path of the stylesheet to our html code –> <head><link type=”stylesheet” href=”style.css” mce_href=”style.css”></head>

Thats all we have to do to make our styles appear in our html page. Simple? 

okay, so now we are ready to groove with CSS.
Next tutorial details on how to play with colors and designs.
Keep hacking!!!!

Sridhar

Week in a Snapshot!!!- Talk Dr.Vint Cerf, OpenIndx Dashboard…

Last few days were seriously busy ones, cudnt even get time to write articles.

Anyways, now I have time, so let me just give you a snapshot of things happened over past few days.

1. Talk by Dr. Vinton Cerf:
Attended talk given by Dr.Vinton Cerf (Engineers, who dont know him, probably you are someone who doesnt know what day is today!!!), He is the co-founder of Internet, along with Dr.Robert Kahn. The talk was a part of Google Speaker series.

Need not to say, the talk was awesome and very motivating. He talked about the past, present and ofcourse the future of Internet and the Apps. He discussed about various of forms of data that Google would be interested in and their baby(Search).

In all a very informative talk, followed by some lingering questions and comments.

<>If the word Surfing(Cerf+ing), came coz of u {Dr.Vint Cerf},
I am the son of Internet, just came to say “Hello Gandpa” </>

2. Worked real hard on OpenIndx project and features.
Last week, was a week for lot of modifications and changes. Yes, the complete architecture has been re-designed in a way that it will be open for API’s.

I preferred to keep it in more or less, a wordpress UI feel. Wordpress UI is very flexible and pleasant for a user. Hence, OpenIndx will have the same UI feel. Cheers!!!!!

 Some more serious changes, that we made is in the Engine layer, where we have added a new Engine for AJAX, which is completely based on Prototype and Rico. So, you people can expect a beautiful UI with powerful features.

A weekend is just few hrs away, so getting geared for some real good work and handsome amout of beautiful time to spend.

Cheers
Shri