By BoLOBOSE payday loan

Creating a fixed header and Footer

by: Caleb Jonasson - November 20th, 2009   Filed under: CSS, Web Development 3 Comments

If you are looking for a fixed header of fixed footer you have come to the right place. In this tutorial I will be going over the basic page setup for sections of content, the header bar, footer bar, CSS and HTML.

The CSS code for a header is quite simple depending on how you would like it to interact with the rest of the page.

#header {
top:0px;
right:20px;
left:20px;
position:fixed;
background: #eee;
border:1px solid #ccc;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0px;
padding: opx;
font:18px “Plantagenet Cherokee”;
letter-spacing:2px;
}

The above CSS contains the header div and the H1 tag. There are four very important things that are required when having a fixed header. First: It must have the position set to fixed. The other three are all about positioning and linking it to the top and sides. With the above code we set the sides to link 20px from the browser and the top to link directly.

Another important part of the CSS is having the page contents forced below what the header is covering. This will allow us to see div that is underneath. That chunk of CSS looks like this.

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-top:40px;
}

The HTML looks something like this.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Code With Design Fixed Header</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”header”>
<h1>Header</h1>
<!– end #header –></div>
<div id=”container”>
<div id=”mainContent”>
<h1> Main Content </h1>
</div>
<div id=”footer”>
<p>Footer</p>
</div>
</div>
</body>
</html>

Generally the header is kept withing the container to keep it aligned with the rest of the page however we wanted it to break out of the rest of the page and thus we moved it up, out and away.

The rest of this article will cover the footer which is very similar except for a few things. The footers CSS is going to be fixed to the bottom and not the top which is unlike the header. We will also need to pull it out of the HTML so it can fill up and be safe across browsers.

So first we will take note of the css which goes something like this:

#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
}
#footer p {
margin: 0;
padding: 10px 0;
}

Once again we bring in the four important properties; bottom, left, right, and position. You will also need to change the body tag in the CSS so the footer does not overlap the content you would like the readers to see. This CSS is going to look like this:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-bottom:50px;
}

And now finally we will look at the HTML to see the footer break out of the container similar to what the header did.

<!– end #container –></div>
<div id=”footer”>
<p>Created by Caleb Jonasson</p>
</div>

Caleb Jonasson

Tags: , , , , ,

Into to HTML: Creating A Basic Web Page

by: Caleb Jonasson - November 16th, 2009   Filed under: Web Development Add Comment

In order to create your own web page you should first open up a text editor such as notepad or notepad ++. First things first is to copy the following code into your text editor and save it as index.php. PHP is a server side programming language which is most commonly used across the web because of its simple integration with html. Actual PHP code requires a server but if there is html text inside of a PHP file a simple test on your computer will allow you to properly view the page.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Website || featured on codewithdesign.com</title>
</head>

<body>
<h1>H1 tags</h1>
<h2>H2 tags</h2>
<h3>H3 tags</h3>
<p>The h1 stands for header1 and these p tags are paragraph tags</p>
</body>
</html>

Now we are going to step through the code so you know exactly what is going on and how the web browser reads the information. The top line of the code will let your browser know what standards it is to follow when reading the code.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

The second line of code states that it is going to follow the w3 standards.

<html xmlns=”http://www.w3.org/1999/xhtml”>

Now we are going to get into the more customizable areas of the website. This section of information is known as head information and is not displayed on the webpage itself. This information is once again read by the browser but you can tell the search engines what information to display along with the title of the page. There are many more things that you can do with this section of the text which I will be going over in another into to HTML article.

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Website || featured on codewithdesign.com</title>
</head>

The first bit of the code is very boring but now we can get more into the content of the page. As you can see there are greater and lesser then signs with content in between, these are called tags. When declaring information inside of a tag you need to have a starting tag and a closing tag. The closing tag is going to allow you to specify that it is closing and will always close the tag immediately before it. For every opening tag you need to have a closing tag or information will not be displayed properly.

<h1>H1 tags</h1>
<h2>H2 tags</h2>
<h3>H3 tags</h3>

Notice how these tag examples are within the body tags. This means that the following content will be displayed within the body of the web browser. When you look at the page you will notice that it breaks into sections. The main section is html which contains the sub sections of head and body.

<html>
<head>
</head>
<body>
</body>
</html>

You can start creating a site with just this information but it is a good idea to clarify the beginning information in the tags for the best results when trying to find bugs and errors.

Within the body of the page a lot of the information can be sorted into different sections. In order to seperate the content you will need to use something called div tags. A div tag can easily break apart seperate sections of the page and will help you style your page in the future.

<div id=”header”>
<h1>The Empty Headed Blog</h1>
</div>

Note that it is possible to contain divs inside of divs.

Tags: , , , ,

Partition Setup For Bit Torrent Downloaders

by: Caleb Jonasson - November 16th, 2009   Filed under: Random Posting Add Comment

Note: Do not download illegal content, you can get fined or sent to jail. It is ok to download content that is legal and just shared over bit torrent networks.

Introduction

There are different computer setups for different people that are all based upon how the computer is used. I write this assuming that you are considered a pirate and download content via bit torrent. So you probably know how important it is to properly allocate the space in your hard disks. This article is to help you build the proper setup for downloading a lot of content.

Before I get to into storage structures I’m going to start by splitting this up into four groups of users. Group 1 is going to be people who use they’re computer for web, email, downloading, and the occasional game. We are going to call this the average user. The second group is going to be called the power user. This is the group of people who download enough to fill up a fair sized hard disk and space management is a common problem. The third group of people is going to be the advanced users. These are the people who have multiple hard drives and constantly download through bit torrent. The final group of people are going to be called avid downloaders. This group is people that constantly have a bit torrent downloader running, multiple hard disks dedicated to downloading and possibly a home theatre system connected via home network.

Average user

There are good chances that your computer is just straight out of the box and you have a hard disk that that is within the range 250GB to 1TB. For the range in setups that the average user should have to download torrents at a higher level is as follows.

250GB Hard Disk

  • 80GB – Operating System, programs, and files.
  • 20GB – Operating System backup, and crucial file backup.
  • 150GB – Downloaded Content

500GB Hard Disk

  • 80GB – Operating System, programs, and files.
  • 60GB – Operating System backup, and crucial file backup.
  • 360GB – Downloaded Content and other forms of media.

1T Hard Disk

  • 120GB – Operating System, programs, and files.
  • 80GB – Operating System backup, and crucial file backup.
  • 800GB – Downloaded Content and other forms of media.

Pending on user preference the 800GB is quite a lot of space and you may want to split it into two partitions. Such as:

  • 150GB – Photos, Videos you will want to keep.
  • 650GB – Downloaded Content.

Power user

As a power user space is most likely a common problem even though you most likely have multiple hard disks of a large capacity. A lot of users within this category download and burn onto DVDs to play on their DVD players and this really isn’t an effective way to put those torrents to use. I recommend reading the avid downloader section for some ideas on how to manage your content.

Assuming you have multiple hard disks and you not only use your computer for downloading.

300GB Main Hard Disk and 500GB Secondary Hard Disk

300GB Hard Disk 1

  • 200GB – Operating System, programs, and files.
  • 50GB – Operating System backup, and crucial file backup.
  • 50GB – Games, high resource programs

500GB Hard Disk 2
This is going to be a very open Hard Disk because the usage will be downloaded content. You can simply just put all of your files onto the drive but having proper partitions is always nice when dealing with content.

  • 100GB – Downloaded Programs and files
  • 400GB – Downloaded Video

640GB Main Hard Disk and 1TB Secondary Hard Disk
640GB Hard Disk 1

  • 350GB – Operating System, high resource programs, and files.
  • 100GB – Operating System backup, and crucial file backup.
  • 100GB – Games
  • 40GB – Photos, other files

1TB Hard Disk 2
This is going to be a very open Hard Disk because the usage will be downloaded content. You can simply just put all of your files onto the drive but having proper partitions is always nice when dealing with content.

  • 250GB – downloaded programs and files
  • 300GB – Downloaded movies
  • 450GB – Downloaded TV Shows

Advanced user

Being an advanced user you have two or more Hard Disks. This means that your downloaded content is going to properly organized throughout these disks for easy access to files, programs and content.

Similar to a power users but more storage.

640GB Main Hard Disk and 1TB Secondary Hard Disk
640GB Hard Disk 1

  • 350GB – Operating System, high resource programs, and files.
  • 100GB – Operating System backup, and crucial file backup.
  • 100GB – Games
  • 40GB – Photos, other files

1TB Hard Disk 2
This is going to be a very open Hard Disk because the usage will be downloaded content. You can simply just put all of your files onto the drive but having proper partitions is always nice when dealing with content.

  • 250GB – downloaded programs and files
  • 300GB – Downloaded movies
  • 450GB – Downloaded TV Shows

640GB Main Hard Disk, 1TB Secondary Hard Disk, 1TB Third Hard Disk
640GB Hard Disk 1

  • 350GB – Operating System, high resource programs, and files.
  • 100GB – Operating System backup, and crucial file backup.
  • 100GB – Games
  • 40GB – Photos, other files

1TB Hard Disk 2
This drive is for downloaded TV shows and Programs.

  • 800GB – downloaded TV shows
  • 200GB – downloaded Programs

1TB Hard Disk 3
This drive is for downloaded movies and Programs.

  • 800GB – downloaded movies
  • 300GB – miscellaneous Files, i.e. PDF, images, etc.

Avid downloader

For avid downloaders it is best to keep everything open due to all of the file transferring going through your network. It is best to keep manage these remotely because you will more then likely just use it as a download box, storage box, or cable box.

Main Hard Disk
Size – 20GB+
Something small will work its just for the operating system.
Storage Disks
1TB Hard Disk 2 – Storage 1

  • 500GB – open
  • 500GB – open

1TB Hard Disk 3 – Storage 2

  • 500GB – open
  • 500GB – open

1TB Hard Disk 4 – Storage 3

  • 500GB – open
  • 500GB – open

It is hard to tell an avid user what to do as far as storage because most avid users know their way around a computer and have certain preferences that pertain to storage management across drives and networks.

Remember pirating content is illegal.

Caleb Jonasson

Tags: , , , , , , , ,

Intro to AS3: Using Mouse Events to Control an Object

by: Caleb Jonasson - November 16th, 2009   Filed under: Web Development Add Comment

Going through the code

View the results

For this creation we are first going to need event listeners in the project. An event listener is something that reacts when an event happens. So within the project we have a fade in and fade out button. Both of these buttons have event listeners that are given instructions on what to do when the event occurs. So in this example we are going to use the rotate left event listener which looks as follows.

rotate_left_btn.addEventListener(MouseEvent.MOUSE_DOWN, onRotateLeft);

This states that for the instance rotate_left_btn it will add an event listener and that event listener is a mouse event that will take place when the mouse button has been pressed down on. Then it will link to the onRotateLeft function.

//Functions for Rotation
function onRotateLeft(evt:MouseEvent):void {
box.rotation -= 10;
};

Note: Take note that information after two forward slashes is read as a comment and will not effect your code in any way. //Comments end when the line ends.

The function above declares that it is first a function then names it onRotationLeft. After naming the function the code will declare that this function has a mouse event then is posted as void. On the next line we state that we want there to be a left rotation so we use -=10;  then end the function with a closing bracket and a semicolon.

Later in the code we have some new mouse events and function that are not mouse buttons but drag actions with the mouse. Theses are created the same way that the other mouse buttons where, there is a function and an event listener but note the front of the event listener where we declare box at the beginning so it will only work when we click down and drag the box.

The Stage

What you will need on your stage is first a movie clip with an instance name of box. Now you will need the button images, these don’t need to be pretty they just need to be functional. The layout is up to you but if you need an example click the link before the action script code to view the SWF file.

The button instances are as follows:

move_left_btn
move_right_btn
move_up_btn
Move_down_btn

scale_up_btn
scale_down_btn

rotate_left_btn
rotate_right_btn

fade_in_btn
fade_out_btn

toggle_visible_btn

The Action script side of things

//Assigning movements with Functions
function onMoveLeft(evt:MouseEvent):void {
box.x -= 20;
};
function onMoveRight (evt:MouseEvent):void {
box.x += 20;Mouse Events: Controlling a Box
};
function onMoveUp(evt:MouseEvent):void {
box.y -= 10;
};
function onMoveDown (evt:MouseEvent):void {
box.y += 10;
};
//Move Mouse Events
move_left_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveLeft);
move_right_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveRight);
move_up_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveUp);
move_down_btn.addEventListener(MouseEvent.MOUSE_DOWN, onMoveDown);
scale_up_btn.addEventListener(MouseEvent.MOUSE_DOWN, onScaleUp);
scale_down_btn.addEventListener(MouseEvent.MOUSE_DOWN, onScaleDown);
//Rotation Mouse Events
rotate_left_btn.addEventListener(MouseEvent.MOUSE_DOWN, onRotateLeft);
rotate_right_btn.addEventListener(MouseEvent.MOUSE_DOWN, onRotateRight);
//Fading Mouse Events
fade_in_btn.addEventListener(MouseEvent.MOUSE_DOWN, onFadeIn);
fade_out_btn.addEventListener(MouseEvent.MOUSE_DOWN, onFadeOut);
//Toggles the Visibility
toggle_visible_btn.addEventListener(MouseEvent.MOUSE_UP, onToggleVisible);
//Functions For Scaling
function onScaleUp(evt:MouseEvent):void {
box.scaleX += 0.1;
box.scaleY += 0.1;
};
function onScaleDown(evt:MouseEvent):void {
box.scaleX -= 0.1;
box.scaleY -= 0.1;
};
//Functions for Rotation
function onRotateLeft(evt:MouseEvent):void {
box.rotation -= 10;
};
function onRotateRight(evt:MouseEvent):void {
box.rotation += 10;
};
//Function For Fade in and Fade Out
function onFadeIn(evt:MouseEvent):void {
box.alpha += 0.1;
};
function onFadeOut (evt:MouseEvent):void {
box.alpha -= 0.1;
};
//Toggle Button to change Visibility
function onToggleVisible(evt:MouseEvent):void {
box.visible = !box.visible;
};
box.addEventListener(MouseEvent.MOUSE_DOWN,onStartDrag);
box.addEventListener(MouseEvent.MOUSE_UP,onStopDrag);
function onStartDrag(evt:MouseEvent):void {
evt.target.startDrag();
};
function onStopDrag(evt:MouseEvent):void {
evt.target.stopDrag();

};

Caleb Jonasson

Tags: , , , ,

Going Through Website Creation Part 1: Layout

by: Caleb Jonasson - November 13th, 2009   Filed under: CSS, php, Web Development 2 Comments

Starting Up An Old Project

A few months ago I posted an old project on the old blog. The project was entitled “Browser Friendly Feed Reader.” This project consisted of three simple pages. The first was the submitting form where users could enter their rss or xml feed. The contents of this feed could be output in the web browser to displaying it inside of the site framework that was created.

rss_skorg_atchison

Process.php
Forum.php
View.php

The site was very simple but it was more built for the idea behind viewing a feed in the browser. Since then I wanted to create a more advanced version of the site that relied on a database and the ability to subscribe to the feeds. This is when I decided to restart to the old project and completely rework how everything is set from the ground up.

Working With The Framework

framework

When starting to create a new project or just recreating one the first thing that you will need is a frame work. The frame work is a quick drawing of how you would like to have everything setup. Some people like to create theirs with programs such as In Design or Illustrator but I prefer to use a graphing set, a notepad and whatever pen is closest to me. I should be using pencil but I normally have a plan in my head prior to starting something.

dreamweaver_create_a_page

Once you have the general idea of how things are going to work it is a good idea to draw out how you would like to store the key components of a site. I use a notepad throughout the whole process and it usually starts with me laying out something that looks like this.

Contents of index

Header (include not secure page)
Main image
Nav bar (include)

Sidebar (include)
Sidebar components (include single and double width items)
Navigation (include)

Main content (not included)
Post data

Footer (include)
Blocks of meta and links (include)
Bottom strip (include)

Order of Operations When Designing the Index

Once this has been worked up I then head into Adobe Dreamweaver to begin the process of changing my framework into an actual css ready site with all of the divs. This process takes a fair amount of time and the content usually created in this order. First note that Dreamweaver automatically creates the untitled.php page and the css page. At this point I only have the two items on my testing server. Back to showing you the order of operations.

  1. Change the CSS page to create the proper widths for main content, sidebar, and post.
  2. Change padding properties, select fonts, change margin properties.
  3. Create the divs within the untitled document ie the divs in the header that hold link menus.
  4. Add the div id and classes to the CSS file. (remember to work down the content as it appears within your page. Start with the header then go to sidebar, etc.)
  5. Create and fill the pages with fake content and see if this is how you would like the pages to be displayed.
  6. Go through and tweak anything that makes you unhappy.

Pulling Apart the Index.php Page

Now that you have created your base index page and you are somewhat happy with the content you can go ahead and begin to pull the page apart. This is where the layout of includes will come in handy. This process consists of cutting and pasting section of code into new php files. The naming of these files is up to you but I normally go with “pt_” as a prefix for “Part” which is a part of a page and “pg_” which stands for “Page” meaning that it is a whole page. An example of this is “pg_authors.php” or pg_feeds_addfeed.php” The next section of naming a page comes from the actual section that is within the page. On the friendly browser feed viewer project I started there are sections of pages that relate to feeds. If I wanted to create a page where users could subscribe to a feed I would name it “pg_feed_subscribe” this tells me what the php file is, its subject and what the page is for. Another type of file I often contain is the prefix “process_” This is a page that requires a form to post to or backend piece of date. The page naming is completely up to you I just wanted to share how I go about naming my webpages.

Now we will go through pulling the pages apart. Now that we have gone through a little lesson on proper page names it is now time to actually pull something apart. For this I will not be using the rss.skorg.org site but a new site with no content instead.

Here is the full index.php page that we will be working with.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Now we are going to pull this page apart and change some things so the include will work properly. The first thing we are going to want to do is change how the header information is setup. We want the content that can be thrown into one file to stay at the very top. The rest that we need for the page is going to be below that.

1
2
3
4
5
6
7

<title>Test</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<!– end #header –></div>

Take note of where this section of code is and what has changed. The title tags have been moved below the IE exceptions. This is so it is not included in the new “pt_head_req_top.php” file. Now we are going to cut the bottom part of the header code will have a separate required field for the transition tags. This is important so if you wanted to add class to the divs you could do it to everything based on one file change.

1
2
3

<?php include('pt_head_req_top.php'); ?>
<title>Test</title>
<?php include('pt_head_main.php'); ?>

Inside the two sections is where you want the head data that will change for each page. The following code is what pt_head_main.php consists of.

1
2
3
4
5
6

</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>

Because we are now pulling sections of the page together with php the load times will be a little bit quicker and we have decreased the code of the index by an incredible amount. The index.php code now looks like this when we are done with it.

1
2
3
4
5
6
7
8
9
10
11

<?php include('pt_head_req_top.php'); ?>
<title>Test</title>
<?php
include('pt_head_main.php');
include('pt_sidebar_main.php');
?>
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<?php include('pt_footer_main.php');?>

Now you should be able to create a site that is fully based off of your index. If you need to change things around like the css link based on different pages there is always PHP code for things like that.

Continue on to read part 2

By: Caleb Jonasson

Tags: , , , , , , , , , , ,

Creating a community that users are hungry for

by: Caleb Jonasson - November 13th, 2009   Filed under: Web Development Add Comment

Before I get to in depth I would like to quickly revise what I will be getting into. There are three main things your users need for your community go grow. The first and foremost is allowing your users to contribute, the second is community rank and social status. The third and final topic is generating something to get their attention.

contribution

Allowing users to contribute is really needed, not only does it increase the amount of data in your site but it will give your users more things to do and or read when they are visiting your site. The more content that your site consists of will increase your page rank on larger search engines. User contributions also adds to another main point which is user rank and social status and it does this by giving you (the admin) the ability to decide who is a good enough poster for a promotion, the ability to write a blog post or become a moderator etc.. One of the biggest reasons to allow user contributions is that it gives potential users something to go through and the possibility to become a part of something.

Social status and rank

So now that your users are given the ability to contribute you may now proceed to social status and member rank. Everyone wants to feel important and this is your way to give something to the community. Whether you name the points cookies or Kudos (Reference to Dream.In.Code) you should have it originally named or based on the theme of your site. How you base the point system is entirely up to you but keep in mind that you will be receiving some rather large numbers if you decide to hand out 5 points per post. The method that I prefer to give out  is 0.1 per post and 1 point for something larger. (ie. Discussion starter, Tutorial, Popular Blog Post) Rewards and bonus’ are a nice way to reward members also try giving out ranks and titles to the members of your community, they love that kind of thing. As users progress through the ranks they should be able to progress through the community and unlock new abilities such as moderate posts, mark as spam, rate content and try making a verified quality post area on the main page or a spotlight post section where top contributors that deliver quality posts have a place to shine.

Quality of content

The final thing needed to create a community is something to catch new users attention. This can be anything from quality posts to contests to freebies/giveaways. Another thing that gets new users attention are some sleek looking graphics  and a well thought out layout. For example one of the highest density click populations on a blog is the top of the right side bar. This is a good place to place internal site links to catch the eyes of people that are interested in similar topics. It is better to promote your own site and your own content rather then to have space wasted for advertisements, especially if your site doesn’t have a lot of visitors.

Now that you know the basic concepts of how to draw in users, get them to stay and support your community, there are only a few more things needed. The first is user input, this can drastically change the way you think about layouts and the content that your site provides. The second is search engine optimization, this will actually bring people into your site from the search engines. The final thing needed is a good idea. Your site isn’t going to get off the ground if it doesn’t have a good idea and motivated people behind it.

Caleb Jonasson

Tags: , , , , , , ,

Stop Spammers From Attacking Your WP Blog

by: Caleb Jonasson - November 13th, 2009   Filed under: Web Development Add Comment

Introduction

More and more users on WordPress are getting spammed and now I have a few tips on how to prevent this from happening to you. There are two general ways that people have their blogs set up one is more reliable then the other. the first setup is where users don’t need to log in and all that is provided is a username, email and a website is optional. The second setup requires the reader to register prior to submitting a comment on anything. This is the more secure method to choose from.

stop wordpress spammer

Setup Number One

The first setup has some flaws but the spammers can be prevented. WordPress is setup so that once a poster has been approved through its IP address they will be accepted in the system. When they are accepted the users can post without being manually accepted. Because of this you should hold the comments for moderation for up to two days. There are some signs as to suspicious user activity these signs consist of posts that have a site end with anything other then the regular .com, .org etc. Also if the email has a lot of one letter repeating then it is most likely a spammer. The reason you want to wait multiple days before accepting posts from a user is so you can check the IP address coming from multiple posters. Generally if someone posts multiple times on the same blog post and they are not contributing anything to a discussion they are spammers who picked up on a permanent link and are monitoring the posts to see if they have gotten through just by posting and being accepted into the system.

The Second Setup

In this setup your users must register to your blog and fill out their username and password. It is much more secure because the spammers are more likely going to just find another blog rather then waste their time trying to get a post worthy account. I recommend going with this setup if you have something to offer regular users, However it may be best to keep the first setup until your community begins to grow. Without a community you are just going to have a blog with no discussions and/or comments.

Stop The Spam

There are some methods that you can use to prevent spam from happening. The first best thing that you can do is install Akismet. This is a WordPress plugin that checks your comments against the Akismet web service. This will check to see if the comment is spam or not. The only downfall is that you will require a WordPress API key. These are easy enough to get your hands, you just need to visit the WordPress site. Another method is to open up your admin page, locate the settings area on the left sidebar, click discussion. Now fill in the comment moderation as you see fit. On blacklist I have set the yandex.ru mail service because the only page requests from Russia are all spam related. Within the moderation section you should enter in all of the bad words you can think of. Another way to stop spam is to install yet another plugin. Math Comment Spam is a plugin that requires the user to answer a simple math equation before posting a comment. This stops a lot of spammers in their tracks but there are some that do get by.  This plugin is a little annoying to install because it requires that you modify the comment or post page within your theme. There are step by step instructions on achieving this. The final thing that you can do to prevent spam is moderate the comments properly and use your best judgement. Don’t immediately accept positive feedback just because it is there. This is how spammers work. They gain your trust and then fill your database up with spam.

Tags: , , , , , , ,