So London Publishing - Technical Case Study
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.0SQL 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:
1. 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.
2. 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
Find out more about our Web Application Bespoke Software Development
- Custom website application development; complex database design,
web application examples
- Web 2.0 application development for london based INMYVAULT™ with diary, photo and document upload and storage, online journal developed in .Net and SQL server 2005
- Application Development in
Birmingham, London and UK, specialising in .Net, ASP.Net, Database
SQL 2000, ASP, Linux, Microsoft
Access
- SO LONDON Publishing CMS and Website Design case study
- Bespoke Web
Development Software Programming - So London Publishing -
complex interactive SQL Server database driven website and bespoke
CMS in .Net
- Blue2you Custom Reporting, Customer Management and Content Management
System Software (CMS) Development in .Net Framework
|
