Derek J Entringer Interactive Media/Web Application Developer

Flex 3 | Simple FLV Player | Scrubbing, Pause, and Play

Derek J Entringer — Sat, 01 Nov 2008 22:11:36 +0000

Using Flex, it’s extremely easy to create a simple FLV player. This simple flv player has a scrub bar, pause/play buttons, and can load a flv from any url.

See the example

Download the source

Flash Bandwidth & Port Detection

Derek J Entringer — Wed, 29 Oct 2008 18:42:16 +0000

Being able to detect a users bandwidth can be an important part of serving them streaming video. Using their bandwidth you can stream a video that will play well using their connection speeds.

The first step is to create our NetConnection.as file. This is used by our bandwidth checking script to connect to our Flash Media Server via RTMP, select an available port, and talk with our bw_check.asc to report the users available bandwidth.


import mx.events.EventDispatcher;
class NCManager extends Object 
{
	var addEventListener : Function;
	var removeEventListener : Function;
	var dispatchEvent : Function;
	var dispatchQueue : Function;
	private var k_DEFAULTCONNLIST = [
	{
		protocol : "rtmp", port : 1935
	}, 
	{
		protocol : "rtmp", port : 443
	}, 
	{
		protocol : "rtmpt", port : 80
	}, 
	{
		protocol : "rtmps", port : 443
	}];
	private var k_TIMEOUT : Number = 60000;
	private var m_connList : Array;
	private var m_serverName : String;
	private var m_appName : String;
	private var m_streamName : String;
	private var m_connListCounter : Number;
	private var m_flashComConnectTimeOut : Number;
	private var m_validNetConnection : NetConnection;
	function NCManager ()
	{
		trace (”NCManager initialized”);
		EventDispatcher.initialize (this);
	}
	function connect (p_serverName : String, p_appName : String, p_connList : Array)
	{
		m_serverName = p_serverName;
		m_appName = p_appName;
		m_connList = (p_connList != undefined) ? p_connList : k_DEFAULTCONNLIST;
		clearInterval (m_flashComConnectTimeOut);
		m_flashComConnectTimeOut = setInterval (this, “onFlashComConnectTimeOut”, k_TIMEOUT, k_TIMEOUT);
		for (var i = 0;
		i < m_connList.length;
		i ++)
		{
			this ["nc" + i] = new NetConnection ();
			this ["nc" + i].owner = this;
			this ["nc" + i].connIndex = i;
			this ["nc" + i].onBWDone = function (p_bw)
			{
				this.owner.dispatchEvent (
				{
					type : "ncBandWidth", kbps : p_bw
				});
			};
			this ["nc" + i].onBWCheck = function (counter)
			{
				return ++ counter;
			};
			this ["nc" + i].onStatus = function (info)
			{
				this.pending = false;
				this.owner.m_validNetConnection = this.owner ["nc" + this.connIndex];
				if (info.code == "NetConnection.Connect.Success")
				{
					clearInterval (this.owner.m_flashComConnectTimeOut);
					this.owner.dispatchEvent (
					{
						type : "ncConnected", nc : this.owner.m_validNetConnection, protocol : this.owner.m_connList [this.connIndex].protocol, port : this.owner.m_connList [this.connIndex].port
					});
					for (var i = 0;
					i < this.owner.m_connList.length;
					i ++)
					{
						if (i == this.connIndex)
						{
							continue;
						}
						if (this.owner ["nc" + i].pending)
						{
							clearInterval (this.owner ["ncInt" + i]);
							this.owner ["nc" + i].onStatus = null;
							this.owner ["nc" + i].close ();
							this.owner ["nc" + i] = null;
							delete this.owner ["nc" + i];
						}
					}
				} else 
				{
					trace (this.owner.m_connList [this.connIndex].protocol + ": " + this.owner.m_connList [this.connIndex].port + ", onStatus: " + info.code + " : " + info.description);
				}
			};
			this ["nc" + i].pending = true;
		}
		m_connListCounter = 0;
		nextConnect ();
	}
	function getStreamLength (streamName : String)
	{
		var res = new Object ();
		res.owner = this;
		res.name = streamName;
		res.onResult = function (p_length)
		{
			this.owner.dispatchEvent (
			{
				type : "ncStreamLength", length : p_length, name : res.name
			});
		};
		m_validNetConnection.call ("getStreamLength", res, streamName);
	}
	function getBandWidth (Void) : Void 
	{
		m_validNetConnection.call ("checkBandwidth", null);
	}
	function getActiveConnection (Void) : NetConnection 
	{
		trace(m_validNetConnection == undefined ? null : m_validNetConnection);
		return m_validNetConnection == undefined ? null : m_validNetConnection;
	}
	function closeConnections ()
	{
		trace("CLOSING= "+m_validNetConnection);
		m_validNetConnection.close();
	}
	private function nextConnect (Void) : Void 
	{
		clearInterval (this ["ncInt" + m_connListCounter]);
		this ["nc" + m_connListCounter].connect (m_connList [m_connListCounter].protocol + "://" + m_serverName + ":" + m_connList [m_connListCounter].port + "/" + m_appName);
		if (m_connListCounter < (m_connList.length - 1))
		{
			m_connListCounter ++;
			this ["ncInt" + m_connListCounter] = setInterval (this, "nextConnect", 1500);
		}
	}
	private function onFlashComConnectTimeOut (timeout : Number) : Void 
	{
		clearInterval (m_flashComConnectTimeOut);
		this.dispatchEvent (
		{
			type : "ncFailedToConnect", timeout : timeout
		});
		for (var i = 0;
		i < m_connList.length;
		i ++)
		{
			if (this ["nc" + i].pending)
			{
				clearInterval (this ["ncInt" + i]);
				this ["nc" + i].onStatus = null;
				this ["nc" + i].close ();
				this ["nc" + i] = null;
				delete this ["nc" + i];
			}
		}
	}
}

The second step is to create our FMS server side code. The bwcheck.asc file sends packets at a size of about 16Kb from the FMS and calculates the response latency over the users network.


application.onConnect = function(p_client, p_autoSenseBW) {
	this.acceptConnection(p_client);
	if (p_autoSenseBW)
		this.calculateClientBw(p_client);
	else
		p_client.call("onBWDone");
}
Client.prototype.getStreamLength = function(p_streamName) {
	return Stream.length(p_streamName);
}
Client.prototype.checkBandwidth = function() {
	application.calculateClientBw(this);
}
application.calculateClientBw = function(p_client) {
	p_client.payload = new Array();
	for (var i=0; i<1200; i++){
		p_client.payload[i] = Math.random();
	}
	var res = new Object();
	res.latency = 0;
	res.cumLatency = 1;
	res.bwTime = 0;
	res.count = 0;
	res.sent = 0;
	res.client = p_client;
	var stats = p_client.getStats();
	var now = (new Date()).getTime()/1;
	res.pakSent = new Array();
	res.pakRecv = new Array();
	res.beginningValues = {b_down:stats.bytes_out, b_up:stats.bytes_in, time:now};
	res.onResult = function(p_val) {
		var now = (new Date()).getTime()/1;
		this.pakRecv[this.count] = now;
		this.count++;
		var timePassed = (now - this.beginningValues.time);
		if (this.count == 1) {
			this.latency = Math.min(timePassed, 800);
			this.latency = Math.max(this.latency, 10);
		}
		if ( this.count == 2 && (timePassed<2000)) {
			this.pakSent[res.sent++] = now;
			this.cumLatency++;
			this.client.call("onBWCheck", res, this.client.payload);
		} else if ( this.sent == this.count ) {	
			if ( this.latency >= 100 ) { 
				if (  this.pakRecv[1] - this.pakRecv[0] > 1000 ) {
					this.latency = 100;
				}
			}
			delete this.client.payload;
			//got back responses for all the packets compute the bandwidth
			var stats = this.client.getStats();
			var deltaDown = (stats.bytes_out - this.beginningValues.b_down)*8/1000;
			var deltaTime = ((now - this.beginningValues.time) - (this.latency * this.cumLatency) )/1000;
			if ( deltaTime <= 0 )
				deltaTime = (now - this.beginningValues.time)/1000;
			var kbitDown = Math.round(deltaDown/deltaTime);
			trace("onBWDone: kbitDown = " + kbitDown + ", deltaDown= " + deltaDown + ", deltaTime = " + deltaTime + ", latency = " + this.latency + "KBytes " + (stats.bytes_out - this.beginningValues.b_down)/1024) ;
			this.client.call("onBWDone", null, kbitDown,  deltaDown, deltaTime, this.latency );
		}
	}
	res.pakSent[res.sent++] = now;
	p_client.call("onBWCheck", res, "");
	res.pakSent[res.sent++] = now;
	p_client.call("onBWCheck", res, p_client.payload);
}

Third step. Bring everything together within our flash file, and print our results to text fields on the stage.


stop();
import NCManager;
var ns:NetStream;
var fileName:String;
var k_STARTTIME:Number = getTimer();
var k_SERVERNAME:String = "server_ip_here";
var k_APPNAME:String = "your_app_name_here";
var k_FILENAME_HIGH:String = "you_lowest_compression_flv_name_here";
var k_FILENAME_MED:String = "you_midrange_compression_flv_name_here";
var k_FILENAME_LOW:String = "you_highest_compression_flv_name_here";
var k_ASC_PATH:String = "rtmp://path/to/bwcheck";
globalsound = new Sound(); 
globalsound.setVolume(100);
nc = new NetConnection();
nc.connect(k_ASC_PATH,true);
nc.onStatus = function(info) {
	trace("Level: "+info.level+" Code: "+info.code);
	if (info.code == "NetConnection.Connect.Success") {
		trace("loaded: "+this.uri);
	}
};
NetConnection.prototype.onBWDone = function(p_bw) {
	trace("BANDWIDTH= "+p_bw);
	bandwidth.text = "Bandwidth= "+p_bw
	this.close();
};
NetConnection.prototype.onBWCheck = function() {
	return ++counter;
};
var ncm:NCManager = new NCManager();
var ncmListener:Object = new Object();
ncmListener.ncConnected = function(evt:Object) {
	trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Successfully connected using “+evt.protocol+”:”+evt.port);
	port.text = “connected using “+evt.protocol+”:”+evt.port
};
ncmListener.ncFailedToConnect = function(evt:Object) {
	trace(”Failed to connect after “+evt.timeout+” milliseconds.”);
};
ncmListener.ncStreamLength = function(evt:Object) {
	trace(”["+Math.round(getTimer()-k_STARTTIME)+"ms] Streamlength of “+evt.name+” is “+evt.length+” seconds.”);
};
ncm.addEventListener(”ncConnected”,ncmListener);
ncm.addEventListener(”ncFailedToConnect”,ncmListener);
ncm.addEventListener(”ncBandWidth”,ncmListener);
ncm.addEventListener(”ncStreamLength”,ncmListener);
ncm.connect(k_SERVERNAME,k_APPNAME);

Click here to see your bandwidth results.

Download the source

Use Actionscript to Detect Flash Version

Derek J Entringer — Fri, 24 Oct 2008 17:37:18 +0000

A friend my mine just asked me how he could find out how to detect his version of flash, so I wrote a quick bit of AS2 to help him out. Here’s a quick and easy way to detect a users flash version from within your Flash project.


//trace(eval("$version"));
version = eval("$version");
//The operating system: WIN, MAC, LNX
var osType;
//The player versions. 9,0,115,0
var majorVersion; 9
var majorRevision; 0
var minorVersion; 115
var minorRevision; 0
vers.text = version;
osArray = version.split(' ');
osType = osArray[0];
versionArray = osArray[1].split(’,');
majorVersion = versionArray[0];
majorRevision = versionArray[1];
minorVersion = versionArray[2];
minorRevision = versionArray[3];
feedback.text = “Operating System: “+osType + “\n” +
	“Major Version: “+majorVersion + “\n” +
	“Major Revision: “+majorRevision + “\n” +
	“Minor Version: “+minorVersion + “\n” +
	“Minor Revision: “+minorRevision;
trace(”Operating System: “+osType);
trace(”Major Version: “+majorVersion);
trace(”Major Revision: “+majorRevision);
trace(”Minor Version: “+minorVersion);
trace(”Minor Revision: “+minorRevision);

Click here to see your version of flash.

Download the source

Flex Builder: Remove css type selector warnings

Derek J Entringer — Wed, 08 Oct 2008 21:23:39 +0000

A small but very irritating problem started coming up during some development I’ve been working on in Flex. I kept getting errors when compiling in Flex Builder regarding some CSS.

“The type selector ‘classNameHere’ was not processed, because the type was not used in the application.”

It’s quite easy to turn this off by going into your project properties panel and select the Flex Compiler option and add the following into Additional compiler options:

-show-unused-type-selector-warnings=false

PHP Developer Best Practices

Derek J Entringer — Wed, 08 Oct 2008 17:52:04 +0000

Start using version control

Version control is like a big UNDO button for your coding. You can go back to your previous code revisions and can compare/rollback to specific code areas anytime you see necessary. It will keep track of all your changes and will empower you to track your development changes across your work/team. Also, in a distributed development team, version control helps prevent overwriting of code by team members and keeps all the members code up to date.

Subversion (SVN) is one of the most popular open source version control system. If you’re on windows platform, you can try TortoiseSVN, a client for SVN.

Use Object Oriented Programming when useful

Not surprisingly, object oriented programming is focused around objects. While the idea of objects may be foreign to you in coding terms, understanding what objects are and why we use them shouldn’t take long. In short, our non-programming world is comprised of objects. Computers, fish, clouds, people, and cars are all objects. Objects have properties like color, size, name, and speed. Objects can also be comprised of other objects: cars have doors; doors have handles; handles have plastic levers; so on and so forth. Objects are everywhere around us. For this reason, many programmers find object oriented programming relatively easy to understand.

In my opinion any OOP language should have:

Abstract data types and information hiding

Inheritance

Polymorphism

This can all be done using PHP classes:


x=$v;
    }
    function getX() {
    	return $this->x;
    }
}
?>

Of course you can use your own nomenclature but having a standardized one is useful.

Use coding standards

To develop anything programatically is difficult enough, this is why all programmers must work in an organised and systematic way. It is not obvious but the coding style you employ plays an important role in achieving this goal.

The idea is very simple: consistent code is much easier to maintain.

So, here are several reasons why to use coding specifications:

Multi-developer projects require coding standards. Your peer programmers have to understand the code you produce. A coding standard acts as the blueprint for all the team to decipher the code.
Even if you develop alone it’s advised to adhere to standards, because it really pays off when you revise your code after a time.
Simplicity and clarity achieved by consistent coding saves you from common mistakes.
Code becomes extensible and reusable. You don’t have to worry if people working on your current application would understand some reusable feature recycled from the previous project.
It just looks professional!

Document your code

So, why do we really need to document our code? Answer to this question may differ from programmer to programmer, but I strongly feel it helps in debugging, reverse engineering, re-engineering, testing and giving the code a neat look. Moreover, it’s a step towards standardization of coding methodology. When you document your code using coding standards, you can then use tools such as phpDocumentor to create professional documentation from your existing php source code.

Use php frameworks

Frameworks provide structure, and speed development. Some popular PHP frameworks such as Zend Framework, CodeIgniter, CakePHP, Symfony, and Kohana follow the Model-View-Controller (MVC) pattern, which itself is a strong advocate of good coding practice. They also usually come with a number of helpful libraries to make your life easier as a web developer.

Re-use code and libraries

Don’t re-invent the wheel. This is the basic concept that should be followed, even though it may seem slightly lazy at times. It actually means that you should not spend much time on solving a problem that has already been solved, in an efficient way, by other programmers. Using already available resources will save you time in your development process.

If you do end up having to create your solution from scratch, give back to the community and share what you’ve accomplished. This is the best part about an open source development community.

Professionally test your code

PHPUnit and SimpleTest are the two most widely used Unit testing suites for PHP. To make code testing viable, good tool support is needed. This is where PHPUnit comes into play. It is a member of the xUnit family of testing frameworks and provides both a framework that makes the writing of tests easy as well as the functionality to easily run the tests and analyse their results. SimpleTest is an open source unit test framework for the PHP programming language and was created by Marcus Baker. The test structure is similar to JUnit/PHPUnit. SimpleTest supports mock objects and can be used to automate the regression testing of web applications with a scriptable HTTP Client that can parse HTML pages and simulate things like clicking on links and submittings forms.

Use an IDE

An IDE provides a one-stop shop for your coding work. An IDE contains an editor in which you can edit the code, debug the code, view your code in a browser (often embedded), and check in and out of source code control. To support that functionality, an IDE has a set of features you don’t find in a basic editor, such as Notepad or Vim. Again, you can extend editors to do a lot of these things, but IDEs have all this functionality in one tidy package and they’re typically pre-configured.

Here are a few well put together and widely used IDE’s.

With so many excellent IDE options out there, some of which are even free, there’s really no reason not to give one a try, particularly if you’re a professional.

Zend To Collaborate With Adobe

Derek J Entringer — Thu, 25 Sep 2008 17:23:40 +0000

“Since bringing Flex to market, we’ve seen strong uptake among PHP developers, and we’re pleased to be collaborating with Zend and the PHP community to deliver deeper integration and increased productivity,” said David Wadhwani, General Manager, Platform Business Unit at Adobe. “The collaboration with Zend furthers Adobe’s commitment to open technology initiatives. Together, we will enable developers using Flex and Zend Framework to rapidly deliver highly engaging applications to both the browser and the desktop.” - David Wadhwani, General Manager, Platform Business Unit at Adobe.

This is really exciting, as a PHP/Flex developer, and it’s going to open even more opportunities for developing and integrating with the two code bases.

AS3 MP3 Player

Derek J Entringer — Fri, 05 Sep 2008 16:22:33 +0000

I have an upcoming project that will require an mp3 player that can load multiple songs, and let users choose which track they would like to listen to. I created this as a test, and will be developing it further for use on the site itself.

The player loads in mp3’s from an external file based on xml settings.

Here’s the actionscript 3 that is involved:


var getMusic:URLRequest;
var music:Sound = new Sound();
var soundChannel:SoundChannel;
var currentSound:Sound = music;
var pos:Number;
var currentIndex:Number = 0;
var songPlaying:Boolean = false;
var xml:XML;
var songlist:XMLList;
//preloader
function loadProgress(event:ProgressEvent):void {
    var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
	if(percentLoaded < 20){
		trace("loading");
	} else{
	}
}
function completeHandler(event):void {
    trace("DONE");
}
//load the xml
var loader:URLLoader = new URLLoader(); //create a new URLLoader Object
loader.addEventListener(Event.COMPLETE, whenLoaded); //add an event listener to that object
loader.load(new URLRequest("songs.xml")); //Requests our xml file that contains our song data
function whenLoaded(e:Event):void //WhenLoaded function(see line 50) runs when line 50 is complete
{
	xml = new XML(e.target.data);
	songlist = xml.song; //accesses our song tag in our xml file
	getMusic = new URLRequest(songlist[0].url);//get music from songlist
	music.load(getMusic);//load music
	soundChannel = music.play();//plays the music
	songTXT.text = songlist[0].title; //gets song name from xml
	artistTXT.text = songlist[0].artist; //gets artist name
	albumTXT.text = songlist[0].album;  //gets album name
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);//runs the next song function when a song completes
}
//add mouse events
next_btn.addEventListener(MouseEvent.CLICK, nextSong);
prev_btn.addEventListener(MouseEvent.CLICK, prevSong);
pause_btn.addEventListener(MouseEvent.CLICK,pauseSong);
/*——–Skips Songs—————————————-*/
function nextSong(e:Event):void
{
	if (currentIndex > (songlist.length() - 1))
	{
		currentIndex++;
	}
	else
	{
		currentIndex = 0;
	}
	var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
	var nextTitle:Sound = new Sound(nextReq);
	soundChannel.stop();
	songTXT.text = songlist[currentIndex].title;
	artistTXT.text = songlist[currentIndex].artist;
	albumTXT.text = songlist[currentIndex].album;
	soundChannel = nextTitle.play();
	songPlaying = true;
	currentSound = nextTitle;
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
//manage songs, and load their info
function prevSong(e:Event):void
{
	if (currentIndex < 0)
	{
		currentIndex–;
	}
	else
	{
		currentIndex = songlist.length() - 1;
	}
	var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
	var prevTitle:Sound = new Sound(nextReq);
	soundChannel.stop();
	songTXT.text = songlist[currentIndex].title;
	artistTXT.text = songlist[currentIndex].artist;
	albumTXT.text = songlist[currentIndex].album;
	soundChannel = prevTitle.play();
	songPlaying = true;
	currentSound = prevTitle;
	soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
function pauseSong(e:Event):void
{
	pos = soundChannel.position; //pause song at current position
	soundChannel.stop(); //stop sound
	songPlaying = false; // songPlaying is now equal to false
	play_btn.addEventListener(MouseEvent.CLICK,playSong);
}
function playSong(e:Event):void
{
	if(songPlaying == false) //if songplaying is equal to false run function below
	{
		soundChannel = currentSound.play(pos); //play from current position(used if it was paused)
		soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);//run nextSong function if current song is complete
		songPlaying = true; //songPlaying is now true
		play_btn.removeEventListener(MouseEvent.CLICK,playSong);
	}
}

Here is the xml:




	
		My Hero
		Foo Fighters
		The Colour And The Shape
		songs/Hero.mp3
	
	
		Learn To Fly
		Foo Fighters
		Theres Nothing Left To Lose
		songs/Fly.mp3

Download the source (Note: The mp3’s used are not included in the download)

Myspace Flash AS2 RSS Feed Reader

Derek J Entringer — Fri, 22 Aug 2008 18:14:53 +0000

A very simple RSS feed reader that displays links off to your blog created using Actionscript 2.


stop();
//create the xml object
xmlLoad = new XML();
xmlLoad.load(_root.feed);
xmlLoad.ignoreWhite = true;
xmlLoad.onLoad = function(success){
	//if successful
	if(success && xmlLoad.status == 0){
		//reset the text
		xml_text="";
		//list of items
		var xmlItems:XML = xmlLoad.firstChild.firstChild;
		for (var m = 0; m”+itemtitle+”

”;
			}
		}
	}
	//set the text
	xml_holder.text = xml_text;
}

The only library item needed is a TextArea component, placed on the stage with an instance name of “xml_holder”.

In order to embed and display this on your Myspace page (or anywhere really) you only need the following code:

Be sure to change the “?feed” variable to the url of your own RSS feed.

Click here for a preview

Download the source

BorrisPowell.com Fashion Couture

Derek J Entringer — Fri, 22 Aug 2008 04:52:58 +0000

With the inspirations of Borris Powell, I would like to announce the launch of BorrisPowell.com.

From the site:

“Luxury in women’s fashion has a new name—Borris Powell. Born in Alabama, the passionate designer developed his dreams of a career in women’s fashion early on in life. Throughout his childhood, while observing his mother preparing for a night out on the town or even a Sunday visit to church, he trained his young eyes on color and silhouette. This is how his lifelong dream began. He would often advise her on style choices and then, while everyone one was away, he would sneak into the living room to the play with the sewing machine and develop his craft.

Inspired by the masterful shapes of Christian Dior, Powell followed his dreams and moved to Chicago to start his design career in 1997. Over the following decade, at the consistent urge of his friends, he pursued his vision with an infectious entrepreneurial talent and creativity that has built him a devoted following of fans. His trademark silhouettes have the comforting familiarity of his early authentic family memories mixed with a chic nod to high-end city life.“

BorrisPowell.com combines high end fashion with high end web design and development.

The site was created using AS3 and all that Papervision3d has to offer in terms of custom image galleries, created by DerekEntringer.com

Visit the site at BorrisPowell.com

.htaccess and SEO

Derek J Entringer — Thu, 21 Aug 2008 21:52:53 +0000

Inbound Links

A .htaccess file can be an SEO’s vital friend. When visitors hit your site with either www.yourdomain.com or yourdomain.com, it splits your inbound links into two separate pages. This can have effects on your Google Page Rank. By correctly creating and implementing a .htaccess file at your server root, you can improve your website ranking.

To change the url in the browser before the page loads you can use two different methods.

Here, the url will always contain the www. before the domain name:

RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^www\.derekentringer\.com [NC]
RewriteRule (.*) http://www.derekentringer.com/$1 [R=301,L]

Here, you can take the www. away:

RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^www\.derekentringer\.com [NC]
RewriteRule (.*) http://derekentringer.com/$1 [R=301,L]

By deciding which of these ways of keeping your inbound links will work best, you can improve your search engine results.

301 Redirects

Redirect 301 / http://www.yournewdomain.com/

The above code is to be used when pointing multiple domain names to one domain (the main site) . This is often done by businesses wishing to protect their trademark by purchasing similar names and various top level domain names (TLD) for their company. This is also good for companies wishing to capture type in traffic of users who type keywords straight into the toolbars or their url area of the browser.

By using both of these methods, you can keep a tight seal around all of your inbound links, improve your SEO and Google Page Rank, and keep the files on your server more organized.

Keep Directory Index File Name Out of Your URL

Sometimes it just looks nicer to not have a url such as http://www.derekentringer.com/index.php. All we want is http://www.derekentringer.com.
Using your .htaccess you can eliminate it easily. You can also specify any directories that you might not want it to parse out the index file.

# Main Index exclude
DirectoryIndex index.php
RewriteCond $1 !^(index\.php|robots\.txt)
RewriteCond %{REQUEST_URI} !^/DirectoryYouDoNotWantChangedHere
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Now, there will never be an index file listed in the url, except for the directory “DirectoryYouDoNotWantChangedHere”.

Error Document Redirects

Instead of using a Control Panel to process redirects, you can use your .htaccess file. These links can either be redirected to your home page, or you can setup an error document.

# Handle Errors
ErrorDocument 100 http://www.derekentringer.com
ErrorDocument 101 http://www.derekentringer.com
ErrorDocument 102 http://www.derekentringer.com
# 2xx
ErrorDocument 200 http://www.derekentringer.com
ErrorDocument 201 http://www.derekentringer.com
ErrorDocument 202 http://www.derekentringer.com
ErrorDocument 203 http://www.derekentringer.com
ErrorDocument 204 http://www.derekentringer.com
ErrorDocument 205 http://www.derekentringer.com
ErrorDocument 206 http://www.derekentringer.com
ErrorDocument 207 http://www.derekentringer.com
# 4xx
ErrorDocument 400 http://www.derekentringer.com
ErrorDocument 401 http://www.derekentringer.com
ErrorDocument 402 http://www.derekentringer.com
ErrorDocument 403 http://www.derekentringer.com
ErrorDocument 404 http://www.derekentringer.com
ErrorDocument 405 http://www.derekentringer.com
ErrorDocument 406 http://www.derekentringer.com
ErrorDocument 407 http://www.derekentringer.com
ErrorDocument 408 http://www.derekentringer.com
ErrorDocument 409 http://www.derekentringer.com
ErrorDocument 410 http://www.derekentringer.com
ErrorDocument 411 http://www.derekentringer.com
ErrorDocument 412 http://www.derekentringer.com
ErrorDocument 413 http://www.derekentringer.com
ErrorDocument 414 http://www.derekentringer.com
ErrorDocument 415 http://www.derekentringer.com
ErrorDocument 416 http://www.derekentringer.com
ErrorDocument 417 http://www.derekentringer.com
ErrorDocument 418 http://www.derekentringer.com
ErrorDocument 419 http://www.derekentringer.com
ErrorDocument 420 http://www.derekentringer.com
ErrorDocument 421 http://www.derekentringer.com
ErrorDocument 422 http://www.derekentringer.com
ErrorDocument 423 http://www.derekentringer.com
ErrorDocument 424 http://www.derekentringer.com
ErrorDocument 425 http://www.derekentringer.com
ErrorDocument 426 http://www.derekentringer.com
# 5xx
ErrorDocument 500 http://www.derekentringer.com
ErrorDocument 501 http://www.derekentringer.com
ErrorDocument 502 http://www.derekentringer.com
ErrorDocument 503 http://www.derekentringer.com
ErrorDocument 504 http://www.derekentringer.com
ErrorDocument 505 http://www.derekentringer.com
ErrorDocument 506 http://www.derekentringer.com
ErrorDocument 507 http://www.derekentringer.com
ErrorDocument 508 http://www.derekentringer.com
ErrorDocument 509 http://www.derekentringer.com
ErrorDocument 510 http://www.derekentringer.com

Alternate to ErrorDocument

Instead of listing out all of the error types, you can also use the much shorter version:

### ALTERNATIVE TO USING ERRORDOCUMENT ###
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ /error.php [L]

This will push all of your errors to a single page.

That’s really just the beginning of what the .htaccess file is capable of, as it has an extensive set of capabilities.

Flex File Browser - PDF, Images, and Video Player

Derek J Entringer — Thu, 21 Aug 2008 18:09:07 +0000

Flex has a lot to offer when it comes to file manipulation and viewing/interaction. The AIR environment is perfect for an “explorer” type application.

Here’s a quick file browser in Flex:




	
	
		
                    
                        
                    
                ;
            private function menuHandler(event:MenuEvent):void  {
                if (event.item.@data != “top”) {
                    if(event.item.@data == “browse_files”){
                    	browseDir(event);
                    }
                }        
            }
			if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK) {
				trace(”PDF content can be displayed”);
			}else {
				trace(”PDF cannot be displayed. Error code:”, HTMLLoader.pdfCapability);
			}
			private function init():void{
				fileSystemTree.directory = File.desktopDirectory;
            	menuBarCollection = new XMLListCollection(menubarXML);
			}
			private function browseDir(e:Event):void{
				var dir:File = new File();
				dir.browseForDirectory(”Select directory”);
				dir.addEventListener(Event.SELECT, onDirSelect);
			}
			private function onDirSelect(event:Event):void{
				fileSystemTree.directory = event.currentTarget as File;
			}
			private function onChange(e:Event):void{
				var file:File = e.currentTarget.selectedItem as File;
				if(!file.isDirectory){
					var viewer:Object;
					switch(file.extension.toLowerCase()){
						case “flv”:
							currentState = “videoState”;
							viewer = videoDisplay;
							viewer.source = file.url;
						break;
						case “png”:						
						case “jpg”:
							currentState = “imageState”;
							viewer = image;
							viewer.source = file.url;
						break;
						case “pdf”:
							currentState = “pdfState”;
							var htmlLoader:HTMLLoader = new HTMLLoader();  
							var urlReq:URLRequest = new URLRequest(file.url);  
							htmlLoader.width = 814;  
							htmlLoader.height = 705;  
							htmlLoader.load(urlReq);  
							var myComponent:UIComponent  = new UIComponent();  
							myComponent.addChild(htmlLoader);
							pdf_content.addChild(myComponent);
						break;
						default:
							Alert.show(”Unsupported file ” + file.nativePath, “Error”);
						return;
					}
				}
			}
		]]>

The result:

Download the source

Blog Updated

Derek J Entringer — Thu, 21 Aug 2008 17:45:55 +0000

I had been using AjaxPress for the longest time, and have finally changed-over to WordPress. Should have made the switch a while ago, but there was always something else on my plate.

For anyone new to my site, all of the articles have been ported over to this new setup, but the dates are now all not exactly relevant to when the articles were originally posted.

To those who are not new…be sure to grab the new rss feed.

FLV Player (Streaming) using Dynamic Buffering, Port Detection, and Bandwidth Checks

Derek J Entringer — Thu, 21 Aug 2008 16:41:56 +0000

This FLV player has quite a few advanced options included. The video is streamed from a Flash Media server, dynamically buffered, and playable. The server side scripts allow for dynamic port detection, and you can setup the player to serve differently encoded flv files based on the users bandwidth.


stop();
/*--------------------------------------------------------------------------------*/
//external classes
/*--------------------------------------------------------------------------------*/    
import NCManager;
import mx.transitions.Tween;
/*--------------------------------------------------------------------------------*/
//sound settings/controls
/*--------------------------------------------------------------------------------*/
globalsound = new Sound();
globalsound.setVolume(100);
volume_slide.volume_slider._x = volume_slide.volume_bar._width-volume_slide.volume_slider._width;
b_volume.onRelease = function() {
	if (globalsound.getVolume() == 100) {
		b_volume.gotoAndStop(2);
		globalsound.setVolume(0);
	} else if (globalsound.getVolume() == 0) {
		b_volume.gotoAndStop(1);
		globalsound.setVolume(100);
	}
};
b_volume.onRollOver = function() {
	b_volume.b_sound_a.gotoAndStop(2);
	b_volume.b_sound_b.gotoAndStop(2);
}
b_volume.onRollOut = function() {
	b_volume.b_sound_a.gotoAndStop(1);
	b_volume.b_sound_b.gotoAndStop(1);
}
/*--------------------------------------------------------------------------------*/
//dynamic buffering
/*--------------------------------------------------------------------------------*/
function startBufferAnimation() {
	if (ns.time>"0") {
		//hide animation
		clearInterval(startBufferAnimation_interval);
		buffer_graphic._alpha = 0;
		buffer_graphic._x = 5000;
	} else {
		//show animation
		buffer_graphic._alpha = 100;
		//display the buffer progress
		totalBuffer = ns.bufferTime;
		currentBuffer = ns.bufferLength;
		loadingText = Math.round((currentBuffer/totalBuffer)*100);
		if (loadingText<=100) {
			buffer_graphic.loading_txt.text = loadingText+"%";
		} else {
			buffer_graphic.loading_txt.text = "100%";
			clearInterval(startBufferAnimation_interval);
		}
	}
}
/*--------------------------------------------------------------------------------*/
//video loading/controls
/*--------------------------------------------------------------------------------*/
//variables
var firstFramePending:Boolean = true;
var firstPlayPending:Boolean = true;
var ns:NetStream;
var fileName:String;
//constants
var k_STARTTIME:Number = getTimer();
//server info
var k_SERVERNAME:String = "your.server.ip";
var k_APPNAME:String = "FMS_Application_Name";
var k_FILENAME:String = "flv_file_name";
var k_ASC_PATH:String = "rtmp://path/to/bwcheck";
//connect to the bwcheck.asc
nc = new NetConnection();
//connect to the bwcheck.asc
nc.connect(k_ASC_PATH,true);
//let us know that the connection was successful
nc.onStatus = function(info) {
	trace("Level: "+info.level+" Code: "+info.code);
	if (info.code == "NetConnection.Connect.Success") {
		trace("loaded: "+this.uri);
	}
};
//the variable p_bw returned by bwcheck.asc holds a value equal to the detected download speed in kilobits per second
//for best results we should serve video that is encoded at a rate less than or equal to kbitsDown
NetConnection.prototype.onBWDone = function(p_bw) {
	trace("BANDWIDTH= "+p_bw);
	//save the detected bandwidth
	detected_bw = p_bw;
	//close the Netconnection to bwcheck
	this.close();
};
//calling the serverside script
NetConnection.prototype.onBWCheck = function() {
	return ++counter;
};
//define an instance of our NCManager class
var ncm:NCManager = new NCManager();
//create the listener object
var ncmListener:Object = new Object();
//fires when it has found a successfull connection
ncmListener.ncConnected = function(evt:Object) {
	trace("["+Math.round(getTimer()-k_STARTTIME)+"ms] Successfully connected using "+evt.protocol+":"+evt.port);
	//as soon as we have a good connection, play the first frame
	playFirstFrame(evt.nc);
};
//fires when it has timed-out trying to find a good connection
ncmListener.ncFailedToConnect = function(evt:Object) {
	trace("Failed to connect after "+evt.timeout+" milliseconds.");
};
//fires when bandwdith has been detected
ncmListener.ncBandWidth = function(evt:Object) {
	//--not working--> //trace(”["+Math.round(getTimer()-k_STARTTIME)+"ms] Measured bandwidth at “+evt.kbps+” kbps.”);
	fileName = k_FILENAME;
	ncm.getStreamLength(fileName);
	trace(”LOADED FILE= “+fileName);
};
//fires when streamlength has been detected
ncmListener.ncStreamLength = function(evt:Object) {
	trace(”["+Math.round(getTimer()-k_STARTTIME)+"ms] Streamlength of “+evt.name+” is “+evt.length+” seconds.”);
	//save stream length info
	//vid_length = evt.length;
};
//set listeners on the NCM instance
ncm.addEventListener(”ncConnected”,ncmListener);
ncm.addEventListener(”ncFailedToConnect”,ncmListener);
ncm.addEventListener(”ncBandWidth”,ncmListener);
ncm.addEventListener(”ncStreamLength”,ncmListener);
//call the connect method on NCM instance
ncm.connect(k_SERVERNAME,k_APPNAME);
//set up the NetStream and plays the first frame of the stream
function playFirstFrame(nc:NetConnection):Void {
	ns = new NetStream(nc);
	ns.onStatus = function(info) {
		if (info.code == “NetStream.Play.Stop” && firstFramePending) {
			firstFramePending = false;
			trace(”["+Math.round(getTimer()-k_STARTTIME)+"ms] First frame loaded”);
			//once the first frame has loaded, measure the bandwidth
			nc.call(”checkBandwidth”,null);
		}
	};
	//vid length
	ns.onMetaData = function(infoObject:Object) {
		my_duration = infoObject["duration"];
		//trace(my_duration);
		timing(my_duration);
	};
	//display the first frame of the best quality flv
	video.attachVideo(ns);
	//buffer the video
	//set buffer parameters
	startBufferLength = 10;
	expandedBufferLength = 20;
	//attach onStatus function
	ns.onStatus = function(infoObject:Object) {
		if (infoObject["code"] == “NetStream.Buffer.Full”) {
			ns.setBufferTime(expandedBufferLength);
			trace(”SET EXPANDED BUFFER”);
			buffer_graphic._alpha = 0;
		}
		if (infoObject["code"] == “NetStream.Buffer.Empty”) {
			ns.setBufferTime(startBufferLength);
			trace(”SET START BUFFER”);
			buffer_graphic._alpha = 100;
		}
	};
	//start the buffer
	ns.setBufferTime(startBufferLength);
	//display buffer graphic
	startBufferAnimation_interval = setInterval(startBufferAnimation, 150);
	ns.play(k_FILENAME);
}
/*——————————————————————————–*/
//scrubber functions
/*——————————————————————————–*/
function timing(fTime:Number) {
	//the length of the movie
	var finalTime:Number = fTime;
	var time_interval:Number = setInterval(checkTime, 10, ns);
	//function for the interval
	function checkTime(ns:NetStream) {
		//movie time
		var ns_seconds:Number = ns.time;
		//parameters for the scrubber
		var finalWidth:Number = timer_bar.slider._width-timer_bar.scrubber._width;
		var movVar:Number = finalWidth/finalTime;
		timer_bar.scrubber._x = movVar*ns_seconds;
		//values for the scrubber position
		var pTop:Number = timer_bar.scrubber._y;
		var pLeft:Number = 0;
		var pBottom:Number = timer_bar.scrubber._y;
		var pRight:Number = timer_bar.slider._width-timer_bar.scrubber._width;
		//scrubber is pressed
		timer_bar.scrubber.onPress = function() {
			clearInterval(time_interval);
			//dragging
			startDrag(”timer_bar.scrubber”, false, pLeft, pTop, pRight, pBottom);
			dragging = true;
			//seek as scrubber is moved
			this.onEnterFrame = function() {
				ns_seconds = this._x/movVar;
				ns.seek(ns_seconds);
			};
		};
		timer_bar.scrubber.onRelease = function() {
			dragging = false;
			stopDrag();
			delete this.onEnterFrame;
			time_interval = setInterval(checkTime, 10, ns);
		};
		timer_bar.scrubber.onReleaseOutside = function() {
			dragging = false;
			stopDrag();
			delete this.onEnterFrame;
			time_interval = setInterval(checkTime, 10, ns);
		};
		timer_bar.scrubber.onRollOver = function(){
			timer_bar.scrubber.gotoAndStop(2);
		};
		timer_bar.scrubber.onRollOut = function(){
			timer_bar.scrubber.gotoAndStop(1);
		};
	}
}
/*——————————————————————————–*/
//play/pause controls
/*——————————————————————————–*/
b_play.onRelease = function() {
	if (b_play._currentframe == 1) {
		ns.pause();
		b_play.gotoAndStop(2);
	} else {
		ns.pause();
		b_play.gotoAndStop(1);
	}
};
b_play.onRollOver = function(){
	b_play.b_play_a.gotoAndStop(2);
	b_play.b_play_b.gotoAndStop(2);
};
b_play.onRollOut = function(){
	b_play.b_play_a.gotoAndStop(1);
	b_play.b_play_b.gotoAndStop(1);
};
b_rewind.onRelease = function() {
	ns.seek(0);
};
b_rewind.onRollOver = function(){
	b_rewind.gotoAndStop(2);
}
b_rewind.onRollOut = function(){
	b_rewind.gotoAndStop(1);
};
download.onRelease = function() {
	getURL(”http://path/to/downloadable/movie”, “_blank”);
};
download.onRollOver = function(){
	download.gotoAndStop(2);
}
download.onRollOut = function(){
	download.gotoAndStop(1);
}

Download the source

FLV Player (Progressive Download) with Preloader

Derek J Entringer — Thu, 21 Aug 2008 16:41:02 +0000


bar.slider._width-timer_bar.scrubber._width;
	   //scrubber is pressed
	   timer_bar.scrubber.onPress = function() {
	       clearInterval(time_interval);
	       //dragging
	       startDrag("timer_bar.scrubber", false, pLeft, pTop, pRight, pBottom);
	       dragging = true;
	       //seek as scrubber is moved
	       this.onEnterFrame = function() {
	           ns_seconds = this._x/movVar;
	           ns.seek(ns_seconds);
	       };
	   };
	   timer_bar.scrubber.onRelease = function() {
	       dragging = false;
	       stopDrag();
	       delete this.onEnterFrame;
	       time_interval = setInterval(checkTime, 10, ns);
	   };
	   timer_bar.scrubber.onReleaseOutside = function() {
	       dragging = false;
	       stopDrag();
	       delete this.onEnterFrame;
	       time_interval = setInterval(checkTime, 10, ns);
	   };
	}
}
/*--------------------------------------------------------------------------------*/
//preloading functions
/*--------------------------------------------------------------------------------*/
function drawLoader() {
	video.clear();
	loading._visible = true;
	progressBar_mc._visible = true;
	createEmptyMovieClip("progressBar_mc",getNextHighestDepth());
	progressBar_mc.createEmptyMovieClip("bar_mc",progressBar_mc.getNextHighestDepth());
	with (progressBar_mc.bar_mc) {
		beginFill(0xD7D7D9);
		moveTo(0,0);
		lineTo(100,0);
		lineTo(100,10);
		lineTo(0,10);
		lineTo(0,0);
		endFill();
		_xscale = 0;
		_alpha = 90;
	}
	progressBar_mc.createEmptyMovieClip("stroke_mc",progressBar_mc.getNextHighestDepth());
	with (progressBar_mc.stroke_mc) {
		lineStyle(0,0xD7D7D9);
		moveTo(0,0);
		lineTo(100,0);
		lineTo(100,10);
		lineTo(0,10);
		lineTo(0,0);
		_alpha = 90;
	}
	progressBar_mc._x = 140;
	progressBar_mc._y = 115;
	var loaded_interval:Number = setInterval(checkBytesLoaded, 150);
	function checkBytesLoaded() {
		var pctLoaded_1:Number = Math.round(ns.bytesLoaded/ns.bytesTotal*100);
		pctLoaded_total = pctLoaded_1;
		trace("total loaded= "+pctLoaded_total);
		progressBar_mc.bar_mc._xscale = pctLoaded_total*2;
		if (pctLoaded_total>=50) {
			ns.seek(0);
			ns.pause();
			clearInterval(loaded_interval);
			progressBar_mc._visible = false;
			loading._visible = false;
			unloadMovie(progressBar_mc.stroke_mc);
			unloadMovie(progressBar_mc.bar_mc);
			unloadMovie(progressBar_mc);
		}
	}
}

The result:

Download the source

FMS Video Chat

Derek J Entringer — Thu, 21 Aug 2008 16:40:24 +0000

Here’s a quick way to setup a Flash Media Server chat room.


stop();
//setup my camera view
mycam = Camera.get();
mycam_audio = Microphone.get();
mycam.setMode(320,240,30);
mycam.setQuality(10000,100);
cam_feed.attachVideo(mycam);
cam_feed.attachAudio(mycam_audio);
//setup my viewer
client_nc = new NetConnection();
client_nc.connect("rtmp://yourip/appfolder/", "appname");
cam_ns = new NetStream(client_nc);
cam_ns.attachVideo(mycam);
cam_ns.attachAudio(mycam_audio);
cam_ns.publish("user_2", "live");
//bring in user_2's video/audio
in_ns = new NetStream(client_nc);
in_ns.play("user_1");
live_feed.attachVideo(in_ns);
live_feed.attachAudio(in_ns);

By creating two instances of this flash file, and by creating an application folder on your FMS server, you can instantly chat with anyone. It’s not extremely robust, but with a little more work, it could turn into a full application.

Download the source

Papervision3d - Interactive Sphere

Derek J Entringer — Thu, 21 Aug 2008 16:39:26 +0000

Here’s a class that renders a wireframe sphere in Papervision3d.


package {
	import flash.display.Sprite;
	import flash.events.Event;
	import org.papervision3d.cameras.*;
	import org.papervision3d.objects.*;
	import org.papervision3d.scenes.*;
	import org.papervision3d.materials.*;

	public class PaperVisionTest extends Sprite {
		/** setup the container */
		private var container: Sprite = new Sprite();

		/** setup the scene */
		private var scene: MovieScene3D = new MovieScene3D(container);

		/** setup the camera */
		private var camera: Camera3D = new Camera3D();

		/** setup the material */
		private var material:WireframeMaterial = new WireframeMaterial(0xFF0000);

		/** setup the sphere */
		private var sphere:Sphere = new Sphere(material, 300, 30, 30);

		/**
		* constructor
		*/
		public function PaperVisionTest() {
			//add the container
			container.x = stage.stageWidth/2;
			container.y = stage.stageHeight/2;
			addChild(container);

			//camera parameters
			camera.z = -500;
			camera.zoom = 5;

			//give the sphere to the scene
			scene.addChild(sphere);
			
			stage.addEventListener(Event.ENTER_FRAME, update);
		}

		/**
		* Triggered by the enter frame event
		* @param pEvent Event object passed by the dispatcher
		*/
		private function update(pEvent:Event):void {

			//initialize the camera
			sphere.lookAt(camera);

			//mouse movement control
			sphere.pitch(this.mouseY);
			sphere.yaw(this.mouseX);

			//render the scene
			scene.renderCamera(camera);
		}
	}
}

The final result:

Click here to download the source.

Simple Papervision3d Scene

Derek J Entringer — Thu, 21 Aug 2008 16:38:49 +0000

Here’s a simple scene that renders a Papervision3d scene within a container. There are no 3d elements added, but this is as simple as it gets.


import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.scenes.*;

var container:Sprite = new Sprite();
addChild(container);
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;

var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D();
camera.zoom = 11;

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
    scene.renderCamera(camera);
}

If you’re interested in how this can be improved, check out the next post with a more elaborate Papervision scene.

Flash CS3: Easy to use XML Feed Class

Derek J Entringer — Thu, 21 Aug 2008 16:38:01 +0000

Re-usable class created by brianConnatser that will set up an external XML feed to use E4X, datagrids, and much more.

Check out some of the code

OrbySPV v1.5 Launched

Derek J Entringer — Thu, 21 Aug 2008 16:37:28 +0000

A virtual tour product that I have been working on has finally launched today. OrbySPV (Sequential Panoramic Viewer) technology gives you the power to create highly interactive virtual tours, similiar to the Google Maps Street View, using your own panaromic images. you can check it out at OrbySPV.com. The technology is derived by manipulating spherically projected 360 degree panoramic images to create an interactive experience unlike any virtual tour technology available today. There are a bunch of license options to choose from, tutorials to help you get started, as well as sample viewers and images. If you have any questions about Orby, please use the email form here.

Social Media Optimization

Derek J Entringer — Thu, 21 Aug 2008 16:36:30 +0000

Influential Interactive Marketing has an awesome article on SMO.
From the article:

“For years now, Search Engine Optimization (SEO) for websites has been honed into a fine art with entire companies devoting considerable effort to defining best practices and touting the value of SEO for raising a site’s performance on organic search listings. While I believe in the power of SEO, there is a new offering we have started providing to clients which we call Social Media Optimization (SMO). The concept behind SMO is simple: implement changes to optimize a site so that it is more easily linked to, more highly visible in social media searches on custom search engines (such as Technorati), and more frequently included in relevant posts on blogs, podcasts and vlogs.”

PPC Brand Building?

Derek J Entringer — Thu, 21 Aug 2008 16:35:36 +0000

SEMPO surveys consistently show that brand awareness is the top objective of many paid search programs. But, who would use PPC campaigns for branding?

So is the Internet just another direct marketing medium? I don’t think so. The transformation from one-to-one to many-to-many is occurring in the world of social media. Nothing on the internet fits the concept of branding quite like Web 2.0. Branding is a social phenomenon. Web 2.0 is social media. The desire to fit in is a huge part of branding. Web 2.0 is the sheer momentum of the bandwagon. It is group think, which is what moves t-shirts at the mall, or the latest fashion styles at your local mall.

While viral marketing is all the rage, the means through which a message goes viral is social media. Social media is Internet word of mouth.

The poet W.H. Auden famously said:

“The image of myself which I try to create in my own mind in order that I may love myself is very different from the image I try to create in the minds of others in order that they may love me.”

If you want them to love you on the Internet, you wonâ€™t get there by shouting your name the loudest. You need to be heard, but your message also must resonate emotionally and socially with the consumer. If the message doesn’t resonate, it’s just noise and not signal. Those who make the best use of social media are the ones who will be most successful building their brands on the Internet. Social Media Optimization (SMO), not paid search, is the path to brand building online.

iSalient Featured in PHPMagazine

Derek J Entringer — Thu, 21 Aug 2008 16:34:22 +0000

iSalient has been recently featured within PHPMagazine.net with a short review of some the features available.

The article is available here.

More information on how I was involved in the creation of iSalient is available in the portfolio section of this site.

From the article:

“iSalient has an AJAX interface to create and customize your survey on the fly, intuitive and very easy to use powered by prototype and scriptaculous. There is many options available to create survey general, look and feel, number of response, start and end date, language, status … and more advanced options such for restricted surveys, navigation … etc. Questions are easy to create, simply by choosing from the different options available in the drop down menu (18 options available), you can create from simple true false questions to advanced option with sliders, then you can add conditions and your survey is ready to go.”

BegForPost.com

Derek J Entringer — Thu, 21 Aug 2008 16:33:22 +0000

Looking for reviews on your new startup? Using BegForPost.com you can try to lure other bloggers or news websites into looking into your website, and maybe get some good feedback.

From their website:
“You’ve worked for months building a startup on a boostrap budget and the launch is near. How will you get an initial influx of traffic to propel your product/service into viral bliss? Don’t pay off bloggers to promote your startup, beg! Getting started is quick and easy. Fill out the form below, sit back, and wait for Internet stardom. Youâ€™re almost there!”

BegForPost.com

SEO and mod_rewrite

Derek J Entringer — Thu, 21 Aug 2008 16:32:35 +0000

There are two types of URLs dynamic and static. A dynamic URL is a page address that results from the search of a database-driven web site or the URL of a web site that runs a script. In contrast to static URLs, in which the contents of the web page stay the same unless the changes are hard-coded into the HTML, dynamic URLs are generated from specific queries to a site’s database. The dynamic page is basically only a template in which to display the results of the database query. Instead of changing information in the HTML code, the data is changed in the database.

Static URLs are typically ranked better in search engine results pages, and they are indexed more quickly than dynamic URLs, if dynamic URLs get indexed at all. Static URLs are also easier for the end-user to view and understand what the page is about. If a user sees a URL in a search engine query that matches the title and description, they are more likely to click on that URL than one that doesn’t make sense to them.

If you are hosted on a Linux server, then you will want to make the most of the Apache Mod Rewrite Rule, which is gives you the ability to inconspicuously redirect one URL to another, without the user’s (or a search engine’s) knowledge. You will need to have this module installed in Apache; for more information, you can view the documentation for this module here. This module saves you from having to rewrite your static URLs manually.

How does this module work? When a request comes in to a server for the new static URL, the Apache module redirects the URL internally to the old, dynamic URL, while still looking like the new static URL. The web server compares the URL requested by the client with the search pattern in the individual rules.

For example, when someone requests this URL:

http://www.yoursite.com/forums/seo-and-dynamic-urls.html

The server looks for and compares this static-looking URL to what information is listed in the .htaccess file, such as:

RewriteEngine on
RewriteRule
thread-threadid-(.*)\.htm$ thread.php?threadid=$1

It then converts the static URL to the old dynamic URL that looks like this:
http://www.somesites.com/forums/thread.php?threadid=12345

You now have a URL that only will rank better in the search engines, but your end-users can definitely understand by glancing at the URL what the page will be about, while allowing Apache’s Mod Rewrite Rule to handle to conversion for you, and still keeping the dynamic URL.

Crazy Egg Optimization

Derek J Entringer — Thu, 21 Aug 2008 16:31:52 +0000

Standard web statistic packages compete based on who can offer the most statistics, the most colorful graphs and trying to wrap usability around all that information. The guys at Crazy Egg have taken a different approach where you can measure and actually see what your users are doing when they visit your site, and from these results you can immediately optimize your site based on your visitors usage patterns. The result is that you can learn a lot more about your visitors from a lot less information that is found in analytics packages.

The aim of Crazy Egg is for webmasters and site owners to learn from visitor usage patterns and improve their site based on what they learn from the application, as opposed to having page after page of statistics. Some features currently in development will allow users to track ad performance so that ad campaigns can be refined, RSS integration and demographic information of your visitors (filtering the map based on which visitors you wish to see).

Good Internet Citizenship

Derek J Entringer — Thu, 21 Aug 2008 16:30:59 +0000

What is a Good Internet Citizen?

Becoming a good Internet citizen is pretty simple, but by no means easy. Provide a useful service, and do it in a way that makes it easy for your visitors, and you’ll thrive online.

“Please don’t add to my frustration!

Can you hear your customers begging?

“Please don’t make me wait for a movie to run before I can check my order.”
“Please don’t make me search for your contact information.”
“Please try to make this easier for me!”

Listen to your customers and you’ll hear them asking for simplicity when they interact with you through the Internet.

Keep your visitors in mind during the design and planning phase of your website, and you’ll build a better site.

The rewards for good citizenship are greater interest, participation, and loyalty from your visitors. That leads to brand recognition and ultimately business success.

Your website should be intuitive and easy-to-use.
Remember, a website is an extension of your computer. It must serve a logical purpose and perform its responsibility - not just look flashy or expensive.
Your website should perform a useful service.
One of the best reasons to build a website is to give your customers more customer service. Find out what they need and give them access to it on the Internet. You can save time and money.

Your website should be accessible and cross-platform compatible.
This part is simple but one of the most common errors on websites. Test your website on all versions of all browsers on Mac’s and PC’s. Test it with a 14.4 modem! Make sure visitors with physical impairments can access your information.

Your website must be secure.
If you are asking your customers to provide personal information or if you are processing credit card transactions online, your site must be secure.

Your website must be up-to-date.
Why should your visitors return? Because you’re constantly providing new information!

Following the above will lead to great returns on business, as well as provide your website with a constantly growing SEO bottom line.

Considering AJAX

Derek J Entringer — Thu, 21 Aug 2008 16:29:39 +0000

“When we were young, we were told that ‘Everybody else is doing it’ was a really stupid reason to do something. Now it’s the standard reason for picking a particular software package.” — Barry Gehm

When you make decisions, one strong bias is the bandwagon effect. The idea is that humans often do or think things just because many others do the same. Now, after convincing yourself that Ajax is something you have to use, be careful not to find artificial excuses to use it. To some people, Ajax is the latest proverbial hammer, and they will use any excuse to find themselves some suitable nails. Remember that Ajax is a tool, not a toy or purpose in itself.

With each new technology that is introduced, people like to experiment and test the tipping point. For instance, when color monitors first came out, a deluge of applications changed their fonts and colors as much as possible, just because they could. No user really wants a mouse trailer, yet a large number of Web designers seem to think that they have to add them to their sites. I feel that, if we’re not careful, the same phenomenon will happen with Ajax.

Ajax is also fueling a venture capital frenzy. The investment climate for technology startups seems to have become friendly again, and one of the magic keywords these days is Ajax. Collaboration-based startup Zimbraâ„¢, a heavy Ajax user, has already secured $16 million. Other startups are scrambling to claim that they are Ajax-based as a result, to sell more products or receive more attention from investors.

If you find yourself wanting to use Ajax, make a balanced decision about where exactly you think it makes sense, and where it does not.

META-Tag Design

Derek J Entringer — Thu, 21 Aug 2008 16:28:48 +0000

A lazy web developer is a good web developer - that is, a clever programmer will save themselves lots of mundane work by automating simple processes. An obvious idea is to write an excellent META Description and use it automatically on every page of your site - better than nothing right?

The problem is, it’s possible the search result for every page on your site will come out looking the same. This is not what you want - you want your site to cover a range of topics and search phrases, and having 1000 pages that look the same is just asking for Google to treat them as duplicate content.

If you aren’t able to create a unique META description for every page, it’s best to leave it blank and let Google create a snippet out of page content. In all fairness, the search engines do a pretty good job of creating relevant snippets. So you should only replace a snippet if you are going to be improving it.

Importance of Backlinks

Derek J Entringer — Thu, 21 Aug 2008 16:27:55 +0000

What are “backlinks”? Backlinks are links that are directed towards your website. Also knows as Inbound links (IBL’s). The number of backlinks is an indication of the popularity or importance of that website. Backlinks are important for SEO because some search engines, especially Google, will give more credit to websites that have a good number of quality backlinks, and consider those websites more relevant than others in their results pages for a search query.

When search engines calculate the relevance of a site to a keyword, they consider the number of quality inbound links to that site. So we should not be satisfied with merely getting inbound links, it is the quality of the inbound link that matters.

A search engine considers the content of the sites to determine the quality of a link. When inbound links to your site come from other sites, and those sites have content related to your site, these inbound links are considered more relevant to your site. If inbound links are found on sites with unrelated content, they are considered less relevant. The higher the relevance of inbound links, the greater their quality.

For example, if a webmaster has a website about how to rescue orphaned kittens, and received a backlink from another website about kittens, then that would be more relevant in a search engine’s assessment than say a link from a site about car racing. The more relevant the site is that is linking back to your website, the better the quality of the backlink.

In other words, good backlinks equals good SEO.

Benefits of XHTML

Derek J Entringer — Thu, 21 Aug 2008 16:27:07 +0000

XHTML is the standard markup language for web documents and the successor to HTML 4. A mixture of classic (HTML) and cutting edge (XML), this hybrid language looks and works much like HTML but is based on XML, the webs markup language, and brings web pages many of XML’s benefits.

Converting from HTML to XHTML is easy, and provides your code with several immediate and long term benefits:

A painless transition to more advanced technology: The web is moving to XML, a powerfully enabling technology. Writing well formed, valid XHTML pages is the easiest way to begin this transition. All it takes is learning a few simple rules of XHTML markup.

Cleaner, more logical markup: XHTML brings uniformity to document structure. The rules of XHTML help restore the structural integrity of documents that was lost during the webs rapid commercial expansion between 1994 and 2001. This is critical for large organizations, whose web pages must interface with logically marked up documents in legacy systems and databases.

Increased interoperability: Unlike old style HTML pages, valid, well formed XHTML documents can easily be transported to wireless devices, Braille readers and other specialized web environments. Moreover, XHTML’s insistence on clean, rule based markup helps us avoid the kind of errors that can make web pages fail even in traditional browsers like Microsoft Internet Explorer, Netscape Navigator, and Opera browser.

Greater accessibility: Because they follow strict rules and avoid non standard markup, well authored XHTML pages are more accessible than old school HTML pages.

If you want your site to work well in today’s browsers and non traditional devices, and to continue to work well in tomorrows, it’s a good idea to author new sites in XHTML, and to convert old pages to XHTML.