yensdesign – Tutorials, Web Design and Coding

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:

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

(more…)

Hi folks! long time ago from last tutorial, eh? Sorry for that but now you know that I spent last days working hard on plusmusica.com a new online jukebox (for people who love music you know ). If you want to try it I will give you some invitations for the private beta to get feedback from you (post in comments!).

Well, let’s focus on the new tutorial called: “How to create a stylish loading bar as Gmail in javascript“. As you can suppose it will be about how to create the famous loading bar from gmail or other sites as tuenti.com (“the spanish facebook“), etc.

But the magic on this tutorial isn’t the loading bar, it’s the way to load all resources like javascript, css, and other static files that our web application will need, to delete user waiting times during his visit.

You can test a working live example over here:

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

As always, the rest of the tutorial after the jump

(more…)

I am very excited to see that a lot of people are linking our tutorials and this the best way to get the motivation to continue writing more and more tutorials. So thanks all for the comments, referrals and for visit yensdesign.com daily

In this tut we will create a professional interface for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in jQuery.

As always here you have a demo of the final result:

Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome (file menu doesn’t works well).

Let’s begin the tutorial guys!

(more…)