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-svg_

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.

Screen Shot 2017-03-22 at 08.03.59.png

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-logo

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

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/).

sass

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%;
}

83

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;

Screen Shot 2017-03-22 at 21.30.51.png

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.

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.

Font Usage

Font research is important for this project because I have to pick fonts that are legible by a wide demographic, but is simple enought to be understood by anyone who’s job it is to update the website.

That said the main site wide font can be a simple sans-serif font, that matches the designs of large organisations like Apples’ ‘San Fransisco’ font and Googles’ ‘Open Sans’ font.

screencapture-fonts-google-1481274378497Looking through googles’ fonts featured at (https://fonts.google.com/) there are actually a lot of appropriate looking typefaces, it is simply a case of picking one.

The reason for using Googles’ fonts?

  • These fonts are great because they are completely free to use, and require no liscensing whatsoever and are completely unlimited with no caps on usage.
  • Cross platform rendering is fully supported by Googles’ content delivery network meaning font stability in different browsers and devices works perfectly.
  • Loading times are much faster since they are compressed and are much more lightweight than self-hosted and Typekit fonts.

The font needs to be one of the Google fonts, but also have great usability. The reason for this is that it needs to not get in the way of usage, and allow people of all ages to be able to use the cms without any issues. Therefore I picked a nicely designed sans-serif. This is the one I chose;

Screen Shot 2017-03-04 at 21.26.43.png

The reading list: What I learnt

41r0ixnibgl-_sx379_bo1204203200_
The art of project management
Book by Scott Berkun
 – Creative ideas can be made by everyone, not just by geniuses. Great ideas can be achieved by anyone, they just need to employ the right people.
 – Ideas can be overated. Just like how the idea of the lightbulb was 100’s of years old if you factor in the usage of fire an candles within the home. It was only with the right technology and know how was it possible to make the product.
 – When making a product, you will never make it entirely perfect on the first, second or even fifth attempt.
 – Revision is key to making a a great product successful.
 – ‘Ideas are made from other ideas’.
undercover-ux-cover
Undercover User Experience Design
Book by Cennydd Bowles and James Box
  – Design is the atc of playing god, they change the way we interact with the enviroment around us.
  – Scale is so big that small changes can effect thousands, millions or even billions users.
  – By using and designing for fast connections with top end handsets, we are excluding the users without this technology, the ones usually who aren’t western. Meaning that we are unethically becoming biased.

 

Science of Persuasion
  – There are six key parts to make a product interesting to someone. These are;
 1 – Reciprocity
2 – Scarcity
3 – Authority
4 – Consistancy
5 – Liking
6 – Consensus
41jq0rwrljl-_sx258_bo1204203200_
Content Strategy for the Web (Voices that matter)
By Kristina Halvorson, Melissa Rach
 – Marketing, brand, social, earch engine optimisation, user experience and tecnology are all important factors of a successful business.
 – Prioritising the content strategy is vital.
 51pnouupo5l-_sx387_bo1204203200_
Don’t Make Me Think: A Common Sense Approach to Web Usability
By Steve Krug
 – If a user has to think about about a function on a site, then it can be improved.
 – Consistancy, clear navigation, buttons should look like buttons

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.

New technologies for professionalism

 

Digital Ocean

screencapture-digitalocean-github-students-1484827027057.png

Digital Ocean is a great service for online hosting, this website gives you the options for multiple abilities. Monthly storage, processing, disk space and transfers are an advantage over other services such as GoDaddy. They allow you to have as many users as you would like, instead of being on a shared bandwidth with other developers. This is a reasonable and attractive service. They offer great services like 24/7 Support, Tutorials, Highly Available Storage, Lightning Fast Network, $5/Month, Flexible API, 512MB ram – 20GB SSD disk, 1-click install apps, Free unlimited bandwidth with the ability to deploy In Seconds.

Sendgrid

screencapture-sendgrid-partner-github-education-1484824832117.png

Sendgrid is a service founded in 2009 that manages email marketing and can give real time analytics about the emails you send. It is an industry-disrupting, cloud-based email service to solve the challenges of reliably delivering emails on behalf of growing companies. It offers Transactional Email, Email Templates, SMTP Email, List Management, Powerful APIs.

Stripe

screencapture-dashboard-stripe-test-dashboard-1484824100888

Stripe is an online service that handles and tracks all online payments. Stripe is an Irish technology company, operating in over 25 countries, that allows both private individuals and businesses to accept payments over the Internet.It is also capable of handling inventory and stocking of items for sale.

screencapture-dashboard-stripe-test-products-prod_9xz0mjs4qjah2u-1484824696998

If I need to use a store on my website this is a vital service I should use. pricing starts at $0, with free trials available, no hidden fees or lock-in and the first $50K invoices free.

CMS: Crazy 8’s

The crazy 8s, Googles’ method of wireframing its’ designs is what I used with this project.

I started by creating eight different versions of the wireframes based from my wireframes. These had different reasonsfor being usaeful and are explained below.Scan.png

This design is great because it gives a clear dashboard of all the content in an easy to understand layout. The content fills the screen and doesn’t waste any screen spacescan-copy-2

This design moves a lot of the content links into the menu meaning the homepage only contains the main pages that should be edited and the analytics details at the bottom.scan-copy-3

This design moves almost everything into blocks shown on the dashboard leaving the navigation for only the search bar only scan-copy-4

This design is similar to the previous but also takes cues from the current design by containing links on the left hand side of the screen.scan-copy-5

This follows the previous cues of leaving the menu to contain only the search bar while the page falls into the layout of a grid.scan-copy-6

This design is very minimal as it represents the homepage being the website with the top navigation. This works particulary well as the live edit mode allows editing of the site as you see it. scan-copy-7

This homepage tries to contain all the data on one page, it means there is a very blocky design of the pagescan-copy

This design tries to combine the block style design of previous wireframe and the second one containing all the links in the menu. scan

The successful design

scan-copy-7