the 30 minute website creation tutorial.

(This tutorial by Carl van Tonder November 2005. All rights reserved)
(Permission granted to be displayed here.)

1. Who is this for?
This tutorial is for anyone who wants to create a website. There are many 'website' tutorials out there, but basic HTML is not a website. Nor is PHP, Javascript, business planning or any other out-of-focus subject vaguely related to web design.
The website I will help you create will be yours, and that is a critical aspect of this tutorial. No templates will be used and no source will be provided (but I will tell you how to use both effectively). This method will work for a business website, a personal blog, the website of software you have created; anything. It is a guide to creating a good website.

2. Conventions and practices
I will be assuming that you have a working knowledge of all discussed technologies (HTML, FTP etc.),or a readiness to learn at least how to implement them.
I myself use Bluefish for code editing, or failing that PHP Designer 2005. Failing that, notepad. At no stage along this path will I advise the use of WYSIWYG tools. I personally do not make heavy use of images, but I will explain how to implement them properly. I will not advise the use of Flash for anything other than short videos, cartoons and games. If you desperately want these, look elsewhere. I don't believe in other usages of Flash but many do and will be happy to help.

3. Stage 1: Planning
When thinking about your website, consider the following important questions:

What will it be about?
The following are suitable answers to this question:
- A personal blog
- The homepage of a piece of software or a gallery of graphics you have created
- A webdesign resource with tutorials, graphics and templates
- A fan site
- or anything else that is similarly specific....
It is dangerous in terms of focus and coherence to combine things, e.g. make a Harry Potter fansite that's also got Gorrilaz song lyrics. The number of people who like Harry Potter and Gorrilaz is going to be far smaller than either the number of people who like Harry Potter or Gorrilaz. Consider making two websites if your passions are that strong

One thing that does go well with other things is a blog, but it is not necessarily a good idea to merge the two to a huge extent (e.g. have development updates on your software on the same page as how great your holiday is Barbados was). Bear in mind that if you offer two distinct things on your website, some visitors only want one.

Who are you aiming at?
This is linked with the above, and should probably be decided at the same time as the subject material of your website. This will have a great impact on later design choices, so make sure you plan it carefully. Ensure that if you identify more than one distinct group of people you are aiming at you are able to divide your website in a similar way to your viewers, e.g. different sections or mayber even different websites.

Are you going to try and make money?
If the answers to the above two questions create a large enough group of potential target visitors then you may well be able to at least pay your own website bills from it. Consider things like keyword rankings and how well sites based on similar topics are doing. Also consider whether there is a gap in the market or whether it is sort of saturated. Remember, however, that this is a delicate balance and aiming too niche will make you lose visitors again. Making money from a website is a very complex science and I will not dwell on it too much for the benefit of those who aren't soulless capitalists.

How much work are you willing to put in?
A good website is a significant commitment. A news- or article-based website requires frequently-updated content to draw visitors, and even an active forum requires near-constant moderation to keep standards high and visitors returning. The best way of ensuring visitors is to create original content, and bear in mind that simply indexing or reproducing others' work is unlikely to get you anywhere unless this is actually a useful service.
A graphics website needs graphics, a Blog needs blog posts, a news website needs news and a tutorials website needs tutorials. Bear this in mind when creating it, and expect a lengthy commitment to keep it active. Consider drafting in others to help with updating content and ensuring a steady stream. I write actual content for only one of my 3 websites.

How much are you willing to learn?
There is obviously massive potential to create a website without any knowledge whatsoever with such tools as Frontpage, PHP-Nuke and the like. Unless, however, your content is genuinely unique and excellent, there is a limit (and not a very forgiving one) on the number of people that will put up with default skins and default settings. In addition, you'll be unable to fix or diagnose problems and your website will come to a slowdown as optimizations tasks are left un-done. It is beneficial for everyone if you are prepared to learn even a small amount along the way.

4. Stage 2: Design
At this stage, things begin to fork off. Depending on budget, time and level of e-competence you have several options in terms of design:

Do your own everything

If you want a website that you can strum like a harp, you may need to do everything yourself. From the PHP CMS to the CSS styles to the JS menus to the Cron scripts to the Mysql databases to the bare HTML, everything. A single-user personal blog does not need about 60% of the features of Blogger, LJ or Wordpress. A light CMS may well need some advanced features later on, but something as unwieldy as PHP Nuke is doubtless a bad starting place.
(NB: I do NOT recommend or use a custom forum.)

Templates/pre-built systems
The internet is positively littered with free and paid-for website templates and free CMS and Forum software. Some are better than others (obviously) and the magic is in sorting out the wheat from the chaff. Follow my design principles below when selecting a template, and select any pre-built software based on requirement. A 2- or 3- user news site doesn't need as large a system as a 30-user one, and few of these systems are really scalable. Consider a Wiki as a CMS or cutenews for a simple news CMS.
Generally things that enforce 'MADE WITH FOOPROG' or 'POWERED BY FOOPROG' messages are bad, and the few £ to remove therse messages may be worth it in some cases. In short you don't want people coming to your website and thinking, 'Hey, Drupal.' as opposed to 'Hey, Harry Potter-themed Gorrilaz videos. Cool!'. Another good rule of thumb is the fewer links to other sites, especially prominent ones, the better. This is especially true with services in broadly the same area as yours.

Hire someone
You can always hire some schmuck to do all this for you. Depending on the company, this may well remove problems with prominent 3rd-party software on your site and also take much of the work out of your website. Some downsides are that website designers massively, massively overcharge and there are probably more cowboy webdesigners than cowboy plumbers.

Take a long look at their website and consider if you'd be happy with that website. Decide whether you're saving money on your website by hiring a webdesigner and whether you're going to get return on this investment.

Consider whether you'd care if the amount of money you're paying would be significant if it turned out to get you nowhere, and if it is, consider if it's large enough for anyone else to care if it does. If your budget is £100 and you're on a limited income, paying a webdesigner is possibly not a great plan, as £100's worth of webdesign isn't very much, and if you think they have (or they have) stolen your money by providing a substandard (or worse, no) service, it'll be difficult to find authorities that care about a £100 loss. In addition, scammy webdesigners are unlikely to be scared by the legal faculties of someone with a £100 budget.

5. Stage 2: Design (part 2)
Having decided who and how your website will be made, here are some tips on how to do it. If you're getting a template, get one that fits these or get one that nearly does and modify it until it does. If you're designing from the ground-up then try and plan according to these. If you're hiring someone, you might want to mention if any of them wildly contradicts these guidelines, but if they tell you that it's bullshit (in a convincing manner) then it probably is and they know best. Anyway:

Make sure the website is yours
This, unsurprisingly, is by far the most important part of making your website,. When people fire up your website in a browser they want to know which website they're on, not which CMS it's using or which WYSIWYG program it was deigned in. On this note, avoid:
- Any default templates. At all. PHPBB, PHP-Nuke, Frontpage, ANYTHING
- Anything that you can't template easily.

- Anything that is obviously that system. If it's an often-used theme, a recognisable interface or anything like that, it distracts people from the fact that they're on your website
- Default HTML layouts. Grey BG, black text, blue links, purple visited links etc.
- Too many (or any) links to websites of your hosting company, your template source, your favourite search engine etc. on every page
To summarise, if there is a website that any of your visitors is likely to have seen that looks like yours, they will spend time thinking 'hey, this looks like slashdot' or whatever instead of thinking about your content.

A site designed for a purpose
There are general rules here.
A software or 'geeky' site is ordinarily clean and easy-to-use, perhaps using a Wiki if there's a lot of text (like a HOWTO archive). Colors are light and graphics are not used extensively.
Clan or gaming sites often make extensive use of slick image-based layouts to create a very graphical impression. Such sites are often doing this to (often successfully) hide the fact that there isn't a great deal of content, but they also fit in more with the graphics-centric arena of gaming.
Blogs usually use either an artsy or a clean layout similar to the first type mentioned, depending on the personality and genre of the blog.
News sites often have a clean layout, but populated with slick touches for menus and banners.

These aren't concrete and a bad but appropriate layour is debatably worse than a good but inappropriate one. Bear in mind, however, that as the amount of content increases so will the need for easy navigation and easy reading. Again, this type of thing isn't vital but do at least consider it.

A professional site.
This is vital. No-one takes you seriously if your site looks like it was designed by a 13-year-old in Frontpage Express, especially if it was. Here are some (read: all) the points.
Some things to avoid:
* Anything flashing or moving
* A website that looks like it has (or has) been designed in Frontpage express or Microsoft Word
* Useless JavaScripts like cursor trails or things like that
* Elements like clocks and counters that serve no purpose and/or are very unsubtle
* Counters at all. If your website gets little traffic, it makes it look unpopular. If it gets a lot, you're wasting resources counting it all.
* Equally, any kind of running statistics (members online etc.) suffer the same problem; bad appearence when low, system-heavy when high
* Animated GIFs. Already under the flashing/moving header, but as a rule of thumb, if you have animated GIFs on your website, delete it. The website, that is.
* Dead links
* Spelling errors
* Grammar errors
* PHP error messages. Either turn them off or (ideally) fix them
* Anything else that doesn't work.
* Flash. A Flash nav bar can ruin a day. A Flash website can ruin a week. Just don't do it. Plus they are search engine unfriendly.

-
DO:
* Have good navigation. Your users should be able to reach any page with 3 clicks, and there should be no dead links.
* Make your site look presentable in at both IE and Firefox. It is not acceptable in this day and age to screw over 20% of the internet because you're lazy. If your page is at all tech-related then you're turning your face on over an estimated 40-60% of your users by being lazy. Unprofessionalism to the MAX.

CMS, CMS, CMS
Unless you and your users want to be spending hours poking around in HTML, for the love of god use a CMS. I can't reccomend any specific ones, but many good ones like Joomla, Drupal are free.

- Please do, however, keep in mind the previously-mentioned aspects of a CMS you need to consider, i.e.
- Size and scalability; will your site have one or one hundred users? Will the CMS handle either or both?
- Customisability; can this be made to look as part of your website and not as a random add-on?
- Features; choose based on what you need, not the size of the feature list. Also remember that many allow you to add features.
- Price; a general rule of thumb is that price > £0 = NO!
- Integration; linked with customisability is how well it will look as part of your site, and whether users will be able to tell without trying what CMS it's using. This applies to forums as well but to a lesser extent.

The 30 minute CSS tutorial.

What is CSS?

CSS is the technology used to make the layout for webpages. They are Cascading
Style Sheets, used to style your HTML documents. They are slowly replacing tables
as the preferred medium to layout your pages. They free your content (the HTML
document) from the layout (the CSS file), so you may change your website look
and feel easily.

CSS basics.
With HTML, you would define the attributes as you write the HTML. With CSS,
you first define the style. Then as you are writing the HTML, you apply the
required style. So the first step to write CSS document is defining your styles.
There are two ways to apply your CSS to your file. You may either include it
in your HTML file by placing your stylesheet in head of your HTML as,

…

<head>
<style type="text/css">
Your stylesheet here.
</style>
</head>

The Selectors.
After you write your style, the computer needs to know where to apply that style.
This can be done using the selectors. The selectors are of three types.
1. HTML tag selector: If you want to change the look of any of your html tags,
you will use this type of selector. You may decide that all of your h2 elements
must have red text. It is trivially easy with CSS.
2. Class selector: you would like particular parts of your webpage to have a
style, but that part is not always in same html tag. Not to worry, you can enclose
that part with a div tag and apply your style.
3. ID selectors: If some element occurs only once it is styled using id selectors.

Your First Stylesheet.
With your first stylesheet, you will modify the page to look yellow with a blue foreground.

<html>
<head>
<title>Page title</title>
<style type="text/css">
body{
background-color:yellow;
color:blue;
}

</style>
</head>
<body>
some text
</body>
</html>

The HTML part is simple, so let’s look at the CSS part.
body{
background-color:yellow;
color:blue;
}

We wanted to modify the body so we used the body tag selector. This basically
said to the computer that this style needs to be applied to whole body of html
document. Then we used the background-color property to set the background and
the color property to set the foreground. What if you wanted to set all the
text to bold? Oh that’s simple too, you just add this line inside the
body selector. font-weight: bold;

Getting something useful.
The last css though simple was not very useful. Let us design a useful CSS which
might be used on a site. Before that you must learn positioning elements using
CSS.
We would like to have a three column layout. So I will use three selectors(Id
selectors) named sidebar, content and rightsidebar.
Theses lines of codes declare our selectors.
#sidebar
#content
#rightsidebar.
Then we will tell how these should look like.
I want my sidebar and rightsidebar to have aqua colored background. This is
done using background: Aqua;

Next we add borders to all our selectors and add a top margin of 20 pixels.
We would like the contents to be bolder, so we add font-weight: bold; to content.
After that we decide to spice up our links by making them of a different color
and removing the underlines, by getting a
color:#c60;
text-decoration:none;
To give the user a visual indication of the link when she moves her mouse, we
swap the link colors.
This is done by changing the style in a:hover.

So this is what our finished page looks like.

<html><head><title>Preview</title>
<style type="text/css">
#sidebar{
background: Aqua;
width:100px;
border-width: 1px;
margin: 20px 0px;
border-style: dotted;
float:left;
}
#content{
font-weight: bold;
width:400px;
border-width: 1px;
margin: 20px 0;
border-style: dotted;
float:left;
}
#rightsidebar{
background: Aqua;
width:100px;
border-width: 1px;
margin: 20px 0px;
border-style: dotted;
float:left;
}
a:link {
color:#c60;
text-decoration:none;
}
a:hover{
font-weight: bold;
background: #c60;
color:White;
text-decoration:none;
}
</style>
</head>
<body>
<div id="sidebar">sidebar</div>
<div id="content">content
<a href="http://www.google.com/">a link</a><br>
</div>
<div id="rightsidebar">rightsidebar<br /></div>
</body></html>

What! Do I have to learn all these tags and attributes?
No. But you must remember the more important ones. Also the attributes have
very common sense names. What should you do to change the background color of
your webpage. Yeah this.

body{
background:Aqua;
}

That’s all. SO if you are going to use CSS for any length of time, you
will get to remember the tags. A css editor like TopStyle lite can be really
useful when you are learning css.

Thats all for today. Hope you learnt something useful from this tutorial.

Php Variables Tutorial.

Written by raver, owner of the Romanian Php Portal http://phpzone.frih.net
A) What exactly is a variable?
To better understand what exactly is a variable let’s use a real world
example. Let’s assume that on a Friday evening your girlfriend calls you
to set a date at a certain hour, let’s say 19:00. You agree, but after
half an hour she calls again telling you that she cannot make it because she
has to talk about you with her friends and it would be better to meet at 20:00.
After you hang up another friend calls and ask you when you will meet your girlfriend.
You say: “At 20:00”. Let’s see how this can be interpreted
in PHP code:

<?php
//first call
$hour = "19:00";
//second call
$hour = "20.00";
//when are you going to meet your girlfriend?
echo "Ill meet my girlfriend at “.$hour;
?>

This is a more practical (although weird) way of representing a variable. You
can think of a variable like a piece of memory in which you can store data.
Any kind of data (almost).

Here are a few things worth remembering when using variables:
a) Every variable must start with the dollar ( $ ) sign. This indicates to the
PHP engine that what goes after it will be a variable.
b) When naming variables you must always use alpha-numerical characters. Here
are a few examples:
$_variable;
$_a;
$ variable 1;
$_1984;
$o_longer_name_of_a_variable;

c)variables are case-sensitive. So $variable is different than $Variable or
$VARIABLE

B)Variable Types
I`ve mentioned earlier that variables can hold all kinds of data. Let`s see
exactly what types it can hold.

a) String
String variables can hold words and sentences. Let`s see a quick example in
which you will also learn about the concatenate operator ( . ).

<?php
$string = “Hi there, I am a string”;
$string2 = “ inside a string”;
Echo $string.$string2;
?>

This will display:
Hi there, I am a string inside a string. Using the dot ( . ) operator you can
merge in one sentence 2 or more variables.

c) Integer
If you finished grade school than you must know that integer means whole numbers.
So we have:
$integer = 5;
$integer2 = 25;
//You can also perform basic mathematic operations with them:
$sum = $integer + $integer2; //will hold 30
$withdraw = $integer2 - $integer; //will hold 20
$multiply = $integer * $integer2; //will hold 125
$divide = $integer2 / $integer; //will hold 5

d) Double
A double refers to numbers with a decimal point.
$double = 25.4;

e) Boolean
Variables of this type can only hold two types of data, true and false, best
used in conditional sentences .

f) Array
Variables of type Array can of course, hold arrays.

Incrementing and decrementing
If you are new to programming the terms may sound a little weird, but trust
me, it is very simple. Many times you will have to increase or decrease a variable
by 1. Incrementing means adding 1 to a variable, and decrementing decreasing
by one. Ex:

<?php
$variable = 1;
$variable++;
echo $variable; //will print 2
$variable--;
echo $variable; //will print 1;
?>

This is very useful in loops and searching through an array. Here is another
example:

<?php
$number = 1;
For $number <10
{
echo $number;
$number++;
}

?>

Running this will print the numbers 1 – 10.

Well this is all for the moment, I hope you liked this tutorial. For more tutorials
and scripts visit http://phpzone.frih.net (Romanian php portal)

The 30 minute photoshop tutorial.

© 2005 Jean X. (Brilliantbeauty)
Hello there. I am sure many of you have a graphics program and are wondering, what the hell do I do now? Well, what many beginners miss is the art of the blend. This tutorial is designed to help the BEGINNER. If you are a graphics genius and think this tutorial is idiotic, live with it, this is, I repeat, a tutorial on how to get started. With practice, you should develop your own style, but for now, try this one. Please keep in mind that I am making the assumption that you kind of know what’s on the toolbar.
1. New Canvas. (Ctrl-N) Set it to the size you want. For now, I am doing your boring average blend size. 450x450. By no means does the blend have to be boring though.
2. Think of a theme. DUH! For this one, I’m going to do a Southern belle, played by Emmy Rossum, because I have far too many Emmy images. Use whomever you would like.
3. Find the pictures. I suggest finding four. Two of your person, and two landscapes stock images. They should be a fairly high resolution, rather large, and kind of matching each other in terms of resolution. (Meaning do not use a high-res photoshoot, alongside a low resolution screencap. It will make your graphic less cohesive.)
I chose these ones.



Plantation
4. Now drag, if you have them saved, or copy and paste them onto your canvas as a new layer. Ctrl+E. If you copy and paste, don’t forget to promote the selections, ctrl+shift+P. Then deselect all, ctrl+D.
5. Arrange them how you would like and using a 60 px brush, set at 25% hardness, opacity 100% erase gently around the edges, going into them a bit so they become semi transparent around the edges. Rearrange until they look good. Feel free to mirror, resize, and rotate, the images to fit your needs.
This is what I came up with. Do not worry, it gets WAY better, I promise. ; )
6. Now with your eraser brush at 22% opacity partially erase some extraneous parts like edges of hair.
a bit better
7. Now add some effects! I merged my Emmy layers together, duplicated it, then set a 1 pixel guassian blur (Adjust>>blur>>Guassian blur) on them, and repeated 5 times. Then I set the blurred layer to overlay at an 87% opacity. Use screen if your person is more tan rather than overlay. Merge down and sharpen the merged layer. Adjust>>sharpen>>sharpen.
She’s all glowy now
8. New raster layer. Pour in black and set it to color legacy. It should be grayscale now. Now its time to add color and the whole "graphic" idea of it. We are going to use my favorite method, textures! You will find more boxy textures as well, but for this type of thing I prefer blendish textures.
Made by my lovely friend Amanda (MySundayWarning)
Now add that on at soft light.
Instant transformation!
9. But we’re not done yet. Now new raster layer. Fill with the darkest blue from the swatches (#000040) and set the layer to exclusion. New raster layer again. Choose a pretty gradient (I used your standard duotone brown) in your materials palette, flood fill and set layer properties to soft light.
lovely, isn’t it?
10 BRUSHES! Now, while you shouldn’t rely heavily on these, they can really spice up your image! New Raster Layer. I used a brush from the abandoned photo set at http://1greeneye.net/brushes The color is basic black and I spread it around the whole image. Now set the layer to soft light.
brush tastic.
11. Text and accents. Find something to say, and say it. The text color will be your background color. Just make sure the stroke width is set to 0. New Raster layer. I used one of my self created tiny text brushes and some more brushes from greeneye to create pretty accents.
Almost Done!
12. Borders and touch ups. This is basically your own thing. I ended up blurring the background once, but that’s all I really did for touchups. Then I took greeneye’s vertical horizons brush, new raster layer, in black and created a border.
MAGNIFIQUE!
I hope you learned much from this tutorial and continue on with your graphics journey, good luck! -Jean