Archive for the ‘OpenIndx’ Category
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
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
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: 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.
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
Why we started OpenIndx?
Google’s Mission
“Google’s mission is to organize the world’s information and make it universally accessible and useful”
Well, I sat thinking on this for a while. I found out, there is enough data around us available in all possible formats. Data is useless untill we are extracting the information out of it and represnt it properly.
Hence, the idea is born, which we call it OpenIndx.
We aim to provide set of suites which are easy, flexible, powerful and above all useful for users/ organizations/ Institutes to extract needed Information from data and represent in more effecient way, ofcourse for free.
Data –>Information
We aim to provide a powerful middleware, which will become something like this.
Data –> OpenIndx –> Information
I hope for those who were still wondering what purpose OpenIndx is going to server. This explanation would make it clear.
Still have some query? Drop a mail …right away…
Cheers
Sridhar
Things I am learning about building a cool web site!!!
Obviously, many of us visit more than 10 websites a day, atleast I do. But, then what makes a website look awesome while some seriously suck?
While working on OpenIndx, I am learning couple of things which I am sure will make the difference between a wonderful site and a sucking one!!!
1. UI is the software:
This is a universal rule for all web apps. Users will see what you are selling. If your site is one which takes Ruby On rails, AJAX, Perl, Python and above all looks like a porn one, trust me users will never visit your site again, ofcourse untill you really offer porn.
I came across couple of sites which uses almost all the colors avialable in the color pallete. False assumption that mmore colors will make the site more impressive.
Moral: Web apps UI should be appealing, decent, easy and above all dead friendly for a user to use it and make them comeback. Colors used should be eye-candy to make users fall in love with the site.
Case Study: In OpenIndx we are trying to make the look, UI, feel simpler and effective.
2. Features should be rolled frequently:
I started deciding a bunch of features to roll out for the beta version of OpenIndx. But, this book GettingReal,really helped me giving a nice inputs on how-to approach when it comes to features.
I identified simple, must and new features for OpenIndx for the beta version and the rest features will be rolled out to make the users stick to the site and the application.
3. Take Feedbacks at every point
Feedbacks/Positive Critics are really helpful, provided you take it in a positive way. I talk with many people and friends, mainly to identify the solution they expect to be, the way they want, what will appeal them in the app.
Once, you identify the key points, analysis of the same has to be done. Because our goal ultimately will be to provide end user what they want, to solve their pain points.
These are some of my learnings while working on OpenIndx. Will keep posting more as I learn more from the progress of the project.
Meanwhile if you are student,developer Designer/DBA or just interested in joining the project. Please drop a line. We can form a great team together.
Cheers
Sridhar
Project OpenIndx is UP and Running!!!
OpenIndx is Active!!!
I am glad to announce that OpenIndx project has been approved by Sourceforge.net Team and now OpenIndx is officially Active!!!!
OpenIndx will be a community build product which visions to raise the Educational standards by helping Institutes build better reflection of their quality through the websites.
Some of the key features of OpenIndx are:
1. Alumni Management System
2. Course Management System
3. Content Management System
4. Survey Management System
5. PeopleOne Management System
6. Library Management System
7. Institute Industry Interaction System
8. Grade Management System
Join, Participate and Change!!!
Project Details:
Project Home: https://sourceforge.net/projects/openindx
CVS: http://openindx.sourceforge.net
Its mere a start, and miles to go before we sleep!!! Cheers
Sridhar
#1 How-To connect PHP and MySql?
This is my first How-To post in the category in an attempt to collect and solve all the small minor queries.
PHP is a scripting language and MySQL is an Open Source DBMS. Together they play a very vital role in developing the web based applications on GNU Linux platform/Windows.
Let me take you through a cakewalk of how to use PHP and MySQL and then the final verdict.
In order to run PHP and MySQL on your system you “must” have:
1. Apache { Web Server/LocalHost}
2. MySql { Database Management System}
3. PHP
4. GNU Linux / Windows
OR if you are running Windows on your system then you can even go for complete pack like:
UNI
CODE:
<?php
// localhost will be the server ur trying to connect. username is understood and password for authentication.
$link = mysql_connect(‘localhost’, ‘username’, ‘password’);
if (!$link) {
die(‘Could not connect: ‘ . mysql_error());
}
echo ‘Connected successfully’;// mysql_close will close the connection
mysql_close($link);
?>
This will help you in connecting with the MySQL database using PHP. This is an overview of general connection. In my next post I will teach u how to actually connect, retrive and then publish the data to the page.
Till then Happy Hacking!!!
Cheers
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 {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book
Project: OpenIndx
OpenIndx is an open source project which I am working on in my free time. I will be hosting it on http://sourceforge.net
OpenIndx is an Intergrated Management System.
It is purely developed using Open Technologies like PHP, MySql, Apache and AJAX.
If you are a developer/Designer based out in Bangalore and wish to contribute something back to society.
Drop me a mail I will get in touch with you.
Cheers
Shri
PS: Features/Functions/Code/Progress everything related to OpenIndx will be posted in a new section: OpenIndix. Stay tuned for some real HOT action!!!
Comments (11)
Comments (2)
Comments (1)