Adds by Google

Sunday, 14 June 2009

The Dreamweaver MX tutorials are step-by-step lessons, designed to teach you the fundamentals of Dreamweaver MX. We recommend that you go through the tutorials using the sample files installed in the GettingStarted folder within the Dreamweaver application folder.





The Dreamweaver MX tutorials are step-by-step lessons, designed to teach you the fundamentals of Dreamweaver MX. We recommend that you go through the tutorials using the sample files installed in the GettingStarted folder within the Dreamweaver application folder.

Saturday, 13 June 2009

Using Regular Expressions with PHP

Regular expressions are a powerful tool for examining and modifying text. Regular expressions themselves, with a general pattern notation almost like a mini programming language, allow you to describe and parse text. They enable you to search for patterns within a string, extracting matches flexibly and precisely. However, you should note that because regular expressions are more powerful, they are also slower than the more basic string functions. You should only use regular expressions if you have a particular need.

This tutorial gives a brief overview of basic regular expression syntax and then considers the functions that PHP provides for working with regular expressions.

PHP supports two different types of regular expressions: POSIX-extended and Perl-Compatible Regular Expressions (PCRE). The PCRE functions are more powerful than the POSIX ones, and faster too, so we will concentrate on them.

The Basics

In a regular expression, most characters match only themselves. For instance, if you search for the regular expression "foo" in the string "John plays football," you get a match because "foo" occurs in that string. Some characters have special meanings in regular expressions. For instance, a dollar sign ($) is used to match strings that end with the given pattern. Similarly, a caret (^) character at the beginning of a regular expression indicates that it must match the beginning of the string. The characters that match themselves are called literals. The characters that have special meanings are called metacharacters.

The dot (.) metacharacter matches any single character except newline (\). So, the pattern h.t matches hat, hothit, hut, h7t, etc. The vertical pipe (|) metacharacter is used for alternatives in a regular expression. It behaves much like a logical OR operator and you should use it if you want to construct a pattern that matches more than one set of characters. For instance, the pattern Utah|Idaho|Nevada matches strings that contain "Utah" or "Idaho" or "Nevada". Parentheses give us a way to group sequences. For example, (Nant|b)ucket matches "Nantucket" or "bucket". Using parentheses to group together characters for alternation is called grouping.

If you want to match a literal metacharacter in a pattern, you have to escape it with a backslash.

To specify a set of acceptable characters in your pattern, you can either build a character class yourself or use a predefined one. A character class lets you represent a bunch of characters as a single item in a regular expression. You can build your own character class by enclosing the acceptable characters in square brackets. A character class matches any one of the characters in the class. For example a character class [abc] matches a, b or c. To define a range of characters, just put the first and last characters in, separated by hyphen. For example, to match all alphanumeric characters: [a-zA-Z0-9]. You can also create a negated character class, which matches any character that is not in the class. To create a negated character class, begin the character class with ^: [^0-9].

The metacharacters +, *, ?, and {} affect the number of times a pattern should be matched. + means "Match one or more of the preceding expression", * means "Match zero or more of the preceding expression", and ? means "Match zero or one of the preceding expression". Curly braces {} can be used differently. With a single integer, {n} means "match exactly n occurrences of the preceding expression", with one integer and a comma, {n,} means "match n or more occurrences of the preceding expression", and with two comma-separated integers {n,m} means "match the previous character if it occurs at least n times, but no more than m times".

Now, have a look at the examples:

Regular ExpressionWill match...
fooThe string "foo"
^foo"foo" at the start of a string
foo$"foo" at the end of a string
^foo$"foo" when it is alone on a string
[abc]a, b, or c
[a-z]Any lowercase letter
[^A-Z]Any character that is not a uppercase letter
(gif|jpg)Matches either "gif" or "jpeg"
[a-z]+One or more lowercase letters
[0-9\.\-]Аny number, dot, or minus sign
^[a-zA-Z0-9_]{1,}$Any word of at least one letter, number or _
([wx])([yz])wy, wz, xy, or xz
[^A-Za-z0-9]Any symbol (not a number or a letter)
([A-Z]{3}|[0-9]{4})Matches three letters or four numbers

Perl-Compatible Regular Expressions emulate the Perl syntax for patterns, which means that each pattern must be enclosed in a pair of delimiters. Usually, the slash (/) character is used. For instance, /pattern/.

The PCRE functions can be divided in several classes: matching, replacing, splitting and filtering.

Back to top

Matching Patterns

The preg_match() function performs Perl-style pattern matching on a string. preg_match() takes two basic and three optional parameters. These parameters are, in order, a regular expression string, a source string, an array variable which stores matches, a flag argument and an offset parameter that can be used to specify the alternate place from which to start the search:

preg_match ( pattern, subject [, matches [, flags [, offset]]])

The preg_match() function returns 1 if a match is found and 0 otherwise. Let's search the string "Hello World!" for the letters "ll":

if (preg_match("/ell/", "Hello World!", $matches)) {
  echo "Match was found
";
  echo $matches[0];
}
?>

The letters "ll" exist in "Hello", so preg_match() returns 1 and the first element of the $matches variable is filled with the string that matched the pattern. The regular expression in the next example is looking for the letters "ell", but looking for them with following characters:

if (preg_match("/ll.*/", "The History of Halloween", $matches)) {
  echo "Match was found
";
  echo $matches[0];
}
?>

Now let's consider more complicated example. The most popular use of regular expressions is validation. The example below checks if the password is "strong", i.e. the password must be at least 8 characters and must contain at least one lower case letter, one upper case letter and one digit:

$password = "Fyfjk34sdfjfsjq7";

if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password)) {
    echo "Your passwords is strong.";
} else {
    echo "Your password is weak.";
}
?>

The ^ and $ are looking for something at the start and the end of the string. The ".*" combination is used at both the start and the end. As mentioned above, the .(dot) metacharacter means any alphanumeric character, and * metacharacter means "zero or more". Between are groupings in parentheses. The "?=" combination means "the next text must be like this". This construct doesn't capture the text. In this example, instead of specifying the order that things should appear, it's saying that it must appear but we're not worried about the order.

The first grouping  is (?=.*{8,}). This checks if there are at least 8 characters in the string. The next grouping (?=.*[0-9]) means "any alphanumeric character can happen zero or more times, then any digit can happen". So this checks if there is at least one number in the string. But since the string isn't captured, that one digit can appear anywhere in the string. The next groupings (?=.*[a-z]) and (?=.*[A-Z]) are looking for the lower case and upper case letter accordingly anywhere in the string.

Finally, we will consider regular expression that validates an email address:

$email = firstname.lastname@aaa.bbb.com;
$regexp = "/^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/";

if (preg_match($regexp, $email)) {
    echo "Email address is valid.";
} else {
    echo "Email address is not valid.";
}
?>

This regular expression checks for the number at the beginning and also checks for multiple periods in the user name and domain name in the email address. Let's try to investigate this regular expression yourself.

For the speed reasons, the preg_match() function matches only the first pattern it finds in a string. This means it is very quick to check whether a pattern exists in a string. An alternative function, preg_match_all(), matches a pattern against a string as many times as the pattern allows, and returns the number of times it matched.

Back to top

Replacing Patterns

In the above examples, we have searched for patterns in a string, leaving the search string untouched. Thepreg_replace() function looks for substrings that match a pattern and then replaces them with new text.preg_replace() takes three basic parameters and an additional one. These parameters are, in order, a regular expression, the text with which to replace a found pattern, the string to modify, and the last optional argument which specifies how many matches will be replaced.

preg_replace( pattern, replacement, subject [, limit ])

The function returns the changed string if a match was found or an unchanged copy of the original string otherwise. In the following example we search for the copyright phrase and replace the year with the current.

echo preg_replace("/([Cc]opyright) 200(3|4|5|6)/", "$1 2007", "Copyright 2005");
?>

In the above example we use back references in the replacement string. Back references make it possible for you to use part of a matched pattern in the replacement string. To use this feature, you should use parentheses to wrap any elements of your regular expression that you might want to use. You can refer to the text matched by subpattern with a dollar sign ($) and the number of the subpattern. For instance, if you are using subpatterns, $0 is set to the whole match, then $1, $2, and so on are set to the individual matches for each subpattern.

In the following example we will change the date format from "yyyy-mm-dd" to "mm/dd/yyy":

echo preg_replace("/(\d+)-(\d+)-(\d+)/", "$2/$3/$1", "2007-01-25");
?>

We also can pass an array of strings as subject to make the substitution on all of them. To perform multiple substitutions on the same string or array of strings with one call to preg_replace(), we should pass arrays of patterns and replacements. Have a look at the example:

$search = array ( "/(\w{6}\s\(w{2})\s(\w+)/e",
                  "/(\d{4})-(\d{2})-(\d{2})\s(\d{2}:\d{2}:\d{2})/");

$replace = array ('"$1 ".strtoupper("$2")',
                  "$3/$2/$1 $4");

$string = "Posted by John | 2007-02-15 02:43:41";      

echo preg_replace($search, $replace, $string);?>

In the above example we use the other interesting functionality - you can say to PHP that the match text should be executed as PHP code once the replacement has taken place. Since we have appended an "e" to the end of the regular expression, PHP will execute the replacement it makes. That is, it will take strtoupper(name) and replace it with the result of the strtoupper() function, which is NAME.

Back to top

Array Processing

PHP's preg_split() function enables you to break a string apart basing on something more complicated than a literal sequence of characters. When it's necessary to split a string with a dynamic expression rather than a fixed one, this function comes to the rescue. The basic idea is the same as preg_match_all() except that, instead of returning matched pieces of the subject string, it returns an array of pieces that didn't match the specified pattern. The following example uses a regular expression to split the string by any number of commas or space characters:

$keywords = preg_split("/[\s,]+/", "php, regular expressions");
print_r( $keywords );
?>

Another useful PHP function is the preg_grep() function which returns those elements of an array that match a given pattern. This function traverses the input array, testing all elements against the supplied pattern. If a match is found, the matching element is returned as part of the array containing all matches. The following example searches through an array and all the names starting with letters A-J:

$names = array('Andrew','John','Peter','Nastin','Bill'); 
$output = preg_grep('/^[a-m]/i', $names); 
print_r( $output );
?>

Saturday, 30 May 2009

Simple Website Button

We will learn to draw web button with this tutorial. 

Create a new file (File>New) having 450x450 px and 72 dpi.
Next we’ll use the Rounded Rectangle Tool (U) to represent the primary layer of the button we’ll represent below. 

Create Simple Website Button in Photoshop CS

Create Simple Website Button in Photoshop CS

The layer’s parameters:
Blending Options>Drop Shadow 

Create Simple Website Button in Photoshop CS

Blending Options>Inner Shadow

Create Simple Website Button in Photoshop CS

Blending Options>Gradient Overlay

Create Simple Website Button in Photoshop CS

Gradient’s parameters: 

Create Simple Website Button in Photoshop CS

Blending Options>Stroke

Create Simple Website Button in Photoshop CS

Gradient’s parameters: 

Create Simple Website Button in Photoshop CS

Create Simple Website Button in Photoshop CS

Using the details from the next table, we’ll try to write the button’s name: 

Create Simple Website Button in Photoshop CS

Create Simple Website Button in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Simple Website Button in Photoshop CS

Blending Options>Gradient Overlay

Create Simple Website Button in Photoshop CS 
Gradient’s parameters: 

Create Simple Website Button in Photoshop CS

Create Simple Website Button in Photoshop CS

Select now the Rectangle Tool (U) to represent on the lowest button’s half a darkening: 

Create Simple Website Button in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Simple Website Button in Photoshop CS

Gradient’s parameters: 

Create Simple Website Button in Photoshop CS

Create Simple Website Button in Photoshop CS

Drawing the button is finished! 

Monday, 18 May 2009

What is the
Crop Tool?




 

The Crop Tool allows you to delete unwanted portions of an image. Please note that the Crop Tool only lets you crop rectangular selections.

 

 

 

How do I
crop an image?

 1) Choose crop tool. View the original image, and select the Crop Tool from the toolbox.

 

  
Original Image



2) Select area to crop. Starting in any corner, click and drag the mouse over the portion of the image you want to keep. (The portions outside of the crop marks will become gray to help you see the exact area that will be cropped.)

The crop marks can be resized using the handlebars along the “marching ants” marquee.

    The entire crop marquee can be moved around over the image by placing the cursor inside the crop marks. When the cursor changes to a black arrow, the entire marquee may be moved.


    Marked Image



    3) Crop. After the marquee is the proper size and in the correct position, press Enter to crop the image.


    Cropped Image

     

    Photoshop: Selection Tools

    What are Selection Tools?



     

     

     

     

     

    The selection tools allow you to select a portion or a subset of an image to work on. Most of Photoshop’s other tools and filters can then be applied to this selected area, altering its color, shape, texture, position and/or other attributes, while leaving the rest of the image untouched.

    Photoshop contains three types of selection tools: the Marquee Tools, the Lasso Tools, and the Magic Wand.

    The marquee tools are used to select a specific regularly shaped area. The marquee tools include the Rectangular, Elliptical, Single Row and Single Column Marquees:

    The lasso tools are used to select an irregular area. These tools include the Lasso Tool, the Polygonal Lasso Tool and the Magnetic Lasso Tool.

    The Magic Wand  is used to select areas of an image based upon color; the Magic Wand does not have additional tools.

    All of the selection tools may be used individually or in conjunction with each other to select exact areas of images. The Options Bar allows you to choose to add to or subtract from a previous selection:


       If you choose New Selection, any currently active selection will go away when you make your new selection. If instead you would like to add to the current selection, or subtract from it, make that choice in the Options Bar. You can even choose to select an area formed by the intersection of your selections.


     
     How do I use
    the Marquee Tools?
     The marquee tools let you select rectangles, ellipses, and 1-pixel-wide rows and columns.

    To use the marquee tools:

    1) Select a marquee tool: Rectangular (for a rectangular selection), Elliptical (for an elliptically shaped selection), Single Row (for a one-pixel wide row) or Single Column (for a one-pixel wide column).

    2) Set the options you want in the Options Bar.

    3) Drag over the area you want to select. Hold down the Shift key if you want to constrain the selection to a square or a circle.

     

     
     How do I use
    the Lasso Tools?
     

    The Lasso Tool and Polygonal Lasso Tool let you draw irregular selection borders (both straight-edged and freehand):

    • If you want the selection to be completely or primarily freehand (with a minimum of straight edges) then use the Lasso Tool. 

    • If you want the selection to be completely or primarily straight edges (with a miminum of freehand edges) then use the Polygonal Lasso Tool.

    With the Magnetic Lasso Tool, you can draw the selection border, and it will automatically snap to a high-contrast edge in the graphic.

    To use the Lasso Tool:

    1) Select the Lasso Tool from the Toolbox.

    2) Set any desired options in the Options Bar.

    3) To draw a freehand segment of the selection, simply drag the mouse.

    4) To draw a straight-edged segment of the selection, hold down the Alt key and click at the desired beginning and end points of the segment.

    5) To close the selection border, let go of the mouse button (without holding down the Alt key).

    To use the Polygonal Lasso Tool:

    1) Select the Polygonal Lasso Tool from the Toolbox.

    2) Set any desired options in the Options Bar.

    3) To draw a straight-edged segment of the selection, click at the desired beginning and end points of the segment.

    4) To draw a freehand segment of the selection, hold down the Alt key and drag the mouse.

    5) To close the selection border, double-click the mouse button.

      
    Tip: Think of the Lasso Tool and the Polygonal Lasso Tool as opposites of each other. One (the Lasso Tool) usually does freehand selections, but can be forced to make straight lines by holding down the Alt key, while the other (the Polygonal Lasso Tool) does straight line selections, but can be forced to do freehand by holding down the Alt key.


       

    To use the Magnetic Lasso Tool:

    1) Select the Magnetic Lasso Tool from the Toolbox.

    2) Set any desired options in the Options Bar.

    3) Click to set the first endpoint of the selection.

    4) To draw a freehand segment, move the mouse pointer along the edge you want to trace. (You don’t have to hold down the mouse button, although you can if you like.)

    5) As you move the pointer, the selection will automatically snap to the strongest edge in the area around the pointer, based on the Width set in the Options Bar. Periodically, intermediate points are added to the selection border. While tracing the edge, click to add a point if needed.

    6) If you want to switch to either the regular Lasso Tool or the Polygonal Lasso Tool, hold down the Alt key. At that point, dragging the mouse will let you draw freehand borders; clicking will let you draw straight line segments.

    7) Close the selection border by double-clicking the mouse.


     

    How do I use
    the Magic Wand?

    The Magic Wand Tool lets you select areas of an image based on similar shades of color simply by clicking on the desired color.

    To use the Magic Wand Tool:

    1) Select the Magic Wand Tool from the Toolbox.

    2) Set the desired options in the Options Bar:

     




       
    • Choose whether to 
      - create a new selection, 
      - add to an existing selection, 
      - subtract from an existing selection, or 
      - intersect with the existing selection.

    • Enter a value from 0 to 255 in theTolerance box. A low number will let you select colors very similar to the pixel you click; a high number will let you select a broader range of colors.

    • To select only adjacent areas using the same colors, select Contiguous. Otherwise, all pixels using the same colors will be selected.

    • Check or un-check the Contiguous option. If Contiguous is not selected, all pixels that are the same color as the selected pixel will be selected, wherever they occur in the image. Otherwise, only adjacent pixels of the same color will be selected.

    3) Click the color you want to select.

     




     

     

     

    An example

     

     

     

     

    To create the image at the bottom, we started with a photograph of a bouquet of daffodils:

     
    Original Image


    First we selected the yellow color ranges in the image, using the Magic Wand:

     
    Magic Wand Selection


    Next, we adjusted the selection to include just a single flower, using the Lasso Tool and the “add to” and “subtract from” selection options:

     
    Adjusted Selection


    Once only the single daffodil remained selected, we copied that selection and pasted it into a new file. We also created a green background layer. The result:


    Final Image

     

     

     

     

     

     

     

     

    Photoshop: Opacity


     

    What is opacity?

     

    Opacity refers to the amount of transparency a layer has. For instance, if a layer’s opacity is set to 100%, then that layer is completely opaque (in other words, you can’t see through it). If a layer’s opacity is set to 50%, then it is see-through, or moderately transparent, and layers behind it can show through. On the other end of the scale, if a layer’s opacity is set to 0%, then that layer is completely transparent (that is, invisible).

     

     
     

     

    How do I change opacity?

    The Layers palette contains a slider bar for Opacity. The opacity setting for each layer can be adjusted simply by highlighting the desired layer and adjusting the slider bar.




     
     

     

     

    An example
    This image is set to the standard (or “default”) opacity setting of 100%:


    Before


    The following image was created by:

    • setting the opacity of the above image to 20%;
    • pasting an image of a lone daffodil into a layer behind the original image and setting the opacity of that layer to 70%;
    • and creating a text layer and placing it on top of the orginal image.


    After

    As you can see, the text is on top of the faded flowers so that it stands out. The lone daffodil is behind the original faded image; this way the faded flowers act as a wash over the top of the lone daffodil so that it blends in slightly with the other flowers.


     


    What are layer styles?

    Photoshop: Layer Styles

    Layer styles are special effects that can be applied to an entire layer overall. Layer styles include a variety of lighting effects, textures and overlays. To give you a better idea of what a style is, here is an original graphic, and then the same graphic with some various styles applied:

     

     


    Original Graphic
    (note that the computer
    and grey background are
    two different layers)



    Outer Shadow

    Inner Shadow

    Inner Bevel

    Pillow Emboss

    Outer Glow

    Inner Glow

    Stroke

    Color Overlay
     
     
     
     

    How do I use layer styles?

     

    To see the layer styles available to you, either pull down the Layer menu and select Layer Style, or click the small button located at the bottom of the Layers palette. In either case, you will be presented with a menu. Selecting a style will apply it to whichever layer is currently selected.


    After you have made your selection, the Layer Style dialog box will appear:

     
      

     

     
       

    This dialog lets you modify specific settings, or characteristics, for the selected style. The options available in the dialog box vary depending up on which style was chosen.

     

     
      

    Once the Layer Style dialog box is open, you can add additional styles to the same layer by checking them on the left.

     

     
      

    To make changes to the default settings for a style, click the style name on the left and the settings for that style will appear on the right. You can then make modifications as you wish. Click OK when you are finished.

     

     
       Looking at the Layers palette, you can now see that the selected styles appear attached to the layer they affect:

    If you want to make changes to the style later, just double click its name in the Layers palette and the Layers Style dialog box will appear.

     

    Tip: Remember that layer styles affect an entire layer. If you have a part of an image that you want to set off from the rest by using a layer style, you must separate that part and put it on its own layer. Here’s what happens when we apply a drop shadow and inner bevel to a “flat” image, and to an image on a separate layer:


    computer and background
    on one layer


    computer on
    separate layer

     

     
      
      

    Some examples

     

    Click on a style to the left to see the options available for each style, and to see an example of the selected layer style when applied to a text layer.

     

     

    The final example below shows how you can combine layer styles on a single layer to create a unique effect. The text layer below has the Drop Shadow, Inner Shadow, Stroke, and Bevel and Emboss styles applied:



     
        


    It is impossible to describe all of the different features and combinations of layer styles. At this point you should practice applying some yourself! Don’t forget to try some of the special settings for each style. Experimenting is the best way to begin to really understand the possibilities of layer styles.