Jesse Gerber, co-founder of Partners With Parents is a neighbor and good friend. He was initially resistant to a redesign partly due to the cost of the redesign and implementation and partly due to a certain level of fear of how a new website might change the nature of his business.  The focus of his fear was the possibility of an overwhelming number of inquiries without the necessary support or conversion to real customers. After much conversation, we began the redesign process over the summer.

We decided to go with a WordPress-driven website, which would give the company the flexibility to change the content on their own, without them needing to come back to us every time they wanted to update a page, or add new information.

Partners With Parents has been in business for over a decade. They specialize in custom private tutoring, with the tutors preparing lessons suited to the each individual's needs and educational environment. They have also had much success in test preparation, like the SAT, Regents, AP tests, GRE, MCAT, LSAT and others. Additionally they have extensive experience in homeschooling children with special needs and unique situations.

I took this opportunity to begin a program of my own, an internship program for my web design students. A talented student, Nusrat Bintun, was Slicksurface's first intern. She showed great initiative, and where she lacked in skill and experience, she made up for with enthusiasm and consistency. She was particularly involved with helping to develop the illustrations used on the site. By the end, she gained additional skills in photoshop and illustrator, plus received insight in working with a real client.

An interesting thing to note about this redesign is that it promised to be easy to improve the performance of the site. The previous designer had very little experience creating real professional websites. So instead of designing the pages so that the images were images, and the text was html, he made the text into images as well.  There was basically no text anywhere on the site for the search engines to index.

Two weeks following the launch, we were fully indexed by Google.  We were not indexed by the other search engines, but we knew that would come in time. Partners With Parents immediately ranked for "New York City tutoring" and "NYC tutoring" falling on page 4 and 3 respectively. We now are guiding them in content development to rank for other relevant search terms like "New York City homeschooling" and "test prep".

Although the site has been indexed fully, the traffic hasn't increased by leaps and bounds in the first month following launch. In studying Google trends, "New York City tutoring" does not have enough data to even warrant a chart. "NYC tutoring" ranks very well with a Brooklyn audience, although "Brooklyn tutoring" does not have enough data to warrant a chart. For just "tutoring" or "tutoring service", the New York audience is in the top 10.

Surprisingly, they immediately received requests for tutors, had tutors inquiring about positions, and had subscriptions to the automatic email updates (see description below).

After we have ranked for the key search terms, the next goal is to work towards getting PartnersWithParents.com to show up on the first page for them.

Partners With Parents is looking to build a community among parents, educators, support professionals, and themselves. They decided that one way they would do this is to regularly write posts on everything including articles about education and parenting, family challenges and things to do in New York City, and parents and children dealing with stress and anxiety.

Finally, we also implemented Feedburner on this site.  Because we used blog software to run it, the site inherently has a feed.  We've taken advantage of this by inviting users to subscribe to regular updates of the site. Whenever a new blog post is written, those who have subscribed will receive emails automatically of the full blog posts. An inexpensive feature that keeps people reminded of the company's services and expertise.

The same can be true of clients who just can't afford you. They want a $15,000 web site for $4,000 and they think they're spending a lot and should get all the bells and whistles. Again, there are exceptions to that rule as well, but generally it's true. The exception are people who understand your value, but can't afford you, but make it clear they're really grateful that you're cutting them a deal. But they're maybe 1 in 20 people in this group.

Here's a video from YouTube that puts a funny slant on it. If you prefer, you can watch it in HD on YouTube...

In these dire economic times it's tempting to take on clients - even when they can't come close to affording you. We had to turn down an interesting project lately because we got this sorta bad vibe off it. Just be careful - you may be better turning down the work.

Example 1:

From: Jasmine Carter <eshulsenerman55@yahoo.co.uk> (was this sent from Yahoo! mail? Wouldn't the user hve a bad history?)

Subject: PrettybtP0rn0qshotswz NkLwEcPfjuBSvtYzMh

Body: http://74ce532cee461e8c.faceplanesize.com!}TrKbR3ineUtLzxINIU PJBgeXVHxUdnRToTQMqagL

Example 2:

From: Shelby Taylor <garlettabearden94@yahoo.co.uk> (again, a yahoo.co.uk e-mail address)

Subject: -SEX-U-A-LY_EX-PL_I_C_It SPzNynCLWiTnPJyPJmvU

Body: NpZnutWnmUdgdZuJZDfUVp{)dad4479785c30468.yessoontalk.com}&bcRREwMbmEcGfdoTH NgRIcnHXqsmQIZ1T

Example 3:

From: F-r_eePodrnoMotionpictureq <karynmarshi86@yahoo.co.uk>

Subject: [ No Subject ]

Body: hzxqipfrguknzsip{http://13e0754d679f4cd1.questionexamplehouse.com}!hjgfarfbHectcGu rPwwoRWqHyVpqXyPNrcIcVG

I just don't get it. How can their spam filters miss these e-mails? It can't be that hard to write a spam filter to detect messages like these... I wonder if Yahoo! UK isn't having some sort of problem - all the e-mails appear to come from there.

If you have white or off-white text on a dark background chances are nothing will come out at all since many browsers don't print the background color - so you wind up printing white on white. If your design depends on things like background colors, chances are it won't look the way you want it to when it's printed. Going to a grayscale color palette may cause problems as well. Add to that that Flash areas probably won't print. And the biggest problem may be the width of your web page - not all web browsers shrink the page to fit on the piece of paper and if your page is wider than 675px you may have a serious problem.

When it comes to mobile devices there are a number of issues...

While the iPhone and some other devices can deal with full size web pages, many can't, an even for devices that can it requires a lot of zooming in and zooming out and can be a bad user experience for the customer.

Then there's the issue of the "weight" of a page. With broadband connections being pretty standard for computers these days web designers don't think about the weight of their pages, but for mobile devices it's critical - most are on super slow network connections and even ones with 3G capabilities may not be in a location that has 3G speeds.

And lastly, people on mobile devices are generally looking for different things than people who are on a computer. They're far more likely to be looking for an address or phone number than a person using a computer.

The reason why printing and mobile devices are connected is because the same two strategies are used to address both problems - 1) alternate stylesheets, and 2) alternate pages - which you use really depends on your situation and how good of a solution you want to implement for printing and mobile devices. If you can't imagine anyone ever printing a page from your web site, then you don't need to spend much time implementing a solution.

Alternate Stylesheets

When you specify a stylesheet in HTML you typically have a link tag that looks like this:

<link rel="stylesheet" href="/resources/main.css" type="text/css">

If you've done some reading you may know that there's a "media" attribute that can be added to the link tag which would change it to look something like this:

<link rel="stylesheet" href="/resources/main.css" type="text/css" media="all">
<link rel="stylesheet" href="/resources/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="/resources/print.css" type="text/css" media="print">
<link rel="stylesheet" href="/resources/mobile.css" type="text/css" media="handheld">

The media attribute is the key to what we're talking about here. In the example above styles that will be used in all circumstances are defined in main.css. Styles that will only be used on computers are defined in screen.css. Styles that are only used for printing in print.css. And lastly styles that are only used by mobile devices in mobile.css. So when displayed on a computer main.css and screen.css will be loaded and print.css and mobile.css will be ignored, and so on...

Now think about the things you might want to change depending on how it's being used... Since you can't click on a nav bar on a printed page, you may want to hide them completely with display:none when printing. Or you may want to change the width of the page from an absolute value to 100% for printing and mobile devices. Or you may eliminate things like background images for printing and mobile devices. There's a lot you can customize.

Alternate Content

While having an alternate stylesheet is a quick and easy way to customize the look and feel for printing or mobile devices and it's usually better than doing nothing at all, it's often inadequate. The issue is the HTML document you're working with. You may not be able to do everything you want to do with CSS, or the page may just be too heavy to do well on a mobile device.

Remember, the general rule is to shoot for a total page weight (including CSS and graphics) of less than 20Kb when making a page for mobile devices. Pages over that weight will be penalized by the mobile search engines.

In fact there are many factors you should take into consideration when designing a page for a mobile device. The nav bar is just one example - it should be kept simple and put at both the top and bottom of the page, and possibly interspersed in the middle of the page if the page is long. There's a lot to properly designing a page for a mobile device (including special doc types). I highly recommend you read up on the subject before you go and spend time doing it the wrong way.

To implement an alternate page for printing or for a mobile device once again you use a link tag, but this time it's not rel="stylesheet" it's rel="alternate" and will look something like this...

<link rel="alternate" media="print" type="text/html" href="/image/detail-print.htm?variantid=2983" />

To see that in action. The original page was a page on Netter Images showing an illustration of malignant tumors. The alternate page used for printing scales the image down, uses desaturated header graphics, and presents the data on the page in a less interactive manner that looks like a printed document.

One thing you should be concerned with is the issue of duplicate content. For alternate versions used for printing, you'll want to either specify nofollow in a robots meta tag, or block access to the file completely with robots.txt. With mobile versions it's more complicated because you want spiders to crawl, but want the search engine to understand which page is targeted to which audience. You can try to use robots.txt to only allow mobile spiders to see the mobile pages, but that may be more trouble than it's worth.

Other Uses

Alternate stylesheets and alternate pages are important to the visually handicapped. The same strategies we used here are used to create pages that are friendly to them - just use media="aural". CSS supports "voices" - so you can specify the type of voice you think is approrpriate for you content, etc.

First a little background. .htaccess is the name of the file. Yes, it starts with a dot which means on Unix based systems (like Linux and Apple's OS X) the file will be invisible. However, web authoring programs like Dreamweaver make it visible in their programs because they know it's power and importance.

You place the .htaccess file in a directory and the rules in that .htaccess file will affect that directory as well as all the subdirectories of that directory. It should be mentioned that .htaccess is a little inefficient. If you have access to your site's virtual host file, you can do pretty much the same things there more efficiently.

There are far too many things that are possible with .htaccess to discuss all of them here, so we'll just touch on some of the more common and useful things you can do.

One thing we should mention is that .htaccess is often used in combination with mod_rewrite. Apache is a modcular web application. There are probably 20-30 common modules that are used with Apache and mod_rewrite is one of them. mod_rewrite lets you do things to the URLs and based on the URLs. That may sound confusing, but it will make more sense in a moment. When you use mod_rewrite you need to have a line that reads:

RewriteEngine On

I'll be putting that in each of the examples, but when you use the code from this page you only need to have that line once in your .htaccess file - before the first mod_rewrite command.

The other thing I want to mention is that mod_rewrite is based on "regular expressions". If you really want to get into using mod_rewrite I suggest getting a book on regular expressions. You want a book that's concise and to the point since regular expresssions can get pretty complicated, but the basics are pretty straightforward.

Enforcing a canonical domain name

As you may know you can have often leave the www. out of a URL and the URL will work fine. The problem is that if you let people get to your site however they want and don't enforce either always having www or always not having www the search engines may think www and non-www are two different sites, since that's theoretically possible and was true in the early days of the world wide web. The problem with the search engines thinking you have two sites instead of one is that the authority of your site will be split and you'll have duplicate content issues. In fact the seach engine may even think one site is stealing content from the other site. The bottom line is that the search engines get confused and it's never good to get search engines confused.

The way to fix this with .htaccess is to have a statement that looks like this...

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

Notice there is a RewriteCond line and a RewriteRule line. There will always be a RewriteRule line with mod_rewrite, and there can be zero or many RewriteCond lines. Think of RewriteCond as defining conditions that must be met before executing the rule.

You may know from scripting languages like Javascript that an ! means "not". Add to that the regular expression syntax ^ means "starts with" and $ means "ends with" and the first line is saying if the HTTP_HOST is NOT www.slicksurface.com. The backslashes are just there because the periods need to be escaped. And you should know (or at least guess) that HTTP_HOST is the Apache environment variable that tells you the host name of the site.

So it's going to do something if the site name is now www.slicksurface.com - that 'something' is defined in the second line. (.*) is the way in regular expressions that you grab a bunch of characters. So ^(.*)$ is saying everything from the start to the end. But realize that RewriteRule acts on only the part of the URL that's in youru directory. So if you put the .htaccess file in http://www.slicksurface.com/blog/ Then it would be working on anything that came after that in the URL.

OK, so it's grabbed everything in the URL (not including the host name) and the second part of the second line uses $1 to tack that onto the end of http://www.slicksurface.com. The third part (the portion in brackets) tells Apache that you want to do a 301 (permanent) redirect (R=301), and that RewriteRule is the last line in what you're trying to do (L).

So try it out... Click on this link and see where you go...

http://slicksurface.com/blog/

Notice it looks like www. gets added to the URL, which is basically true (in fact it wasn't "added" the user was quickly redirected to the URL with the www in it).

Page Moved Redirects

There are times when you want to move a page from one URL to another. You try to minimize doing these types of things, but sometimes they're just unavoidable. When you do need to move a page you want to put a redirect in place to let search engine spiders and people who may be following links from other sites know that the page has moved and be able to find what they're looking for.

A while back we migrated from using Blogger to using WordPress. This meant that all the URLs changed. We could write a general rule that covered many instances (see below), but some URLs didn't work with the rule. In those cases we had to have a simple RewriteRule to handle the rewrites. Here's an example of one of them...

RewriteEngine On
RewriteRule ^2007/04/4d-backup-improves-creation-of-log.html$ http://www.slicksurface.com/blog/2007-04/4d-backup-improves-creation-of-log-files [NC,R=301,L]

So, if it's in a .htaccess file in the /blog/ directory, that will take the URL http://www.slicksurface.com/blog/2007/04/4d-backup-improves-creation-of-log.html and redirects it to http://www.slicksurface.com/blog/2007-04/4d-backup-improves-creation-of-log-files - notice that I'm doing a permanent 301 redirect. And lastly, the NC means that the rule is not case sensitive.

There are few ways to do redirects with Apache, but that's how you'd do it with mod_rewrite.

Rules To Redirect Pages Based On A Pattern

When we migrated from Blogger to WordPress the directory structure went from /blog/YYYY/MM/file.htm to /blog/YYYY-MM/file - that's a pretty easy pattern to migrate and we did so with the following mod_rewrite rule:

RewriteEngine On
RewriteRule ^(\d{4})/(\d{2})/(.+)\.html$   http://www.slicksurface.com/blog/$1-$2/$3  [NC,R=301,L]

Let's look at this closely. While the regular expression code will probably be beyon your level of expertise - you can see that it's looking for something 4 and then something 2 and you'd be right if you guessed that's the 4 digit year followed by the 2 digit month. In other words (\d{4}) gets a 4 digit numeric string and (\d{2}) a 2 digit numeric string. (.+) is much like (.*) we saw above except (.+) requires that there be characters, where (.*) can work when there's nothing there. By putting those things in parentheses, we can pull them out in the URL we want to redirect to. They simply go in order $1, $2, $3...

Making The URL Different Than The File Name & Location

Rewriting the URL is the reason mod_rewrite is named what it is. Let's say you have some files on disk but you don't want their folder structure and file names to be the actual URL. An example is the MeSH medical thesaurus we put up here on slicksurface.com. It has over a hundred thousand files that needed to be organized in folders, but we didn't want those folders to be part of the URL, so we use mod_rewrite to accomplish our goal.

Let's take an example... We have the page on "Fungi" which has the following URL:

http://www.slicksurface.com/medical-thesaurus/descriptor/D005658/fungi.htm

But there's no actual document named fungi.htm in a folder named D005658. Instead the real file is at:

http://www.slicksurface.com/medical-thesaurus/descriptor/8/D005658.htm

What I did was randomize the files into 10 directories based on the last number in their ID. Then when I write files that refer to those files I add on the title of the page as a fake file name.

Here's the mod_rewrite syntax:

RewriteEngine On
RewriteRule ^descriptor/D(\d\{5})(\d)/   descriptor/$2/D$1$2.htm [L]

So what that did was serve one file when another file was requested. If you notice the virtual file name isn't used at all, so the following URL would work just as well...

http://www.slicksurface.com/medical-thesaurus/descriptor/D005658/foo.htm

Another thing you might notice is no $ was used - we just defined the beginning of the pattern and that was enough.

Having One Template Control Everything In A Directory

Another example similar to the one we just covered is having a single template control all the URLs for a directory. For example, let's say you have a file named index.php that takes a GET parameter of 'id'. The URL might look something like this if you were calling the template directly:

http://www.slicksurface.com/test/index.php?id=1234

But you don't want to have it look like that, you want the URLs to look like this:

http://www.slicksurface.com/test/1234.htm

All the numbered pages don't have to actually exist - all those URLs can be passed onto the template using something like the following:

RewriteEngine On
RewriteRule ^(.+).htm index.php?id=$1

Using a strategy like that can be very powerful and let you have one PHP template that can be thousands of URLs that are more search engine friendly than index.php?id=1234. You can do something similar with text, but it's more complicated to handle things like spaces and special characters.

Serving Pages From Other Sites As URLs On Your Site

.htaccess can be used with more than mod_rewrite. Another use is with mod_proxy. mod_proxy pulls pages from other sites and can show them as pages on your site, though there are some issues.

Let's take the following page on Dan Wong's site - it's the home page for the advanced web site design course.

http://www.dan-wong.com/advanced-web-design.htm

Here's a mod_rewrite rule that has the P parameter specifying that it's a mod_proxy situation, not a redirect.

RewriteEngine On
RewriteRule ^test/adv-3650$ http://www.dan-wong.com/advanced-web-design.htm [P,L]

With that you can see the content of the page at the following URL:

http://www.slicksurface.com/test/adv-3650

But notice that the page doesn't look right. That's because it's not being served from the correct site, so all of the links to stylesheets and images are broken. If he had started all of the references with http://wwww.dan-wong.com/... then the page would actually look correct.

When this is useful is when you have an web application server that is responsible for some, but not all of the files on your website. In that case you can proxy the web application server, pehaps through a secure firewall, and because it's part of an overall system, where the web application server may actually think it is the entire site, the pages will render correctly.

You don't have to use mod_rewrite to use mod_proxy. Here is an example of a mod_proxy statement that you might find in an .htaccess file:

ProxyPass customer/ http://127.0.0.1:8080/customer/

That will pass all of the URLs from the customer directory onto a web application server that's responding to the 8080 port on the same machine as the web site.

Excluding Directories From Being Controlled by WordPress

WordPress controls everything in the directory it's installed in. If you want to have say a resources directory that WordPress doesn't control, or a robots.txt file that WordPress doesn't control, then you can use something like this:

RewriteEngine On
RewriteCond %{REQUEST_URI} !^resources/
RewriteCond %{REQUEST_URI} !^robots.txt
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [L]

The bottom three lines are standard for WordPress, but the top two exclude the resources directory and the robots.txt file.

Making HTM Files Execute PHP

Sometimes you want to hide the fact that a php file is really a php file, or you just like your URLs to end with .htm rather than PHP. To make it so you can put PHP in .htm files you put the following in the .htaccess file:

AddType application/x-httpd-php .htm

Wrap Up

So there's a lot you can do with .htaccess files. Chances are if you're hitting a wall and need to do something special there's a way to do it with an htaccess file.

You might just think you should embed the links directly in the HTML, but that's often a bad idea. Let's say your sponsor runs a special promotion that uses a special promo link code. You may have the links all throughout your site in blog posts, banner ads, sidebar text ads, etc. There will be too many things to change to take advantage of the special promotion. Having all your outbound sponsor links go through a single script will fix that problem - change things in one place and all your links are changed.

The way this works is we want to pass into a script URL the ad number (or name) that you want to display. So your URL would look something like this:

http://www.domain.com/scripts/ad-links.php?adid=1234

So ads.php is the script we'll create, and adid is the ad ID for your outbound link.

Sometimes you have to enter other parameters into the ad URLs to meet sponsor guidelines, You can do that as well with a URL that looks something like this:

http://www.domain.com/scripts/ad-links.php?adid=1234&param1=ABC&param2=XYZ

So in that case the sponsor is asking for other information that may vary depending on the context of the ad, so there are two parameters that you can pass into the script which you can insert into the code displaying the banner ad - param1 and param2.

Now, before you start it's a good idea to think about what you want to do with search engine spiders. Search engine spiders don't want to see paid links and affiliate links to sponsors definitely fall into the "paid links" category. You have two options. One is to exclude them completely using robots.txt, the other is to let them crawl the links, but send them to a different URL than a real customer would go to - send them to a relevant page on one of your own sites.

So, let's say your link is to a company that sells pop corn. The best page to send the search engine spider to would be the tag page on your blog that has all the posts about the different types of pop corn offered by the company in question. If you don't have a page like that then you could send them to the page with all the posts about their company or a page with all the different pop corn reviews you might have. The point is, keep it relevant. If you keep it relevant the search engines shouldn't say you're cloaking. If you don't have a relevant page, then 302 them to the main page of your site. The 302 redirect doesn't pass page rank, so this should be a harmless way of keeping them away from paid links without them thinking your playing page rank sculpting games to deceive them.

Now, onto the script... Here's a brief version of the script:

<?php
if (stripos($_SERVER['HTTP_USER_AGENT'], 'googlebot') > 0) { $spider = TRUE; }
elseif (stripos($_SERVER['HTTP_USER_AGENT'], 'msnbot') > 0) { $spider = TRUE; }
elseif (stripos($_SERVER['HTTP_USER_AGENT'], 'teoma') > 0) { $spider = TRUE; }
elseif (stripos($_SERVER['HTTP_USER_AGENT'], 'slurp') > 0) { $spider = TRUE; }
else { $spider = FALSE; }
/* Pop Corn Sponsor */
if (($_GET['adid'] == 1) && ($spider)) { header("Location:http://www.your-domain.com/tag/pop-corn-sponsor-posts",TRUE,301); }
elseif ($_GET['adid'] == 1) { header("Location:http://join.pop-corn-sponsor.com/track/ODM4NzA1NzozMzoxNQ/",TRUE,302); }
/* Pop Corn Maker Sponsor */
elseif (($_GET['adid'] == 2) && ($spider)) { header("Location:http://www.your-domain.com/",TRUE,302); }
elseif ($_GET['adid'] == 2) { header("Location:http://join.pop-corn-machine-sponsor.com/track/ODM4NzA1NzozMzoxNg/",TRUE,302); }
else
header("HTTP/1.0 404 Not Found");
echo "<html><head><title>Link Error</title></head><body>Link Error<br />".$_GET['lnk']."<br />".$_SERVER['HTTP_USER_AGENT']."</body></html>";
?>

You can see why we started with a discussion of search engine spiders - it's the first thing the script deals with - the first if statement tests to see if the request is coming from one of the 4 big search engine spiders. If so, it sets the $spider variable to a value of TRUE.

Then there's a if, elseif statment where we go through all the possible adid values. There are two cases for each value - one for what do do with a spider, and the other for what do do with regular users. The PHP header function is used to do 301 (permanent) and 302 (temporary) redirects. Notice that I always send people off to other sites with 302 redirects (so no PageRank is given to the sponsors site), and I also use 302 redirects when I don't have a good page on one of my sites to send spiders. 301 redirects are only used for relevant redirects for spiders so PageRank doesn't accumulate in the redirect script itself.

And lastly there's an else case for what to do if I don't find the adid. First I want to indicate that the link was not found with a 404 (page not found) response code. This makes sure the error will show up as an error in my analytics. Next, I want to tell the user what happened with some very simple HTML code.

So there you have it - an outbound link script that's easy to maintain and SEO friendly.

There are ad packages/"scripts" out there which are decent, but you should choose them carefully since moving to anything else will be time consuming once you're fully set up (so make sure you really like the package and it's easy to maintain before investing too much energy in it). The other problem with ad packages is that they're almost always database driven and I've frequently seen problems where they don't redirect the person correctly. So check out sites that use the ad package to make sure it works in the real world.

There are two elements to handling ads - displaying the ad, and handling the click. This post will just address displaying the ad. I'll do another post on how you can handle the outbound link. The advantages of what I'm going to show here are:

• It's something you write and maintain yourself - that means you can customize it as you see fit. It's not some scary black box you don't really understand.
• It's not database driven - that means it will be more reliable. It also means it has limitations - if you've got a very large number of ad types (say over 1,000), you should be using a database driven solution.

The script is just a big if elseif statement. We're going to add in two features to the idea of a random banner ads - 1) static ads on certain pages, 2) special parameters for certain ads.

Here's a brief version of the script:

<?php
$n = rand(1,2);
if ($_SERVER['SCRIPT_NAME']=="/tags/rays-great-popcorn")
{
echo "<a href="http://www.your-domain.com/scripts/ad-links.php?adid=41" onclick="javascript:pageTracker._trackPageview('/outbound/rays-great-popcorn');" target="rgpc"><img border="0" src="http://www.your-domain.com/resources/bnrs/rays-great-popcorn-600-200.jpg" alt="Ray's Great Popcorn" width="600" height="200"></a>";
}
elseif ($n==1)
{
echo "<a href="http://www.your-domain.com/scripts/ad-links.php?adid=41" onclick="javascript:pageTracker._trackPageview('/outbound/rays-great-popcorn');" target="rgpc"><img src="http://www.your-domain.com/resources/bnrs/rays-great-popcorn-600-125.jpg" alt="Ray's Great Popcorn" width="600" height="125" border="0"></a>";
}
elseif ($n==2)
{
echo "<a href="http://www.your-domain.com/scripts/ad-links.php?adid=41&param1=".$_GET['param1']."" onclick="javascript:pageTracker._trackPageview('/outbound/freds-great-popcorn');" target="fgpc"><img src="http://www.your-domain.com/resources/bnrs/freds-great-popcorn-600-125.jpg" alt="Fred's Great Popcorn" width="600" height="125" border="0"></a>";
}
else{ }
?>

So let's go over what the script does... First, it sets a random number into the $n variable. Since we have two ads, it randomly picks a number between 1 and 2. Obviously as you add more cases for more ads, you'd up 2 to a bigger number.

Then it tests to see if we're on the page with the URL /tags/labels/rays-great-popcorn and if so, it displays a special ad that was made just for that page. That page doesn't get a random ad, it always gets that particular ad.

In the next two cases it checks the random number and randomly displays one of the two banner ads you have for your site (of course you'd have more than two).

In the second case it uses a special extra parameter in the outbound URL for the banner ad (param1). It uses PHP's $_GET array to pull the param1 element out of the array. The $_GET array holds all the query parameters you passed in the URL string when you did the include that called the script (we'll show that in a moment). That means that you have to pass all the parameters into the script that you might use in any of the random ads.

The way the script was written was with echo, which meant all the double quotes in the HTML had to be escaped. You could alternately write the code with multiple PHP statements which may be easier for some people to understand since the HTML is just as it would be in a regular HTML document. This approach also means there's a certain amount of editing you can do in the design mode of Dreamweaver.

The HTML is pretty basic - an image with a link, so when you click on the image you follow the link. The one advanced aspect is the Google Analytics event tagging that I've added in the link. That registers the outbound click as a page view in your analytics so you can analyze what pages do the best in getting people to click on your ads. [You can also set up a goal so all outbound clicks are seen as "conversions", but that's a topic for another post.]

The script would look like this if you wrote it with multiple statements:

<?php
$n = rand(1,2);
if ($_SERVER['SCRIPT_NAME']=="/tags/rays-great-popcorn")
{ ?>
<a href="http://www.your-domain.com/scripts/ad-links.php?adid=41" onclick="javascript:pageTracker._trackPageview('/outbound/rays-great-popcorn');" target="rgpc"><img border="0" src="http://www.your-domain.com/resources/bnrs/rays-great-popcorn-600-200.jpg" alt="Ray's Great Popcorn" width="600" height="200"></a>
<?php }
elseif ($n==1)
{ ?>
<a href="http://www.your-domain.com/scripts/ad-links.php?adid=41" onclick="javascript:pageTracker._trackPageview('/outbound/rays-great-popcorn');" target="rgpc"><img src="http://www.your-domain.com/resources/bnrs/rays-great-popcorn-600-125.jpg" alt="Ray's Great Popcorn" width="600" height="125" border="0"></a>
<?php }
elseif ($n==2)
{ ?>
<a href="http://www.your-domain.com/scripts/ad-links.php?adid=41&param1="<?php echo $_GET['param1']; ?>" onclick="javascript:pageTracker._trackPageview('/outbound/freds-great-popcorn');" target="fgpc"><img src="http://www.your-domain.com/resources/bnrs/freds-great-popcorn-600-125.jpg" alt="Fred's Great Popcorn" width="600" height="125" border="0"></a>
<?php }
else{ }
?>

But notice in the last case we had to insert a PHP echo inside the HTML to be able to use param1, so no matter how you write it, there are things that are easier and other things that may be more difficult.

Now, the way either one of those scripts is implemented is to save the script in a file and insert it into the page with a PHP include. So let's say we named the script banner-ads.php and we put it in an /includes/ directory at the root of our site. The include would look something like this:

<?php include($_SERVER['DOCUMENT_ROOT']."/includes/banner-ads.php?param1=forum"); ?>

So that pulls the file banner-ads.php and passes the value "forum" in as param1. That could be useful if you wanted to know the section of your site that was calling the banner ad - just change the value in each one of your templates (one value for the blog templates, one for the forum templates, etc.) But that could be achieved another way:

<?php $param1="forum"; include($_SERVER['DOCUMENT_ROOT']."/includes/banner-ads.php"); ?>

If you did that, then you wouldn't access the value with the $_GET array in the script, instead you'd just access the $param1 variable directly.

So there you have it - a simple way to implement random banner ads that's rock solid and easy to maintain by anyone with just a little bit of technical skills.

You define the values that you'll choose from in PHP arrays. To do that you do something like this...

<?php
$titles = array ("Star Wars - Episode I, The Phantom Menace", "Star Wars - Episode II, Attack of the Clones", "Star Wars - Episode III, Revenge of the Sith", "Star Wars Episode IV - A New Hope", "Star Wars Episode V - The Empire Strikes Back", "Star Wars Episode VI - Return of the Jedi", "Star Wars - Clone Wars, Vol. 1", "Star Wars - Clone Wars, Vol. 2");

$pageURLs = array("http://www.amazon.com/Star-Wars-Episode-Phantom-Widescreen/dp/B00003CX5P/ref=sr_1_4?ie=UTF8&s=dvd&qid=1225998531&sr=1-4", "http://www.amazon.com/Star-Wars-Episode-Attack-Widescreen/dp/B00006HBUJ/ref=sr_1_7?ie=UTF8&s=dvd&qid=1225998531&sr=1-7", "http://www.amazon.com/Star-Wars-Episode-Revenge-Widescreen/dp/B00005JLXH/ref=sr_1_6?ie=UTF8&s=dvd&qid=1225998531&sr=1-6", "http://www.amazon.com/Star-Wars-Episode-IV-Widescreen/dp/B000FQJAIW/ref=sr_1_5?ie=UTF8&s=dvd&qid=1225998531&sr=1-5", "http://www.amazon.com/Star-Wars-Episode-Versions-Widescreen/dp/B000FQJAJG/ref=sr_1_9?ie=UTF8&s=dvd&qid=1225998531&sr=1-9", "http://www.amazon.com/Star-Wars-Episode-VI-Widescreen/dp/B000FQVX78/ref=sr_1_10?ie=UTF8&s=dvd&qid=1225998531&sr=1-10", "http://www.amazon.com/Star-Wars-Clone-Vol-1/dp/B0006Z2LMO/ref=sr_1_12?ie=UTF8&s=dvd&qid=1225998531&sr=1-12", "http://www.amazon.com/Star-Wars-Clone-Vol-2/dp/B000BCE8Q4/ref=sr_1_14?ie=UTF8&s=dvd&qid=1225999439&sr=1-14");

$imgURLs = array ("http://ecx.images-amazon.com/images/I/51BR3RNVKZL._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/51BGV8AJ4RL._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/51RHXMVH9YL._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/517M4V93K0L._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/510GTNVNYYL._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/51CWJ6PC1KL._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/51A6GEB6SAL._SL160_AA115_.jpg", "http://ecx.images-amazon.com/images/I/51F7C82EDGL._SL160_AA115_.jpg");

$titleCount = count($titles);
$element1 = rand(0, $titleCount-1);
$element2 = rand(0, $titleCount-1);
if ($element2==$element1) {$element2 = rand(0, $titleCount-1);}
$element3 = rand(0, $titleCount-1);
if ($element3==$element1) {$element3 = rand(0, $titleCount-1);}
if ($element3==$element2) {$element3 = rand(0, $titleCount-1);}
?>

So you'll need something like that to initialize the arrays. Then you use them by displaying an image with a link to the page on Amazon.com. The code for the image and link would look something like this..

<a href="<?php echo $pageURLs[$element1]; ?>" target="amazon"><img src="<?php echo $imgURLs[$element1]; ?>" alt="<?php echo $titles[$element1]; ?>" title="<?php echo $titles[$element1]; ?>" /></a>

So the basic syntax is a PHP echo that specifies the array and the value of the element of the array. $titles[$element1] means the $title array and the element of the array is the value found in the $element1 variable. If you had put $titles[1] that would be element 1 of the array (which is actually the second element in the array since elements start their counting at zero, not 1).

So let's see it in action...

Now, if you take it a step further, the definition of the arrays can happen in an external file and put into the page with a PHP include. That file can be written with a database application. Which means you could have a site with dynamic content running without any databases on the web server itself.

There are many uses for this type of thing - imagine a "picture of the day" script, or a banner ad rotating script. The options are pretty wide ranging.

4D Server v11 SQL really is pretty cool, and quite powerful. A lot of what it was about was discussed last year, but it's interesting to see cases where client/server is actually faster than a standalone/mono application. And most importantly, it's here now - not a demo of an unreleased product.

v11.3

Then there's v11.3 - If we were back in the v6.0, 6.5, 6.7, 6.8 days v11.3 would be v12 - it really does have some wonderful enhancements in terms of speed, SQL (much improved user management just to name one thing) and SVG (the new component). But the issue, IMHO, is that they didn't completely stabilize v11.2 before doing the enhancements so even 11.3 will probably be a bit of a gamble for a demanding, mission-critical app. At the same time, it's such a big upgrade it is going through a lot of QA, which is always good. It's also good that they said that there will be no new features for v11 after 11.3 - from here on it's all about bug fixes and making the product stable, though I can see them releasing new features as a component like they're doing with SVG.

4D Web 2.0 Pack v11 (the AJAX part of it)

Even though I'm all about using 4D on the web, and I know some of the guys on the 4D Web 2.0 Pack team personally, I haven't ever felt like I wanted to use 4D Web 2.0 Pack. That opinion changed at Summit this year for two reasons. 1) Brendan's mention of Javascript maturing to the point that incompatibilities aren't as huge as they used to be, and 2) Julien's presentation showed that 4D Web 2.0 Pack v11 really has matured considerably. They've had tools to help you build apps before, but their Green Tea IDE really was a big step in the right direction, though they did stress that it's just how you start your app - it doesn't handle everything you're going to want it to do.

Performance

That sorta brings up what was the main interest for me this year - performance. I have a 4D-based web site that gets over 1 million page views a month from real users, plus all the bot traffic (which is considerable - Googlebot alone is over 350,000 pages/month). The client wants to launch another site, integrated with the first one, that will be FAR larger. My rough estimates are that I'll need to support 50 million page views a month within 5 years (that's an average of 20/second). 4D's internal web server can't handle the load I have now, but I need 4D v11 to handle 50 times the current load.

After quizzing Julien Feason and Charlie Vass at a 4D Kitchen session, for high volume uses I need to avoid everything that hits the cooperative thread and hit the database engine as directly as possible - avoiding 4D code whenever possible. That means I have to avoid triggers and the 4D internal web server. Solutions like the AJAX part of 4D Web 2.0 Pack which are based off 4D's internal web sever are a problem - at least for high volume uses. That, and the fact that my client still has IE6 as their corporate standard and 4D Web 2.0 Pack doesn't fully support IE6 means that even though I now want to use AJAX part of 4D Web 2.0 Pack, my use of it will be pretty limited.

However, since you now can hit 4D's database engine directly there are plenty of other options and I'll be rewriting a fair amount of my web app in PHP which can use ODBC to hit 4D's SQL engine without going through 4D code.

4D for Flex (part of 4D Web 2.0 Pack v11)

While the AJAX part of 4D Web 2.0 Pack is a problem for me, 4D for Flex is a tool I can use, since it hits the preemptive part of 4D directly and it works just fine in IE6 (provided you have Flash 9, which as fate would have Flash 9 isn't part of my client's standard corporate build either). The session on 4D for Flex made it seem really complicated, but what I found most interesting about the session were the comments in the last 5 minutes during Q&A... First Tim said that he much preferred working with 4D for Flex than the 4D AJAX framework. Then one of the attendees chimed in saying once you get over the initial learning curve with 4D for Flex you'll love it and think of it as invaluable. He went further saying that the thinking when you work with Flex is more compatible with how you think in 4D than the thinking when working with AJAX.

The Language

One thing Laurent made very clear (without actually saying it) was that the current 4D language is dead - he literally called it "the old language" (even though there's no "new language" yet). If I understood things correctly, all those lines of code you've written in 4D will never execute in a preemptive multitasking manner. There will be a new language, it will be ECMAScript based (like Javascript and ActionScript), and that will be the language that will work in 4D's preemptive multitasking environment. What this means is that current 4D code, while it will be supported for a long time, is a bit of a liability. If you really want to get the most of 4D in the future you won't be running the code you have now.

From my perspective that means the more I do in PHP and Flex, the better. Remember, with PHP and Flex I can hit the SQL engine directly and use preemptive multitasking now, and the next version of 4D will have a code editor that supports editing PHP files, and a web server (based on Apache) that has a PHP processor built-in. So Laurent's comment last year about triggers being bad was probably more about the language used by triggers being bad. Still, getting away from the 4D language is a huge change in thinking for most of us since the current 4D language is like an old friend.

SVG

SVG was the pleasant surprise for me at Summit. I've been wrestling with EPS files that have emedded TIFFs. What I realized is that if I get SVG versions of those images I can do all sorts of things like swapping out the TIFF with a low-res JPG and even watermarking the embedded image and translating the text in the image from data.

Wrap-Up

So, from my perspective it was a useful Summit. 1) It helped clarify strategies to deal with the problems I have now. 2) It let me see that the primary remaining weaknesses in 4D (IMO) are being resolved in the next version.

Dot notation vs. the language - They've been working on a new language for 4D. They'll be following ECMAScript. It's too early to be specific.

SQL Views - not in v11, but should be in the next version.

Components will have data files in the next version - part of the concept of a project.

QuickReports - they're being actively discussed at 4D France. They're thinking about a web-based interface that also works offline, but nothing definite yet. Still, it's safe to say there's a major upgrade coming.

Array of blobs will come with the new language. The problem with the current version is that characters within blobs use array element notation, so it's confusing to the compiler. However, in 11.2 you can use an array of pictures and put blobs in them.

They will be going back and improving 4D Write.

List boxes can how have multiple lines of text per cell - just put a carriage return (v11.3).

Plugins will change substantially with the new language. DLLs will be directly supported. At the same time there will be backwards compatibility with v11 plugins.

4D Draw functionalities will be replaced with SVG-based tools. There will not be any 4D Draw command-compatible tools.

They're working on 4D Server to 4D Server replication. They're dealing with issues around unique IDs and tools to determine what has changed between two snapshots. The tools will be programmer-oriented, not end-user oriented.

There are plans to have dynamically created objects on a form, Laurent R. keeps asking Laurent E. to get it done and it keeps not getting done     (the next version)

There are plans to change the user environment - navigating tables, etc. They want the UI to be web-like.

No new features in v11, after v11.3. Bug fixes are the near-term priority.

No plans to provide jdbc driver for v11, but it shouldn't be too difficult to port what's done in 4D for Flex to Java since the languages are similar. They think it would take about a month, but they don't want to do it or support it.

No 4D Open for v11.

If you have several 4D Servers running on the same machine don't use the automatic memory management it will cause the 4D Servers to fight with each other.

They will reintroduce the ability to have data segments and say which tables are stored in which segment and where you want to store large objects (text, pictures, blobs). Maybe in the next version.

In the next version the server will be faceless and run as a service.

Can't promise 4D Server running on other platforms, but they have plans.

The application server port is the "old way" (cooperative). The DB4D port is the access to the multithreaded part of the application. The old port will remain for a long time since there are many lines of code written in the current language.

You can have too much cache on both v2004 and v11, but for different reasons. On v11 the reason is because you may starve other things running on the server because cache is forced into physical memory. Cache can be in virtual memory on standalone. On 2004 internally it can get so big that it gets more complicated to manage the cache than it's capable of doing quickly.

Presenters: Olivier Dechanels, Thibaud Arguillere

How the datafile is organized...

Each block in 4D's data file is 128 bytes.

Each block can only hold one item. An item may take more than one block and if so, they must be contiguous.

In the future they plan on having special data segments to store large items. This will let you put certain items on different disks.

A record is made up of a Header, Values and a Micro-Structure. The micro-structure is the description of the record at the time the record was saved (in case it subsequently changes).

Header 32 bytes
Values: Boolean: 1, Integer: 2, Longint: 4, Longint64/Date/Time: 8, Float: 7 + X Bytes, Alpha: 4+(2x nb chars), Blob/Picture/Text: 4
Micro-structure: 8/field

Nulls don't take space in the data file other than in the micro-structure.

The micro-structure is really useful because you can change the structure of a table without having to worry about existing data. 4D will automatically translate and deal with data in a table that was stored in a different format.

While table numbers are never reused, field numbers are reused. This means that you do need to update customer data if you delete a field and add another that takes it's place. Otherwise you'll get the old data in the new field.

When data is read from the hard drive it reads the next bits of data into a buffer, but if the next thing it needs isn't in the buffer then it has to go looking for it. Hence, try to avoid fragmentation. The best way to do this is to avoid variable sized fields, and store text and blobs outside the record. The more you can have a fixed size record the less fragmentation, and the faster your app can read from disk. [Realize that if you need to access the text a lot this can work against you.]

They don't recommend using JPR's "airbag" strategy that adds variable amount of data to make all records the same size to avoid fragmentation. Better to just store variable size data outside the record. They're working on implementing an auto airbag to force records to take a fixed amount of space to avoid future fragmentation.

Realize that you may have free space in records. For example, a many to many joining table with just two longints. You can add denormalized data in there that can make operations faster without increasing the size of your data file.

They save the length of the record in the address table. If that doesn't match the actual length of the record they alert you there's a problem with your data file.

BLOBs, Pictures, Text fields - are stored outside the record, though v11.3 lets you set a size threshold for storing inside the record. In the record the ID of the external location is stored. On disk they have the same status as a record with address tables to help locate them. This will be optimized further in the future.

In the future they're thinking of having indexes on formulas.

Indexes are somewhat costly. For a long integer index you're looking at 12 bytes per value plus the overhead of things like the header for the index and empty space in the index.

B-Tree indexes are structured on levels. Root = 128 keys, Level 1 = 128x128 = 16,384 keys, Level 2 = 16384 x 128 = 2,097,152 keys, etc. The number of access to find the record in the index depends on the number of levels - one access per level.

For ORDER BYs with multiple values have a composite index to speed them up.

In v2004 it would use the index if the selection had more than 9% of the records in the table, otherwise it would drop back to sequential for the QUERY or the ORDER BY. v11 is more intelligent and figures it out based on the number of disk accesses that are needed. This means a number of SET DATABASE PARAMETERs are now ignored.

Just because you create an index doesn't mean it will be used. Unused indexes slow down the database because it takes time to manage them and space to store them.

With cluster indexes each value has either a bit table or a long int array to remember the records that match that value. 4D decides which is more sufficient.

They're coming out with a 4DPop component (requires v11.3) that analyzes your data file and shows the storage details.

If you copy/paste pictures into 4D, v11 takes all the info you paste which may be considerably more than the picture itself. It's a good idea to CONVERT PICTURE($pict;"jpeg") to reduce the size of the images.

Presenter: Jesse Pina

Resources are now defined as files needed to translate an interface. Can be images or text. Everything is file based.

Converting from resource fork resources to file based resources

• Strings -> XLIF
• Images -> files
• Constants -> plugins
• 4D & System - > do not use

You can refer to xliff strings by IDs or names...

• :15000,1
• liff:elementName

You can override titles on objects on forms by specifying a resname on a xliff group that is the name of the table "[TableName]"

Which language gets loaded?

1. First looks at OS language and if you have resources for that language, it uses that
2. If not, then uses language resources for the version of 4D that you're using
3. If not, then English
4. If not, then first valid lproj folder it finds

If you want to override the language, then have multiple xliff files per language with each file having one language, and each language using different group IDs. Then use an interprocess variable for the group ID and refer to the resource by ID rather than name.

If you pull in a picture from a localized folder and then remove the directory from path it will use the file localized for the particular user.

Constants are moving to a plugin. They're providing "User Constants.bundle". It's still using the old resource fork.

If you make changes on the client side in client/server you need to use the resource explorer for it to replicate up to server.

As far as when things are replicated in client/server. You have an option to not push until next login (never), two minutes after the change (always), or if the client wants to accept the new resource (ask).