yensdesign – Tutorials, Web Design and Coding

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

Archive for the ‘Tutorials’ Category

Safe Ajax Links – using Jquery

Monday, June 8th, 2009

About the author

Hi guys, I am Prathap Beschi, PHP programmer from Balyhoo Advertsing, Chennai, India. I like developing ajax websites, jquery plugins. Follow me on TWITTER.

Introduction

This tutorial is an improvement of How to load content via AJAX in jQuery.

We are going to learn how to make safe ajax links – ajax links that work properly though the browser does not support javascript.

I always worry about ajax links; what if the user’s browser is not enabled javascript?! They can’t go further pages.

Already i have developed some ajax websites, so i want to overcome this problem. We can make a ajax website work properly though there is no javascript with a simple trick. I use Jquery for ajax development, so now i explain this with Jquery.

(more…)

Speeding Up Your Website: Optimizing GIFs images

Wednesday, February 18th, 2009

It’s the turn of the GIFs images in our optimization image process of Speeding Up Your Website series.

We are going to learn how to reduce the file size of our GIFs images without losing quality, converting to PNG and optimizing GIF animations.

We are going to use ImageMagick and GIFsicle to achieve it.

Actually we have published these articles:

So let’s dive into the tutorial guys!

(more…)

Speeding Up Your Website: Optimizing PNGs images

Wednesday, February 11th, 2009

Hey guys! We continue the serie of Speeding Up Your Website with a new article focused on the optimization of PNGs images.

We are going to learn how to reduce the file size of our PNGs images without losing quality, removing these chunks of information that we won’t need to display the images.

We will use pngcrush for our purposes but we will share with you other alternatives.

Actually we have published these articles:

Let’s go guys!

(more…)

Speeding Up Your Website: Optimizing JPEGs images

Friday, February 6th, 2009

In last article we have seen wich kind of image format we can use in each situation in our websites, so now it’s time to know how to optimize these images.

We are going to learn how to optimize our JPEGs images by reducing useless information and without losing quality in very clear steps.

We are going to use jpegtran to our purposes of optimization.

Actually we have published these articles:

Let’s dive into the tutorial guys!

(more…)

Speeding Up Your Website: Selecting the Right Format for your Images

Tuesday, February 3rd, 2009

Hi guys! We continue the optimization series with this new part focused in select the right format of our images to spend less resources and speed up our websites.

After knowing how to begin our optimization process with the article titled Minimize HTTP Requests we are going to learn how to pick the right format of our images: GIF, JPEG or PNG.

Actually we have published these articles:

So let’s dive into the second part of these series: Selecting the Right Format for your Images.

(more…)

Speeding Up Your Website: Minimize HTTP Requests

Thursday, January 29th, 2009

Hi there guys! In yensdesign, we are continuously talking and publishing tutorials, tips, tricks and cool effects to improve the user’s experience by making our websites more friendlies and accesibles.

But there is a very important thing that you must not forget and which is the main cause by which users leave the site : LOADING SPEED.

We are going to review some important concepts about website’s performance and explain best practises to speed up your websites to reduce the loading time. Your server and your users will be happier at the end of these articles :)

Actually we have published these articles:

So let’s dive into the first part of these series: Minimize HTTP Requests.

(more…)

How to display tips by creating a jQuery plugin

Monday, January 26th, 2009

Hi guys! If you have tested the beta of Plusmusica (it’s a beta, report bugs please!) maybe you have find some tips when you move the mouse over some elements. We will learn how to create them in a very easy way.

We are going to learn how to create our custom jQuery plugin to show tips on mouse over event on our desired elements. We will also be able to customize the appearence of the tip division for each kind of elements in the CSS code and much more.

A real example is worth a thousand words:

As always, you can try the living example over here.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.
Let’s learn guys!

Quick note: I receive questions about web hosting. I would recommend checking out WHS as they have a wide selection of good hosting providers and articles about the internet. Check it out for more info. Hope this helps!

(more…)

Mastering CSS background-position

Thursday, January 22nd, 2009

Hi there guys! As you may know, we have published a lot of tutorials to learn how to improve the interaction of our web applications mainly using javascript and jQuery. We have created our layouts for these tutorials using xHTML and CSS and this time the CSS part will be the important thing and not a simple spectator.

We will learn how to use the CSS property background-position to create different kind of buttons, interfaces and more by using only one image as background. It will reduce the loading time and supress the user’s waiting on mouse over effects.

As always, you can try the living example over here.

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

It will be an interesting (and funny) tutorial, come on guys!

(more…)

Playing and Controlling MP3 songs and FLV videos with javascript

Tuesday, January 20th, 2009

Hi there guys! If you remember we have published a tutorial about How to create a music player interface in jQuery some weeks ago. Some of you have sent me e-mails, posted comments in the tutorial and in our forums asking about how to implement “the music” to the music player interface. And now I am here to show you the basics to acomplish it.

We are going to learn how to Load, Play and Control our MP3 songs and FLV videos to share them with our visitors in our websites by using javascript (some jQuery) and the flash player JW Player.

As always, you can try the living example over here.

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

Come on with me guys!

(more…)

How to Validate Forms in both sides using PHP and jQuery

Tuesday, January 13th, 2009

Hi guys and welcome to a new tutorial of yensdesign.com! 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!

(more…)