yensdesign – Tutorials, Web Design and Coding

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

Posts Tagged ‘Web Design’

How to create a stylish loading bar as Gmail in javascript

Monday, November 17th, 2008

Hi folks! long time ago from last tutorial, eh? Sorry for that but now you know that I spent last days working hard on a new online jukebox (for people who love music you know :P ). 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 (“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:

Check out the final result!

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

As always, the rest of the tutorial after the jump ;)


Create a professional interface for your web applications using jQuery

Tuesday, October 21st, 2008

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 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:

Image preview of the interface

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!


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.