Implementation of Content Management System and Website Redesign

plumpbustlingInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 11 μήνες)

136 εμφανίσεις

Implementation of Content Management System and Website Redesign

for JonFinn.com

by

Anthony Garone


















A Thesis

Presented in Partial Fulfillment


of the Requirements for the Degree


Master of Science



















ARIZONA STATE UNIVERSIT
Y


December 2010

Implementation of Content Management System and Website Redesign

for JonFinn.com

by

Anthony Garone





has been approved


November 2010














Graduate Supervisory Committee:



Dr. Thomas Schildgen, Chair

Dot Lestar

Jane Martin
















ACCEPTED BY THE GRADUATE COLLEGE




iii

ABSTRACT





The Jon Finn Group, a four
-
piece instrumental rock band based in Boston,
MA, is in need of a redesign of their promotional website, http://JonFinn.com. They
are looking for a website that will
allow them to showcase and sell their music and
merchandise, promote upcoming performances, interact directly with their fans,
integrate with social networking websites, and administer paid membership
subscriptions via a content management system that requ
ires little technical expertise
and minimal upkeep. Doing so requires an overhaul of the underlying technologies
supporting their current website, which is based almost entirely on static HTML files
with limited capabilities for dynamic content updates. Th
ey are also requesting a
complete graphic interface design overhaul compatible with traditional desktop
computer web browsers, cell phone
-
based web browsers, and modern touch
-
based
web browsing interfaces. The site will be implemented in multiple phases th
at
include delivery of a private, development instance of the website in addition to the
customer
-
facing production instance.



iv

TABLE OF CONTENTS












Page

CHAPTER

1

STATEMENT OF PROBLEM

................................
................................
.......


1

Section 1

................................
................................
................................
............

1

Section 2

................................
................................
................................
............

1

2

NEED FOR STUDY

................................
................................
.........................


2

Sectio
n 1

................................
................................
................................
............

2

Section 2

................................
................................
................................
............

2

3

REVIEW OF LITERATURE

................................
................................
..........


3

Section 1

................................
................................
................................
............

3

Section 2

................................
................................
................................
............

3

4

METHODOLOGY

................................
................................
............................


4

Section 1

................................
................................
................................
............

4

Section 2

................................
................................
................................
............

4

5

RESULTS AND RECOMMEN
DATIONS

................................
.................


5

Section 1

................................
................................
................................
............

5

Section 2

................................
................................
................................
............

5

REFERENCES


................................
................................
................................
..........................


6

APPENDIX


A


[INSERT TITLE]


................................
................................
............................


7

B


[INSERT TI
TLE]


................................
................................
............................


9



1

CHAPTER

1

Statement Of Problem

Jon Finn has been a guitar professor at the Berklee College of Music in
Boston, MA since 1998 [XXXX]. He performs regularly with the Boston Pops, is a
widely
-
published author for Mel Bay Publications, and is endors
ed by many
renowned musical gear manufacturers. His band, the Jon Finn Group [JFG], consists
of three other members, all of whom are also teachers at Berklee. The JFG is self
-
publishing and releasing a new instrumental album entitled
Bull in a China Shop

[
BIACS] in 2010. Jon is planning on selling and marketing this new album primarily
through the JFG website, JonFinn.com. The site in its current incarnation is not
technologically suited to be a marketing vehicle for the new album and Jon has come
to me, th
e site's designer and webmaster since 1996, to request a complete overhaul.
Jon's current site displays primarily
-
static content, does not make use of a Content
Management System [CMS], offers limited visitor interaction, has not had a visual
change since
2006, and has an online store that is not incorporated into the look
-
and
-
feel of the rest of the site.

The site requires a complete redesign and recoding effort for various reasons.
JonFinn.com was last redesigned in 2006 and was developed using XHTML, CSS
2,
PHP4, and MySQL. It has some custom back
-
end content publishing tools that
allow for dynamic updates to the performance schedule and the news pages, but
neither of the tools is built with much error tolerance and has no authentication
mechanism to preve
nt unauthorized updating of the site. The site's current
appearance is somewhat dated with respect to 2010 typographical trends and narrow
page width. Furthermore, the Internet has evolved significantly with advances in


2

social media and networking tools, v
ideo and audio delivery, and e
-
commerce
capabilities that Jon would like to incorporate into his next
-
generation website. These
proliferations in technological capabilities have created new needs and requirements
for the 2010 site redesign.

Site code is tr
ansparent to the end
-
user, but to a web browser it can make all
the difference. Programming of websites' markup languages has evolved significantly
since 2006 in that HTML in its early days handled the display and presentation of
content whereas HTML is no
w meant to handle displaying content and CSS is
intended to handle the presentation of the content in a web browser window
[XXXX WORDY]. The JFG site's most recent revision utilized the Extensible
HyperText Markup Language [XHTML] 1.1 World Wide Web Consor
tium [W3C]
recommendation for its markup language, which "is a family of […] document types
and modules that reproduce, subset, and extend HTML4"
[http://www.w3.org/TR/xhtml1/#xhtml]. While a promising markup technology at
the time of its publication in 20
00, it proved to be overly ambitious and the
excitement amongst web developers that was once behind XHTML is now behind
the W3C's burgeoning HTML5 standard [
http://www.w3.org/TR/xhtml1/
,
http://div.csail.mit.edu/breadcrumbs/node/166]. Furthermore, many of
the
features for which XHTML was meant to be beneficial are beyond the scope of
simple file manipulation requiring a deep technical understanding of Extensible
Markup Language [XML] and HyperText Markup Language [HTML] 4. HTML5,
being an in
-
progress draft
of a recommendation, is not fully implemented by all
popular modern web browsers. The 2010 site redesign should not use XHTML and
should use HTML5 where it is known to be widely supported by modern web


3

browsers. These programming technologies handle the co
ntent and not the
presentation of content. Presentation of the content uses a different set of
technologies.

For the visual presentation of content within the 2006 site design, the W3C
Cascading Style Sheets Level 2 [CSS2] recommendation was utilized. CSS2

is still a
viable recommendation widely in use, but there are many new features built into CSS
level 3 [CSS3], a specification currently in development (like HTML5), that will be
forward
-
looking in the JonFinn.com's 2010 redesign. CSS3 simplifies many vis
ual
design elements without the need for cross
-
browser support code. For example,
creating rounded corners around a block of content requires sophisticated code and
graphics when using CSS2, but requires no special graphics and only one line of code
when u
sing CSS3. As CSS3 is a recommendation currently under development, not
all web browsers support the newest CSS3 directives. Even if the browsers do
provide CSS3 support, there is no guarantee that they will present content in the
same way as other competi
ng browsers as interpretations of the incomplete standard
recommendation vary by different browser programmers. The new JonFinn.com
redesign should continue to use CSS2, but should also include widely
-
supported
elements of CSS3 where appropriate.

Content a
nd presentation code having been accounted, the issue of content
addition and manipulation is a remaining component of the 2010 redesign [XXXX
FIX THIS INTRO]. Various new and updated content management systems have
been released since JonFinn.com was prev
iously redesigned. These CMSs have gone
great lengths in stability and usability. In particular, WordPress, which is now the
world's most widely used CMS, was at version 1.5 throughout 2006 and was not a


4

viable option as a CMS for any content types except
blog content
[http://wordpress.org/about XXXX UNCLEAR]. In 2006, I had deemed
WordPress and other CMSs with which I was familiar to be either too complicated,
feature
-
poor, or unstable to use for a non
-
blog, content
-
rich website like
JonFinn.com. The CMS l
andscape has changed severely since and CMSs are much
more feature
-
rich and stable. Now at version 3.0, WordPress has support for various
content types, automatic menu generation, single
-
click software installations and
updates, content versioning, drag
-
an
d
-
drop administration, content taxonomies,
more than 10,000 plugins, and flexible customization options
[http://wordpress.org/about/features]. The 2010 JonFinn.com redesign should
incorporate a modern CMS offering simple content administration for the JFG.

The ability to update content using a CMS is a critical feature for the JFG in
2010. BIACS is the first JFG release since 2998 and it is up for a potential Grammy
nomination. If the nomination becomes official, it will be important to quickly and
easily u
pdate JonFinn.com with the latest information and use social networking sites
to bring people to the site for such news. Jon has been working hard to use
promotional tools through Facebook, MySpace, Twitter, and YouTube, but is unable
to leverage his fans'

interest through his current website due to static, unchanging
pages with no administration capabilities. Furthermore, the 2006 website is primarily
a blend of PHP and XHTML that is difficult to decipher without expertise, and
time
-
consuming without prior

knowledge of XHTML. Jon would like to update the
content on his site except that there is no simple mechanism to do so. All updates to
the site must be done through a text editor and there is no documentation to aid Jon
in properly updating the site witho
ut causing formatting and/or presentation errors.


5

The CMS for the 2010 redesign should provide a "what you see is what you get"
[WYSIWYG] text editor that allows for content and layout manipulation as well as
social networking integration with minimal need

for technical implementation
expertise.

Apart from the capability to edit the written content of the website, there is a
clear need for the ability to upload, manage, and embed media content throughout
the site. As musicians, the JFG should have the capab
ility to post recordings of
musical performances in audio and video formats. All JFG members esteemed
professors at Berklee College of Music and should also have the capability to post
online lesson content, including PDFs and scanned images of sheet music
, directly to
the website. This requirement is complementary to the band's desire to allow paid
membership access to this premium online content, a requirement that is described
further below. The 2010 redesign should provide a media library capability wit
h
seamless integration into the content editor of the CMS.

Interaction with the JFG fan base is a critical aspect of the 2010 redesign.
JonFinn.com has featured interactive bulletin board systems in previous design
iterations, but the bulletin boards have
repeatedly been overcome by irrelevant or
inappropriate messages generated

known colloquially as "spam"

by computer
programs that scan the web for posting opportunities. Keeping the message boards
free of spam was occupying too much of Jon's limited free t
ime and was further
taking away interaction time with his fan base, ultimately resulting in the deactivation
of the bulletin boards. Unfortunately, the message boards were the only dynamic
area of the website in which community could be developed amongst t
he fan base
and where the JFG could interact directly with its fans. The new site should


6

incorporate user interaction and discussions via a simple interface while also
incorporating a mechanism that prevents the population of spam. User interaction
can be
provided via blog post and page comments.

Jon has historically used the JonFinn.com web server to assist in the
management of his various musical engagements. He is the guitarist for the Boston
Pops and performs in various off
-
Broadway show orchestras outs
ide of his regular
full
-
time responsibilities with Berklee. He often posts new content ideas in various
directories in the JonFinn.com file hierarchy. Examples of such content include
instrumental backing tracks with which he can rehearse or perform live w
ithout a full
band; performance schedule details; sheet music; and recordings of other musicians'
works on which he is paid to record. The new site should provide a mechanism for
Jon to create drafts of new content that he can store and manage in a CMS and

navigate via a managed interface.

Since the site's 2006 redesign, usage patterns of the Internet have also shifted
amongst the general populous in significant ways
[http://wired.com/magazine/2010/08/ff_webrip/all/1]. Further, usage of web
-
based services i
s exceeding general
-
purpose web browsing via a web browser on a
typical desktop or laptop computer. The number of portable devices with web
-
browsing capabilities has flourished in recent years with high
-
speed connectivity to
cell phones, portable music pla
yers, and other portal computing devices like the
Apple iPad. Many of these devices use touch
-
based interfaces and the increasing
number of these devices shows no signs of slowing. As such, the new site should
incorporate functional design elements that wi
ll improve usability for users of these
small
-
screened, portable devices.



7

Given the increasing dependence upon web
-
based services using the Internet
for data delivery, websites have begun interacting with one another via back
-
channel
interfaces. Most popul
ar CMSs feature technologies such as XML
-
based remote
procedure calls [XML
-
RPC], pings, pingbacks, trackbacks, and other technologies.
When an author of one website references content on another website and the two
websites are using content publishing sof
tware capable of communicating via XML
-
RPC, the two websites talk to each other so site administrators are made aware of the
reference. Another set of useful services provided through JavaScript
-
based remote
procedure calls is website analytics. Analytics
keep track of how and when a website
is being used by an end
-
user, the end
-
user's geographic location, and more. The 2010
redesign will utilize these technologies and all data will be made available to Jon.

Most importantly, Jon would like for the site to
provide residual
supplementary income through sales of JFG merchandise and services. As much as
Jon and the band love writing, recording, and performing music, they are also trying
to make and retain careers as full
-
time musicians. Jon has developed many u
nique
approaches to music performance and theory, some of which are detailed in his
books, and he would like to offer certain paid services to his visitors, especially
through a paid monthly subscription. Jon hopes that well
-
planned, well
-
executed,
and reg
ularly
-
updated paid content will retain visitors and that new subscribers will
beget more new subscribers. The proliferation of business opportunity on the
Internet and the potential for revenue generation through the website is more than
appealing. The 20
06 website contains an online store through which Jon sells various
merchandise and the 2010 redesign should not impede on this capability. The
implementation of a paid subscription service will clearly mandate a user


8

administration portal with membership
categorization along with a mechanism to
allow customers to easily pay a recurring monthly fee for subscriptions.

Lastly, the expectations for this new website are high and these ideas require
valuable time and energy into the process of implementation. Jo
n and I have decided
it best to implement groups of these updated features in three phases. The new
website will provide a development environment that is privately accessible to Jon,
his band, and myself so new features can be designed, tested, and implem
ented
before being published to the publicly
-
accessible production website. Doing so will
allow us to get the new production site online quickly and easily so he and his band
can promote the new album without worrying about the completion of the entire
pro
ject.



9

CHAPTER

2

Need For Study

The Berklee College of Music is the world's largest independent music school
with 4,100+ students from across the globe. Its list of successful graduates includes
Grammy
-
, Oscar
-
, and Emmy
-
award
-
winning musicians with multi
-
platinum record
sales. It is a haven for rock musicians looking to formalize their performance,
composition, and/or pedagogy capabilities as well as music business acumen. The
guitar department has received particular prestige due to its reputable and succ
essful
list of professors and alumnus. Established in 1945, it was the first school in the
United States to teach jazz music. In the 1960s, it recognized the guitar as a principal
instrument [http://berklee.edue/about/history.html]. In 1988, Jon Finn was h
ired as
a professor and has since taught rock guitar performance.

Jon's work at Berklee allows him to develop relationships with students and
professional musicians alike. These relationships bring students to the school and
Jon's highly
-
regarded teaching
style garners respect, admiration, and potential
customers to JonFinn.com. This marketing opportunity can bring in revenue for Jon
and his band. Conversely, many people who hear the JFG's music finds that each of
the band members teaches at Berklee, which
has caused many budding musicians to
desire enrollment at the school. It is through the website that this symbiotic scenario
can be further exploited and value is provided to all involved parties. Despite no
official affiliation with JonFinn.com, Berklee a
nd the members of the JFG find this
relationship to be mutually beneficial and any promotional efforts offered by those
involved is helpful.



10

It is increasingly obvious that business can be conducted and sustained over
the Internet. Online subscription serv
ices like Netflix, Xbox Live, and World of
Warcraft abound and are highly profitable and have sustainable revenues. The
popularity of online portals, like the iTunes Music store, prove that large numbers of
users are willing to pay for digital content. The

iTunes Music store is the largest
music distributor in the United States, including brick and mortar shops, selling more
than 10 billion songs since it opened in April 2003
(
http://apple.co
m/pr/library/2008/04/03itunes.html
,
http://applc.com/pr/library/2010/02/25itunes.html
). While it is unlikely that an
independent progressive instrumental band would accrue revenue near the

scale of
the aforementioned services, it is clear there is plenty of business opportunity for
artists willing and able to produce unique content with high value. It is important to
note, however, that independent progressive instrumental music bands have
a much
higher probability at accruing revenue thanks to services now available on the
Internet.

The ubiquity of the Internet has leveld the marketing playing field for
musicians worldwide. No longer are artists and their merchandise relegated to racks
of a
lphabetized compact discs or unorganized discount bins in brick and mortar
shops, but artists have an equal opportunity for success via search engines. A search
for "Jon Finn" is as effective for finding JonFinn.com as a search for "Britney
Spears" is for
BritneySpears.com. Likewise in a search on the iTunes Music Store.
Whereas in a brick and mortar retailer, there are physical advertisements varying in
shape and size that attract attention due to their physical proximity with a physical
customer. By lever
aging the power of search engines and keywords, coupled with


11

unique content offerings through a user
-
friendly experience on JonFinn.com, Jon
and I hope to create new revenue
-
generating opportunities for the JFG. Such
opportunities are not limited to sales
of physical items, but can be expanded to
services over the Internet, such as guitar lessons via videoconference, or increased
potential in booking live performances anywhere around the world.

The key success indicator for the 2010 redesign of JonFinn.com
will be
gleaned from an analysis of data collected from a usability survey instrument
distributed to the key JonFinn.com stakeholders and to the JFG mailing list. Other
indicators will be gleaned from website analytics data, hopefully yielding a sustained
increase in site traffic with complementary increases in metrics like: unique visitors;
pages per visit; average time spent on the site per visitor; and visitor loyalty. As we
progress through the implementation phases, we will look for increased sales fig
ures
and paid subscriptions. Jon will also be providing his own personal feedback in
addition to usability feedback with respect to the administration aspects of the site.

The need for the site redesign is simple: The JFG has the capability and
opportunity

to leverage the proven success of revenue
-
generating content and
merchandise. They want to target a wider audience through technology to generate
revenue. There is a small fixed monthly hosting cost, but the great equalizer of
search engine results and ma
rketing through simple, free, and effective techniques
can result in the opportunity for increased residual income. The idea to design a
website managed by a CMS and to make it available to unregistered and paying/non
-
paying registered users are not new, b
ut they appear to be novel in the context of
musicians using their websites to offer more content directly to their fans without a


12

middle
-
man. Websites offering exclusive content to registered members are known
as "membership websites."



13

CHAPTER

3

Review O
f Literature

Nearly all literature supporting this paper and the 2010 JonFinn.com redesign
effort will be gathered via the Internet. This is not to say that printed materials will
not serve the purposes of this paper, but rather that printed materials will

be used to
defend subject areas that are not so oft
-
changing as open source software. Primary
research areas include: WordPress software architecture; WordPress implementation
and features; WordPress plugins; membership websites; website usability; search

engine optimization; search engine result page utilization by end
-
users; and W3C's
HTML5 and CSS recommendations.

Membership websites are not new to the Internet. The popular technology
news website,
http://slashdot.org
, has had site membership since it launched in 1997
[
http://news.slashdot.org/article.pl?sid=07/10/02/1553218
]. Paid membership sites
offering premium content to paid subscribers, however, are still in their nascency as
major websites are stuck determinin
g revenue models attempting to satisfy users who
demand free content while pleasing shareholders. [XXXX REFERENCES]

Peter Gabriel, a multi
-
platinum selling musician since the 1960s known for
his adoption of up
-
and
-
coming technologies, offers a site members
hip option called
the "Full Moon Club" through which he publishes exclusive content when a full
moon can be seen in the sky

approximately once per month. Membership is free
and members are granted access to community message boards and members
-
only
video,
audio, and text content. Many of the posts to the Full Moon Club revolve
around Gabriel's latest projects and tour efforts. Advance ticket sales offers and
other exclusive items for purchase are available to members, often as a premium


14

price due to limited

availability. Best of all, this gives Gabriel a quick, easy, and direct
way to reach the people most likely to purchase these premium items and it gives the
most enthusiastic and/or wealthy fans to take part in their favorite musicians. There
also exists
a Full Moon Club iPhone application available in the iTunes Music Store
that allows Full Moon Club members to listen to Gabriel's latest music releases for
free [http://itunes.apple.com/us/app/full
-
moon
-
club/id350360851?mt=8
].

Another musician offering acc
ess to exclusive content via site membership is
Trent Reznor, founder of the multi
-
platinum selling band Nine Inch Nails. Reznor is
another adopter of new technology and has gained notoriety in the music industry
for shedding his relationship with a major
music label only to release all his music
independently via the Internet or through merchandise booths at live performances.
Features of his site's membership include the capability to join in community
discussions where fans can interact directly with ban
d members; download "stems"
of many songs so fans can remix and re
-
engineer them; gain access to 50,000+
images and videos; and download the latest Nine Inch Nails album for free
[http://nin.com].

Other lesser
-
known musicians are offering even more persona
l experiences
by making themselves available for in
-
home performances, although not necessarily
through site memberships. Mike Keneally, most notably recognized for his
involvement with Frank Zappa's band in the 1980s, has used his website since 1994
to co
mmunicate with his fans. He is now offering "MyKennealy" living room
concerts in which fans can pay to have him and some number of band members
perform to anyone willing to fron the costs [http://keneally.com]. There are no
restrictions on who can attend t
he shows or distribute audio and video recordings of


15

the performances. It is through the Internet that these living room performances are
scheduled for Keneally and many other independent musicians working to generate
revenue through direct interaction wit
h their fans. Keneally fans have recorded these
MyKeneally experiences and posted them to YouTube and other video and audio
sharing sites, likely leading users to Keneally's website giving them the opportunity to
generate a sale.

While social networking we
bsites like Facebook and MySpace have
flourished over the years and have allowed for personal interaction with bands
(independent artists and those assigned to major labels), there is not as much creative
freedom or expression through design available on t
hose websites. MySpace has
expanded its profile page customization offerings in recent years, but Facebook's
usage has overtake MySpace and advertisers have discovered that Facebook has
become a means for communication rather than consumption of media, lea
ding to
reduced sales expectations
[http://bizreport.com2007/07/advertisers_disappointed_with_facebooks_ctr.html].
By utilizing both Facebook and MySpace to market JFG music and lead feans to
JonFinn.com, I am optimistic that users will appreciate more tar
geted content and
design.

By offering a more personalized experience on JonFinn.com, Jon and I hope
to engage fans in such a way that they will find value in the unique content offered
through a site membership with hopes that this will turn into new reven
ue streams
for Jon and his band. However, the success of the revenue stream is highly
dependent upon the usability of administering, authoring, and viewing of content on
JonFinn.com. Since the site's previous redesign in 2006, free and paid services and


16

so
ftware available on the Internet have blossomed, making way for exciting new
potential for the JFG. The 2010 redesign of JonFinn.com will utilize WordPress, one
of the more successful open source stories seen in recent years, as a content and user
manageme
nt system by capitalizing on its success and the endless number of free
functionality offers through the platform.

WordPress is a free, open
-
source, PHP
-
based CMS with years of
development history and has generated its own vernacular. As with many open
sou
rce projects, it also has a community of users that contribute code that extends
the functionality of the product. All of the product documentation is written by these
contributors. There are also thousands of code contributors who have offered more
than 1
1,000 free, open
-
source functional extensions. These and other features have
made WordPress the world’s largest content
-
publishing CMS in the world.
WordPress features an administrative interface that is intuitive enough for non
-
technical authors who do no
t wish to think about technical details, but also technical
enough for those who wish to customize site presentation and functionality. Though
the product started as a set of code meant to “enhance the typography of everyday
writing,” it has turned into a
sophisticated, easy
-
to
-
use, fully
-
featured CMS with a
focus on content rather than simply typography [http://wordpress.org/about/].
JonFinn.com will utilize WordPress version 3, which was released in 2010.

The best source of documentation for WordPress is
called the WordPress
Codex and is available at http://codex.wordpress.org. It is written and maintained by
the development community and documentation is written to support every minor
and major upgrade to the WordPress software. Documentation is a key fea
ture for
WordPress as it is an open source software package with no commercial means for


17

support. As a site developer who has designed, developed, and implemented many
WP websites for customers, I have come to depend upon and trust the Codex. It is a
criti
cal resource and is generally well
-
written.

As WordPress is based on a popular dynamic scripting language known as
Hypertext Preprocessor [PHP], programming assistance via message boards and
documentation are widely available. I have worked extensively wit
h PHP since 2003,
so I am quite familiar with its capabilities and limitations. The official PHP website is
http://php.net, which hosts various releases of the scripting language and all official
documentation. PHP code is executed by a PHP engine running
on a web server
whenever an end
-
user executes a file with the .php extension. PHP scripts are
executed at run
-
time by the PHP engine, which means that every time an end
-
user
accesses a .php file, the server looks through the PHP code and renders it
accordi
ngly. WordPress uses a variety of techniques to display content via its root
-
level index.php file. PHP is quite useful in that it can be inserted anywhere within a
.php file, including within CSS files and HTML. Any dynamic code seen in this paper
will be
written in PHP.

There are four basic content types in a default installation of WordPress:
posts, pages, links, and comments. A post is the most elementary, foundational piece
of content that can be categorized and tagged. Posts are assigned to one or more

categories, or topics, for taxonomic purposes. Tags are keywords related to a post’s
content and are provided to a content author or editor for more granular specificity.
For example, there may be various posts assigned to the “News” category on
JonFinn.c
om, but there may be some posts in that category tagged specifically with a
keyword like “Berklee.” When an end user clicks on a link to the “News” category,


18

any posts within that category are displayed. When an end user clicks on the
“Berklee” tag, any po
sts tagged with “Berklee,” irrespective of categorical
assignment, are displayed. For JonFinn.com, categories anticipated early in the design
include: “News,” “Free Guitar Lessons,” “Paid Guitar Lessons,” “Rants,” and
“Inventions.” Tags, if used, will be t
hought of by content authors as posts are
written.

From an end
-
user’s perspective, a post is thought of as an entry on a blog
and gives the user an opportunity to leave a comment responding to the author or to
other users who have left their own comments.
Commenting can be turned off by a
site administrator in WordPress on a per
-
post basis or throughout the site, but a post
in WordPress is traditionally where end users interact via comments. WordPress also
features the capability for users to comment on pag
es, although this is not a typical
setup as comments are turned off by default for pages.

A page is a content type for “static” content that is meant to exist
independently without an expectation for follow
-
up posts or changes. It does not
require categori
zation or tagging and is generally not available for comments. While
pages are certainly editable, pages are thought to be “static” because page contents
are generally not changing on a regular basis, as would a set of blog posts displayed
on a separate pa
ge. By default, WordPress does not allow for tagging or
categorization of pages, although there are plugins that offer such functionality. For
JonFinn.com, we will create pages to provide background information on the JFG,
site membership options, book and

CD product types with individual product pages,
and a performance schedule. Pages can be nested under other pages in a logical way.


19

On JonFinn.com, there will be a Books page that will have child pages for each of
the books offered on the site store.

A li
nk is a hyperlink to any page on the Internet. Links are assembled into
collections called “linkrolls” [http://codex.wordpress.org/Administration_Panels].
By default, WordPress provides links to a selection of links to the
http://wordpress.org site: Docume
ntation, Plugins, Suggest Ideas, Support Forum,
Themes, WordPress Blog, and WordPress Planet. The 2010 JonFinn.com redesign
will make use of the linkroll in the third phase of the redesign implementation.
Linkrolls are critical to the search engine optimiz
ation of the site as links to other
sites can help establish credibility of the linking site in search engine ranking
databases [XXXX CITATION].

A comment is a content type typically added to the site via the comment
form at the bottom of single posts or p
ages. It allows any end user to share thoughts
with the content author and other commenters. Comments are a content type that
require careful administration as they can be easily misused. As WordPress is so
popular, its security vulnerabilities are widely
known and exploited. Quite often,
there are spammers that take advantage of these security vulnerabilities to post
innocuous comments to a site with hyperlinks to spam websites. As such, the
Akismet comment filtering plugin is installed by default with Wor
dPress, but not in
an active state.

Comments can also come in the format of a pingback, more commonly
known as a “ping.” A ping can be thought of as a “remote comment” that takes
place when one website publishes a blog entry referring to a blog entry on an
other
website [http://codex.wordpress.org/Introduction_to_Blogging#Pingbacks]. Pings


20

are common between various blog software packages and content management
systems and there is a pingback specification so software developers can implement
the unofficial
“standard” [http://www.hixie.ch/specs/pingback/pingback]. A
pingback merely mentions that Some Author wrote about Another Author’s post at
some URL. Trackbacks are similar to pings with the exception that trackbacks allow
content authors to see what other
authors are writing on their websites when
referencing the original author. Trackbacks offer context of the referring author’s
comments.

To write, edit, and manage content, an author uses the WordPress Admin
interface, known by application developers as “w
p
-
admin” and called the
“WordPress administration portal” throughout this paper. Within the WordPress
administration portal, a site administrator can administer many facets of the site:
Posts, Media, Links, Pages, Comments, Appearance, Plugins, Users, Tool
s, and
Settings. The Posts, Media, Links, Pages, and Comments sections are separated from
the other administrative sections because they are content
-
related whereas the non
-
content sections are for site administration. The Posts section allows for writing,

editing, categorizing, tagging, and deleting posts. The Media section allows for
navigating, organizing, adding to and deleting from the media library, which is a
collection of all graphics, audio, and video hosted locally within the blog made
available f
or embedding into posts and pages. The Links section allows for creating,
editing, categorizing, organizing, and deleting links that are available for embedding
into a linkroll. The Pages section allows for writing, editing, organizing, and deleting
pages.

The Comments section allows for editing, approving, disapproving, and


21

deleting comments left by end users on the site, including pings and trackbacks from
other websites. All content details and revisions are stored in a MySQL database.

In terms of site a
dministration, the Appearance, Plugins, Users, Tools, and
Settings sections offer a significant amount of control and administrative capability.
The Appearance section allows for the installation, enabling, disabling, editing, and
deletion of site themes,
widgets, and menus. A theme is a package of stylesheets and
PHP scripts that tell WordPress how and what to display when a user visits a site.
WordPress allows for one theme to be active at a time and comes with a default
theme titled “Twenty Ten.” Themes
are installed in /wp
-
content/themes and require
a stylesheet file and several PHP scripts to tell WordPress how to display category
pages, single posts, pages, and more. Themes can also include a PHP file containing
scripts relevant to the theme to allow f
or certain functionality that would not be
required by other themes. Themes are quite flexible and WordPress parses these files
to determine what features it can offer a content author, such as two
-
column layouts,
one
-
column layouts, customized post header

images, number of sidebars, and more.
The JFG 2010 theme will be based on the default WordPress Twenty Ten theme as
it comes pre
-
loaded with an impressive set of built
-
in functions and capabilities.

Widgets and menus are also customizable under the Appear
ance section of
the WordPress administration portal. Widgets are pieces of code that provide
specific functions that are smaller in scope than plugins. Widgets are used in
sidebars, which are peripheral sections of content on a page that contain links and
contain related to a website and sometimes content specific to a post being
displayed. Widgets are installed as plugins in the /wp
-
content/plugins folder. Default
widgets that come with a WordPress installation are Archives (“displays archive links


22

for eac
h month that has posts”), Calendar (“displays a calendar of the current
[month; dates] appear as links if there are posts for that day”), Categories (“displays a
list of post categories as well as links to those posts”), Links (“displays a list of links
se
parated by category”), Meta (“displays links to meta functions such as Site Admin,
[etc.]”), Pages (“displays a link to each page”), Recent Comments (“displays a list of
the blog’s most recent approved comments”), Recent Posts (“displays a list of the
blog
’s most recent posts”), RSS (“displays an RSS feed”), Search (“displays a search
box to enter text to search a blog”), Tag Cloud (“displays a list of a blog’s top 45
used tags in a cloud”), and Text (“used to enter HTML, javascript, or plain text”)
[http:/
/codex.wordpress.org/Widgets_SubPanel]. Widgets can be added, edited, and
removed from a theme’s sidebar using a dynamic drag
-
and
-
drop interface. Once a
widget arrangement is edited in the administrative portal, it is updated live on the
website.

Menus are

administered in WordPress via a sleek, AJAX
-
based drag
-
and
-
drop interface. A menu is an organized collection of links arranged for the purposes
of site navigation. Menus can contain links that are parents for child links. For
JonFinn.com, there will be a
parent link to the Books page that will have child links
to each book offered in the JonFinn.com online store. When a user’s cursor rolls
over the Books link in the menu in the JFG 2010 theme, a contextual menu will
display showing the children links to ea
ch of the books’ product pages. Three link
types can be added to a menu: pages, blog categories, and custom links. WordPress
also allows an administrator to save multiple menus so one menu can be live on the
website while can be saved for posterity or for
future site revisions. The JFG 2010
redesign will use a menu specific to each phased implementation of the theme.



23

Themes can be edited within the WP administration portal if file permissions
on the web server allow. Stylesheets and PHP files can be edited
directly within a
large text field and the files are updated the instant a user clicks “Save.” This is a
convenient feature that allows for quick fixes of theme functionality. Once code
changes are committed, the functionality is immediately effective on t
he website. It is
not advisable to make substantial code changes via this interface as changes can be
easily lost in the case of an accidental closing of a web browser window, or if the
web browser software crashes.

The next administrative subpanel is for
Plugins. “Plugins are tools to extend
the functionality of WordPress” http://codex.wordpress.org/Plugins/. Two plugins
are available in a default installation of WP: Akismet and Hello Dolly. Akismet
“checks comments against the Akismet web service to see i
f they look like spam or
not” http://codex.wordpress.org/Plugins/. Hello Dolly displays lyrics from the song
“Hello Dolly” in the administrative portal and offers no useful functionality and is
included for historical posterity as it is the first official
WP plugin ever written. It can
also serve as a reference to a plugin developer to get an idea of basic requirements
for a functional WP plugin. In this Plugins subpanel, an administrator can search for
plugins, install with a single click, and activate wit
h a single follow
-
up click. Plugins
can also be edited via this subpanel in the same manner as theme files in the
Appearance subpanel.

The Tools subpanel “presents the ability to use Google Gears to make
WordPress work in a ‘turbo’ mode”
http://codex.wordp
ress.org/Tools_Tools_SubPanel. The Gears plugin development
has been disbanded, so this subpanel is of no relevance to this project.



24

The Settings administrative subpanel allows for the setting of preferences for
the website as a whole. There are preference

sets called “General,” “Writing,”
“Reading,” “Discussion,” “Media,” “Privacy,” and “Permalinks.” As plugins are
installed, their administrative preferences are also maintained in the Settings
subpanel. Important settings available in this subpanel include
: the title and URL of
the website; administrative contact information; time zone; date formats; post
capabilities (such as publishing a post sent to WP via e
-
mail); site encoding (character
encoding types, such as UTF
-
8, which are critical for content int
ernationalization);
user registration capabilities; comment notification and approval settings; media
library settings; site visibility to search engines; and permalink configurations (how
links are generated within a website). Because I am implementing a
developer site
that should not be advertised publicly and a production site for customer access,
many of these settings are critical in locking down capabilities of end users should
they happen to discover and access the development site.

In terms of desig
n and usability for the end user, Jennifer Tidwell states in
her book Designing Interfaces that users of tools, software, or otherwise are looking
to find facts, learn, perform a transaction, control or monitor something, create
something, converse with ot
hers, and be entertained (3). Through this website, we
will meet those goals by making available information about Jon Finn and his band;
helping users to learn more about music theory and the guitar; purchase JFG
merchandise; monitor content updates throu
gh RSS feeds; allowing users to
comment on content posts; and to be entertained by good content. By offering
worthwhile free and paid content, we hope to motivate users to accomplish their
goals and to come back for further gratification. Ways of reinforci
ng these goals


25

through design are made possible through both the WordPress software and through
the custom theme I am creating as a facade to present content.

Tidwell lists multiple interface element requirements that provide a satisfying
user experience t
hat I will intentionally implement in the design of the new
JonFinn.com theme: safe exploration, instant gratification, “satisficing” (“a
combination of ‘satisfying’ and ‘sufficing’ [...] devised in 1957 by social scientist
Herbert Simon), deferred choices
, “habituation,” and prospective memory.

To address safe exploration (“Let me explore without getting lost or getting
into trouble”), the site navigation menu is always available at the top of the screen
with further navigational elements in the content si
debar, which is available
everywhere throughout the site excepting the splash page. There will be no content
elements inaccessible from these primary and/or secondary site navigation elements.

To address instant gratification (“I want to accomplish somethi
ng now, not
later”), all content will be quickly and easily accessible via site navigation, category
links, tag links, sidebar links, RSS feeds, and a site search field available in the
sidebar. WordPress indexes all page and post content so a user can qui
ckly search for
a term that yields relevant results. It is important to note that Jakob Nielsen and Hoa
Loranger state: “Splash screens must die. They give users the first impression that a
site cares more about its image than about solving their problems.
” While generally
true, the splash page on JonFinn.com serves multiple purposes: featuring the JFG’s
latest release and putting it in the forefront of the site; providing the user with a list
of the latest content updates (although Nielsen may disagree wit
h the placement of
said updates being “below the fold” on some monitors); providing the user with
links to information about the band, how to contact them, and information on


26

becoming a site member; and notifying the end user that there is premium content
available to all registered members of the site.

The site will be “satisficing” (“This is good enough. I don’t want to spend
more time learning to do it better”) in that the site navigation will clearly and simply
lead users to expected content. In the con
tent authoring and management processes,
Jon and I will limit ourselves to the fewest number of content categories possible to
offer the fewest number of potential content locations for users seeking something
specific.

The site will address deferred choic
es (“I don’t want to answer that now; just
let me finish!”) by allowing quick and easy access to all non
-
members
-
only content
and features. For example, anonymous users will be allowed to comment on any post
or purchase any item available on the site witho
ut authenticating. We will not allow
site membership to infringe upon a user’s capability to access content on
JonFinn.com. And if the user should choose to register for the site and authenticate,
there will be no re
-
authentication or validation of credent
ials. Members, when logged
in, will have instant access to all content assuming valid authentication upon login.

The site will address “habituation” (“That gesture works everywhere else;
why doesn’t it work here, too?”) by utilizing standard WordPress func
tionality
throughout. As WordPress is the world’s most popular personal content publishing
software, there is a high probability that a user will visit JonFinn.com having already
used another site using WordPress as its CMS. Therefore, it is also probable
to
assume that a user will have an understanding of categories, tagging, pages, and how
to utilize each of those features to peruse content.



27

The site will address the prospective memory requirement in a few different
ways. All website addresses will be uni
formly generated and human
-
readable. For
example, any posts in the “News” category will be found under
http://JonFinn.com/news and the post’s title will be stripped of unique characters
to be web browser friendly. Therefore a post titled “Site Updates” wil
l appear at
http://JonFinn.com/news/site
-
updates. The name of the post title as formatted for
a URL is called a “slug” (“site
-
updates” being the slug in the aforementioned URL).
The site’s design will make no attempts to prevent a user from utilizing tools

like
web browser bookmarks, URL shortening services, links from other sites, content
caching services, services that save content for offline viewing (e.g. Instapaper),
copying and pasting, or right
-
clicking. Content will not disappear, nor will free
cont
ent be made to members only after an unspecified amount of time. Unless a user
unsubscribes from a paid or unpaid membership and loses access to the members
-
only content, every intention will be made to allow users to access the same content
at the same UR
L as long as the site is online. Furthermore, WordPress stores slugs to
content in such a way that if a slug changes, the former slug address will redirect to
the new slug address.




28

CHAPTER

4

Methodology

The separation of code, content, and the visual pre
sentation of content is not
a new innovation in the world of web development, however it has matured and
become widely adopted in recent years. Markup languages are used as a framework
upon which content rests. The markup language used for the 2010 redesig
n of
JonFinn.com will be HTML5. Considering that it could be another few years before
JonFinn.com requires a redesign, it is critical that the current design is forward
-
thinking in that it makes use of the most modern technologies available.

The primary ad
vantage of designing the site using HTML5 include the
capability to display embedded media content, such as audio and video, in a website
without the use of proprietary technologies like Adobe’s Flash Player. This is done
by using HTML5’s built
-
in <audio>
and <video> markup tags that use the end
user’s web browser’s built
-
in media playing functionality to play audio and video. As
mentioned above, it is also forward
-
thinking to use HTML5 in that the site will likely
not be redesigned for another few years, s
o the use of cutting
-
edge technology will
prevent the site from appearing dated in the near future.

JonFinn.com is hosted on a shared virtual host by hostcentric.com.
HostCentric provides basic one
-
click installation services of several applications,
inclu
ding WordPress, a popular open
-
source content management system.
WordPress can serve any functionality between a pure blogging infrastructure and a
pure content management infrastructure. JonFinn.com will make use of various
blogs, pages, and taxonomical f
eatures of the CMS. I have had good experiences


29

implementing WordPress for various clients with similar CMS needs and have
observed the feature set development since the product's inception in XXXX.

The benefits of using WordPress are myriad. It is free, p
opular, and open
source, which means there is no out
-
of
-
pocket cost to Jon for software. Further,
there are more than 11,000 plugins freely available for use and manipulation from
thousands of open source developers actively supporting their software
(http
://wordpress.org/extend/plugins/). There are few other content management
systems so freely and widely available with so many active developers (Drupal being
the most notable exception), which means that most of the new JonFinn.com
requirements likely have

a freely
-
available plugin to support it.

The WordPress administration portal is particularly easy to use. Having
installed and designed various content management systems over the past ten years, I
have had the most positive experiences with clients using

WordPress. Its
WYSIWYG editor accurately portrays what the content will look like when
published. The nomenclature is straightforward and non
-
technical whereas other
CMSes such as Drupal use fairly abstract terms like “nodes” to describe any block of
cont
ent, whether it’s a page, blog post, or a block of sidebar content. In WordPress,
there are three default content types: posts, pages, and links. Editing and arranging
these content types is simple and are plainly laid out in the administration portal.

Wor
dPress has long featured a Media Library via its administration portal.
The Media Library is a straightforward file transfer mechanism that accepts uploads
from a user’s local machine and stores media files in WordPress’ file structure and
database. Files
are sorted in a file directory structure that indicates when the file was
uploaded and all metadata associated with the file is stored in the MySQL database.


30

The location of the file and its metadata are abstracted from the administration
portal’s end user

via the Media Library interface. Including

[XXXX UNFINISHED]

Most importantly, however, is the longevity of the product concomitant with
continued growth of the WordPress development and user communities that openly
discuss new features and interface twea
ks to improve usability and functionality of
the product. WordPress has been available since 2003 as an open source content
editing platform and has expanded its feature set significantly since
(http://wordpress.org/about/). The software roadmap is publicl
y viewable and well
-
managed (http://core.trac.wordpress.org/roadmap) further demonstrating no
slowing of growth or development. For Jon Finn, this is an important consideration
as he will not need to depend upon my time to fix issues or add features to his

content management system. Jon and his band can focus on content development
and administration. And when new versions of WordPress are available, WordPress
can upgrade itself through a one
-
click installation requiring no technical knowledge
or interventi
on (e.g. file permissions, editing of configuration files, etc.)
(
http://wordpress.org/about/features/
).

HostCentric.com also provides a basic shopping cart system by partnering
with ShopSite.com. ShopS
ite is available in multi
-
tiered packages: Starter, Manager,
and Pro [http://shopsite.com/scchecklist.html]. JonFinn.com utilizes the Starter
package as it is available at no additional hosting cost
[https://www.hostcentric.com/product/shopsitemanager.bml]
. The HostCentric
implementation of the ShopSite software is hosted at
http://shopsite.hostcentric.com. It offers a basic feature set that allows Jon to sell
merchandise on his site. ShopSite does not support recurring billing for any of its


31

products, howe
ver, so it is not a sufficient tool for the JonFinn.com paid
membership package
[http://support.shopsite.com/forums/viewtopic.php?f=10&t=7346].

Authorize.net is a payment gateway service that has been in business since
1996 [http://www.authorize.net/compan
y/aboutus/]. JonFinn.com uses
Authorize.net services to handle credit card transactions via the ShopSite online
store. It is a fully
-
integrated solution and ShopSite is a “premier Authorize.Net
-
Certified shopping cart” [http://shopsite.com/authorizenet.htm
l]. As such, it
handles all of the current merchandise sales through http://JonFinn.com/store
transactions. Authorize.net offers Automated Recurring Billing [ARB] as a service
that we will utilize to implement paid recurring subscriptions
[http://developer
.authorize.net/api/arb/]. ARB is an Application Programming
Interface [API] that allows a merchant to use subscription
-

or installment
-
based
purchases. Fortunately, there are a variety of freely
-
available WordPress plugins that
have implemented the ARB API

feature set.

[XXXX NEW SECTION?]

Web development offers many conveniences
over traditional software development methods, including highly rapid prototyping.
Because Jon and I want the new site to be available as quickly as possible and
because we had not
yet documented all of the site’s redesign requirements, I decided
that I would create two instances of WordPress on his web host: a development
instance at a non
-
published URL (http://dev.jonfinn.com) and a production
instance at http://jonfinn.com. Using
this methodology, I could develop a site in
parallel to his current production site without making any changes that would affect
users going to the 2006 site. Furthermore, Jon could learn how to use a real instance


32

of WordPress without any risk of affectin
g his production content. This
development instance would allow us to explore the functionalities of various
WordPress plugins and to test against some of the more challenging site
requirements, such as paid memberships and members
-
only content administrat
ion.

In discussions regarding the JonFinn.com redesign, Jon and I had determined
that we would like to move forward in a multi
-
phased implementation of the new
website. Phase 1 of the website redesign project implementation would include:
uninstalling Joom
la and an old version of WordPress Jon had experimentally
installed; installing the latest version of WordPress for a development instance;
creating an administrator account for Jon to use and familiarize himself with
WordPress administration; set up post
categories for news and upcoming
performances; conforming the current shopping cart software into the new website
and updating its appearance in whatever ways possible; migrating content from the
2006 site and updating it to conform to the new site; and, u
pon Jon’s approval,
installing a production customer
-
facing instance of WordPress at
http://JonFinn.com and migrating all the new content and features from the
development instance to the production instance. The initial proposed go
-
live date
for this feat
ure was tentatively set at September 13 and was delivered to customers
on September 23.

Phase 2 of the website redesign project implementation would include:
incorporating the JFG’s performance calendar, which is hosted by Google using their
Calendar produ
ct, directly into the new website; adding new content areas, such as
the inventions post category, and a free site membership capability granting
registered users access to free, premium content. Other phase requirements and


33

features would be determined fo
llowing the successful deployment of Phase 1 to the
production customer
-
facing URL. For example, as we were developing the
WordPress site for the phase 1 implementation, Jon wanted to think about sidebar
content throughout the website. The initial proposed

go
-
live date for this feature was
October 4 and was delivered to customers on September 29.

Phase 3 of the website redesign project implementation would include:
adding the capability to accept recurring subscription payments for paid site
membership allo
wing paid members access to premium content and other features,
and a survey instrument available to end users so as to assess the usability of the new
site redesign. The initial proposed go
-
live date for this implementation was October
28.

[XXXX NEW SECTI
ON: Phase 1: Planning and Implementation]

Before beginning any work, it felt most prudent to assess the conditions of
the site, software installations, and file directory structures. Jon had experimented
himself with various content management systems avai
lable through his one
-
click
installation interface provided by his Hostcentric.com web site administration portal.
In his various experiments, he had used all 5 of the allotted MySQL databases
available on his hosting plan. The site I had designed in 2006
used a MySQL
database back end for maintaining the dynamic content of the website, which
includes the message boards, performance calendar, and news items. The other four
databases were unnecessary and could be deleted.

Once the databases and site contents

had been assessed and backed up to my
personal computer, I deleted Jon’s installations of Joomla and WordPress. While I
had already decided to use WordPress, Jon had not updated his installation since


34

version 2.1 and I want the site to use WordPress 3.0.1
. The databases were then
eliminated using the Hostcentric site administration portal and a new installation of
WordPress was completed using Hostcentric’s one
-
click installation procedures. This
WordPress instance would become the development instance hos
ted at
http://dev.jonfinn.com. On May 20, 2010, I completed the installation of the
development instance at http://dev.jonfinn.com and set up administrator accounts
for myself and Jon.

Between then and late July 2010, I spent a lot of time thinking about a

new
site design and drafting design prototypes. Having worked with Jon since 1996, we
have put together various designs that have reflected different aspects of his
personality and his music. Jon is a light
-
hearted and extremely talented individual
with a

great sense of humor. This is evidenced in many of his songs through odd
time signatures, unique melodies, and technical prowess often juxtaposed by
moments of musical parody or humorous creativity. His music is fun for the casual
listener and for the mus
ical technician alike. A look over many of Jon’s song titles
provides enough illustration: “If Stevie Ray Vaughan Went to Berklee and Studied
Jazz,” “The Industrial Strength Hoedown Extravaganza,” “Spanish Ice,” and “Left,
Right, Upper and Lower” (a song w
ritten in the style of “Cheek to Cheek”). As such,
Jon and I wanted to provide a unique and fun graphic design that is also professional
and forward
-
thinking.

On July 14, I e
-
mailed Jon a scan of a radio schematic diagram I found in a
folder of paper textu
res scanned by a designer friend of mine, Ryan Lehmann
(APPENDIX XXX). I followed that e
-
mail with splash and content page designs
generated in Adobe Photoshop CS5 (APPENDIX XXX). These design prototypes


35

followed phone conversations revolving around the id
ea of creating a half
-
serious,
half
-
humorous website involving real musical products and ideas with fake ones. Jon
mentioned that, for years, he has been forming a collection of fake musical
inventions (“The Talent Booster,” “The Digital Predictor,” “The B
lame Shifter,”
“The Russian Dragon Quantegimizer,” etc.) that could be used as unique, humorous
content that could bring users back if they were published in a blog format
supported by RSS subscriptions. We both felt that these were fun and interesting
ide
as that would likely keep a user’s attention and be fun to design and create. Once
Jon saw the designs, he enthusiastically approved and I began moving forward with
translating the Photoshop prototypes into a WordPress theme.

By July 25, WordPress 3 was on
line and functional. The immediate benefit of
completing the installation was the creation of Jon’s administrator account, which he
promptly used and began creating content in the WordPress editor. Doing so
allowed him to familiarize himself with the new a
dministration interface and to
understand basic its functionality. Previously, Jon had not used a content
management system on JonFinn.com, so this was a significant step forward in his
capabilities for administering his band’s website. Between July 24 and

July 25, he had
written more than 40 posts and added more than 100 items to the site’s media
library. He expressed to me over the telephone his positive impressions regarding the
WordPress administration portal and how it has given him flexibility and con
trol
beyond his expectations. He also expressed his excitement with the intuitiveness of
the administration portal’s user interface. Quite unfortunately, a significant amount
of work remained before Jon’s content would be ready for implementation on the


36

ne
w JonFinn.com redesign. The content remained in the development instance
nonetheless until it could be incorporated with the instance’s feature set.

Amidst the installation and setup of WordPress 3 at http://dev.jonfinn.com,
I discovered that the WordPress

development team had developed a new default
theme called Twenty Ten. The template makes available many convenient features,
such as “What You See Is What You Really Get”
(http://2010dev.wordpress.com/2010/02/06/wysiwyrg/) content editing, CSS
-
driven drop
down/rollover menus
(http://2010dev.wordpress.com/2010/02/01/dropdowns/), multi
-
page posts
(http://2010dev.wordpress.com/2010/01/23/multi
-
page
-
post/), and various layout
capabilities (http://2010dev.wordpress.com/image
-
alignment
-
and
-
styles/). Rather
than s
pend dozens of hours coding a new theme from scratch and adding custom
features, I used the open source Twenty Ten theme as a basis for the JonFinn.com
2010 theme. Doing so required less than two hours of editing of the theme’s primary
stylesheet and I was

able to turn a mockup created in Photoshop into a functional
website. Jon was notified of said progress on July 31.

Some design features of the Photoshop mockups were more difficult to
realize than anticipated. In particular, the rounded brown border with
in the primary
content frame was inconsistent in its height and width when incorporated into the
Twenty Ten theme’s stylesheet. The outer glow around the content container block
was replicated using CSS3, but proved to affect performance dramatically as
dy
namically
-
generated gradients and shadows are processor
-
intensive. When tested
on Droid and iOS devices, such as the iPhone and iPad, the CSS3 drop shadow
caused content scrolling to stutter, so I decided to remove that feature until that


37

particular CSS3 f
eature is optimized and capable of being delivered without browser
-
specific CSS tags, such as
-
webkit
-
drop
-
shadow or
-
moz
-
drop
-
shadow. An even
more unthinking design decision includes the choice of a non
-
standard font in all of
the design mockups. Only bro
wsers with the “Hiragino Maru Gothic Pro” font
installed will see the site with its intended fonts without a Flash
-
based text
substitution such as sIFR, or using an alternative typography library such as TypeKit.
Most other aspects of the site design were
incorporated with relative ease.

Not having had prior experience with WordPress 3 before implementing this
site, I found that a new WordPress menu
-
generation feature worked out well for site
navigation. The Twenty Ten theme was built to fully support this
administration
capability and I chose to implement the rollover
-
style contextual menu at the top of
every screen to allow for quick navigation to all portions of the website.
Furthermore, the administration portal’s menu management system features an
intui
tive drag
-
and
-
drop interface that simplifies the management of this menu and
allows a site administrator to save menu sets to be implemented in various locations
within a site’s theme. Using absolute CSS positioning, I placed the navigation menu
at the top

of every page between the top of the browser’s viewport and the top of
the content container block. The Twenty Ten theme came with CSS to support the
WordPress menu generation feature, but I enhanced the stylesheet to conform the
colors and style to the J
FG 2010 theme. This included rounding the bottom corners
of the rollover menus using the CSS3 border
-
radius attribute and changing the
background and foreground colors of the menu. Due to the nesting of elements to
create these menus, correctly determining

and making these changes was non
-
trivial
and took an unexpected amount of time.



38

The development of the theme focused on simplicity and usability. I wanted
a splash page to welcome users to JonFinn.com featuring content of greatest interest
to JFG fans. Wh
en users visit JonFinn.com, they should be presented with an easily
-
navigable interface with the latest content updates and few distractions. It should be
a blend of art and content that will inform and entertain users. I decided on a
navigation menu with
a small number of high
-
level options for the primary purpose
of the site: to market and sell Jon’s books, albums, live performance, and
merchandise. The menu would contain dropdown items for users with a mouse or
would lead users to the primary content are
as when using a touch
-
based interface,
and the menu would always be accessible at the top of every screen so it’s always
available, but never interfering with the presentation of content. For pages accessible
from the splash page, content would have highes
t priority maximizing most of the
screen real estate. Links to other content in the sidebar would occupy less than 25%
of the viewport and be conveniently located, but not distracting. Because I feel that
Jon is such a compelling author, I did not want the

theme of the site to be
aesthetically distracting from the content, so a simple scan of a paper texture in the
background framed by a black border in an appealing way would suffice. Putting the
design in the background and the content in the forefront of
the users’ minds would
be my top priority. XXXX THIS PARAGRAPH COMES OUT OF NOWHERE.

With the theme of the website generally in place, I was in position to begin
migrating content from the 2006 JonFinn.com website to this new development
instance. The lack

of content editing capabilities of the 2006 JonFinn.com design
contributed to a lack of updated content. As I migrated content from the old site to
the new development instance, I found that content could not be copied and pasted


39

from the old site as the
content was outdated to the point of being incorrect and
there were even some spelling and grammar errors detected in the content migration
process. Having designed the previous iterations of JonFinn.com, I had written
much of the content on the old site,
but this point did lead to conversations with Jon
pointing out that he has been in search of a publicist to write all new copy for the
website and to create promotional materials for the new album, Bull in a China Shop.
I, nevertheless, took the liberty of

updating content where applicable, especially
taking note to include references to the new album wherever possible.

Despite Jon’s many contributions to the site’s Media Library, the number of
images available to use on the website was limited. Jon granted

me access to his
online photo library at PhotoBucket.com and I was able to find some photographs,
upload them to the Media Library, and incorporate them into the site’s page
-
based
content. The original album artwork for BIACS was made available to me digi
tally in
a high
-
resolution PDF, but Jon had no such digital copies for his first two albums,
Don’t Look So Serious [DLSS] and Wicked. I scanned the DLSS and Wick printed
artwork, exported the digital BIACS cover art, and uploaded all the files to the Media

Library. Jon’s four books, however, were left without any scans as I had no physical
copies of the books and Jon had not the time nor access to a scanner to scan the
covers himself. As such, I decided to move on to work on incorporating the
shopping cart
features into the new site design.

HostCentric provides a free shopping cart service through a service called
ShopSite. Various editions of ShopSite are available and Jon uses the service that is
included at no additional cost on his web hosting plan throu
gh HostCentric. The


40

ShopSite software automatically generates its own set of content and product pages
at the root level of the server in a folder called “shop”.

On September 23, Jon and I had a telephone conversation and decided that
the development site
was in a desirable state and I began working on building the
new WordPress
-
based production environment at http://jonfinn.com. My first steps
included creating an “Under Construction” index.html page at the
http://jonfinn.com/index.html to make end
-
users a
ware of the content changes and
then consolidating all of the old content in the root level of the web server’s
document root into a new folder called 2006.jonfinn.com so as to be available for a
new subdomain: http://2006.jonfinn.com. It is as this subdom
ain that the 2006
-
version of JonFinn.com is now available for archival and rollback purposes. Once
the data was consolidated, I created the subdomain and backed up all of the
http://2006.jonfinn.com and http://dev.jonfinn.com files in case the WordPress
in
stallation were to somehow overwrite them at the root directory of the web server.
I then installed WordPress 3.0.1 via the HostCentric 1
-
click installation feature at the
root level directory. The WordPress installation completed within minutes and I
bega
n installing my custom JFG
-
2010 WordPress theme. Using
http://dev.jonfinn.com as a template, I went through all of the WordPress
administration portal settings and made the same changes to the production site.
With the configuration of WordPress and the th
eme installation completed I could
start work on content migration.

There is no official utility to migrate content from one WordPress instance to
another and I wanted to avoid the risk of copying data directly from a developer
database into a production d
atabase. The developer instance existed for development


41

purposes and so Jon could develop a complete understanding of the WordPress
feature set and functionality. The most prudent way to migrate data was to recreate
all of the final development content in
the production system. This involved
importing all of the text content into new pages and posts as well as importing all
media content into the production media library. While somewhat painstaking, this
gave me the most assurance that I was recreating the
content exactly as needed in the
production website. It also gave me the opportunity to validate all of the content and
ensure that all content Jon and I created in the development instance involved
straightforward replication from one environment to the n
ext without any need for
custom tools. Six hours after beginning the production deployment, the site was
online in its entirety and available to customers. Jon was notified via e
-
mail at the
delivery of the new website upon completion.

[XXXX NEW SECTION: P
hase 2: Planning and Implementation]

The phase 2 requirements for the website are much simpler than the delivery
of phase 1 and include a much shorter iteration delivery: less than two weeks as
opposed to the many months for phase 1’s delivery. The phase 2

requirements
include an implementation of members
-
only content, which requires implementation
of basic site membership capabilities. They also include integration of Jon’s Google
Calendar into a performance calendar page and the addition of other blog
-
lik
e site
content.

Before the production implementation of the WordPress site to
http://jonfinn.com in phase 1, I searched through the WordPress plugins repository
at http://wordpress.org/extend/plugins/ and found a variety of content/user
administration plug
ins that allowed members
-
only access to site content. Many of


42

the plugins seemed limited in their feature sets and often involved restricted access
of all site content rather than an administrator
-
specified subset of site content.
Eventually, I found the p
lugin entitled “Private! WordPress Access Control
Manager” (v1.6.5) available at http://wordpress.org/extend/plugins/private
-
wordpress
-
access
-
control
-
manager/ concomitant to the plugin developer’s site at
http://plugins.x
-
blogs.org/plugins/private
-
wordpres
s
-
access
-
control
-
manager/.
Unfortunately, upon installation and activation of the plugin, WordPress issued a
plugin incompatibility due to running PHP4 on the web server as opposed to PHP5.
I immediately contacted Jon’s HostCentric support liaison, a man n
amed Randy
Price, and he was able to update the web server’s configuration to use PHP5. He also
helpfully pointed me to a tool within the HostCentric server administration web
portal that gave me the capability to edit the php.ini configuration file for an
y further
PHP runtime environment customization.

The Private! plugin has a very rich feature set with so many customization
capabilities that attempts to quickly discern plugin functionality is not possible. A
setup assistant option is available that will
configure the plugin to conform to a few
scenarios with clear descriptions: “I want to run [a] private blog for my family, my
friends or my business;” “I want to run a public blog with paid content in certain
categories;” and “I want to run a members only
page.” In our initial discussions
around requirements for the members
-
only site content, Jon and I decided it would
be best to offer free content to registered members to entice them to sign up for a
paid subscription at a low monthly cost. The Private! pl
ugin offered only partial
functionality to this requirement in that an administrator could not delegate access of
certain categories to any specific group. Testing the plugin revealed that paid content


43

became hidden from unregistered end users as though th
e content did not exist. I
found this problematic because I want to be able to feature new members
-
only
content headlines to unregistered users so they are compelled to register on the site.
Upon realizing the limitation of the Private! plugin, removing al
l settings was
accomplished with a simple drop
-
down menu built into the plugin. The plugin was
then deactivated and uninstalled.

Some additional research into content permission management brought me
to the “Members” plugin written by Justin Tadlock at htt
p://justintadlock.com. The
Members plugin allows for the creation of new user groups, known as roles in
WordPress, and permitting access of specific posts to specific roles. For example, a
new post in the “Paid Lessons” category can have read access restri
cted to the
“Administrator” and “Paid Subscriber” roles. The latest version as of this writing is
v0.1.1 and unfortunately does not include access permissions on an entire category,
so all new posts in members
-
only categories will require permission config
urations.
When unregistered users access members
-
only content, such as the “Free Lessons”
category available at http://dev.jonfinn.com/free
-
lessons, post titles are displayed
with the post content replaced by “Sorry, but you do not have permission to view
this content.” This means that I will be able to display members
-
only content titles in
the sidebar so unregistered members are aware of the latest content updates, but they
will have no access to the content until they register on the site. Despite the ne
ed to
set permissions on every post as opposed to being able to set permissions on an
entire category, this plugin meets all the requirements for phase 2. To validate the
plugin functionality, I created a user named “test” and assigned it the role of
“Subs
criber,” which is the default role for all new, unpaid site members. I created a


44

second user named “test_paid” and assigned it the role of “Paid Subscriber,” which
will be the role for paying subscribers when that is implemented in phase 3. I created
a new

category called “Paid Lessons” and created a test post within that category.
That test post had read permissions granted to the “Administrator” and “Paid
Subscriber” groups. As expected, the “test” user could not read the content, but my
“test_paid” user
could, as could my own administrative account on the system.

On September 27, Jon and I spoke on the telephone to review the phase 2
requirements and to have a mutual understanding of the direction of the site based
on our impressions from phase 1. The key

feature for phase 2 is the site membership
capability and the accompanying members
-
only content. The question at the
forefront became: How do we promote site membership without affecting the new
look
-
and
-
feel of the phase 1 implementation? Jon suggested p
romoting site
membership and login on the splash page, but I wanted to keep the splash page clean
and focused on promoting the new album. We mutually decided that having login
and password fields at the very top of the screen to the right of the navigation

menu
would be the best blend of our ideas. This, however, raised a new set of problems.

When a user is logged in, the user should not see the login form at the top of
the screen. Instead, the site should let the user know that she/he is logged in. This
wo
uld require some custom PHP utilizing some of the WordPress global user
parameters and session variables. By browsing the WordPress Codex, I was able to
query the current user variables to determine whether a user is logged in and who the
user is. I create
d a block of HTML block with an ID of “login” as follows:

[XXXX CODE!!!]

<div id="login">



45

<?php global $current_user; get_currentuserinfo(); if ( is_user_logged_in() )
{ ?>


<p>Logged in as <strong><?php echo $current_user
-
>user_login;