Evaluation

Working on a client project was interesting as it meant I was able to work on communication skills and build on exist web skills. I approached the manager of My… Group to ask if there was anything I could do to help him and there was. He wanted a redesign of the content management system they used to edit websites. I thought this was out of my league having only had about three months experience with the particular language I would be writing in, but I decided to take on the challenge anyway.

Research played less of a role in this project and fell more towards user testing which explored how various people from different skill groups interacted with the site. This meant I was able to explore the options to make the experience of the site better for all users. I came up with a great method and design that proved to work with the users but also pleased the client.

Next was the actual build of the project, this was the most difficult part as lots of the code was completely new to me so I felt I was truly learning on the job. This had its benefits and negatives, to begin with it meant I would definitely struggle with the code but it would become easier with time and experience. One of the largest negatives that impacted me the most was the errors I would come across during my time editing the site. These errors varied in difficulty to remedy, but would add hours of wasted time to the build. It meant that overall I probably spent 20% of the entire time fixing errors or at least trying to.

By the end of the build I have a much deeper understanding of how the code works and feel like a lot of what i’ve already done would be much easier to achieve now in comparison to when I first started the project, which is a huge learning curve to say the least.

Feedback from my client was great, he seemed very pleased with what I had achieved even though some of it was not even completed 100%. It meant that he had at least grounds to continue the CMS and make his employees lives easier, effectively saving him money.

As a future consideration, I would love the opportunity to keep working on the code to develop the site even further so I can improve my own skills and become the best possible developer I can be.

Advertisement

User Journeys: Completing tasks?

This post takes place in video format and gives live demos of how the content can be change, if reading in the document, please refer to the blog post which can be found here (https://akbrodie.wordpress.com/2017/05/24/user-journeys-completing-tasks/).

To begin with I will start with a video showing how simple it is add an image to the assets section of the cms.

The next part would be to edit/delete an image, In this video demo I will delete the image I just added.

Finally, and most importantly the websites’ articles are editable, and in the video demo below, it is shown how this is done.

User Testing

I gave the cms to one of the users who regulary deal with the site and use it to change clients websites. This is what I recorded;

https://www.youtube.com/edit?o=U&video_id=uA-XSVKIo3s

Some invaluable peices of information came from this User testing. The main part is that it was a lot easier to use than what was being used previously. This is great as it shows that I have achieved my objective.

The user noticed that there was an issue adding a new page to the website through the cms. This some errors within the code in which I didn’t have time to remedy.

The backups page is also left uncompleted but has a reasonably basic structure, the user was confused as to the purpose of this page.

The main issues of this site the fact some of the pages lack information, so first time users will struggle to understand how to use the site, this could potenitally benefit the first time users.

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;

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.

Tools used & learnt

The most important learning curve gained through this project is the applications I learned the use of during the process. This is the list of programs I learnt;

Atom

Adobe Experience Design

Illustrator

Emmet

Zurb Framework

Slack

GitHub

GoDaddy

Sass

Technical Details

Not using Banner Jones, Instead i’m using Optimus Services Limited (It runs off an engine and will effect other web sites).

There are a lot of smaller important things to remeber when building this website, this blog post will explain them all.

Ruby on Rails

Ruby on Rails is a programming language, a Model-View-Controller (MVC) web application framework. HTML (Hyper-text markup language) and CSS (Cascading Style-Sheets) format websites, and Ruby will output this in its own compressed files. Ruby though, will deal with much more complex processing. Things like looping and branching content can all be achieved with the toolkit that Ruby on Rails provides.

Model-View-Controller (MVC) is KEY

Model: where all the data is kept for the webtite

View: where all visual information relating the styling of the site is kept

Controller:  connects the data from the model to the view so it can be displayed

Once installed on your computer, you can set up a site, and use the following file structure to organise your site.

Rendering Partials are an important process of setting up a site. They are components stored in seperate files that can rule commands that will attribute data to an array of the layout. They are simple to execute, for example the header can be done as a partial. So you would set up the file _header in app/views/layouts/ so the file would appear as app/views/layouts/_header.html.erb – The only thing left to do after you have applied the relevant information inside that file is to render it where you want it to appear. This is done using the command “<%= render ’layouts/header’ %>”.

Github

Github (available here; https://github.com/) is a project hosting platform. It offers services like source-code browser, in-line editing, wikis, and ticketing. It also has a versioning control, allowing users to browse every single edit of their project. While the online version is reasonably to use, it requires git commands to work on a computer, these are done in the command line via Terminal on a Macintosh computer

Terminal

Terminal is the program used to run the commands to set up a rails website and start the server. It is a complex thing to undestand but I have written an in depth explaination here (https://akbrodie.wordpress.com/2017/03/23/setting-up-ruby-on-rails/).

Variables & Sass

Sass (Syntactically Awesome Style Sheets) is a way of coding the stylesheets in Ruby on Rails. It makes for cleaner and easier code. Available here (http://sass-lang.com/guide) Sass is key to making the code really clean, this is accomplished through a combination of Variables, Nesting, Partials, Import, Mixins, Extend/Inheritance & Operators.

• Variables are used to store data, so that time can be saved for later. They have a dollar sign followed by the word used to store the data, like $example. A great way this is used is to assign colour hex codes to variables describing the colour. This makes editing much easier and faster.

• Nesting is when a class has elements within it that it wants to effect. The css is nested within the one class, rather than multiple ones. So as an example a div class of .example containing a h1, h2 and p could look something like this;

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials are external files that contain snippets of code that can be added using an @import tag like @import ‘example’;

Mixins allow lots code that essensially do the same job to be grouped together in an understandable way. A example can be seen below how border-radius now includes the webkit, moz and ms versions.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Extend/Inheritance allows styles to be shared across multiple class names easily without repetitio. It is accomplished very easily by adding @extend .exampleClassName; – The example below shows the styling for a dialog box, which border colour can change depending on its state.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Operators allow for content to have set widths dependant on mathmatical equations. This is great as it allows content to adjust the size of the screen it iis being displayed upon. An example can be seen below;

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Medium Editor

Medium Editor ( Available here: https://yabwe.github.io/medium-editor/) is a visual content editor plugin available for cms content.

It allows the user to select content to edit simply by highlighting it on the page like so;

This is something that is vital for editing the website in Live Edit mode.

Code of conduct

Clean code is really important, it means that if someone starts looking at your completed website they can understand what the code does. Google ensures that is code is extremely clean to make sure the loading times are kept down.

Ways to ensure my code is kept clean are listed below.

• In the sass files, keeping notes to ensure the code is described and easy to understand is vital. This is simply done using “//”.

• ensuring the attributes within css classes are kept in alphabetical order.

• Using variables for colours is key, when describing colours of different shades, it important to put colour first and the shade second. It looks like this $yellow-light or $yellow-dark. This is done for speed, as the developer can type the colour first and see all the different shades available.

Flex Grid columns are important for coding in rails. I use the flex grid media queries as they work well with Ruby on Rails. They are also simple to use. Normal class names can be assigned to html elements, then in the css the tyle of media query is included with a line ‘@include flex-grid-row;’ or @include flex-grid-column(6);’. This makes creating and editing the layout super easy. They also work well with the Media Queries (Include media) to allow the user to make layouts adaptable for mobile.

The stages of creating a website are important to be aware of. There are three stages that a website can go through, the first is static where the content is pulled directly from the HTML file, the second is where the content is dynamic and is stored on a database and finally is when engines and generators are able to create the plugins used on each independant website.

Setting up Ruby on Rails

I wanted to develop the website on my own personal Apple mac. This meant I needed to setup Ruby on Rails on this device for the first time, this is something that would see me running complicated commands in Terminal.

These are the commands used to setup a Ruby website.

$ – Simply a note to remind myself to run this as a command

cd – change directory (move to a specific folder to work on)
To start a new website, the following commands are required.

1 $ cd ~/Documents/Projects/
2 $ rails new portfolio -d mysql
3 $ cd ~/Documents/Projects/portfolio

1 – This command selects the location of the new site

2 – This command sets up the Rails file structure in the chosen directory and names it ‘portfolio’.

3 – This command sets Terminals within the portfolio page.

 

Next is the sercurity of the server, open the file (config/database.yml) and change the password.

4 $ mysql.server start
5 $ rails db:create

4 – This command starts a server on the macintosh and allows for live editing.

5 – This command will run the database

 

//Start building the website

1. – This section explains which ppage is the page that should load as the root file. Usually just the index page;
   Config/routes.rb
   Add this code on line 2;
   root to: ‘application#index’

2. – This is also required for the same reason as part 1;
app/controllers/application_controller.rb
Add this code before the end:
def index
end

3. – This actually creates the index file that is being loaded up;
Create the file index.html.erb
In directory app/views/application/index.html.erb

4. – Add other scss files in stylesheets folder, create the header & content sass files;

– application.scss;

@import
‘header’,
‘content’;

5. Add variables file, which allows for fonts and colours to be stored as variables, making styling the site much easier.

Once the site files were ready it meant I could immediately start working on them. The following code is what I would use on a daily basis while working on the project. They change the directory (files) that i’m working on, run the server and counteract a common mySQL error.

$ cd Documents/Projects/Optimadmin
$ cd Documents/Projects/osl_2017

Run the server:
$ rails s

If you get a mySQL error:
1. ctrl + c to quit server
2. $ mysql.server start

CMS: Teaching & learning strategies: How they impacted my workflow and overall project

Teaching methods such as lectures, seminars, discussions, presentation, research based learning, 1:1 and group tutorials were used throughout the year to help me achieve the best possible grade, below I have documented each time one of these methods were used and in turn aided my projects development.

Discussions

Discussions among the teachers and my peers were made much more frequently throughout the development of the service than the one to ones on the pure nature that I was able to ask questions at any time I was around my peers.

This was a fantastic aid to my site as it allowed me to gain an insight into the opinions of others and get advice regarding how to improve or what to add to my project.

The most important part of this was the client meetings as it allowed me to check I was doing exactly what the client was asking of me. This was vital.

Presentation

The presentation of my idea to the group in the first stage was vital, as while it not only made me predefine the concept, it also allowed me to express to an audience of peers. Questions were made from the group, and also the teachers, and in answering these questions allowed me to come up with new ideas. I was also able to pose questions to the audience of my presentation to allow me to guage their reactions, and help me decide whether which adjustments to make.

A key point from this stage was gaining the thoughts on the language of the site and how it should work in relation to translating content for users of other languages. This was an important part as it allowed me to consider language lessons within the service.

Research based learning

Research was the most valuable to me of all the learning strategies listed here. Alternatives were an important thing to focus on as it allowed me to strategise what would be important implementations. I also needed to learn how to setup and run Ruby on Rails on my personal Macintosh, this was a HUGE learning curve.

1:1

The one to one sessions were vital to my project, it allowed me guidance on my project on a personal level. The tutor was able to understand the aim of the project and offer advice on key decisions that were needed to be made.

When stuck for ideas with my design, the one to one lessons were able to aid me in ideas of new research topics. Posts were suggested for me to write which allowed me to in turn think of new ideas.

They encouraged me to keep the design as simple and straightforward as possible in the aim to allow me to focus on developing my coding skills.

Existing CMS

It is vital to look at a few other content management systems if I am going to build my own, therefore I have decided to research some of the more prominent ones in the market.

Getgrav (https://getgrav.org/)

Getgrav is a reasonably popular cms that others a lot of features, they are listed here;

A lot of these features are unecessary for a cms of a branded website.  Such ideas that are not needed are ones like the ultimate control the user has over the site. These consist of being able to add entirely new pages, changing the theme, editing the style/css, adding plugins. The cms the client requires is a lot more restricted,as most of the work is still done by the web agency, but small changes should be done by the client. These include small things like adding an additional team member or editing a blog post.

The visual aspect of the cms is reasonably similar to the one i’m redesigning. Below are images of what the cms looks like.

You’ll notice the design is similar in the sense of having a sidebar navigation rather than a top navigation. It consists of additional items that aren’t required by the cms I am creating, these are the plugins and themes. While this cms is has a features that are simply unecessary for what I am creating, the simplicity of the layout is very good and is something I should consider for my project.

Webflow (https://webflow.com/)

Webflow is a service for content managers, developers and designers. It has tools for each type of user to take advantage of the service. You will see below that the site has lots of different services available.