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.

Setting up Ruby on Rails

I wanted to develop the websiet 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

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 advice that I could use assets from CreativeMarket, an online platform for artists to sell their work. This meant I could focus a lot more on the theory instead of rushing into the design as it mean’t I could get quality assets at cost, which would save me hundreds of hours wasted creating my own artwork that wouldn’t look as good anyway. This was one of the most important decisions I made in regard to my design

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. I spent the majority of my time researching the concept and developing it to being the best and most relevant to the target audience as possible. The entire idea is due to hundreds of hours worth of research, way to vast and varied to sum up in short, but it did change the course of the idea well into late design stages. In reality the research was and learning was ongoing even throughout the design stages.

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 were able to help me avoid making mistakes with my theory and designs of my Frog Voyage project. A valuable lesson in these sessions were being told my designs were inconsistant throughout. This made me really focus on the small details of my design and improve the website tenfold. Subtle changes can have a really large impact, and these changes really helped build a strong design.

My meeting with Duncan Riach

I came across an article online by Duncan Riach. The article was was titled ‘Multi-millionaire at 27. What I learned.’ and is available here (https://hackernoon.com/multi-millionaire-at-27-what-i-learned-7df8153f5425#.caot1rr5k).

Duncan Riach worked in Silicon Valley, and I reached out to him regarding Frog Voyage. It was incredible to be able to talk to him regarding my project, and I was able to learn a lot from the converstaion.

While using the mockup, Duncan gave me invaluable feedback regarding key parts of the experience.

Below is a list of all the notes taken during our conversation.

General Feedback

  • The Tour guide search box could potential employ the use of a API provided by a company like wolfram or like siri to allow users to be able to search for information.

 

  • Each new page requires a context box. This needs two forms; a short explanation & a longer one which is a little more in depth. This can be provided by a frog that appears throughout the experience. Examples of this in use can be seen in Sim City & Clash of The Clans

 

  • Look at allowing users to gain points to gain additional accessories to add to their frog. This conflicts with some of my research so will needs some serious consideration. Khan Academy (https://www.khanacademy.org) is a great resource that allows users to gain points for learning, and also enables a parent viewing mode.

 

  • With thousands of users, even with different frogs and accessories, the difference between the avatars become even more difficult to seperate. For this I could consider exploring options of further customisation such as colour and scenes in which the frogs are based. The scenes could represent the location in which the user is currently visiting. This location should be pinned on their homepage as their current location while also being present on the map.

 

  • Determining how safe the site is from Pedophiles is tricky. The best method I have concieved is encouraging kids to learn about online safety straight away, making them aware they should never shhare personal details online with strangers. I could block email addresses and telephone numbers from being sent in the chats, and then allow the kids to connect their Facebooks when they reach the age of 12 so that they can take their social connections with them as they grow older and start to use new services. The network effect is in play here, holding the users to the platform because all their friends are there.

 

Profitability & Taking service to the market

  • Splitting the profile into a parent/child service so that the parent can track the progress of their child will be invaluable as a tool to bring the child and parent closer together. It means that the service could advertise to the parents based on the interests of their child, offering organised holiday packages.

 

  • Speaking to the tourism boards of the countries worldwide can be vital to raising revenue. Encouraging them to invest money so that their country can be portrayed in the way they prefer, with information that provided.

 

  • When taking the service to the market, it is important to have the site live first, as the value will be given based on not only the concept, but the active users and methods of profitising the service.

 

  • Once the project is live, getting the users is the key part. To do so approaching schools and asking the headteachers in person for permission to get the kids on the site is vital. Using social proof by talking about how the service is used in other schools in the area can help convince the head that is it a great idea

 

  • Once there are active users, usage data can help loop between feedback and improvement. Don’t be affraid to change something entirely if that’s what the feedback suggests.

FV: Prototype testing

The user testing is really important as it allows me to develop an understanding of what my audience wants. This can be done throughout the design stage to ensure the design is almost perfect in the eyes of the user by the time it launches.

I created a mockup using the images for the website so the users can get a taste for the experience. Then I was able to give my target audience the opportunity to play on the experience, and get some feedback.

I was able to record the users usage and then play it back to them asking them questions about their experience. The screen recording is available to watch here;

Below is all the feedback I recieved to talking to my target audience about this early stage.

homepage

The homepage is the most important page of the website, it is the one they should feel most comfortable using. It is where they will spend a lot of their time. The users noticed a lack of animation on this page, which is really vital. On hovering over animals they should be animated so they actually do something. The illustrations of the landmarks and animals should all be hidden unless a user hovers over that specific continent.

profile-1

While the profile is a very rough mockup, it is missing some key information. It needs  key information about that user such as age, nickname, country of origin and languages spoken. It should also include some information about their own and friends experiences on the website. This can include things such as postcards they have received, selfies they have take in various countries and their current ‘virtual’ location (the country they visited last). The store also currently doesn’t even exsist in any shape or form, so this needs doing. The editing of the frog is one of the key features and has not been implemented yet, this needs work. Should the frog be sat in a wardrobe at this point, or perhaps even a pond.

VT1

During the start of the experience it shows the user a flightboard like an airport as the main navigation. The user expected to be able to click it and get some functionality. The functionality they would like to see is details on the journey. Perhaps a map with the route planned, the closest airline, time taken to travel from A-Z and its rough cost. These popups have little interactivity, and users would expect them to have some at least. Editing of the frog is not available here yet either, this is important.

VT2-landmarks2

The information in the Tour Guide is way too small and needs rethinking, and in this case one of the users asked about Disneyland in Paris, so there is also the commercial side to the locations that need consideration.

VT4-gateau

During the language lessons the website should offer the user to move to the next question once they have answered one. The ability to have three words of the other language which could be linked

VT6

In the selfies page, it is a little unclear as to what is going on during this page, perhaps a short explaination would be nice. Also give the user to scroll through different users to see which one they want to talk to the most.

VT3

The social page is currently quite static, a user should be able to make their frog hop around the social page. Also none of the other designed frogs have been added into the experience, nor have the accessories.

VT5

The selfies page is a little inconsistant with the corkboard background, it can be changed to the blurred background used on the other pages, also the purpose of this section isn’t clear, and needs some more definition adding.

VT7

Add grid of postcards to allow user to select which one they want to send. Franks and stamps are used here alternatively, but in reality franks are applied over the stamps when they have been recieved at the post office to stop people re using the stamps. Franks could be added to only the recipient.

Additional notes

Sound Effects are missing from the entire experience and haven’t been considered yet. There should also be a system wide mute button.

Once user has gone through one stage they understand how to use the service, but before that they don’t. There is a possibility to have a guide throughout the experience. This guide can be the Godfather frog who can be available to have a dailog with throughout the experience. This is a method for the user to ask qustions about the experience, and a real way to collect feedback from users. Another method to remedy this is to have a short animated introduction where the user selects and names their from and then explains the backstory of the frog.

FV: Storyboard

The storyboard is roughly completed. It’s at this stage it is possible to understand the story of using the site to explore other sites and Languages.

The homepage is the first thing the user sees, is the world map. animated characters with animals assositaed with those countries are included. homepage.png

In the top left there is the branding of the site, and in the top right corner there is the character which the user can interact with. It is at the section the user can see their profile, chats, store of items and friends, they can also customise their character here. You can see this section below

Once the user has clicked on a specific continent they are interested in visiting, and exploring, they are presented with a grid of flags of countries from within that continent.

country-selection.png

Once a country is selected, the user is directed to a splash page where they will see the country they selected. They will see the flag and a themed page which has a relevant font.

italy.png

Once they have selected START on the splash page they are taken to the start page. On this page the user is shown information regarding the experience they are about to partake in. It displays information on weather, the location, key landmarks, photos of the users friends frogs in that place, events and the passport of the user. It even allows the user to select the customisations for their frog here in this section.

VT1.png

Once the user has selected start, they are taken to the tourist information screen, this portrays the backdrop of a key landmark with the Tour guide answering questions the users have, while showing them information about the landmarks, food and music.VT2.png

The next page is the social page, here is where the user is able to interact with others also visiting the same place. All users within the experience, on this exact screen would appear in this virtual field to socialise. They are able to chat, play games and explore each others profiles.

VT3.png

The next section is the language lessons available to encourage the image based learning about other languages through image association.VT4.png

The next part of the experience is to view the pictures of your frog at key landmarks around the country being visited. The user is able to select one to save to their profile, which would also appear in the first page of anyone else visiting this place.

VT5.png

The next part is where a user is randomly selected from the country the user is visiting, and they are given the oppportunity to send that user a message to say hello.

VT6.png

Now the trip is coming to an end the user is told to select a postcard to send to their friends. The postcard can be edited and customised then sent. This encourages the users to visit this place.VT7.png

Finally, the user is offered the opportunity to take part in a quiz regarding the place they just visited. This allows them to test their own knowledge.

VT8.png

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.