SO LONDON Publishing Content Management System Software (CMS) and Website Design
- Technical Case Study
SynergiDesign has sound technical programming experience of developing large,
complex and highly interactive web sites and web applications meeting clients' expectations
and delivering on budget and within time constraints. We take the time to get to
know and understand our clients' businesses as part of our approach to a project
because we firmly believe that this is the key to successful partnership working
and ultimate client satisfaction.
Software Synopsis
So London is a new, exclusive magazine aimed at the London market with a target
audience of successful career orientated individuals enjoying the arts, restaurants
and news, both locally and globally.
Timed to coincide with the launch of the printed magazine, So London publishers
required a website development to replicate the printed version and additionally
to give value added services via the website which would include property portfolio
management, property buying services, local news and targetted advertising both
locally and globally.
The Project Outcome
The result was a complex interactive SQL Server database driven website and extensive
bespoke Content Management System (CMS) developed to the highest standards of .Net
2 Framework and CSS 2 within deadline and budget.
The Technical Requirement and Tight Timescale
The website version of the printed magazine with its supplemental services needed
to be completed within a very short timescale and the fixed dead-line could not
be extended. Planned future expansion of the site's services meant that such changes
would need to be added seamlessly through an effective content management system
in order to avoid unnecessary changes to the structure of the website and SQL Server
database.
The Approach / Project Specification Development
Analysis was conducted from the project brief, discussions and other supporting
materials provided by SoLondon and a techical specification produced. Specific time
was allotted to devise a full Project Specification Document and Plan with accurate
timings and costings.
The Content Management System (CMS) software section of the project was to be designed
to enable SoLondon to take full control of managing the website without any need
for specialist skills and in fact anyone could within a few minutes of looking at
the system not only start to use it, but use it efficiently.
The initial Project Specification work and further consultation with SoLondon revealed
that a phased approach was required to ensure the core of the project was completed
for the publication dead-line.
Under pressure of the very tight schedule, everyone was aware that the most important
thing to be developed was the CMS, as this was the core of SoLondon - getting the
articles to view on the web site through the public web front end.
We were then immediately after launch to continue with Phase 2 of the web software
development.
Database design and database implementation
As with most projects that are data driven, the most technically important element
was the database. By designing the correct database structure it would ensure that
data was not only accessed and stored efficiently, but also that it was scalable.
The SQL Server database was designed to conform to good Relational Database Management
Techniques. Data stored within the database was normalised to the 3rd form.
Scalable Database design
In using the relationship techniques enabled the database to be designed in such
a manner that at a later date the database could be extended without having to change
the existing database structure (scalable).
Database Performance
Normalising the data held within the database would ensure that duplicate information
was not stored within the database thus ensuring the database performance will be
enhanced.
Ease of Use (User Centric Design - UCD) for CMS and Public Website
Another important consideration with this project was ensuring that the CMS was
easy to use as well as functionally rich. Great importance was attached to each
section of the CMS (content management system) to ensure that when entering information
or navigating around the system, tasks could be completed quickly and efficiently.
The layout of the content management Software for So London Publishing was designed
so that the most important features were available no matter where you were within
the system. It included:
- showing which issue was currently the working issue (the issue that was being worked
on, and was due to go live) and
- showing articles that were in a draft status. It was essential to ensure when the
working issue was made live, the articles with the draft status would not be made
live. (Article status is discussed under the CMS article section);
- being able to preview the working issue at any time, and finally
- a list of the front page articles that would be shown when the issue went live.
It was important to show this so that all the users entering the articles were aware
of the front page (Home Page) articles that were going to be displayed.
The same principles were applied to the design of the public website.
The Main So London Website / Web Front-End Design Structure / Streamlined Update
Management
The main website of So London consisted of only two web pages, although going through
the site as a visitor the site would appear to be web page rich.
The two web pages were the Home page, and the Article page.
The Home page was primary; the first web page the user would visit when first entering
the website, as with any website. However, the home page was then reused for each
section of the website.
An example would be selecting the section 'features' from the menu when the features
home page, would load with all the current articles that were features. Whereas
this would look like a different page, it was in fact the exact same page. The way
in which the sections were dealt with was by using zones that would describe which
section would need to be displayed.
The advantage to this approach was that if a design change was required only
two pages at most would have to be modified, thus making amendments manageable.
The Article page was used for displaying all the full articles. Once again visitors
might think that each article was a different page, but this was not the case. Each
article could look very different because a HTML editor was custom developed which
allowed for lists, Images, Tables, Hyper Links etc, to be added to the article text.
In doing this the user adding the article had control as to how the article was
displayed.
Article Images / Auto-Resizing
Each magazine web article is displayed with an image. However, the main image that
is displayed on the site can be one of three different sizes:
- Main Image: Max Width of 220 x Maximum length of 300
- Thumbnail 1: 104 x 104
- Thumbnail 2: 47 X 47
Each magazine web article has only one image uploaded and so to create the thumbnail
images, each on is resized and cropped "on the fly". This was achieved by using
the GDI+ native to the Microsoft .NET framework. Using the GDI+ API, it was possible to be able to resize,
render (so that the quality of the image is not lost) and then crop the top and
bottom to fit square, and not distort the image.
By using this method, it is easier to manage image changes, as three different images
do not need to be created only the one.
The Content Management System (CMS)
The CMS was the core of the So London project, without this updating the website
would be a difficult task and require specialist skill to do so. The key areas of
the CMS were:
CMS User Access / Security
Many different types of users were expected to use the content management system,
with varying levels of computer skills. Therefore a user hierarchy was required
to restrict access to certain sections of the CMS.
Restricting access to only certain levels of users was achieved by creating a security
class that stores information regarding the user and their level of access. Methods
within the class checked against the page security level, if the user did not have
the right level of access, access was denied to the user.
Creating the security class ensured that if security procedures needed to be changed,
the modification only had to be completed in one part of the system as opposed to
having to search through pages and pages of code to make the change. Another benefit
was that the security element of the system was kept away from the functionality
of the system, and web developers did not need to be concerned with this area of
the system.
Five different types of user were identified for use in the CMS.
Administrator (Editor)
Has responsibility for the CMS as a whole. They have access to all the functionality
of the system. The Editor is the only user who can actually make the working copy
live and setup new users.
Office Manager
The Office manager had access to content management system software; however, access
was restricted to making the working copy live and the setting up of new users.
Trying to access at this level of functionality would result in an 'access denied'
message being displayed.
Commission Editor
The Commissioning Editor was able to undertake all of the magazine web article management.
This was:
- Creating an Article
- Modifying an Article
- Deleting a Working Issue Article (deleting a Live Article was restricted to Editor
and Office Manager)
- Article Ranking Management
- Article assigning - Assigning an article to more than one issue.
Article Add
This particular user could only access the creating article functionality of the
CMS. This particular user was envisaged to be So London Publishing staff that would
be able to add articles in volume.
Web Preview Only
As suggested the only functionality available to this user was the ability to preview
the current working issue. It was decided that users who were proof reading should
not have the ability to modify articles, as too many different types of people would
be able to perform this function.
Other Website Services Provided Include:
- Web based classified advertisements with functionality in the content management
system to enable scheduling of ads by the web administrator
- Clear and logical website navigation system
- Multi-criteria property search system
- Property tracking
Magazine Issue Development and Control
Working issue / Set Global Working Issue
To enable the system to be user friendly the concept of the working issue was developed.
This enabled the administrator to set the working issue in the system. The working
issue would be the issue that is currently being added to the system ready for the
publication of the next issue of the magazine.
When users were using the software system, the Working Issue was selected by default
when entering articles. Although only a minor thing, this greatly enhanced the use
of the system and the there was no need to select the issue required as it was already
set and used through out the system.
Live Issue / Publish Issue
The Live issue was the issue that had been published to the live website. Access
was restricted to those who had access as magazine web articles modified here would
be reflected on the live website, instantly. Further discussion on user access can
be found under CMS User Access section.
Preview
A preview section was added to the site which replicated the live website layout.
This enabled the users of the CMS software system to view the Working Issue before
making the Issue Live. The obvious benefit was that the article layout could be
altered and any mistakes could be corrected before going live.
Articles and Database Normalisation
The articles section was the main section of the CMS. The user with the correct
permissions could create, modify and delete articles as required.
An article could belong to more than one category (section) of the website. An index
within the database was designed so that the article only existed once in the database,
and then the unique key that identified the article was assigned to the different
categories selected by the user when saved to the database. Using this method (normalisation)
space allocated in the database was saved, but also if the article was changed,
the change only needed to occur once and that would filter through to the other
categories.
In order to enter the articles an HTML editor was developed giving the users complete
freedom on how the article text was formatted, insert images, tables, lists, hyper
links etc. It also enabled text to be pasted into the text box cutting down on the
amount of data entry that was required.
Existing magazine web articles were also shown within the articles data entry screens.
This enabled articles to be related not only in one issue but in any issue. Available
related articles were selected from the list; once the article was saved, the related
articles were also saved to the database. As part of the initial database design
an index table [tblRelatedArticle] was designed to manage this relationship.
The tblRelatedArticle consisted of only two fields,
- fkArticle
- fkRelatedArticle
The fkArticle field was a reference to the unique key of the article added. fkRelatedArticle
was the unique key of the related article. For each related article an entry would
be made.
Example
New Article
Key: 23 Article Title: The Best of Art
Related Articles Selected
Key: 5 Article Title: The Tate Modern
Key: 17 Article Title: Boom and Bust of the Art world
The tblRelatedArticle would look like:
| fkArticle
|
fkRelatedArticle
|
| 23
|
5
|
| 23
|
17
|
| 5
|
23
|
| 5
|
17
|
You will notice that there are actually four entries, and this is due to the fact
that the new article also has to be related to the related article.
Taking this approach saves space, ensures efficiency and makes the database much
more compact this is once again an example of normalised form.
The HTML editor was implemented using IFRAMES and JavaScript, so that they HTML
editor behaviour was client side, and did not need to make a server request until
saving the article. The editor was also designed so that it could be resized on
the page. This was most effective when entering captions for images, as only small
text boxes were required.
A page ranking system was also developed so that when each article was created,
it was assigned a ranking for each category the article was assigned too. The page
ranking determined what order the articles were displayed on the main site. This
gave complete control of the article display to So London Publishing users. The
page ranking was hidden from the users when initially entering the article.
A Ranking management section was implemented into the CMS so that, at any point
in the cycle of producing the new magazine web issue, the display of the articles
were controlled, and not just shown in the order they were entered into the system.
Technologies Involved in the Software Development Project - So London Publishing
Content Management System Development and website Design
IIS 7 running .NET Framework version 2.0
SQL Server 2005
Within the project a development decision was made not to use stored procedures.
It was felt that the site was already very database intensive, as all the articles
were database driven, but also every action that the CMS performed also had an impact
on the database. For this reason the decision was made not to add additional stress
to the server and diminish the visitors experience when visiting the site.
Database Design
Standard Relational Database techniques were used, to aid in the design of the database.
The relationships of the database were all normalised to the 3rd form, as this is
sufficient for a web based database. First normal form was not used on the web based
project as this can often lead to issues accessing the data through the relationships.
However, as internet connection speeds increase this will cease to be the case.
ASP.NET using:
Visual Basic .NET
Visual Basic .NET
was the primary programming language used to develop the system.
C#
In order to better integrate into the .NET
framework, C# was used to interface with GDI+ in order to enable image resizing
"on the fly"
Code Behind
The code behind methodology was used extensively throughout the project. Using this
methodology helped separate the functionality of the site from the design. This
enhanced the project as it enabled both web designers and web developers to work
on the same parts of the system without causing change conflicts.
Classes
Where appropriate classes were developed to keep the system more manageable, and
hide functionality that web developers do not need to be concerned with. Each class
was designed to contain the "business logic" of the system. Once again this aided
in keeping the project manageable and less cluttered, but it also had the added
advantage of being able to make modifications within the class and the changes would
immediately filter through the system.
Event Driven
Unlike past Web technologies ASP.NET
is completely event driven. Full advantage was taken of this fact, and many procedures
and functions were created within the system and reused throughout.
Once again this made the project more manageable, but also helped to keep the development
of the project structured, something that was seriously lacking in previous web
technologies.
Master Pages
Master Pages were used within the CMS to enable a consistent interface for the user.
The advantage to this is that with regard to the framework of the system if a change
is required, it is more manageable as the modification only need to take place in
once and the change then filters through the rest of the system.
JavaScript
JavaScript was used in creating the HTML editor and User validation
- Due to the nature of the project, data input was the main stay of the project, and
thus extensive validation was undertaken client side.
- This approach had two advantages:
-
- Server load The load on the server was reduced, due to the fact validation was done
client side, and the web server, would only be contacted to serve pages.
- Enabled the development of validation much constant throughout the CMS.
GDI+ (Graphic Device Interface Plus)
As part of the .NET framework all
of windows native graphics system is exposed via API's to allow access to graphical
functions. This part of the .NET framework
was used exclusively for resizing image articles on the fly, as described in the
main body above.
Find out more about our Web Application Bespoke Software Development