Welcome to web 2.0 Blog

The Last news of the web Development from the world master's

Cool Green Logo

Posted by web2.0 Design resourse Wednesday, August 26, 2009 0 comments

In this tutorial I am going to teach you an awesome way of making a cool green logo.

Step 1

To start off with create a new document (500 by 400 pixels - File > New) and using the Linear Gradient Tool make a green gradient from the top left to the bottom right. The colours that I have chosen are #445e00 for the dark green and #688a02 for the light green colour.



Step 2


Now we are going to be making the basic shape for the logo so create a new layer (Layer > New > Layer) and make a selection like below and fill with white.



Step 3


Next up, move the selection down a bit and to the right, now hit delete. Now you should have something like below.



Step 4


Now because the plain white thing looks very boring we are going to add some layer style...

Layer > Layer Style > Outer Glow



Layer > Layer Style > Inner Glow



Layer > Layer Style > Satin



Your logo should now be looking something like:



Step 5


Now we will be adding the text, so using the Text Tool chuck in the title of your site.



Step 6


Duplicate your layer styles from your logo layer to your text layer, but remove the inner glow one.



Step 7


Lastly we are just going to be adding a quick reflection to our text, so just duplicate the text layer and go Edit > Transform > Flip Verticle. Now lower the opacity of the layer down to 20% and you are complete!! Woo ;)




You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user. If you’ve been wondering how this is accomplished, here are 13 very useful tutorials and scripts that will help you create these types of effects using jQuery.

jQuery Tools Scrollable

jQuery Sliders

AnythingSlider jQuery Plugin

jQuery Sliders

Sliding Boxes and Captions with jQuery

jQuery Sliders

Making a Content Slider with jQuery UI

jQuery Sliders

Creating a Slick Auto-Playing Featured Content Slider

jQuery Sliders

Create Featured Content Slider Using jQuery UI

jQuery Sliders

jQuery.ScrollTo

jQuery Sliders

Moving Boxes

jQuery Sliders

ImageSwitch

jQuery Sliders

jCarousel

jQuery Sliders

Using the Wonderful jFlow Plugin

jQuery Sliders

Create Beautiful jQuery slider tutorial

jQuery Sliders

Step By Step To Create Content Slider using jFlow

jQuery Sliders

Related Posts

Here's some other articles that you will definitely find useful.

14 Easy to Implement Drop Down Menu Solutions

Create a Resizable Image Grid with jQuery

15 Excellent jQuery Navigation Techniques and Solutions

11 Excellent Solutions for Creating Tooltips

13 Excellent jQuery Animation Techniques




Web designers are a special breed – we’re one of a small group of professionals that actively seeks out to improve ourselves and our craft through any means possible. This generally means on our own, from each other, and through an awful lot of ‘guess, test and revise.’ Web design isn’t for the faint of heart or those with any fear of failure.


The most daunting ‘learning experience’ for developing developers is to make the jump from the HTMLs and the CSSs of the world to web scripting. It looks good from the outside – all that added interactivity and animation and cool effects and features – oh my. But for some designers, it proves to be a difficult lesson to learn, as scripting can require more focus, logic, and organization than the coding that you are used to.


Getting on Your Feet Fast

Let’s take a look at bulletproof ways to ease into Javascript at an accelerated pace. Javascript is the perfect place to start to learn scripting because it is generally less complex than other scripting languages, and is client-side – meaning that you will be able to test your scripts on your computer as you script it, in real time, without setting up servers or putting forth any more effort than you really need to. However you code pages now is great – don’t do anything differently to accommodate Javascript – she’s easy to get along with.

The first place I start when looking to learn anything new is on the web – makes sense to learn the web from the web, right? Yeah, books are nice, and they can make you look intelligent, but the truth of the matter is that you’ll find most (if not all) of that same information out on the web, and, out on the web, you can find the most updated tutorials. If books suit you, there are a plethora of books out there on Javascript – feel free to help yourself to any of them.

Websites That Teach Javascript

Something to remember about Javascript websites as you scour the web for help – there are essentially two types of Javascript websites; those that are focused on scripts, and those that are focused on teaching Javascript. I say this because I’ve worked with a lot of students that have stumbled across script websites, started reading scripts on those pages as if they were tutorials and then got confused and discouraged when they couldn’t follow the code – this would be akin to trying to read Braille by shouting at it.

Javascript learning sites spend more time on simple logic and processes. Stuff you will never really do on a website (as you’ll see below) but it will get you into the scripting mindset and help you ease into the building blocks that will creep into every script you work with.

Let’s take a look at two ‘learning’ Javascript sites.

Tizag.com

Javascript For Designers

I don’t know where this site came from or remember how I found it, but I constantly reference Tizag for many of their tutorials. They are straightforward and direct, but move through the topic in a way that makes it easy to understand. Their lessons aren’t too long, giving you just enough to take out and test before returning for the next lesson.

W3schools.com

Javascript For Designers

This site is a step up from the rest in teaching you Javascript (or anything for that matter) and there’s one really simple reason why – they let you try it for yourself right there in the tutorial. A lot of people don’t like learning from books because you can’t try it for yourself; that is unless, of course, you find some ridiculous way to prop the book up against your monitor, so you can read it without holding it open and type all at once, but that’s not very conducive to being able to focus on the script at hand.

About.Com

Javascript For Designers

About.com offers premium advice and tutorials on just about anything for free. It’s pretty much to a multi-information oriented site. Fortunately, here you’ll be able to find a variety of tutorials and workshops focused on begginer to advanced JavaScript users.

Academic Tutorials

Javascript For Designers

The Academic Tutorials site is very similar to the W3 schools learning center. It provides extensive and well organized facts on JavaScript. You will also find yourself with more hands-on experience than you thought, since almost every tutorial has various examples.

Learn-JavaScript-Tutorial.com

Javascript For Designers

This site contains front-line examples and begginer JavaScript experiences for the novice of users. Tutorials showcase several useful scripts and images that aid you in the advancement of your skills as a designer.


10+ Mod_Rewrite Rules You Should Know

Posted by web2.0 Design resourse 0 comments

Mod_rewrite is an Apache-based rewrite engine for dynamically rewriting URLs. It’s built into Apache servers natively, though not enabled by default.

It’s capable of functions beyond simple rewrites, though, some of which are included below.


Mod_Rewrite Rules You Should Know


Turn Mod_Rewrite On

Mod_rewrite is used through your .htaccess file. Place the following code at the beginning of your .htaccess file to turn mod_rewrite on:

RewriteEngine on
(Don’t forget that .htaccess commands are case-sensitive.) This code needs to be entered at the beginning of any .htaccess file using mod_rewrite.


The Basic Mod_Rewrite Layout

The basic format for a mod_rewrite command is:

  1. RewriteRule Pattern Substitution [Flag(s)]

URLs are Always Relative

The URL you redirect to is always relative to the directory in which your .htaccess file is placed. So if it’s in the root directory, URLs are all in relation to the root directory; if it’s in a sudirectory, URLs are in relation to that particular subdirectory.

A Basic Redirect

If you just want to create a simple 301 redirect from one URL to another, then use the following code:

  1. RewriteRule ^fileone.html$ filetwo.html

This is a very basic rule that means any requests for fileone.html will be sent to filetwo.html.

Require no “www”

This bit of code will make it so visitors to your site don’t need to type in the “www” bit of your website address.

  1. RewriteCond %{HTTP_HOST} !^domain\.com$ [NC]
  2. RewriteRule ^(.*)$ http://domain.com/$1 [R=301,L]

Block a Specific IP Address

If you want to block someone coming from a specific IP address from accessing your website, you can use the following code:

  1. RewriteCond %{REMOTE_ADDR} ^(A\.B\.C\.D)$
  2. RewriteRule ^/* http://www.domain.com/sorry.html [L]

Replace the A\.B\.C\.D with the IP address you want to block (don’t forget to leave the “\” before each dot, which escapes the character).

Block Specific User Agents

If you want to block a group of IP addresses using the same User Agent (bot), the following code with do it:

  1. RewriteCond %{HTTP_USER_AGENT} UserAgent
  2. RewriteRule .* - [F,L]

Just replace the “UserAgent” bit with whatever user agent you want to block. You can also block more than one at a time by replacing the top line in that code with something like this:

  1. RewriteCond %{HTTP_USER_AGENT} UserAgentA [OR]
  2. RewriteCond %{HTTP_USER_AGENT} UserAgentB

You can put as many user agents in as you want, just make sure you end each line with [OR] (with the exception of the last line, of course).

Strip Query Strings

Let’s say all the pages on your site other than your home page are formatted as follows, with query strings instead of page names:

http://www.domain.com/home.html?example=12345abcd

Those aren’t very pretty, and on top of that, search engines will show a bunch of duplicated “home” pages. If you want to get rid of the query string in your page URLs, use the following code:

  1. RewriteCond %{QUERY_STRING} example=
  2. RewriteRule (.*) http://www.domain.com/$1? [R=301]

This not only gets rid of the query string, but also the preceding question mark.

Set up a Default Image

Using a default, backup image in case of broken images can make your site look more professional. Use the following code to redirect to a default image for any image whose file cannot be found.

  1. RewriteCond %{REQUEST_FILENAME} !-f
  2. RewriteRule ^images/.*\.jpg$ /images/default.jpg [L]

Of course, you can change the “.jpg” bit to whatever file type you’re using. Make sure you have an image called “default.jpg” or change that to whatever your default image filename is.

Prevent Hotlinking

The last thing most website owners want is other sites stealing their content or worse—hotlinking to their images and stealing their bandwidth. Here’s a simple bit of code that prevents it:

  1. RewriteCond %{HTTP_REFERER} !^$
  2. RewriteCond %{HTTP_REFERER} !^http://(www\.)?domain.com/ .*$ [NC]
  3. RewriteRule \.(gif|jpg|swf|flv|png)$ /feed/ [R=302,L]

Make sure you change the “domain.com” bit to your own domain name.

Redirect to a Maintenance Page

If you need to take your entire site offline for a bit and redirect to a maintenance page (or some other page), use the following code:

  1. RedirectMatch 302 ^/ /maintenancepage.html

Change the “maintenancepage.html” bit to wherever your maintenance page file is located.

Redirect Multiple Domains to a Single Domain

If you have multiple domains pointing to your site, it’s possible you could take a hit in the search engines for having duplicate content. Use the following code to redirect visitors from two domains to just one:

  1. RewriteCond %{HTTP_HOST} ^www.domain.net$ [NC,OR]
  2. RewriteCond %{HTTP_HOST} ^domain.net$ [NC,OR]
  3. RewriteCond %{HTTP_HOST} ^www.domain.net$ [NC]
  4. RewriteRule ^(.*)$ http://domain.net/$1 [R=301,L]

Remember the Filesystem Always Takes Precedence

The filesystem on your server will always take precedence over the rewritten URL. For example, if you have a directory named “services” and within that directory is a file called “design.html”, you can’t have the URL redirect to “http://domain.com/services”. What happens is that Apache goes into the “services” directory and doesn’t see the rewrite instructions.

To fix this, simply rename your directory (adding an underscore to the beginning or end is a simple way to do that).

Remember:

  • Because mod_rewrite works within the .htaccess file, commands are case sensitive.
  • Always back up your .htaccess file before making any changes to it. This way, if there’s a problem, you can easily restore your site.



counter

free counters