Creating a development environment for WordPress.
Although the default installation for WordPress meets my minimum requirements, there are several visual and other changes I'm considering that I don't want to experiment with using the live site. So before I go any further, I've decided to set up a development environment.
Step 1: Creating a virtual development machine.
To prevent unnecessary overhead on my system, and also to simplify testing and backups, a few years ago, I standardized on doing all my development work using using virtual machines, this lets me have any combination of os/tools/services required for a development project stored in one, easily backed up and portable file. Currently I'm using Oracle VM Virtual Box, so hopefully Oracle doesn't start charging for this currently free application.
I've decided to install Windows XP as the guest OS for now, mainly because I have an extra licensed copy.
After installing the OS, including IIS, then the patches, and the Guest additions, I have a basic OS and webserver ready for use. I recommend making a backup of the VM file at this point, you can then clone the backup, and use the clone as the starting point new projects, with both the OS and IIS ready to go.
Personally, I don't bother install a virus scanner on the guest OS, instead, I simply do not surf the web from within the virtual machine (with the exception of FTP to and from my live server), instead I download all files and updates using the host OS, and then move them to the guest OS using a virtual shared folder.
Step 2: Setting up the development environment for WordPress.
Before I began this step, I checked the version of PHP and MySQL installed by my hosting company, luckily they have the latest versions of both installed.
- Downloaded and installed MySQL server 5.5
- Downloaded and installed MySQL workbench 5.2
- Downloaded and installed PHP 5
- Pointed my IIS default website to the folder I wanted to use as the root of my dev-site
- Enabled directory browsing in IIS for the site (find this makes dev work much easier.)
- Created a quick "hello world" php file to make sure everything was working.
- Created a test db using MySQL workbench to make sure that the server was working.
Step 3: Copying my live WordPress site to development.
Because I had already installed WordPress on my hosting, creating the development environment was pretty straight foward:
- I FTP'd the contents of my live-site to the dev-site folder I created in Step 2.4
- Loaded up the browser in my virtual machine, and pointed the location to "localhost"
- Up came my website, with the php running on my dev machine, but the site is still pointing to the MySQL server of my live site. I want a dev-site completely detached from the live site.
- I opened the wp-config.php file found in the root of my dev-site, the file contains the following:
- DB_NAME - the name of the database schema created by my hosting company for WordPress
- DB_USER - the user name that WordPress uses to access the database
- DB_PASSWORD - the password for that user, this should be a long random string, if not, you should see how you can get it changed.
- DB_HOST - the IP address of the MySQL server on my host. I copied this line, commented out the original, and changed it to "127.0.0.1"
- Using MySQL Workbench, under Server Administrator:
- I created a new Server Instance, I called wp-live, using the information from Step 2.
- I connected to the live-db using the new Server Instance.
- I used the Data Dump feature to export a Self-Contained File (.sql), I called wp-snapshot.sql, containing the contents of my live-db.
- I closed the new instance
- I connected to the my dev-db, using the local instance created when installed MySQL, called Local instance: MySQL.
- I used the Data Dump feature to import the wp-snapshot.sql into the dev-db, this created a duplicate of information in my live-db in my dev-db, including the same DB_NAME.
- I used the Accounts feature to create an account with the same name and password as DB_USER, and DB_PASSWORD from Step 3.2, and gave the account the DBManager role.
- I created a new Server Instance, I called wp-live, using the information from Step 2.
- To make sure that I was definitely using the dev-db not the live-db, I disconnected my system from the internet.
- I loaded up the browser in my virtual machine, and pointed the location to "localhost"
- The page content loads, so the dev-db is working, but there is no formatting. Taking a quick look at the HTML, I see that links still contain stevenksavage.com.
Step 4: Changing the domain for my WordPress development site.
The answer was fairly simple, I simply add the following lines to my wp-config.php:
- define('WP_HOME','http://localhost);
- define('WP_SITEURL','http://localhost');
I now have a development environment for WordPress that I can use to start experimenting with themes, templates and plugins without affected my live-site.
Transferring my old content to the transitional site.
One of my key requirements was to transfer the content from my old site to the new site without breaking any links from external sites.
There are two reasons for this:
- Referred visitors.
- Search Engine Ranking.
The best way to move a page an let everyone know that it is a permanent move is to send the 301 Moved permanently, header. Because old site was done in ColdFusion 8, the solution was fairly straight forward.
First, I added the onMissingTemplate to my old application.cfc file.
<cffunction name="onMissingTemplate" access="public" returntype="string">
<cfargument name="requested" type="string" required="true"
hint="I am the template that the user requested." />
</cffunction>
Next, because I wanted to map specific pages to their new location, I added
<cffunction name="onMissingTemplate" access="public" returntype="string">
<cfargument name="requested" type="string" required="true"
hint="I am the template that the user requested." />
<cfset template="/index.php">
<cfscript>
if(findNoCase("/content/500/1.en.cfm",requested)) template = "/?page_id=2";
else if(findNoCase("/content/500/2.en.cfm",requested)) template = "/?p=60";
</cfscript>
<cfheader statuscode="301" statustext="Moved permanently">
<cfheader name="Location" value="#template#">
</cffunction>
The final step is to delete all the old .cfm pages on my site. Now whenever someone goes to an old link, they will be send a 301 message, and redirected to the pages new WordPress address.
Starting up the project to create a transitional site
As I mentioned in my last post, the first project will be to create a transitional site that will let me keep my older content, but also let me gather feedback on the new site I develop the final version.
In the past I relied mainly following a mental plan for developing and modifying my site, but to help create content for the new site, and based on lessons learned from my time as a BA and project manager, I plan to take and discuss a more analytical approach. So, before I begin, I’m going to create an initial plan based on recommendations from Prince2
- Identify the primary stakeholders and their key requirements.
- Decide what approach I’m going to take with the project.
- Document lessons learned from my past experience creating a website, what worked/what didn’t, and also look at industry best practices
- Identify my target audience, if I’m the only audience for the site, there isn’t much point in continuing, so what are the needs of these other, unknown users?
- The initial scope.
- Come up with possible solutions for how the site can be built, and if necessary based on the options, identify the remaining stakeholders and their key requirements.
- Pick a solution
- Plan for the implementation
Primary Stakeholders and their key requirements.
There are only two, myself, and my hosting company.
My key requirements
- I want to get something launched as soon as possible so I can start getting user feedback on content, design and technology for the new site as it is developed.
- Must be able to move my existing content to the new site, and be able to use 301 redirects (permanent move) so I don't break links from external sites.
- Must be able to control the look and feel of the site
- Solution must not be sole source, I don't want to be locked in to a specific vendor.
- Must allow me to backup my content, and the comments from users
My hosting site's key requirements
These requirements are based on my current hosting service, and may change if the desired solution needs different functionality.
- Must use one of the technologies support by the hosting service, currently Coldfusion, PHP, or ASP.NET
- Must not compromise the servers.
What approach am I going to take
I’m going to follow an iterative process, for several reasons:
- As I mentioned in my key requirements, I want to get something launched as soon as possible, an iterative approach will allow me to set up my site to meet my minimum requirements, and then add / enhance in the future..
- I’ve personally had more success and experience with an iterative approach than any of the other software development lifecycles, especially for web projects that have a habit of going on indefinitely.
- I will not be doing this full time, so if I wait until all I have the perfect site, the site will never get launched.
Lessons learned
- Focus on the content first, technology and design second. In the past I’ve started thinking about the design and technology too soon, and then had difficulty fitting the content in to the site.
- Pick the best solution, not simply the most interesting, or the easiest. In the past I’ve created my on solution for both amusement and knowledge, with my shift from web developer to business analyst and project manager, my web design skills are not currently up to date, so should I spend the effort on updating my skills, or simply use an existing solution (e.g. wordpress, drupal etc.)
Identify the target audience (the users)
My target audience are other business analysts, project managers and developers that I may be able to help, or that can help me as I learn and practice a variety of skills and techniques. So, in general my target audience is educated, technically savvy, and is looking for, and/or has knowledge in one or more of these areas.
The scope
The scope for this project is to pick a solution that will let me start posting documents like this so I can gather comments on feedback, and to port any legacy information I want to keep to the new solution. Any other enhancements,visual or otherwise will be treated as new projects.
Possible Solutions
For all of these projects there are three main options: build (custom), use an existing solution (buy, open source etc.), or create a hybrid (some customization some existing). I found in most cases it's the third option. But for this project I'm going to try and go with an existing, open source solution for the initial launch, so whatever I pick has meet the key requirements out of the box.
So my first step is to look at what solutions my hosting service provides.
- Joomala
- Kentico CMS for ASP.NET
- Mura for Coldfusion
- WordPress
Now, I could do a detailed analysis on the pros and cons of each, or look a different options, such as Drupal etc. But, I will leave that to the next project, for now I just need something to meet my minimum requirements.
I had heard of WordPress before, and decided to try it first, so looking again at my key requirements:
- I want to get something launched as soon as possible so I can start getting user feedback on content, design and technology for the new site as it is developed. YES, WordPress provides comments.
- Must be able to move my existing content to the new site, and be able to use 301 redirects (permanent move) so I don't break links from external sites. YES, I can back date the posts, so that the created dates will remain the same for my original content.
- Must be able to control the look and feel of the site. YES through templates.
- Solution must not be sole source, I don't want to be locked in to a specific vendor. YES, currently open source, and has a very large community of support.
- Must allow me to backup my content, and the comments from users. YES, I can backup the MySQL database.
Picking the solution
As you can see, I went with WordPress for my transitional site, I'm sure the other options could have also worked, and may still end up being my final choice. But until I've finished my requirements analysis for my new site, this will have to do.
Creating a business case for my new website
Over the past few months I’ve been debating resurrecting my old website. I’ve had some form of web presence since the mid 90s when the best browser out was Netscape 1.1, but about 5 years ago I found I had less and less interest in maintaining a personal site, and between life and a career change, there has been little time for the web development services that I used to provide. Finally I froze my site in June 2008, and haven’t looked back since.
Today, I decided to apply what I’ve learned over the past few years as a business analyst and see if there is a business case for resurrecting my site.
For this entry, I’m going to follow the recommendations of Prince2 for the content of a business case.
Reasons:
Over the years I’ve built up a reputation at work and with friends as someone that is knowledgeable in web development, project management and business analysis, when searching my name under Google my current site appears on the first page, but is woefully out of date and does not give a good impression of my current skills or knowledge. So my main reason is pride, I either need to make the decision to update the site, or put it out of it’s misery.
Options:
- Terminate my current site. With my current career path, do I need a website at all? Or can I use one of the social media sites such as LinkedIn or Facebook?
- Pros: little effort, will no longer have to pay hosting costs or domain registration fees. Already have LinkedIn and Facebook accounts.
- Cons: I currently have a fairly high Google ranking for my site, showing up on the first page when you search for my name, if I close the domain, and later decide I do need a site, I will have to rebuild my ranking. If I rely on LinkedIn and Facebook I’m at their mercy of their longevity (remember myspace?), and their rules for content and structure
- Patch my current site. Simply update design and technology, but leave the content alone.
- Pros: little effort, allows me to update my web development skills.
- Cons: without new content, the site will continue to lose relevance, and will not represent or assist my current career path.
- Replace my current site. Update the look, feel, and content of my site to better represent my current career path.
- Pros: Allows me to update my web development skills, and will allow me to demonstrate, and hopefully improve my skills in project management and business analysis.
- Cons: Time, I will need to create and maintain the design, technology, and content for the site. Cost, I will need to continue paying hosting and domain registration fees, and there may be additional costs depending on how I choice to develop and maintain the site e.g. build, buy, customize, or hybrid.
Expected Benefits:
I believe there are three expected benefits that drive the creation of any type of publication: financial gain, recognition, and/or knowledge:
Financial gain: do I want to make money, either directly by selling products or services, and/or indirectly by gaining an audience and recognition, and then generating profits through advertising, speaking engagements, associated publications, and/or merchandising.
Increased recognition: of myself, or an idea I believe in, do I want to be noticed, become a leader, or share my thoughts, actions or ideals, either for the benefit of my ego, or from a belief that others could benefit from what I know?
Increased knowledge: do I want to harness the knowledge and experience of others for my personal improvement and enjoyment.
For my analysis I’m using the Prince2 definition of a benefit as “any measurable improvement that is perceived as an advantage”.
Currently, my main interest is knowledge, next, by creating a site instead of simply commenting on other sites, I hope to gain some recognition, and yes, eventually I hope for financial gain.
Expected Dis-Benefits:
This is a term prince2 came up with, it’s awkward, but at least it’s clear.
Time involvement: this site will take away from my personal time.
Costs:
There will be the fees for hosting and domain registration, otherwise, the major cost will be in terms of my personal time. The time for the content will be the most significant, and I have enough technical skill to either develop my own design and technology, or tap into the free/open source community without of having to purchase a solution.
Major Risks:
There is little risk to increasing my personal knowledge, but there are several major risks associated with both recognition and profit by creating a website.
- Success, if the site is successful, the time requirements (reviewing and responding to comments) and hosting costs (bandwidth) could become excessive. This risk will not be mitigated, the benefits of success out weigh the negatives.
- Audience hijacking, if I succeed in getting recognition, it is possible that I could also gain the notice of groups that want to hijack my audience for their own benefit, anything from spamming advertisements, or code injection, to trying to take over the entire site. This risk can be mitigated through best practices and the implementation of captcha or a review process for comments.
- Profit sharing, if I succeed in generating a profit from the site, and the success of the site is in part due to the site’s contributors, will the contributors request a portion of the profit? This risk can be mitigated by the creation of a terms of use for my site, clearly describing the rights of contributors.
Based on these options, my current decision is to split the work in to multiple projects, the first to put a transitional site, which will provide the minimum solution replace my current site, and provide a forum for the discussing new topics, and so I can also discuss options for the long term solution as they are developed, and then any additional projects to actually build the long term solution.
I don’t want to plan to far ahead for the simple fact that I’m not fully committed to the project yet, so in my next entry I will plan out the tasks that will give me a better idea of the scope of this project.
Determining what browsers to support
I started designing sites in the mid 90s, and know how to create layouts on many of the older browsers. The question is do I need to anymore?
I want my site to be functional on all browsers capable of supporting HTML 2.0 (the first official standard).
I define functional as capable of achieving an intended purpose, in the case of this site, the purpose is conveying information to a user.
But I want this site to more than functional, I want it to be enjoyable to use and visually appealing. Unfortunately all browsers are not equal, so I need to determine which browsers I should make an effort to provide with an enhanced version of my site, and which browsers will be served a minimal, but still fully functional version.
Luckily I have a friend who can give me a copy of the browser usage statistics for Environment Canada's
WeatherOffice website, perhaps one of the most widely used, general audience websites in Canada. (who doesn't check the weather?)
Statistics
During a 1 week period in June 2008, the site received 9,220,090 unique sessions and 560,016,029 hits.
2,520,877 (25%) of the sessions were generated by sources that did not provide any browser information. This is the strongest argument I've seen for not using server side browser detection.
The following tables shows the browser usage based on both sessions and hits. I've taken out any stats from bots and data scraping services (mget, ColdFusion etc.), or where the browser name wasn't provided.
| Browser | Sessions | Hits | % Sessions | % Hits |
|---|---|---|---|---|
| BlackBerry 4.x | 43837 | 188943 | 0.70% | 0.04% |
| Camino 1.x | 3054 | 124852 | 0.05% | 0.02% |
| Firefox 3.x | 105234 | 5659781 | 1.67% | 1.09% |
| Firefox 2.x | 1278739 | 67244027 | 20.32% | 13.00% |
| Firefox 1.5.x | 9343 | 552669 | 0.15% | 0.11% |
| Firefox 1.0.x | 6042 | 302606 | 0.10% | 0.06% |
| Internet Explorer 7.x | 2891272 | 263756941 | 45.94% | 51.00% |
| Internet Explorer 6.x | 1281147 | 151078184 | 20.36% | 29.21% |
| Internet Explorer 5.5.x | 6665 | 380050 | 0.11% | 0.07% |
| Internet Explorer 5.0.x | 11531 | 943658 | 0.18% | 0.18% |
| Internet Explorer 4.x | 1915 | 103569 | 0.03% | 0.02% |
| Konqueror 3.x | 1998 | 145516 | 0.03% | 0.03% |
| Lynx 2.x | 5023 | 93375 | 0.08% | 0.02% |
| Mozilla 1.8.x | 8486 | 405939 | 0.13% | 0.08% |
| Mozilla Compatible Agent 5.x | 152894 | 3305201 | 2.43% | 0.64% |
| Mozilla Compatible Agent 4.x | 25947 | 1982971 | 0.41% | 0.38% |
| Mozilla Compatible Agent 2.x | 60103 | 665915 | 0.96% | 0.13% |
| Netscape 8.x | 2258 | 342230 | 0.04% | 0.07% |
| Netscape 7.x | 19354 | 1136969 | 0.31% | 0.22% |
| Netscape 4.x | 3054 | 95394 | 0.05% | 0.02% |
| Opera 9.x | 32912 | 2648685 | 0.52% | 0.51% |
| Opera 7.5.x | 2399 | 55305 | 0.04% | 0.01% |
| Safari 525.x | 264615 | 12089821 | 4.20% | 2.34% |
| Safari 523.x | 32868 | 1443125 | 0.52% | 0.28% |
| Safari 419.x | 23912 | 1374575 | 0.38% | 0.27% |
| Safari 312.x | 18839 | 1059306 | 0.30% | 0.20% |
| Totals: | 6293441 | 517179607 | 100% | 100% |
Analysis
Do not interpret these percentages as absolutes. Caching, proxies, support for cookies, browser spoofing, etc. all influence these numbers. That said, given the size of the data set the weights are still pretty heavy in favour of certain browsers.
- ~99% of the visitors to the site are using browsers that have reliable XHTML and CSS level 2 support either directly or through known workarounds.
- ~2.5 million sessions did not provide any browser information, so I should not use any server side browser detection based on the user agent string.
- Based on the differences between sessions and hits, it would appear that IE makes many more server requests compared to the other browsers, a possible caching issue?
- IE 5.x and 6.x are still widely used and their known quirks will need to be supported.
- Looking at the IE 5.x stats in detail, I found that usage of MAC IE 5.x was down to 0.08% of all the sessions.
- Some people are still using Netscape 4, and IE 4, so I will still need to hide javascript and hide css from these browsers, and carefully format my XHTML to prevent crashes.
- Handheld browsing is making steady gains (blackberry stats)
Decisions
Based on the above analysis I feel comfortable that designing to standards (XHTML, CSS2)
will allow me to provide a visually pleasing experience to the majority of visitors to my site.
- I will no longer provide table layouts for older browsers.
- I will no longer create layouts for Mac IE, Netscape 4, or IE 4. Users of these browsers will recieve unstyled content.
- I will continue to create custom stylesheets for WIN IE 5.x/6.x+ (to deal with their unique quirks). All other
browsers will recieve a standard stylesheet or recieve no style sheet at all. - I will continue to test my site under Mac IE, Netscape 4 and IE 4 to ensure that they do not crash.
- I will create a handheld layout.
- I will not use server side browser detection.
The following table lists the different features I plan to use for my site layout (this list may grow as I design my site), and based on the previous table, the approximate percentage of users that are using a browser that supports the feature.
| Feature | % Users | Browsers |
|---|---|---|
| position:fixed | 75% | IE 7.x,Safari,Firefox,Opera 7.x+, Netscape 7.x+ |
| position:fixed (hacked) | 95% | IE 5.x+,Safari,Firefox,Opera 7.x+, Netscape 7.x+ |
| png 24bit alpha | 75% | IE 7+,Safari,Firefox,Opera 7.x+, Netscape 7.x+ |
| png 24bit alpha (hacked) | 95% | IE 5.5+,Safari,Firefox,Opera 7.x+, Netscape 7.x+ |
| png 8bit alpha | ? | ? |
A Roman Mummy?
Got invited by Gayle Gibson, to see one of the ROM's mummies before she was shipped off to the University of Western ontario for some reseach.
It's on odd case of a Roman woman that has been mumified in the egyptian style, and placed within a male egyptian's sarcoficus, wierd.
I was allowed to take some photo's of the old girl, but unfortunatly only had a small storage card with me, so was limited in the quality and quantity of the images
IBM thinkpad
Got the an IBM thinkpad P120 40Megs, 2Gigs, and a CD. Just enough power for word processing, email and the occasional game of starcraft. What I like though is I can now use netmeeting to control my desktop from outside, and atlast get outside. Next I go wireless....first of my back pay this week so spent a few hundred on a used portable (less than a tenth of the original cost). Not a bad little machine, I'm currently sitting on the frount porch with a network and power cable running into the house. The power isn't yet connected, I'm trying to get an estimate of the battery life under constant use, so far not bad about 2hrs by the looks of things.
Strange loops
As you may have guessed by my lack of entries, I've been pretty busy with work. In part because I've been getting sent to Ottawa for meetings, a symposium and other things, and the rest of my time has gone in to the big push to create a single weather information server (to replace the regional ones) for use by canadians. My job to work on a simple, bandwidth minimal, accessibility compliment design.... it ain't pretty, but it works....
Did get to see Becky again on my way through Ottawa to the symposium, spent the wonderfully warm weekend wandering the streets of Hull and Ottawa shopping, talking, and consuming ice cream and other food stuffs... Went to Icon to play pool, drink some wine, and see some of the Drag show, a few of the performers were really good.
Went book shopping, I wanted reading material for the trip to and from the symposium, picked up Gödel, Escher, Bach : an Eternal Golden Braid by Douglas R. Hofstadter. Described as "A metaphorical fugue on minds and machines in the spirit of Lewis Carroll". Involves strange loops, self referencing systems, infinity, proofs, paradoxes, and the nature of self awareness. I have reconfirmed there is a fine line between stretching my mind and breaking it... this books hovers on that line.
A weather kiosk
I came up thursday to give myself the full day friday to install the new kiosk system, (a time buffer is always a good thing).arrived in Ottawa feeling posh and pampered from my train ride on VIA 1, first class does indeed have it's perks, the space to stretch, the food, the wine, I'll be ruined for economy class if I continue to travel like this...... although it's still way cheaper than flying.
Woke, had breakfast (or broke my fast, however you want to say it), and headed through a short tunnel to the huge complex of government building the Hotel attaches to....
After a few question I found the lobby I needed to meet my contact in and made my way up to install the newest version of the kiosk display system, replacing the embarrassingly unstable version that had been previously installed. A short rough spot when the network card didn't initialize, but after a bit of work the new system was up and running...
Spent the rest of the day meeting with some of our ottawa associates, and admiring the view from the 27th floor.
Mac Plus
Been spending my time in front of the computer again. Finally finished up a major project for work combining radar, satellite and different forecast products on weather.ec.gc.ca
Now for this week's chore, learning basic ASP, advance Perl, LINGO, and XSL, I'm good with programming languages, but I think this is pushing things....
Did get out this weekend, managed to pick up a hidden secretary desk, the type with a fold down writing surface. I've always wanted one, and now in my bedroom when I wake from dreams I can reach to the desk beside my bed and write what I remember....
I've got my old Mac Plus mounted and running (I've got it's innards hanging on my wall), managed to scrounge up an old NEC 3x CD-ROM and 1 gig scsi drive, can't believe that a little machine from 1986 can still run so much.
Now what I want to try and do is track down some of the old games I liked to play on it. Sierra titles, SimCity perhaps.....