Archive | Tutorial RSS for this section

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 http://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
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Advertisements

Tutorial: How to store UTF8 (indian language) data in mysql?

Well, let me put it straight this tutorial also applies to any other native languages like latin, spanish etc. But, since I have tried for Indian languages I am writing exclusive for it.

Okay, so¬†before we say code I must tell you this tutorial intends, a thought provoking stuff ūüôā

Lately, we have seen enough number of Indic-translators, and you must have got your hands on with typing in ur mail/blog. Now, just think for a while, when u sent a mail, and try to read it back from “Sent Mail”, u still see the indian language or even in that case blog articles. For that case, even in Orkut.

How are they stored inside database? Was what I was trying.

Again, I am not sure for any other DB, I have tried with MySQL. But, I guess should be same.

Quick Explanation:

We assume we have a DB with table¬†articles, and a column¬†named¬†posts, which will save the¬†article¬†written in your blog. Best part, we know that all major DB’s support UTF8. And we shall explore that feature.

Now we write a article in hindi, ŗ§Ļŗ•áŗ§≤ŗ•ćŗ§≤ŗ•č ŗ§Ķŗ§įŗ•ćŗ§≤ŗ•ćŗ§°

If the UTF8 is not specified, you should see something like ?????? in ur DB else u shud see the hindi data. Clear? Koool lets see the code

Quick Code:

First check¬†for UTF8 compatibility with this¬†query. If it supports you should see the output as “Character_set_system”| “UTF8”

SHOW VARIABLES LIKE ‘character_set_system’;

Now that being checked, alter the table and just modify the column, Posts in our above example and specify it as UTF8

ALTER TABLE articles MODIFY Posts VARCHAR(20) CHARACTER SET UTF8;

Now, try to insert the hindi value and save it. Query it and u shud see the hindi text ūüôā

We have go ahead and use many other options as well, like Collate etc. But this tutorial intends to keep it simple.

I hope you find this useful and interesting. If you have tried any hacks similar to this, pls drop in comments and share with us.

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

How to learn Programming????

Most of the time, I hear people saying I am NOT¬†good at programming¬†but at “XYZ”, yes this is completely okay, but if you have some inclination towards learning programming or be a good programmer, here are few simple tips, I follow them so I thought I would share with you pals.

1. Join some Developer Network.

With lot of developer network platforms, half-of the work of the developer is already done and distributed in the form of “Packages”.

Im hooked to Yahoo Developer Network, for many reasons. One, it supports all the languages be it .Net, Java, PHP, Python etc etc.

More reasons for using any Developer Network, I can feel are

1. Cross Browser compatibility, one doesnt have to worry about the small issues of browsers

2. Loads of tutorials, code and examples

3. Forums and discussion boards

You can even learn a lot by looking at the code, examples and tutorials.

Some of the developer networks available are

1. Yahoo Developer Network

2. Google Code

3. Facebook Developer Network

4. Script.aculo.us Network

If you have used or know of any other developer network, drop in comments.

Cheerz

Web Design Tip #4: Using ToolTips Helps a LOT!!!!

ToolTips are really useful. If you are considering of making a web start-up. This tip would surely come in handy.

According to wikiperdia:

” The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over “

Where can we use ToolTips?

Most of the time, designers are not sure when we should use ToolTips. Lets us imagine a scenario where in user has to fill details. It would be really nice to put down a form tooltip to guide user on do’s-n-dont’s.

UserName <input type=”text”>

Now, if we apply a form tooltip, at the right-hand side a tip would appear when the user clicks on the text box.

“Choose username as smart as ur”

This not only helps in guiding the user about the details but also helps in creating humor ūüôā

Which are the free ToolTips we can use?

Im using YUI{Yahoo UI library} and it has some really powerful features for tooltips. Alternatively one can also use the below mentioned libraries which can surely help in grooving the UI.

1. ProtoTIP : Simple, sleak, beautiful, can add effects and AJAX support. Good for Prototype+ Scriptaculous libraries {Im using it as well}

2. Ask The CSS Guy : ONLY useful for forms

3. Nifty Corners Cube: Awesome library perfect for all rounded-corner needs

4. Last but not least, Google it ūüôā

If you know of any other library, drop in comments, I shall update the post.

Related Posts:

Web Design Tip#1: Yellow Fade Technique

Web Design Tip#2: Alternative Row colors for Rowset

Web Design Tip#3: Epicentric Designing

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

Web Design Tip #3: Epicentric Design!!!

I admit its been sometime I have been out of blogging. Almost a week. I was out coz of some hectic deadlines, personal work and above all I didnt try anything new last week. But I am back!!!

Epicentric Design is a must to read and follow for all the web designers. It is not a new technology or something, but a simple way to make great applications.

Let me just start by giving a simple example.

Consider this blog you are reading. What do u feel is the most important feature?

Yes, you are right. The article.  And then follows the sidebar features, footers and headers.

What does that mean?

It means¬†for this particular page, the¬†epicenter is “the article”. Just that article. Forget rest all.

Now, when you get to really start designing or building an application, consider only the epicenter. Most of the web apps I come across fail to do so, which leads in lot of messy stuff on page and creates confusion.

Rediff.com, I dont have any personal problem with them, but yes when u see the home page, what do u feel? U feel its for Logging in? or Shaadi.com Ads? or wht?

Now, simillarly consider the login page, Its functionality is to implement login system, no need for junk there. Best examples Yahoo Mail, Gmail. Their foucs is only on “Login”¬†rest all are not focussed.

So what should be the best possible approach to build the app?

1. Sketch the raw UI, this is imp as we get an idea of what it shud look like.

2. Figure out the Epicenter for the page. Stick to it.

3.  Design a simple html page before coding. It is a MUST, afterwards it may be of no use but it adds to a clear picture of what it should like and contain.

4. Code it. If u fail to do the above 3 steps, chances are you will loose an eye from epicenter.

A personal note from my side, DONT start coding first. It is a serious time waste. If u cant have a design or layout or epicenter dont proceed to coding.

Which methods do u follow to build your app? Do share with us.

Cheerz
Sridhar

PS: extract from 37signals

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

Web Design Tips #2: Alternate Row Colors in Resultset!!!!

Web Design Tips #2: Alternate Row Colors

In my recent post of Web design tip, I have shown how to use Yellow Fade Technique. If you have missed it. Read it Here.

Okay, What is alternate row coloring?

Imagine you have a set of records in database, you fetched them and¬†just “echoed”¬†them as a bulk in form of table. How appealing right?

So we solve this problem. I know, I understand not everyone just echo’s the result directly. But then, how you show is, what your user sees!!!

Now, imagine this, we fetch the rows from database and then while placing them, we modify them in a way it looks more clear, decent and ofcourse appealing as well.

How do we do it then?

Simple. let us suppose we have got 17 rows as result of some fetch operation. Now using a while loop{for can also work}, use n/2 formula and get the even and odd results.

For every even result set we use a specific color, and for odd result set we use different color. This helps in making it in a readable and appealing form.

Wasnt it simple? Most of us, programmers make this mistake of choosing wrong colors for display { red/blue, yaak }, which is often called as Programmers Design!!!! No wonder why they call it ūüėÄ

Accept the fact that design is not programmers cup of taste!!!!

Anyways, I am working on some script for my project, so soon I will post the result and code of this as well.

If you know/happen to work, or anything related to Design techniques, pls feel free to contact me, and you can be our guest author.

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 {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Getting Real : Book from 37signals

37signls needs no introduction.

Yes, the same guys from Basecamp, Campfire, Highrise, backpack, ta-da list!!!! Never heard of these? Okay, Heard of Ruby On Rails framework? Yes, the same guys.

I must tell you, they are awesome.

“Undo your competition”.¬†They focus a lot on design, technology and only essential features and dropping everything else.

If one¬†wants to develop and deploy a successful web application, this book “Getting Real” is a must to read and follow.

Every aspect of project is covered, technology, hiring, users, customers.

Nothing great or something, but I would say these are essentails which we all must have come across but we fail to implement them.

Go ahead. Did I tell u that its free? Read on….

Cheerz
Sridhar