web | The Webernets

Easiest and Best way to copy and run a live published WordPress blog web site on your local MAC computer for testing and development

February 13, 2013September 30, 2013 The Webernets0 comment

**NOTE** – THIS ARTICLE VERSION IS WRITTEN FOR MAC USERS – WINDOWS VERSION COMING SOON

PART 1 – Setting up MAMP (Experts Shortcut – Install MAMP and proceed to step 2)

If you have a WordPress Blog or Web Site, it can be VERY handy sometimes to be able to take your live published site and copy onto your local computer. This enables you to play with, set up and assess plugins, try out new themes and layouts, and generally mess with your site without affecting your real live site.

To get started you need to create an environment that will allow your site to function on your computer. The two main ingredients to a WordPress installation are PHP (web language) and SQL (Database). To get these two engines running on your computer you need to download some free software that installs them as part of a server. MAMP (Macintosh + Apache + MySQL + PHP) is excellant for this. It is available free from MAMP.info HERE. The free version and the paid version are bundled together, but for our purpose here, the free version will be fine, so lets go ahead and install that. Once you have downloaded MAMP, Unzip the zip file and run the installer package.

Click continue.

Click Continue.

If you agree, click continue.

Confirm you Agree……click continue……And once you arrive at the screen below, we will tell the installer not to worry about MAMP PRO, and to just install MAMP Free. (If you want to try MAMP PRO free for 14 days, skip the following 2 steps).

Click the “Customize” button in the left.

Uncheck the “MAMP PRO” option.

Type your password to allow the installer to run.

Once the installer has finished, click “Close” in the lower right hand corner. You can now open a new finder window, and in your Applications folder you will see a new folder called “MAMP”.

Double click the “MAMP” application to start it up.

Now click the “Start Servers” button.

Once you have green lights, click “Open Start Page’. this will open your browser to a page that will tell you if all your services (IE PHP and SQL) are up and running on your machine.

WOOHOO! We’re ready to start copying our web site!

PART 2 – COPYING LIVE SITE

Its now time to copy over the files from the site we want to clone. To get started, log into that site, For this tutorial, I am going to use my Photography and Design site Gruffpuppy as an example. Once logged in, click “Plugins” and select “Add New”

In the search field type “Duplicator”.

Once Duplicator is found, Install and then Activate the plugin.

When activated a new item will appear in the Column Menu on the left side called “Duplicator”. Click it, and you will be brought to the main screen of the plugin. To begin downloading a copy of your live site, the Duplicator asks you to name the back up package. You can change the default name, but in my experience the default auto generated name that is already in there seems to work without error. If you are happy with the name, click the “Create” button, the first in the top right row.

You will now be asked to confirm, and Duplicator will start compressing your entire site into a zip file, ready for download. This can take a while, so now is a good time to stretch your legs and get a drink. Once it has finished compressing, the screen will update automatically with your available downloads.

You will need to download both files (Installer and Package) to your desktop. If you have a large site, the package file can take some time to download. Once your files are downloaded, there’s one more small task.

Select “Settings” from the column menu on the left and then “Permalinks”.

Although no action need be taken, It is important to take note of the setting. As you can see, mine is set to “Day and Name”, but yours could be different. We need to know this setting when we recreate and activate the copy/clone of our site later. Once you have written down or memorized your permalinks setting, you can log out of your site.

PART 3 – SETTING UP A DATABASE FOR YOUR CLONE

The next step is to set up a blank SQL database on your computer. With MAMP running, click the “Open Start Page” button again, and click “phpMyAdmin” from the top menu of the page that opens.

Now, click “Databases”.

In the create databases field, type a name for the new database. It can be whatever you want, but it is important that you write it down, as we will need to use the name later. Im calling mine “gruffpuppy”, one word, all in lower case. Then click the “Create”. Once this is done, close out of the web browser window. There is no need to create “Users” for the database as we will use the root/default user account, which is automatically created for every database.

PART 4 – CREATE THE COPY/CLONE OF YOUR SITE

With MAMP still running, and your server active (Green Lights) , its time to move the files “Duplicator” created to your local server directory.

Open a new finder window, and go to “Applications”, open the “MAMP” folder, and then open “htdocs”.

Drop the zip folder and the “installer.php” file Duplicator created in and close the finder window.

Open up your favorite web browser (For this tutorial I will be using Firefox, as there’s a little bug I want to show you, that doesn’t seem to appear in Safari) and in the address bar type “localhost:8888” and you will see a directory listing of your “htdocs” folder.

Double click the “installer.php” file and the Duplicator installer will open. YAY! This means your server is all working great, and you are viewing your first web page on your local server. Now it’s time to set up the database connection. In the MySQL Server area, leave “Host” set to localhost. in “User” type “root”, as we will be connecting using the automatically created user profile I mentioned earlier. In “Password” type the word “root” again, and for “Database Name” you need to type the name you specified earlier in phpMyAdmin. I used “gruffpuppy” so that’s what I am typing here. When your done, press “Test Connection”.

As you can see, my connection is good and I am ready to move on to the next step. If you receive an error here, you need to go back and check your credentials. It’s usually a typo of your credentials or database name. Once you have a successful connection click the “Close” button.

Check the warning box and click “Run Deployment”.

Another warning will pop up, which is irrelevant to this project, so go ahead and click “OK”.

Duplicator will now start building the copy of your WordPress Web Site. This can take a while so be patient.

Once installation has finished, you are given an opportunity to change some parameters. Unless you have some special circumstances outside of the scope of this tutorial, your fine to accept the default settings. Click “Update Tables”

The next screen means the duplication of your site is now complete, and there’s just a little bit of house keeping to be done before you can use your site.

STEP 5 – FINISHING UP THE INSTALL

At this point, I recommend closing all open windows of your web browser and opening one new window with your default homepage showing, and then clear your browser history, cache and cookies etc. More often than not in Firefox the next step will yield an error in the process and you will not be able to continue. It looks to me like something that is kept in your browsers memory blocks the CSS (cascading Style Sheets) from loading and your site looks like this:

If you are using Firefox, Select “Tools” from the menu bar and then “Clear Recent History” gets you going, and in Safari, Click “Safari” and then “Reset Safari” to bring up the browser cleaning options. Once you are all cleaned up, type “localhost:8888/wp-admin” in your web browsers address bar and VOILA!

From the menu column on the left select “Settings” and then “Permalinks”.

Referring back to the note we made in step 2, make sure the appropriate setting is selected (mine was Day and Name) and press “Save Changes”. Even if your setting is already selected, it is still important to press the “Save Changes” buttons so the option is written to the database.

Your site is now completely cloned/copied to your local machine and you can mess with it until the cows come home without affecting your live site in any way.

STEP 6 – HOUSEKEEPING

The last step is to delete your install files from your “htdocs” folder.

Locate the “installer-data.sql”, “installer-log.txt” and “installer.php” files, move them to the trash and give yourself a pat on the back! YOU DID IT!

How to listen to 80′s Hairband’s Music and other Internet Radio Stations 24 Hours a day – Part Two – At Work

November 29, 2012November 29, 2012 The Webernets0 comment

In PART 1, we looked at how to listen to internet radio (specifically 181FM 80’s Hairband Station) on the go. In this part, we will look at two ways to listen at the office on your computer with a web browser, assuming your computer has sound capabilities. The quickest and easiest way to listen is to simply navigate to www.181.fm.

Once there, you will find a list of ALL of their cool stations down the left hand side. There’s SO much good music to listen to there. But if its Glam your looking for, Just navigate down to “80’s Hairband”, and click it. A new window will open with a player in it, and it should start playing immediately.

Another way to listen to internet radio through your web browser is to go to Tunein.com, and in this case, again, we will search for “80’s Hairband” in the search bar at the top.

Once 181FM 80’s Hairbands appears, click it to open a new window which contains a player, and even the album art for the songs it is playing.

Quickly and Easily check your web site SEO performance with the SEO Workers Analysis Tool

May 30, 2012 The Webernets1 Comment

Over the last 5 years I have built dozens of web sites. During that time I have assessed a lot of “Tools” that are designed to give you Search Engine Optimization feedback on how your site looks to search engines, but I always seem to find myself coming back to The SEO Workers Analysis Tool. It’s the best.

If you want to know how your web site looks to the likes of Google, Yahoo, Microsoft Bing etc etc, just go to seoworkers.com and plug your web site into their SEO Analysis tool, and it will tell you what is right with your site, what is wrong, and advise you what you can do to make your site rank better. They also have some really informative video’s you can watch, that appear automatically with your analysis results!

Once you are on their Analyzer Page, type in your sites URL, and answer the anti spam bot math question.

After you click submit, their analyzer will take a look at your site, assess it, and come back to you (Almost Instantly) with a complete Search Engine Optimization report, telling how your site looks to search engines, and advise on how you can tweak stuff to give you MORE POWER!

Argh Argh Argh!

Built With – Find out what makes a web site work

February 23, 2012 The Webernets0 comment

If you build web sites, from time to time you will happen upon a site and wonder what the developers used to make something work. That’s where “Built With” comes in.

Next time you find a site you like, go to builtwith.com, enter the URL of the site you like, and Builtwith will try to identify what technologies are in use on the site! Pretty cool huh!

As an example, try running on this site by clicking this link, and see just how accurate it is!

Check The Webernets on Built With

They also have plugins for popular browsers so you can run a scan with a click of a button without having to navigate away from the cool site you are looking at!

3D Video for Beginners Part 1 – Filming in 3D with Web Cams

September 30, 2011May 16, 2012 The Webernets0 comment

3D video is becoming popular again, and with the tools already available to most of us, its pretty easy to get started making your own 3D movies. There are a lot of programs available that will take your current 2D video and convert it to 3D with varying levels of success, but if you are interested in actually filming in 3D using a stereoscopic camera set up, this is the article for you.

Getting started making 3D can be a bit confusing for beginners. But if you have a PC and a couple of web cams, you are two thirds of the way there. It is really helpful if your webcams are the same to, and a lot of webcams are available in twin packs now as well (one for you, one for your friend), so these are a good place to start.

I had a security camera set up at the last place I lived, and two of the cameras are identical. For 3D filming it is critically important that both cameras are aligned, and looking at exactly the same view. I joined the two together by screwing them to a flat piece of steel at their mounting point, and they lined up quiet well.

In order to achieve the 3D effect your cameras will need to be spaced about 65mm apart. You can technically use any two cameras, but it just makes it a lot easier if they are the same. Once your cameras are mounted together its time to connect them to your computer. If they are USB cams just plug them in, but in my case I had to use a Pinnacle Dazzle for the left camera, and a Easy Cap USB interface I got from Ebay for the right camera, in order to be able to use them. My cameras have a coaxial cable output, and the Dazzle/Easy Cap act like adapters that allow me to plug the cams into them, then they plug into the computers USB port. Once you are all plugged in, the next step is to download a program that will let you view your cams, align them, and eventually record your video. I looked at a lot of programs, and there is only one that gets my thumbs up, and that is Stereoscopic Multiplexer. The only down side is that it doesn’t record audio, so you will need to use a stand alone audio recorder to capture the sound, and then ad it back in processing later. You can download the program and try it out with no restrictions other than a watermark in the image. If you really get the hang of things and want to buy it, you can, and the watermark will be removed. But if you just want to try this out and experiment, you can download it and test it at no cost.

Once Stereoscopic Multiplexer is installed, open it up, and the configuration wizard starts. This is where you can tell it which camera is going to be the left camera, and which is going to be the right camera.

The next step is to select a capture format.

This is basically telling the program the format and quality your webcams can deliver. In my case, my cameras are PAL, and the image size they deliver is 720 pixels wide by 576 pixels high, so I use YUY2 720×576 pixels. The next few windows are OK to leave at the default settings, so keep clicking OK until you get to the preview window. If everything has configured correctly, you will now see a preview window of what your cameras see.

As you can see from my preview, I spent a lot of time making sure the image from the left camera is identical to the right. The pole on the right of the view is the same distance from the edge of the frame in both, as is the positioning of the back of the chair on the left, and the doggy bowl at the bottom.

Now that everything is lined up, its time to start recording. When you click the red record button another window will appear asking you how you want the video compressed.

If you have a fast processor the Cinepak Codec by Radius seems to be pretty good, but in my case I have to record uncompressed. Its a lot faster, but the file sizes are huge. I use Ojosoft Total Converter to compress the videos once I have finished shooting, so the file sizes are more manageable. Make sure you have your preferred compression method highlighted, and you have given your file a name and a “save to” location before you try to click start, otherwise it wont work. Below is a sample of the raw video footage I captured.

httpv://youtu.be/xn0DCKzFw7QStereoscopic Multiplexer is great because your left and right cam footage is in sync, and saved side by side into one file (Hence the frame size of 1440 x 576 when recording from two 720 x 576 cameras). If you were to use two regular video tape cameras, you have to try and match the videos so they both play at exactly the same time, which is not impossible, but is difficult and ads more steps to the process.

Now it’s time to process the raw video – Stay tuned for Part Two!

WYSI’sntalwaysWYG – Part 2

June 21, 2011June 24, 2011 The Webernets0 comment

Continuing on from the last few post’s about how the layout of this site appears in Internet Explorer, as opposed to every other browser, both obscure and popular, David from Digital Raindrops suggested I run the sites code through the W3C Validator to see if there are any errors.

And sure enough, I had simply forgotten to close a Center tag on an image, which in true IE fashioned, spilled over and ruined the entire site layout, where every other browser was able to deal with it. In the end it was my fault, but I did learn some interesting stuff along the way. Adobe have a feature online now called “Cs Live Services”. As yet, I haven’t had time to explore them completely. What I did find is that Adobe have their own equivalent to Browser Shots, called Adobe Browser Lab.

It is free until April 2012, after which time I expect it will be quiet expensive, and part of a much broader package of software, as Adobe seems to me to be wanting to move us all to using their products online instead of locally on our computers, in an effort to thwart piracy of their programs. Like most Adobe stuff, it looks great!

As you can see, it has considerably less choices than Browser Shots, but it has more than 90% of the world’s computer users covered, which also makes it faster. The drawback for me is that the default size setting for the results is 100%, meaning its a one for view, it shows your site EXACTLY, size and all. In the options, you can reduce the size to only 75%. If you want to view two browser views side by side in a 2-up configurations you had better have a BIG screen.

A very useful tool, and my suggestion is to use and enjoy it while you can!

Share this:

Share this:

Share this:

Share this:

Share this:

Share this: