yensdesign – Tutorials, Web Design and Coding

Daily free tutorials about web design, coding, jquery and more

Posts Tagged ‘Tutorials’

How to Validate Forms in both sides using PHP and jQuery

Tuesday, January 13th, 2009

Hi guys and welcome to a new tutorial of! Some of you ask us about the possibility of create a tutorial about how to validate forms in server side (using PHP). So i wrote a tutorial about it, adding some interesting features with jQuery:

We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.

As always, here you have a preview of what we are going to do:

You can try the living example before continue reading the tutorial. Remember that if you want to try the server side, you need to disable javascript in your web browser!

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Let’s learn guys!


Improving Search Boxes with jQuery

Wednesday, January 7th, 2009

Hi there guys! We continue writting tutorials to try to improve our website’s interface. Search boxes are in the air and in our days they become a very important part of our websites, so it will be interesting if we can do them a little better.

This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

As always I show you a preview image linking the final result:

You can try the living example before continue reading the tutorial.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Let’s learn guys!


Dreamhost problems… The first part of the tutorial “OS Web interface” will be released tomorrow

Monday, December 15th, 2008

Awww guys Dreamhost did it one more time. Some websites such as or plusmusica were offline last 24 hours because some servers of Dreamhost were broken. I will try to finish the tutorial to publish tomorrow, sorry for the inconveniences and thanks for your comprehension :(

See you soon guys! If Dreamhost wants, lol :\

Create a smooth tabbed menu in jQuery

Tuesday, December 9th, 2008

Hi guys! As we have said many times, websites are evolving to rich online applications and tabbed menus can be very power and useful to show content to our visitors.

In this case, we are going to learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for our websites.

As always, here you have the live demo before starting the tutorial ;)

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

Interesting…? Just continue reading!


Create an amazing music player using mouse gestures & hotkeys in jQuery

Thursday, December 4th, 2008

What’s up guys? Today I am very proud to announce a BIG & INTERESTING tutorial focused on improve the user’s interaction in your web applications.

We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Because I told you that it’s a big tutorial, this time I will show you a live working example in this video:

But as always, you can test the real demo over here ;)

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.

So guys, come with me and jump into the tutorial :)


Creating AJAX websites based on anchor navigation

Wednesday, November 26th, 2008

Hi again folks! As you can see, the amount of publications is increasing daily, it is because we realized that everyday more people come to read read the blog to learn about web design. So, we decided to spent more time to share our knowledge with you.

In this tutorial we will see how to create an AJAX website without lose the reference to the URL. What is that not lose the reference? If you have created some full AJAX website you have realized when you change the web content, the URL is not updated, so, the URL reference is lost. Services like Gmail uses it to increase the navigation’s user experience.

It can be very very useful to create awasome ajax based sites such as Gmail web application from Google, users will appreciate it so much. As always we will use jQuery to do the ajax part easier for all :)

Update: Now with loading division while you are waiting to load the current section!

You can test a working live example over here:

Try the tutorial!

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.


How to debug PHP code

Tuesday, October 7th, 2008

Nowadays, the code debugger is a tool that has almost all programing enviroments which allows you to watch the internal work of your applications and finding errors at run time for a easy way. The trouble is when you are working in a client-server architecture model, because from where you send the request (client) can not access the code hosted on the server.

To PHP exists any debuggers that require an installation in the server part, that can not always like you. However you can find useful tools that can help you to make this task without to be debugger exactly (without interrupted point or execution step by step…).

One of this tools is FirePHP:

FirePHP is a Mozilla Firefox complement that merges with Firebug and allows you to watch the outputs sent from PHP code in the console, so, you can watch the variables values or create a log about that is happened in your scripts without use the upset “echo” that interferes with you HTML.

The way FirePHP works is very easy, all the information that you want to view at run time is coded in JSON and sent in the headers of the response. When these headers arrives to the navigator, FirePHP detect it and to render the information in the Firebug console.

So relax, take a cup of tea and let’s begin this lesson.


How to make a brilliant mysql forum database from scratch

Friday, October 3rd, 2008

Hi folks! In this tutorial We will learn how to create a database for a complete and professional forums system. I want to present you an awasome utility for designing and creating databases: MySQL Workbench.

MySQL Workbench is a visual database design tool that is developed by MySQL. It is Free, Open Source under GPL and easy to use for design and make professional databases. You can download MySQL Workbench in the official downloads section.

Note:You don’t need to register on the official website, just click “Pick a Mirror” and then one more click at “No thanks, just take me to the downloads!” to avoid registration process.

So now, We know what We want: a brilliant database for our forums and what We will use: MySQL Workbench. It’s time to dive into the code guys but first of all take a look at the final result:

Final schema of our database

Isn’t easy? Yeah It is easy, so Lets Go! If you are so impatient, you can download the sources here.