Inspecting the code

There are many components that make up the CMS. To begin with there is the fact that I am required to use two sites to edit the cms. One is the actual editable site that the content management system would edit and another is the cms itself. Both would require editing to be able to complete the task at hand. To begin with I needed to setups the files in the views and then add them to the routes file;

The lines at the top such as ” resources :articles, only: [:index, :show]” are indicating that in the articles views folder there should be an index.html.erb and a show.html.erb – There is also another way to show this being used in the file structure here;

This method says “get ‘analysis’, to: ‘redesign#analysis” which says that the term analysis should get the file ‘analysis’ in the folder ‘redesign’.

It’s at this point I can introduce includes. These files that look normal apart from they use an underline to define them as an include like so (_menu.html.erb). This means that anything in this file can be included someshere else. For example, here is the application.html.erb that loads the layout of the pages;

On this page you will notice the line that says;

“<%= render’layouts/optimadmin/shared/menu’ %>”

This loads the content from the file _menu.html.erb which can be seen here;

This is a much more organised way to code a project as everything has it’s own section within a folder.

Another great point of completing this subject is the .sass features I am able to use. The use of variables within sass means that instead of having to put the hex colour code into the stylesheet everytime, I have a variables file register the hex code as a variable then just use the variable in the different files. For example below is the variables file I used.

Another important note was the layout structure. I was using Foundation version 4 which meant that in the html code in the class names of a div, I also had to include the screen size-column width that I wanted. This meant it looked something like this;

Advertisement

Coding the website

The build of the website was very difficult, as I was using a language that I knew very little about. I had started previously about 3 months before with absolutely no knowledge in the area and had started to learn ‘on the job’ at a web design agency. It was at this point that I decided it would be an excellent idea to try and code an entire content management system using this language.

The first stage was to set up my mac to allow for ruby to run. This required complex terminal commands to setup the rails server, then connect the files to a github account. This meant I could push my changes to a git server and never loose any of my files. It also meant I had a version control program taking care of the specific handling of correct code.

To get the rails server setup, and actually built i needed to follow these commands. They meant i’d be able to setup the webiste alone without too much trouble. This meant the files were all stored online. It also meant that I could use Github to push the final version to the server.

When editing the files I used Atom. The file structure is reasonably simple to understand, to begin with there is the App folder. This contains most of the important files. Assets contain all the files like stysheets, fonts, javascrips files, and actual files such as images shown on the site. Controllers define the pages that will be used in the site, pulling the data from the models, these pages will be pushed to the views.

Another very important part of the file structure is the config section as it contains the routes file;

 

The routes file contains all the different views folders, and what they contain such as index, show & new ect.

With this basic knowledge it is reasonably easy to go about setting up and editing a Ruby on Rails website.

Personal experiences with the current CMS

Due to the vast ammount of links on the left column, I have to scroll up and down a few times to find the relevant section I want to edit. A search function would be great to allow the user to find the section they need easily.

When developing, the ability to create multiple versions of an page, for example, multiple awards, would be great as it allows the developer to speed up the process of editing the website.

Uploading multiple images at once i s really important as it will also speed up the process of editing the website.

Personas

The personas for the content management system were valuable as it meant I as able to understand some of the weeknesses of the service My… provides.  I spoke with the manager of the business and also one of his staff who frequently uses the service. This is what they had to say about the service.

CMS: Client Prototype Testing

The current CMS is available to view here;

https://xd.adobe.com/view/63da3ffd-3f30-47b5-a331-917c16bbe4f2/screen/9b86018e-668f-4aaa-a574-e6d413cd5a39/Live-Edit-Mode

I gave the mockup to one of the regular users and this is the screen recording of their usage;

The feedback was really usful and this is what I learnt;

• The upload page needs an upload button
• Menu size needs adjusting a little

Making the CMS as user friendly as possible.

The CMS should be simple and while researching I discovered the shop talk show (Episode 240: Rapidfire 76).They discuss some verty important points throughout their hour long discussion.

Firstly, people working at the company change, both the developers and the clients. It is important that both parties have the ability to add and remove users from it’s cms.

Also, most clients will have no technological ability whatsoever, therefore it is important that the users have the most simplistic interface possible. A great way to do this would to have a live edit mode that allows the user to browse the site and change content just by clicking on it.

 

 

References:

240: Rapidfire 76

Optimised; The current CMS

The current Content Management System (CMS) looks like this the images below. The sections are categorised in a side navigation. This allows most of the content to to be restricted to the 960px view left aligned to the navigation, which in turn results in a large white space on the right hand side of the content.

The new cms needs to make full use of the space available to the user and make it as user friendly as possible. It needs to have;

• As little propriety mark up as possible
• Shallow learning curve
• Simplicity and cleanliness
• Speed – both client facing and admin end
• Ability to quickly search for content from admin
• Documentation

What I learnt from analysing the current CMS is the required content by the client and what the new CMS will need to be able to achieve.

Content

Case studies

Pages

FAQs

Testimonials

Banners

Accreditations

Awards

Team Members

Job Roles

Department Roles

Job Roles

Services (With categories)

Videos (With categories)

Articles (With categories)

Office  (With locations)

Resources

Images

Image categories

Documents

Users

View users

Add users

Delete users

Reset Password

Navigation

View Header

View Sidebar

View Footer

Add link

Delete Links

Rearrange links

SEO

?

Live edit mode

Browse site

Edit content

Client meeting – The newer brief

After the proposal of the project made to the tutors of my course, I went to the client and made the same proposal. This was to ensure everything I was planning was what they had asked and expected from my work, a few differences were noted early on and there were a few elements that were changed . This is what the client and I discussed during our meeting.

The content management system I am designing and developing should be built as the tool for the lawyer market, therefore defining the audience further.

The specific client this cms should benefit is the Sheffield based solicitors Banner Jones (http://www.bannerjones.co.uk/)

More complexity is required but the overall site is required to look less complex.

The help guides are not worthwhile, the client thinks that instead of using help guides, the cms should have tooltips or labels on the site explaining each step as the user arrives at it.

Tooltips are area discussed in the meeting where

The user is not to have access to designing layout of the site but only the content. The cms shouldn’t offer the ability to add/remove content columns. Though customising different layouts of a certain page should be an option to the customer based on a multitude of different themes.

Presenting my idea for the new CMS

Setting up Couch CMS

Couch content management system is a compelling option to making a website enabled with little php knowledge. First stage is to create a database through cPanel of the hosting company.

First, create a database;

Next create a username;

It is important to use the password generator to create a secure password;

Once you have the database prepared, go to the couch cms website and download the package;

Once you have the folder downloaded, rename the config.example.php to config.php

Next you need to open it in a code editor, and add your database name, username & password;

Save the folder, and upload it to the root folder on your domain;

setup is almost complete, you should go to your domain and access the couch folder, this can be done by going to http://www.example.co.uk/couch. Once there set your username and password up and store it in a safe place. You will be greeted with the backend.

To make a .hmtl file editable through the couch cms it is done really easily, firstly change the file to become a .php file. Next you need to add the code before DOCTYPE;

<?php require_once( ‘couch/cms.php’ ); ?>

<cms:template title=’tester’ />

and the following code after </html>;
<?php COUCH::invoke(); ?>

Then all you need to do is add the following code to add something you want to edit;

<cms:editable name=’text_content’ type=’text’ label=’Text’
desc=’Enter Test Here’>
</cms:editable>

This sound then look something like this;

you can then go into the backend and edit what should appear in this place, you can see an example of this here;

Which appears on my own website at http://scottlewis.eu/exhibition/exhibition.php which you can see here under the back button in the top left (A mistake I am currently unable to fix);