Saturday, February 28, 2009
what do you want to learn?
I am teaching anything free ! yup all you have to do is tell me what help you need with and what you want to learn ! I can get you the best ebooks for free and teach you coacking on my blog free just leave a comment on what you need help with ! or what you want to learn ! It would be best if you could leave your email but thats (optional ) you cant don't leave your email if you dont want to .
Saturday, February 21, 2009
My fun blog
Well eveyone gets tired of coding online whether its phyton or what not even html or xml it's all tiring . CSS , java script tried it all keep doing it you get tired that's why I started http://whoismarkfrancis.blogspot.com/ so if you wanna chill and relax check my blog click here my name is mark francis
Complete Debian Linux Server Setup Tutorials
This is atep by step tutorials how to setup Debian server this includes
Debian Installation
FTP Server Setup in debian
Webserver Setup in Debian
Samba Server Setup in Debian
Database Server Setup in Debian
Time clock sync for debian server
Mail Server Configuration in Debian
VNC Server setup in Debian
Proxy Server Setup in Debian
SSH Server Setup in Debian
tftp Server Setup in Debian
DHCP Server Setup in Debian
IPtables Configuration in Debian
DNS Server Setup in debian
Complete Debian linux Server Setup Tutorial
Debian Installation
FTP Server Setup in debian
Webserver Setup in Debian
Samba Server Setup in Debian
Database Server Setup in Debian
Time clock sync for debian server
Mail Server Configuration in Debian
VNC Server setup in Debian
Proxy Server Setup in Debian
SSH Server Setup in Debian
tftp Server Setup in Debian
DHCP Server Setup in Debian
IPtables Configuration in Debian
DNS Server Setup in debian
Complete Debian linux Server Setup Tutorial
Adobe Photoshop: create a transparent navigation bar
This tutorial will teach you how to create a transparent navigation bar for your website, similar to the navigation at the Microsoft Vista website.
1) Start by creating a new image in Photoshop with a height and width of 700*70px.
2) Filling the first layer with a dark background makes working on semitransparent layers much easier. After you have done this, create a new layer and grab the rounded rectangle tool. Set the radius to 60px and draw a rounded rectangle like this one:
tnip001.png
3) Go into this layer’s blending options (layer>layer style>blending options) and use the following settings:
tnip002.png
tnip003.png
tnip004.png
tnip005.png
4) Click on OK and move to the layer pallet where you should set the fill of this layer to 0% and end up with something looking like this:
tnip006.png
5) Now you have the main bar but you still need to give it a bit more of a transparent look. Create a new layer and grab the Elliptical Marquee tool.
This is where you should put your cursor to start dragging out the marquee:
tnip007.png
This is where you should have placed your cursor when you have finished the marquee:
tnip008.png
6) You need to cut across this selection with another one so that when you fill it, the black background isn’t filled as well. To take a cut away from one selection using another you need to hold down the alt key. Start a rectangular marquee across the top of the image.
This is what it looks like just before you take your finger off the mouse button:
tnip009.png
7) You now need to fill the selection in white using the Paint Bucket tool and drag the layer opacity down to about 11% before deselecting the selection using selection>deselect.
8) You will now have to follow steps 5 – 7 twice more on two new layers, until you have something resembling this:
tnip010.png
9) Now you will have to split this up so that you can put different buttons on it, and to make this easier you should create guides along the width at: 150px, 283px, 416px, 550px using view>new guide.
10) Then grab the eraser tool (e) and select the layer with the original navigation bar on it from the layers pallet. Set the eraser to 1px wide and rasterize the selected layer by right clicking on it and selecting rasterize layer.
11) Now zoom in (ctrl+) and erase the layer along the guides to create a blue line which is the stroke that you set earlier:
tnip011.png
12) All that remains is to add the text for the buttons. Create 5 new layers and write your text for each button, one per layer. In this tutorial the font used is Tahoma at 24pt in white.
13) Align the text to ensure they are all in line by using the guides, and clear the old guides by clicking view>clear guides.
14) Now your text is aligned, add a shadow to each piece of button text by first opening the blending option for the layer and entering the following shadow settings:
tnip012.png
15) Click OK and then add these settings to each layer by right clicking on this layer and selecting copy layer styles. Right click on each of the other text layers and select paste layer styles.
16) Finally, you can replace your background layer with an image or a pattern of your choosing.
You should end up with something that looks not unlike this:
tnip013.png
Note that if you choose to save this navigation bar without an opaque background like the image above has, then you have to save it as a 24 bit PNG file which gives you alpha channel transparency. What this means is that you can place it above an image on a website and you will still be able to see the image behind it. Here is that same navigation bar but saved as a PNG file without a background:
tnip014.png
1) Start by creating a new image in Photoshop with a height and width of 700*70px.
2) Filling the first layer with a dark background makes working on semitransparent layers much easier. After you have done this, create a new layer and grab the rounded rectangle tool. Set the radius to 60px and draw a rounded rectangle like this one:
tnip001.png
3) Go into this layer’s blending options (layer>layer style>blending options) and use the following settings:
tnip002.png
tnip003.png
tnip004.png
tnip005.png
4) Click on OK and move to the layer pallet where you should set the fill of this layer to 0% and end up with something looking like this:
tnip006.png
5) Now you have the main bar but you still need to give it a bit more of a transparent look. Create a new layer and grab the Elliptical Marquee tool.
This is where you should put your cursor to start dragging out the marquee:
tnip007.png
This is where you should have placed your cursor when you have finished the marquee:
tnip008.png
6) You need to cut across this selection with another one so that when you fill it, the black background isn’t filled as well. To take a cut away from one selection using another you need to hold down the alt key. Start a rectangular marquee across the top of the image.
This is what it looks like just before you take your finger off the mouse button:
tnip009.png
7) You now need to fill the selection in white using the Paint Bucket tool and drag the layer opacity down to about 11% before deselecting the selection using selection>deselect.
8) You will now have to follow steps 5 – 7 twice more on two new layers, until you have something resembling this:
tnip010.png
9) Now you will have to split this up so that you can put different buttons on it, and to make this easier you should create guides along the width at: 150px, 283px, 416px, 550px using view>new guide.
10) Then grab the eraser tool (e) and select the layer with the original navigation bar on it from the layers pallet. Set the eraser to 1px wide and rasterize the selected layer by right clicking on it and selecting rasterize layer.
11) Now zoom in (ctrl+) and erase the layer along the guides to create a blue line which is the stroke that you set earlier:
tnip011.png
12) All that remains is to add the text for the buttons. Create 5 new layers and write your text for each button, one per layer. In this tutorial the font used is Tahoma at 24pt in white.
13) Align the text to ensure they are all in line by using the guides, and clear the old guides by clicking view>clear guides.
14) Now your text is aligned, add a shadow to each piece of button text by first opening the blending option for the layer and entering the following shadow settings:
tnip012.png
15) Click OK and then add these settings to each layer by right clicking on this layer and selecting copy layer styles. Right click on each of the other text layers and select paste layer styles.
16) Finally, you can replace your background layer with an image or a pattern of your choosing.
You should end up with something that looks not unlike this:
tnip013.png
Note that if you choose to save this navigation bar without an opaque background like the image above has, then you have to save it as a 24 bit PNG file which gives you alpha channel transparency. What this means is that you can place it above an image on a website and you will still be able to see the image behind it. Here is that same navigation bar but saved as a PNG file without a background:
tnip014.png
Adobe Photoshop: add a white photo frame to your images
In this tutorial you will learn how to create a stylish looking content box for your website. Before you start, however, you will need to have two custom patterns which should each be from a 5*5px image that just has a pencil line drawn diagonally across it. You need to create one of these with the pencil line color #000000 and one with #1b9a1b.
1) In Photoshop create a new document, sized 900*900px, and with a transparent background. You are creating a box that is so big so that you can use it for any piece of content simply by resizing it.
2) Fill the first layer in white for visibility purposes by using the Paint Bucket tool.
3) Now create a new layer and select the rounded rectangle tool. Set the radius to 60px, the color fill is not important for now. Your image should look like this:
iscb001.png
4) You need to add some layer styles to this, so right click on this layer within the layer pallet and select blending options, then add the following styles using the colors as typed on the images below:
iscb002.png
iscb003.png
iscb004.png
iscb005.png
iscb006.png
iscb007.png
5) Now you have the basic look of the box itself and you could just leave it there. However, you are going to add more detail to the content box before you are finished. Your image should now look something like this:
iscb008.png
6) Create a new layer and select the rounded rectangle tool, because you are going to add some detail to each side of the box. You need to drag a rectangle out so that only half of it is inside the content box and then select the move tool, click on the centre of the bounding box, right click in the bounding box and select warp. You will now be able to deform the shape to how you want it to look, remember that anything outside of the content box you will be getting rid of.
iscb009.png
7) Click the tick and use the normal move tool to make it the perfect size before right clicking on this layer in the layer pallet and selecting rasterize layer.
8) Now select the rectangle marquee tool and use this to cut out all of the shape that exists outside of the content box as follows:
iscb010.png
9) It is highly likely that some of your shape will still exist outside of the canvas, in which case select the crop tool and drag it out so it covers the whole of your canvas but does not go outside it. Click the tick and you will have your shape on its own with no other bits.
10) You now need to duplicate this layer so go to the layer pallet and right click on the layer containing your shape and select duplicate layer. In fact, do this twice and name your original shape layer as ‘left shape’ with one of your duplicates ‘right shape’ and the other ‘bottom shape.’
11) You need to place these layers on the sides that their names correspond to by selecting the layer called ‘right shape’ and clicking edit>transform>Flip Horizontal. Then use the move tool and the arrow keys on your keyboard, as this is most accurate, to move it over to the right hand side of your content box.
12) Select the layer called ‘bottom shape’ and click edit>transform>rotate 90° CCW then use the move tool to move it to the centre of the bottom of your content box.
13) Your shapes will probably be black or another pretty boring color, so select the layer called ‘left shape’ and drag the fill arrow down to 0%.
iscb011.png
14) Select the blending options for this layer and use the following settings:
iscb012.png
iscb013.png
iscb014.png
iscb015.png
15) Click OK. The left shape should now look a lot better so you can now copy this to the other two layers by right click on the ‘left shape’ layer and selecting ‘copy layer styles’ then right clicking on each of the other two layers and selecting ‘paste layer styles’.
Your finished content box should look something like this:
iscb016.png
1) In Photoshop create a new document, sized 900*900px, and with a transparent background. You are creating a box that is so big so that you can use it for any piece of content simply by resizing it.
2) Fill the first layer in white for visibility purposes by using the Paint Bucket tool.
3) Now create a new layer and select the rounded rectangle tool. Set the radius to 60px, the color fill is not important for now. Your image should look like this:
iscb001.png
4) You need to add some layer styles to this, so right click on this layer within the layer pallet and select blending options, then add the following styles using the colors as typed on the images below:
iscb002.png
iscb003.png
iscb004.png
iscb005.png
iscb006.png
iscb007.png
5) Now you have the basic look of the box itself and you could just leave it there. However, you are going to add more detail to the content box before you are finished. Your image should now look something like this:
iscb008.png
6) Create a new layer and select the rounded rectangle tool, because you are going to add some detail to each side of the box. You need to drag a rectangle out so that only half of it is inside the content box and then select the move tool, click on the centre of the bounding box, right click in the bounding box and select warp. You will now be able to deform the shape to how you want it to look, remember that anything outside of the content box you will be getting rid of.
iscb009.png
7) Click the tick and use the normal move tool to make it the perfect size before right clicking on this layer in the layer pallet and selecting rasterize layer.
8) Now select the rectangle marquee tool and use this to cut out all of the shape that exists outside of the content box as follows:
iscb010.png
9) It is highly likely that some of your shape will still exist outside of the canvas, in which case select the crop tool and drag it out so it covers the whole of your canvas but does not go outside it. Click the tick and you will have your shape on its own with no other bits.
10) You now need to duplicate this layer so go to the layer pallet and right click on the layer containing your shape and select duplicate layer. In fact, do this twice and name your original shape layer as ‘left shape’ with one of your duplicates ‘right shape’ and the other ‘bottom shape.’
11) You need to place these layers on the sides that their names correspond to by selecting the layer called ‘right shape’ and clicking edit>transform>Flip Horizontal. Then use the move tool and the arrow keys on your keyboard, as this is most accurate, to move it over to the right hand side of your content box.
12) Select the layer called ‘bottom shape’ and click edit>transform>rotate 90° CCW then use the move tool to move it to the centre of the bottom of your content box.
13) Your shapes will probably be black or another pretty boring color, so select the layer called ‘left shape’ and drag the fill arrow down to 0%.
iscb011.png
14) Select the blending options for this layer and use the following settings:
iscb012.png
iscb013.png
iscb014.png
iscb015.png
15) Click OK. The left shape should now look a lot better so you can now copy this to the other two layers by right click on the ‘left shape’ layer and selecting ‘copy layer styles’ then right clicking on each of the other two layers and selecting ‘paste layer styles’.
Your finished content box should look something like this:
iscb016.png
PHP Tutorial Part One: Getting Started with PHP
Programming in PHP is fun and easy. It is a very powerful scripting language that takes simple HTML and turns it into a fully-interactive experience for the web user. Let's get started!
Note: These tutorials assume that you have a working web server that's capable of displaying PHP code and that you have PHP installed on that web server system or that you're using a server that is equipped and ready.
You can run PHP on Windows. You can even use PHP with IIS (The Windows Web Server) so you don't necessarily need Unix/Linux and Apache.
PHP Reference
Your best reference for all things PHP is the PHP web site: www.php.net. Go there and bookmark it--you'll refer to it often.
PHP Speaks HTML
The first thing you have to learn and always remember is that if you use even one line of PHP code in an HTML file, you must name the file with a .php extension. The .php extension tells the web server that this file is special and needs special handling by the PHP executable and related libraries.
Delimit Your PHP
Second, all PHP functions and code must be inserted between the following delimiters --the less than question mark opens the code and the question mark greater than close. You must always use delimiters in pairs--an opening delimiter and closing delimiter. Delimiters are symbols that tell the web server what kind of content follows and how it should be handled. HTML uses delimiters too .
Example 1: How About a Date?
If you want to add the current date to a web page, the code would look like:
Explanation: The 'echo' command tells the PHP program to echo the results that follow to the screen. Since you're using HTML and the browser is your "screen", that's where you see the results. The date function is a built-in PHP program that display the date in the format you specify in the parentheses.
Save the file with the filename, test.php.
Open the file by pointing your browser to the file on the webserver and you should see:
Jan-19-2009 (you'll see the current date)
Try changing the date format by moving things around ("d-M-Y") or just using one of the date variables ("Y"). Refer to the PHP documentation to get a full range of date variables. It's fun and useful.
The full list of PHP date-related functions are here.
Example 2: Who's Looking at You, Kid?
If you want to gather some info about the people that are looking at your site or if you just want to let them know you're watching, you can easily echo some of their information back to them by using what's known as Server Variables.
Note: This is not personal information, nor are you stealing anything from them. It is information that is transferred to your website when a visitor connects to your webpages.
You can get their IP Address and their Browser and Computer information. The IP Address is how computers communicate with each other on the Internet--think of it as kind of like a phone number or home address.
To see this information, edit your test.php file again and enter the following:
Explanation: The line is HTML for start a new Paragraph. The next line, sends the text, "Your IP Address is " to your browser. The dot (.) is PHP for concatenate or connect these two things. $SERVER['REMOTE_ADDR'] is a built-in Server variable that echoes the viewing browser's IP Address to their browser.
Save this file and point your browser to test.php.
You should see:
Jan-19-2009 (Current Date)
Your IP Address is 10.0.1.200 (The IP Address of Your Computer)
There are several variables from which to choose here. The complete list is located at: PHP:$_SERVER.
Change the Server variable or add new ones. For starters, try: HTTP_USER_AGENT to see your browser and computer information.
Stay tuned for PHP Tutorial Part Two: Combining HTML and PHP where you'll get a taste of how to integrate these two languages in a more elegant fashion. Don't worry, it's easy and you'll like the way it works. It's easier to read and more fun to write.
Note: These tutorials assume that you have a working web server that's capable of displaying PHP code and that you have PHP installed on that web server system or that you're using a server that is equipped and ready.
You can run PHP on Windows. You can even use PHP with IIS (The Windows Web Server) so you don't necessarily need Unix/Linux and Apache.
PHP Reference
Your best reference for all things PHP is the PHP web site: www.php.net. Go there and bookmark it--you'll refer to it often.
PHP Speaks HTML
The first thing you have to learn and always remember is that if you use even one line of PHP code in an HTML file, you must name the file with a .php extension. The .php extension tells the web server that this file is special and needs special handling by the PHP executable and related libraries.
Delimit Your PHP
Second, all PHP functions and code must be inserted between the following delimiters --the less than question mark opens the code and the question mark greater than close. You must always use delimiters in pairs--an opening delimiter and closing delimiter. Delimiters are symbols that tell the web server what kind of content follows and how it should be handled. HTML uses delimiters too .
Example 1: How About a Date?
If you want to add the current date to a web page, the code would look like:
Explanation: The 'echo' command tells the PHP program to echo the results that follow to the screen. Since you're using HTML and the browser is your "screen", that's where you see the results. The date function is a built-in PHP program that display the date in the format you specify in the parentheses.
Save the file with the filename, test.php.
Open the file by pointing your browser to the file on the webserver and you should see:
Jan-19-2009 (you'll see the current date)
Try changing the date format by moving things around ("d-M-Y") or just using one of the date variables ("Y"). Refer to the PHP documentation to get a full range of date variables. It's fun and useful.
The full list of PHP date-related functions are here.
Example 2: Who's Looking at You, Kid?
If you want to gather some info about the people that are looking at your site or if you just want to let them know you're watching, you can easily echo some of their information back to them by using what's known as Server Variables.
Note: This is not personal information, nor are you stealing anything from them. It is information that is transferred to your website when a visitor connects to your webpages.
You can get their IP Address and their Browser and Computer information. The IP Address is how computers communicate with each other on the Internet--think of it as kind of like a phone number or home address.
To see this information, edit your test.php file again and enter the following:
echo "";
echo "Your IP Address is " . $_SERVER['REMOTE_ADDR'];
?>
Explanation: The line
echo "";
echo "Your IP Address is " . $_SERVER['REMOTE_ADDR'];
Save this file and point your browser to test.php.
You should see:
Jan-19-2009 (Current Date)
Your IP Address is 10.0.1.200 (The IP Address of Your Computer)
There are several variables from which to choose here. The complete list is located at: PHP:$_SERVER.
Change the Server variable or add new ones. For starters, try: HTTP_USER_AGENT to see your browser and computer information.
Stay tuned for PHP Tutorial Part Two: Combining HTML and PHP where you'll get a taste of how to integrate these two languages in a more elegant fashion. Don't worry, it's easy and you'll like the way it works. It's easier to read and more fun to write.
Subscribe to:
Posts (Atom)
