One of the greatest techniques ever used by responsible web designers.

I was chatting with Mack McMillan of UltimateIDX the other day when we got onto discussing the subject we frequently encounter with clients.  Many times clients want to see their blogs and websites prior to them going live and many times that isn’t easily done without some clever techniques I’ll reveal herein.  After having encountered this many times I realized that I should come up with a small guide on "how to build and view a site development prior to it going live"  when I came up with a little tool to distribute in order to help. So this post is generically in response to a common question being asked in forums.  

How can I see my site before the DNS resolves or before I switch servers?

Before we answer that I want to toss a few scenarios at you in the form of questions so I can set the frame of mind and reference for you to better understand why this technique is so very important. We look at preserving page urls for page rank along with site migration and server migration while maintaining the old site.

Lets say you have a brand new hosting account and on that hosting account you upload your site to the server and you eagerly wait for your DNS to resolve.  After two hours go by you begin to get impatient (even though dns can take 24+ hours to resolve) and you begin to seek a solution.  After all, you want to install your shopping cart, WordPress blog, or Joomla site and simply cant wait.  How can you view your site with full resolving URL even if DNS hasn’t resolved?  Thats question 1.

Now lets say that you have a site you are migrating from an old service provider, hosting company, designer or whatever and you want to verify that the migration went well PRIOR to you switching DNS.  Lets word this question accordingly;  How can I see and test my site before I switch DNS?  Naturally this would apply to site migrations where switching servers are also involved.  Thats question 2.

One last question related to these scenarios would be instances where you are simply seeking a web site redesign or change in site tools and wish to preserve URL’s   This happens with site migrations where, for instance, Realtors would be leaving a proprietary system and they wish to move to a more widely supported one as in the case of the thousands of recent Real Estate Webmasters and Advanced Access migrations to a CMS solution.  Many times people then ask the question; How can I preserve my links for page rank during a redesign? This question gets a bit more involved when its worded for instances where a site owner wants to keep his or her existing site live while the migration and redesign takes place, most often on an alternative server.  Thats question 3.

Answer: Preserving Page Rank – Migration – URL – Testing

One of the most common techniques used by web designers and developers is to build client sites on servers not accessible to the open web and by doing so a responsible designer will prevent search engines from accidentally indexing the site prematurely.   Although many opt for the sub directory method which can work well, there is a danger in using this technique as referrers can provide Search Engines with a path necessary to view the work in progress.  Follow my logic for just a moment and you will see how this plays out.  We’re going to use a site that is live and online today which was a redesign using a client provided template layout as it was migrated from the old design to the new without missing a beat in the search engines.  This site we use for this article was Go All Pro Realty and the URL I’ll use in this post is http://www.goallpro.com so from this point on I’ll reference that site in the example.

Answering all questions above in those scenarios I take Go All Pro Realty which had been created using Microsoft Front Page.  The site was redesigned for Joomla in which we built the site on a separate IP as opposed to a sub directory where we could use the technique I’m about to reveal for optimal results. After we took all of the content from the old static site and pasted it into the WYSIWYG editor of Joomla we then set out to correct and preserve the URLs and make 301 Redirect changes where links would not be preserved.  The tool we used was a plug-in we offer called OpenSEF for Joomla.  After all the data migration was done we needed to verify the content and the URL’s in a way that we can also verify the page rank, linking, back linking and other aspects without changing the DNS.   How can this be done? How can we view http://www.goallpro.com with our browser and end up visiting the new project location without changing the DNS? Let me explain.

Since I needed a way to view the new site after switching techniques on the new server with the new install of Joomla, what we came up with was a simple modification to a windows file known as the "hosts" file.  For those not familiar with networking and IP mapping, the hosts file is used to contain mapping of IP numbers to host names and each time the file is loaded into cache from reboot, those host names listed will resolve to the IP they are associated with regardless of the actual IP of the domain.  What this means is that if your host file has a reference to a site like say JaredRitchey.com associated to the IP for google, each time you type in JaredRitchey.com it would resolve to google.  This is a common issue with PayPal spoofs and other types of deceptive viruses that modify your host file to get your browser to resolve to a server other than your intended target location.

So in our instance answering those questions above, I need to type in http://www.goallpro.com and have it resolve to a new location on a new IP even though the DNS for the domain has not been switched.  Lets break down the steps and you can try this for yourself.

Fist we modify the hosts file in your windows system; To do this you navigate to this path on your windows system, C:\WINDOWS\system32\drivers\etc then you open the hosts file using an editor that does not alter or modify the raw text.  Some ideal choices are simply notepad on your system or NotePad++ which is a free download.

Click on the image below to examine a larger profile.  Basically what we do is take the host file and add in the domain url and assign it to our testing servers IP.  Now for those of you interested in simply resolving the new site on a new hosting company for the purpose of installing you would make sure your IP the domain is associated with follows the format your hosting company provides. This is ideal for sites that are hosted on a shared server where an IP is used on many domains.  The format for instance on one of my servers looks like 123.4.5.67/~accountname/  It will vary depending on hosting company. Look at the example below;

Now we simply flush the DNS on our system and reopen the browsers (again, make sure the browser cache is cleared)

To do this open the command prompt by visiting START >> RUN and type in command to load the command prompt.

At the command prompt you simply type in the following and press enter "ipconfig /flushdns" (no quote marks) then after the DNS flushes you type in "exit" (no quote marks) and press enter.  Now I’ve created a batch file to flush dns because I do it frequently in working with servers and domains and you are welcome to it.  You can verify the contents of the batch file by simply right clicking on it and opening it in Notepad++  Basically you simply put it on your desktop and double click it when you want to flush the DNS. 

A quick note on clearing cache in your browsers.  In FireFox this is easy enough by holding down CTRL + SHIFT and pressing the Delete Key. You end up with a dialog box like this;

Now that all these things have taken place you should be able to just open your browser and type in the URL and have it resolve to the new target location without the need to change your DNS to the testing server.

I’m open for comments and suggestions regarding this so feel free to sound off.

So, after speaking with the developers at iPress about the importance of Pod Casting we hashed out how beneficial it would be for me as an instructor to put my interviews online on any number of my blogs. Last night, I decided to take just a few minutes to locate a nice little flash MP3 player to put into blogs that I could modify to have my own look and feel when I stumbled upon a site impressive enough to motivate me to write this very post. A few minutes turned into 4+ hours as I looked at my watch, taking notice that the time was just shy of 3AM I realized bookmarking the site would not be enough justice and a post about WebDesignArchive.org would be the worth the time.

Web Design Archive – The Website

I recently added a new category on my blog here at JaredRitchey.com to reflect my thoughts and to articulate the blessings in knowing or interacting with various professionals in the industry titled “Professionals in Review”. The website, Web Design Archive, although not part of an interview fits my own little criteria of the kind of post that gets to go into this category. Although I have dozens of posts in draft state regarding some of my favorite people in the business like Bryan over at CMS Report, or Ryan Bonham at Transparent Technologies among many others, the website, Web Design Archive gets to fit under my new category because the site is not just a professional resource but is presented as a “professional”.

My many hours on the site last night netted me a lofty inventory of resources I’ll be days in organizing and writing about as a result. The website presents many post snippets about an assortment of applications, products and plugins for WordPress among other things. One thing in particular that I was able to find most useful during my hasty search last evening was the AJAX Tabbed Snippets that was most fitting to projects I’m working on with The Brokers Edge. Armed with great examples as a result the site in a span of 4 hours proved more valuable than the previous days efforts to build a tabbed interface for an Open Realty MLS search screen which took me a full 9 hours. Worthy of a visit and certainly a bookmark, you can visit Web Design Archive to form your own opinion.

Pressed for time and at the most inconvenient moment, Adobe InDesign decided to stop working. The error "Adobe indesign is missing required system fonts or CMap files" pops up tossing my workday in array. After 40 minutes on the phone with Adobe Tech support I finally succumb to my frustrations and reinstalled Adobe InDesign CS2 on a second system and simply migrated the missing files directly to my workstation. Having solved the problem using this method I figured I’d make a zip copy of that folder and provide it here for download. Before you follow the suggest repair method outlined on Adobe’s Self Service Forum, consider for a moment that if you accidentally deleted the directory during an uninstall as I had then reinstalling and or running the "repair" sequence likely will not work. I installed and reinstalled several times with no success as suggested by tech support the many methods I had been directed to follow. The quick and easy solution is to simply download this zip file for your PC version of Adobe InDesign CS2 and drag them to your Adobe Shared Folder

Required System Fonts or CMap Files Download Fix Here

Okay so start by visiting my downloads section for the missing-adobe-cmap.zip file. After you extract it you should see a file structure like this;

Be sure InDesign is closed, simply drag the folder reqrd (and sub folders) to the following directory; C:\Program Files\Common Files\Adobe\Fonts\ and restart Adobe InDesign. An image of the typical file structure;

You should now have the error message gone and the application starting as it should. Having spent less time to write this post than it took me to lose valuable time fixing this little issue, I’m glad that maybe this will help someone else save valuable time should they experience the same error.

Updated January 30th 2008

Well it looks like my original instructions were not entirely clear so I’ve replaced a portion of them with graphics and I’ve given a bit more detail in hopes that it provides a bit more clarity. Thanks to everyone who has visited, commented and contacted me regarding this fix.

This version of the CRE DW Extension will have only basic layout and foundation tools for building templates as testing and feedback from users will be most beneficial in determining what is working and what isn’t.

Check the download section later in the week.

Its been my opinion that the best open source freely available component for Joomla SEF is the OpenSEF Component. Unfortunately further development on the component seems to have fallen off the map as many claim to be furthering development yet none seem to post any progress or updates. Regardless, since there didn’t seem to be any download link for this in the Joomla Forums or the Joomla Component Index today I figured I’d make it available here.

Download the OpenSEF Component RC5 Service Pack 2

Download: Joomla OpenSEF Component RC5 Service Pack 2