yensdesign – Tutorials, Web Design and Coding

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

Archive for the ‘Web Design’ Category

Stunning 128 free icons by wefunction

Thursday, December 11th, 2008

We are trying to make cooler webs by adding javascript effects, cool CSS tricks and more, but what about icons? If you are looking for smashing and free icons that’s your pack ;)

Courtesy of wefunction in their words:

We’ve tried to keep a consistent style with quite a glossy look to the icons, admittedly some are better than others, but our first attempt at a set of icons I’m happy how they turned out. We’ve Included some of the main Social Media Icons such as: Design Float, Digg, Delicious, Furl, Technorati, Flickr, Stumble Upon, Twitter & Many more…

You can download these 128 free icons over here.

Have a nice designing guys! Let us know if you have already used these icons in your websites :)

Download the VCP-410 tutorial and 640-863 guide to learn how to create inspiring icon designs. We offer free 642-642 design resources to get inspiration.

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!

(more…)

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

(more…)

Boobles: First theme on Themeforest released!

Friday, November 28th, 2008

Hi there guys! These last 2 days I have spent my spare time in creating a simple and clean theme for submit it to Themeforest, a new marketplace from Envato where users can submit and buy (x)HTML, WordPress, Joomla themes and more.

I tried to create a clear template for personal websites such portfolios, combining blues and light grays with smooth gradients. I am really happy with the final result, considering the time invested in the theme.

I called it Boobles, judge for yourselves :)

Checkout Boobles theme!

I was thinking about the chance to make a fast-screencast of the creating process, maybe it will be interesting and funny… :) Do you know some interesting free software to make screencast? Tell me please!

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.

(more…)

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 plusmusica.com 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 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:

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 ;)

(more…)

Redesign & a new site plusmusica.com launched!

Thursday, November 13th, 2008

Hi folks! long time ago from last tutorial, eh? Sorry for that but I spent last days working hard on plusmusica.com a new online jukebox (for people who love music you know :P ) and it was released 2 days ago! I will try to post another tutorial today/tomorrow about the Gmail’s loading bar. It will be really really interesting and awasome :D .

In the other hand we got a little redesign to the website. I was thinking about the usability of the blog, and it’s necessary a 2 columns based layout to display more information… As you can see I have activated a BuySellAds account, displayed the search bar and listed the categories of the blog. Few improvements, but neccesary.

Note: Some people tell me that website didn’t display correctly, so press CONTROL+F5 and it will be fixed ;)

Do you want to try plusmusica.com?

As I said, I was working hard on a new site called plusmusica.com, it allows you to listen free music in everywhere, everytime…

So if you want to try plusmusica.com, just post a comment (fill the e-mail field with your real e-mail if you want it!) and I will send you an invitation as fast as possible.

Unlike other websites, plusmusica.com allows you to create multiple playlists, different player options, search all kind of songs… and in the future it will be sharing playlists and more ;)

So just comment if you want an invitation! And as always, tell me if something it’s wrong.

See you soon!

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

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!

(more…)

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.

(more…)

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.

(more…)