First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.

<style type="text/css">
#wrapper { clear: left; overflow: hidden; position: relative; width: 520px; }
#slideWrap { clear: both; position: relative; width: 9000px;}
.slide { float: left; width: 520px; }
 
#wrapper #slideNav { float: right; margin: -2.75em 0 2em 0; }
	#slideNav li { display: inline; padding: 0; }
		#slideNav li a {
			background: url(http://cmcilrath.rssready.net/xcel/assets/images/bg_slideNav.png?v=3) no-repeat -12px top;
			display: block;
			float: left;
			height: 12px;
			margin-right: .5em;
			text-decoration: none;
			text-indent: -999em;
			width: 12px;
		}
		#slideNav li a.next, #slideNav li a.prev { width: 10px; }
		#slideNav li a.selected { color: #000; background-position: -12px bottom; }
 
		#slideNav li#prevSlide a { background-position: top left; }
		#slideNav li#prevSlide a.disabled { background-position: bottom left; }
 
		#slideNav li#nextSlide a { background-position: top right; }
		#slideNav li#nextSlide a.disabled { background-position: bottom right; }
</style>

The FBJS script

<script>
<!--
function Each(array, block){
	for (var i=0, l = array.length; i<l; i++){
		block(array[i]);
	}
}
 
var currentSlide = 1;
var maxSlides = 5;
var animating = false;
var slideWidth = 520;
var currentPX = 0;
 
function nextSlide(){
	var nextSlideNum = currentSlide + 1;
	if(nextSlideNum >= maxSlides){ toggleButton('next','disable'); }
	else if (nextSlideNum == 2 && currentSlide == 1){ toggleButton('prev','enable'); }
	currentSlide = nextSlideNum;
	if(animating == false){ scroll('right'); }
	return false;
}
 
function prevSlide(){
	var prevSlideNum = currentSlide - 1;
	if(prevSlideNum == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','enable'); }
	currentSlide = prevSlideNum;
	if(animating == false){ scroll('left'); }
	return false;
}
 
function toggleButton(button,state){
	if(button == 'next' && state == 'disable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next disabled">next slide &gt;</a>').removeEventListener('click',nextSlide);
	}
	if(button == 'next' && state == 'enable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next">next slide &gt;</a>').addEventListener('click',nextSlide);
	}
	if(button == 'prev' && state == 'disable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev disabled">&lt; previous slide</a>').removeEventListener('click',prevSlide);
	}
	if(button == 'prev' && state == 'enable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev">&lt; previous slide</a>').addEventListener('click',prevSlide);
	}
}
 
function scroll(direction){
	Each(document.getElementById("slideNav").getElementsByTagName("a"), function(as){
		as.removeClassName("selected");
	});
 
	document.getElementById("slideNav-"+currentSlide).addClassName("selected");
 
	animating = true;
	var pixelShift = slideWidth * (currentSlide-1);
	var startingSlideNum = currentSlide;
	var Slide_container = document.getElementById('slideWrap');
 
	if(direction == 'left'){
		Animation(Slide_container)
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.by('right', '-' + pixelShift + 'px').from(currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('left'); }
		}).go();
	}
	if(direction == 'right'){
		Animation(Slide_container)
			.by('right', pixelShift + 'px').from(currentPX + 'px')
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('right'); }
		}).go();
	}
 
	currentPX = pixelShift;
}
 
function showSlide(num){
	startingSlide = currentSlide;
	currentSlide = num;
 
	if(num > startingSlide){ scroll('left'); }
	else if (num < startingSlide) { scroll('right'); }
 
	if (startingSlide == maxSlides && currentSlide == 1){ toggleButton('next','enable'); toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides && startingSlide == 1){ toggleButton('prev','enable'); toggleButton('next','disable'); }
	else if (currentSlide == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','disable'); }
	else if (startingSlide == 1) { toggleButton('prev','enable'); }
	else if (startingSlide == maxSlides) { toggleButton('next','enable'); }
}
//-->
</script>

FBML Markup

Simple markup here, slideNav controls the slide with onclicks, the JS does the magic.

<div id="wrapper">
	<h2>Header</h2>
	<ul id="slideNav">
		<li id="prevSlide"><a href="#" class="prev disabled">&lt; previous slide</a></li>
		<li><a href="#" id="slideNav-1" onclick="showSlide(1); return false;" class="selected">1</a></li>
		<li><a href="#" id="slideNav-2" onclick="showSlide(2); return false;">2</a></li>
		<li><a href="#" id="slideNav-3" onclick="showSlide(3); return false;">3</a></li>
		<li><a href="#" id="slideNav-4" onclick="showSlide(4); return false;">4</a></li>
		<li><a href="#" id="slideNav-5" onclick="showSlide(5); return false;">5</a></li>
		<li id="nextSlide"><a href="#" class="next" onclick="nextSlide(); return false;">&gt;</a></li>
	</ul>
	<div id="slideWrap">
        <div id="slide_1" class="slide">
			<h3><a href="#">Title 1</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_2" class="slide">
			<h3><a href="#">Title 2</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_3" class="slide">
			<h3><a href="#">Title 3</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_4" class="slide">
			<h3><a href="#">Title 4</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_5" class="slide">
			<h3><a href="#">Title 5</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
	</div>
	<!-- end slideWrap -->
</div>

1. Get MAMP up and running, no special setup is needed here.
2. Download Zend Framework and place it wherever you’d like. I actually retrieved my copy via SVN so that I can easily upgrade it later. To do this open up terminal and follow these commands:

   cd /Applications/MAMP/
   mkdir svn
   cd svn
   mkdir zendframework
   cd zendframework
   svn checkout http://framework.zend.com/svn/framework/standard/trunk
   

3. Now open your php.ini file located under /Applications/MAMP/conf/php5/php.ini
4. Search for include_path (around line 411 on mine) and add the location of your zend framework:

   include_path = ".:/usr/lib/php:/usr/local/lib/php:/Applications/MAMP/svn/zendframework/trunk/library"

   Make sure to include the library directory otherwise you’ll get a blank page in Zend Framework

5. Zend Framework also comes with a shell script that will help you with RAD (Rapid Application Deployment), you can create a shortcut to Zend Tools in terminal by adding an alias to your profile under /etc/profile (thanks DS for pointing this out) and make sure to restart terminal after you’ve done so:

   alias zf=/Applications/MAMP/svn/zendframework/trunk/bin/zf.sh

6. Test if the Zend Tool is installed correctly by showing the version:

   zf show version

7. Finally navigate to the directory you’d like to create your first project in:

   cd /Applications/MAMP/htdocs/

   and with Zend Tool creating a project is simple:

   zf create project test

For too long I’ve put off learning Flash because I never liked the layout of the program, but I decided today that like it or not, flash is a very popular front-end development tool. Being a front-end developer it’s important to know every tool and technology to some extent and understand the inner workings of each technology and how to integrate them with other markup and programming. So let’s dive into some screenshots and descriptions and learn Adobe Flash.

Getting to know the program

Create a new Flash File (Actionscript 3.0)

• Create a new Flash File by going to File > New > Flash File (Actionscript 3.0)
• Change the document size and frame rate to your liking (Modify > Document), I used 640 x 310 and 18 fps
• Use the Rectangle tool and draw a rectangle on Layer 1 with the color you’d like
• Create any other layers or draw any other objects or place text. I created a text object on top of the rectangle
• Name “Layer 1″ to “Background” and create a new layer named “Code”
• Save the Document

Create a new Actionscript File

Paste in the code

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

/* Blurry Lights Animation */
 
package Classes
{
	/* Import required classes */
 
	import flash.display.MovieClip;
	import flash.filters.BitmapFilter;
	import flash.filters.BlurFilter;
	import flash.events.Event;
 
	public class Lights extends MovieClip
	{
		/* Vars */
		private var lightsNumber:int;
		private var xSpeed:int;
		private var ySpeed:int;
		private var lightsDir:String;
		private var areaW:int;
		private var areaH:int;
		private var lights:Array = new Array();
 
		/* Main function */
		public function init(areaWidth:int, areaHeight:int, numberOfLights:int, lightSize:int, lightColor:uint, minimumScale:Number, hSpeed:int, vSpeed:int, dir:String, quality:int):void
		{
 
			/* Set variables */
			areaW = areaWidth;
			areaH = areaHeight;
			lightsNumber = numberOfLights;
			lightsDir = dir;
 
			/* Use a for to create the parameter-specified number of lights*/
			for (var i:int = 0; i < numberOfLights; i++)
			{
				/* Create the specified number of lights */
 
				var light:MovieClip = new MovieClip();
 
				/* Set random speed to x and y based on the params*/
 
				xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed);
				ySpeed = Math.round((Math.random() * vSpeed) + 0.5);
 
				light.xSpeed = xSpeed;
				light.ySpeed = ySpeed;
 
				/* Create lights */
 
				light.graphics.beginFill(lightColor);
				light.graphics.drawCircle(0, 0, lightSize / 2);
				light.graphics.endFill();
 
				/* Set a position based on the params specified */
 
				light.x = Math.floor(Math.random() * areaWidth);
				light.y = Math.floor(Math.random() * areaHeight);
 
				/* Add blur, we declare the var here to get a new blur w/every light */
 
				var b:int = Math.floor(Math.random() * 10) + 5;
 
				var blur:BitmapFilter = new BlurFilter(b,b,quality);
 
				var filterArray:Array = new Array(blur);
 
				light.filters = filterArray;
 
				/* Change alpha */
 
				light.alpha = Math.random() * 0.6 + 0.1;
 
				/* Scale */
 
				light.scaleX = Math.round(((Math.random() * (1 - minimumScale)) + minimumScale) * 100) / 100;
				light.scaleY = light.scaleX;
 
				/* Add the lights */
 
				addChild(light);
 
				/* Store lights in an array to use it later */
 
				lights.push(light);
 
				/* Check for lights direction */
 
				checkDirection();
			}
		}
 
		/* Check direction */
		private function checkDirection():void
		{
			for (var i:int = 0; i < lights.length; i++)
			{
				switch ( lightsDir )
				{
					case "up" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveUp);
 
						break;
					case "down" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveDown);
 
						break;
					case "right" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveRight);
 
						break;
					case "left" :
 
						lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);
 
						break;
					default :
 
						trace("Something weird just happened!");
				}
			}
		}
 
		/* Move Up function */
		private function moveUp(e:Event):void
		{
			e.target.x += e.target.xSpeed;
			e.target.y-=e.target.ySpeed;
 
			/* Reset light position, Y first, then X  */
 
			if (e.target.y + (e.target.height / 2) < 0)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
 
			if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Down function */
		private function moveDown(e:Event):void
		{
			e.target.x+=e.target.xSpeed;
			e.target.y+=e.target.ySpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH)
			{
				e.target.y = 0 - (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
 
			if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
			{
				e.target.y = areaH + (e.target.height / 2);
				e.target.x=Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Right function */
		private function moveRight(e:Event):void
		{
			e.target.x+=e.target.ySpeed;
			e.target.y+=e.target.xSpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
			{
				e.target.x = 0 - (e.target.height / 2);
				e.target.y = Math.floor(Math.random()*areaH);
			}
 
			if ((e.target.x - e.target.width / 2) > areaW)
			{
				e.target.x = 0 - (e.target.height / 2);
				e.target.y = Math.floor(Math.random()*areaW);
			}
		}
 
		/* Move Left function */
		private function moveLeft(e:Event):void
		{
			e.target.x-=e.target.ySpeed;
			e.target.y-=e.target.xSpeed;
 
			/* Reset light position, Y first, then X */
 
			if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
			{
				e.target.x = areaW + (e.target.width / 2);
				e.target.y=Math.floor(Math.random()*areaH);
			}
 
			if ((e.target.x + e.target.width / 2) < 0)
			{
				e.target.x = areaW + (e.target.width / 2);
				e.target.y=Math.floor(Math.random()*areaW);
			}
		}
	}
}

• Note the line “package Classes” near the top. This is the name of the folder that will contain your class file. Make sure you have this folder in the same directory as your other flash file and that the name of the folder matches the name of the package.
• Save the file inside your “Classes” directory

Add your Actions to your Flash File

You’ve created the ActionScript file and Lights class, now all you need to do is call that class and pass the parameters to the script. Do this by going to Window > Actions and pasting in the code. Save and preview / publish and you’re done!

import Classes.Lights;
 
  var light:Lights = new Lights();
 
  light.init(640, 310, 10, 300, 0xFFFFFF, 0.5, 1, 1, "up", 2);
 
  addChild(light);

Want more?

Read more of the programming side

Many people want to know how to design a logo from start to finish. Let me address first, that logo design is not something that should be taken lightly and doesn’t come cheap. Not everyone can be as fortunate as Nike and get an effective logo for only $35. In fact, designing a highly effective logo takes expertise in many fields including advertising, marketing, and design.

This post is intended to help young and ambitious designers with resources to research, conceptualize, and design a logo. If you’re a business looking to hire a logo designer, you can hire me through my graphic design company, which offers full company branding as well as internet marketing and advertising.

Identify and Brainstorm

Before getting into the concept stage of logo design, you must first identify who your client is, what branding (if any) they have, and what demographic their business is targeting. These are all going to be crucial to the design and development of a logo.

To get started with the tools you’ll need to design, you need to identify the colors, fonts, icons, and images that will best represent the client. If they have a brand already you won’t have much difficulty doing this. However, if you’re starting from scratch, you’ll need to do some research just to setup your workspace in photoshop or illustrator.

Logo Color

Start with a color scheme and browse around for a while on colourlovers.com and ask yourself while you browse what is the demographic the client is targeting? I usually go by age, sex, and location to get started.

Age

Targeting Young Children and Parents
Start by looking at pastel colors (soft, chalky colors), because babies and children are viewed as fragile and gentle.

Targeting Children and Teenagers
Try heavy contrasts (neon pinks, greens, blues, black), just look at any typical teenager’s myspace and you’ll see what I mean

Targeting Young Adults
Try the primary colors with different lightness/darkness and contrast (light blue and white on dark blue for example)

Targeting Middle Aged Adults and Older
Try soft and dark (beige, grays, retro). Pretty much match the style that was popular when they were young adults

Location

Then look at demographic by location to determine an even narrower selection of colors, often times you have to think backwards of what society has taught you, and stereotype people. Cultures can be very different and have different trends and styles that are attractive. Compare Japan to the US for example, and you’ll see a huge difference in color preference and design.

Logo Shape

Next identify iconography. This is actually easiest to do with finding words that relate to the client. For example, pretend Nike needed a brand and the “swoosh” didn’t exist. In this phase I would identify words that relate to their business to use as a base for iconography:

Words Relating to the Company Name and Services:

• Running / Movement / Fast / Motion
• Sports / Tennis / Soccer / Football / Basketball / Baseball / Hockey
• Greek Gods / Victory / Active / Fast / Strength
• Shoes / Shirts / Apparel / Equipment

Finally identify font. Typography for a business is almost as important or sometimes IS the logo design. Occasionally this phase comes AFTER the logo design, but if it’s easy to identify in the beginning then do so.

Check back in to read the next part of the series How to Design a Logo, which will cover the actual Logo Design. For more reading on logo design, check out How to design a logo by Jacob Cass.

Kazaa and Limewire are DEAD

It’s amazing to me how many people are still using the old method (pure) Peer to Peer (P2P) which connects a user directly to other users to download software, music, movies, and other media. Peer-to-peer applications such as limewire, kazaa, morpheus, ares, and others, were popular through the late 80′s and early 00′s. Many people still recognize and remember these popular names of programs and when they decide they want to download a song, they often go looking for what they know. But using these legacy programs could cost you.. a lot. I’m sure everyone reading this post has heard of the Music Industry’s attack on downloading and P2P as it’s been all over the news for the last few years. These media industries are finding and suing individuals for downloading media illegally and the easiest way for them to execute these seek-and-destroy lawsuits is to use a rapid spread environment like legacy P2P applications (to classify legacy, I’m referring to 1st-3rd generation P2P). Let me give you a hypothetical which is the most common model for these seek-and-destroy lawsuits to use:

You hear a song on the radio that you really want. It’s a very popular song and you know you’ve seen it all over the net, but haven’t been able to find a site to download it from for free. You know that you could probably download it the way your friends have been doing it for years.. let’s think.. well, you don’t know much about how they download, but you know they use a program called limewire. Or maybe you even used limewire a few years ago, but stopped for whatever reason for a time.

So you google and find a copy of limewire to download and install. You run it and search for the song. Minutes later your song appears to be downloaded and working just fine. It’s shows a full 3 minutes or so, and even the file size seems to be a normal mp3 size. Let’s pretend you even go one step further to be safe and run a virus scan, and the file appears to be okay. So you open it up in your music player, and nothing plays, it’s just blank. You mess around with it for a bit, and then give up and delete it, thinking it must just be a dud.

Stop the hypothetical. What you just did was download a trojan, a file that appears harmless but opens a “back door” on your computer allowing someone to enter in silently. Many media industries now have the right to compromise your computer and then scan and find just how many files are illegally downloaded on their. They gave them this right by downloading and opening that music file. You knew it wasn’t legal, but you did it anyway. That’s all the justification that empowers them to come at you and sue you for all the music you own illegally. This has happened to a large number of legacy P2P users and is still happening in the present. It’s no joke, and it’s something to be worried about.

But there’s hope.. say hello to Torrents

Bram Cohen invented a technology called BitTorrent in 2001 which allowed for P2P to become a safe place again. BitTorrent is a P2P file-sharing protocol used to distribute large amounts of data in smaller segments and is one of the most common protocols for file transfer. By some estimates BitTorrent accounts for almost 50% of all traffic on the entire Internet [source]. On top of that, isoHunt estimates the total amount of content/media is currently more than 1.2 petabytes. Those numbers are frightening to some and encouraging to others, take it as you will.

How BitTorrent works

Torrents start first with a seed. The initial distributor of the file(s) acts as the first seed. Each peer who downloads the seed also uploads them in segments to other peers, which allows for a highly efficient transferring across many users. Picture torrents as a puzzle, a minimum of one completed puzzle or seed is needed to begin spreading the pieces among thousands of users/peers and the addition of more seeds increases the likelihood of a successful connection exponentially. This meaning that if out of 3 peers you are PERSON A and you need PIECE 3, if PERSON B doesn’t have it, you check another peer. Once you find one, such as PERSON C, you can then retrieve that piece from that peer. Once all the pieces are retrieved, your application completes the puzzle and you have a final result of the file you were trying to attain. Relative to standard Internet hosting, this provides a significant reduction in the original distributor’s hardware and bandwidth resource costs as well as provides redundancy against system problems and reduces dependence on the original distributor. From a legal standpoint this has advantages as well, because rather than downloading song.mp3 which is clearly a music file, you are instead simply downloading segments of data, which can be argued in court on whether those segments make song.mp3 or are simply random bits of data that could make anything. I’m sure this would make sense why it would be harder for the media to inject their Trojan Files as well.

So am I safe using torrents?

While torrents aren’t completely safe from the media, they are even less safe from viruses. Don’t misunderstand me in that statement, however, because torrents are still quite a bit safer than the legacy methods of P2P. The original seeder can still inject a virus or trojan into whatever file they’re sharing, so it’s best to read comments or information about the tracker/seed and see what others are saying. Generally if it’s had a few downloads, it will also have a few comments and peers are your best defense. Overall torrents are the 4 generation of P2P file sharing, and are much safer than old methods.

I feel good about it, where do I go now

There are many torrent applications out there as well as many torrent search engines. I’m going to provide my bias opinions in my recommendations, but here is a non-bias torrent software listing.

Vuze

Vuze (formerly know as “azureus”) is a cross-platform torrent application that installs if JAVA is enabled. It may be slightly slower than other applications for initial load times and memory used, but for the average user, it’s well worth it for a better interface and built in search functionality that will most likely eliminate your need to search anywhere else.

uTorrent

Known as both “u-torrent” and “micro torrent”, this is the most popular torrent tool today. uTorrent is lightweight and fast, however is limited to Windows. While many prefer uTorrent, I find it to be a little less than Vuze.

BitComet

This application used to be my favorite, and it’s still up there, but it’s just doesn’t stand-up to how lightweight and simplistic uTorrent is.

Torrent Search Engines

If you’re having trouble finding a torrent, you can always manually look in different torrent search engines. Here are the best ones according to about.com:

• Special Mention: SpiralFrog – while not directly a torrent site, spiralfrog offers membership-only free and legal music downloads using a very special license-renewal concept
• Gpirate – is getting rave reviews from several About.com readers
• Mininova – is the successor to Supernova, one of the original big torrent databases of the Web
• Torrent-finder – several readers from the central USA submitted this site recently. This site is gaining a bigger readership every day
• Demonoid – is now back online! They have established themselves outside of the USA this spring 2008, and have resumed torrent operations. Demonoid is still a private community, and members are held liable for any leeching that their invited friends do in this community. If you are lucky enough to get a Demonoid membership, invite your friends carefully, lest you lose your own membership.
• Isohunt – in a shocking turn of the tables this September, the Isohunt webmaster is counter-suing the Canadian music industry. He is claiming that previous copyright violation suits against him were unfounded, and that he is entitled to have his legal expenses recovered.
• The Pirate Bay – by readership size, is the most popular torrent search site today. Pirate Bay also has an immense database of 600,000+ torrents, the single largest database available on the web.
• Bitsoup – is a growing favorite amongst P2P downloaders. As the trend towards private torrent sharing continues, you will need to signup and join as a member to participate in the Bitsoup swarm.
• Torrentscan – is a search engine that searches other torrent search engines

Some more reading

• View the full list of top 35 Torrent Search Engines on About.com
• Complete Comparison of BitTorrent Clients
• Complete Comparison of all P2P Software

In the early design phase, I had a really vague idea of what I wanted my site to be, but I didn’t want it to be “typical” and I hadn’t really seen a site that matched what I was going for. I still started first by looking around at what I liked in other sites, and thinking of how I could incorporate that into my own. Then after the first week I happened to come across a theme that was absolutely gorgeous, by Darren Hoyt and Matt Dawson and used it as my base for development. I love the grid, the structure and the User Interface that this layout has. My approach is once you’ve established your frame, UI, and grid; you can slowly add creative enhancements as you go (at least that’s my preferred approach, some designers and such may argue it, depends on the scope really).

After I applied the new theme, I began my breakdown approach by changing the color scheme, and re-adjusting some of the positions/sizes/padding/etc on the elements of the page. For example, I wanted larger font sizes, better font spacing, a different color scheme, etc. Once i had the theme, I started making the modifications to the style sheets. Most themes will use just one or two stylesheets, editable within WordPress itself under the Design tab, or within the wp-content/themes/yourtheme if accessing the site via FTP. Style are typically labeled style.css or separated into different layout styles like nav.css, type.css, posts.css and so forth.

HTML and CSS

For those of you that are just starting out, I want to go over some basics so that I don’t lose you further down the road. I’m sure if you’ve been reading anywhere on how to make a website you’ve seen the acronyms HTML and CSS. These are two extremely important pieces to front-end development. They define structure and how to present structure.

HTML stands for HyperText Markup Language, which basically means it’s transferable content. HTML serves as the structure of a website. If HTML were part of a building a house, it would be the lumber, doors, windows, drywall, etc.

CSS stands for Cascading Style Sheets, which means transferable/reusable styles. CSS serves as the display of a website. If it were part of building a house, it would be the overall blueprint and floor plan, as well as the paint, trim and furniture.

Hopefully my analogies make sense.. moving forward.

Using CSS to layout your site

So if you downloaded a theme and opened the main CSS files, you’ll see that some of it just clicks. Things like “background-color” are literal to what they’re styling. The hardest part to CSS isn’t colors and fonts, but more in layout like sizes, margins, and paddings. I’m not going to define all the style definitions, but like I said before, CSS is both the blueprint and the paint, so some styles relate to structure and some relate to skin.

The best way to learn CSS is to mess around. The basics that you need to know are elements, classes and ID’s. Elements are HTML defined content, such as <p> paragraph tags, <div> structure tags, <ul> lists, <h1> headers, etc. Classes can be attached to these tags like <p class=”redtext”> in HTML and to style that in the CSS you would define the paragraph tag with the class redtext be writing p.redtext { color: red; } in the style sheet. The period represents the class and the p represents what element that style is attached to. To style all paragraph tags we could simple drop the class and write p { color: red; } because then we’re simply targeting the paragraph element. This principles works the same with id’s which are represented with a # symbol. The difference between an id and class is that a class can be used multiple times in a single page and an ID can only be used once.

Homework

For this next week, try to learn some CSS basics. If you’re a beginner, work from a theme that someone already did the hard part of laying out, and just change colors or adjust sizes slightly and tweak it until your happy. Try and get the site styled with the colors you like and sizes you like. If it looks boxy and boring, that’s GOOD. We don’t want to focus on the creative elements more than we focus on the layout and structure yet.. that comes with time.

***Please direct all comments and questions through this blog post rather than emailing me, that way others can review and build off communication back and forth***

Prerequisites

There are two main phases to web development and they are the most crucial. An application or website needs to have a good User Inteface (UI) and remain highly reliable/functional. These two phases are usually labeled as Front-end development (which covers everything from Graphic Design to coding in XHTML, CSS, Flash, and JS) and Back-end development ( which involves a server side programming language such as PHP, ASP, or Ruby and a database such as MySQL, MS SQL, etc). I’m going to use this terminology often throughout this tutorial, so it’s best that you research these terms now if you don’t know what those technologies are.

Part 1: Design

Lets get started. First I want you to draw a design. You can do this however you want, a lot of people jump right into Photoshop and start designing. I personally like to bust out a pen and paper and sketch first. I like to get a feel for layout, grid, and flow before I get too heavy into a designed mockup. This method may prove useful for those of you who don’t know photoshop, as it will help you understand and learn the process of creative and UI thinking and give you a blueprint to reference if you design without a PSD to breakdown.

Spend some time on this phase. Like I said its the most important phase. Often times, in the professional world, a designer will create 3 completely different mockups or wireframes presenting the same content. This allows and forces the designer as well as the client to see and think with three completely different concepts and ideas for presentation. I recommend that you do such as well. After you develop 3 completely different ideas, sit down with someone else and circle things that you like and dislike about each and try to chose the one that best presents the concept. If you can or want, merge ideas from the other concept designs with the base that you choose. Then refine it like crazy. Many iterations are often necessary to reach a design that you’re completely satisfied with.

The next tutorial will follow in 1 week. This will force those who are following my posts in real time, to spend the amount of time necessary to refine. Feel free to leave comments, ask questions, or make suggestions in the mean time.

Setting Goals

I think it’s really important to have well define goals.. always. It’s funny, I remember back to Grade School being taught that individuals that set goals and write them on paper or communicate them, are highly likely to achieve them over someone with the same unspoken goals. Goal setting is not a hard thing to do, and they don’t take long. So why don’t more people set goals? I think because there is so much mystery in life. Some think that goal setting will lead them to a anal-retentive life style and stop them from being spontaneous and crazy. But this is simply not true, I’m one of the craziest and most spontaneous goal-setters you’ll ever meet. Along with that, I think that people avoid self-discovery. Often times we let the world define us and we don’t want to look in our own hearts and decide for ourselves what we want or should have in life. Shame on society.

So set goals. It’s simple. Do it right now, before you even read any farther. Write down one thing that you really want or at least say it out loud, and then continue on to find out how to reach that goal.

Following a Course of Action

This is one of my favorite terms to use. “Course of Action” simply means, “What do I do next.” Many times the course of action is rather small and highly attainable. Say you want to become President of the United States. Most would agree that’s a really high goal to try and achieve. Rather than just talking about becoming president or dreaming big dreams, you have to look at what you can do initially to get you there. So to specify the setting further, pretend you’re a college student currently and Presidency is your ultimate goal. A good course of action would be to find either a politacal college group on campus, or find an alliance or association of other students looking to reach similar goals. This is something you can do immediately with little to no cost, which also helps you to network and meet people that can help you reach the next level.

Course of action can also be define as doing. Meaning.. what can you do right now to reach your goal. If you can’t do it this instant when is the soonest you can do it and what will get you there faster. Though if you have to plan that much out for a dream, then it may be best to setup a hierarchy of actions. I’ll get to that in a minute though.

Tracking Deliverables

The next step after your course of action is defining your deliverables which are simply tangible objects — what can you physically touch, see, give, receive, and so on.. to track your progress towards your goal. Once again, using the scenario I created of a college student trying to become President, the first deliverable might be an official membership in a group, maybe a few business cards of potential partners, or maybe a few contacts and friendships formed of people with the same dreams. I’ve theorized for some time now that your work ethic and sense of business is most heavily influenced by your five closest friends. If this is true, a friendship with someone that has the same goals in life as you can potentially be one of the most important relationships you make and is a very valuable deliverable indeed.

Rinse and Repeat

I could talk for quite some time about business strategy and how a cash-flow diagram, solid business model, or a client network are crucial for doing business, but that would break away from the goal of this post. The deliverable I’m trying to give you is plain and simply a easy way to set and follow goals.

With that said, setting goals > following a course of action > delivering a result are all you need to get started. These components can be used and stacked together.. a team of goals working towards one vision. Some goals require micro goals and some micro goals have to lead to some macro goal. It’s all about building blocks and following steps. Crazy similes.

–

Along this same concept, my good friend, Ravi Vora has a good post on following your dreams that you should definitely check out.

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… C: wait… SD: wait…