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

WEBSITE ANALYSIS 2 – APPLE.COM

The Apple website (http://www.apple.com/iphone-6/) has a great design overall but I am specifically looking at the iPhone 6 page for the design they have implemented.The homepage you are greeted with when you select the iPhone part of Apple’s overall site is this:

The product site has been split into ten individual sections focusing on design, display, technology, camera, connectivity, Touch ID (fingerprint scanner), Apple Pay (payment system), iOS8 (operating system), accessories and tech specifications. This can all be accessed the ‘explore’ button on the top right:

The page is full of subtle gradients for backgrounds to add contrast, smooth animations to enhance the user experience.

Looking at view of the site as a whole, you can see how perfectly structured the site is. The site again takes advantage of the negative space and fills it with visuals of the phone complimented by a small amount of text describing why the new phone is better. It tells the user what it needs to know pro be sold the phone and nothing else. If you break down the different sections of the page you find it is all sales talk. I have drawn on the image below to help break this down. The thing to bear in mind is that this page is to show the updates from the iPhone 5S, also note that seven of the nine sections have links to allow you to learn more in depth about that aspect of the phone.

1 –  Is an introduction to the phone itself,  Basically summing up the updates for the entire phone. This can be taken literally, the paragraph is

“iPhone 6 isn’t simply BIGGER — it’s better in every way. LARGER, yet dramatically THINNER. More powerful, but remarkably power efficient. With a smooth metal surface that seamlessly meets the new RETINA HD DISPLAY. It’s one continuous form where HARDWARE and SOFTWARE function in perfect unison, creating a new generation of iPhone that’s better by any measure.”.

I have capitalised the keywords to i will reference in the other points.

2 – “BIGGER/LARGER” are the keywords to be taken from section one. It describes the sizes and the names of the two products. This keeps the text to a very minimum, there is animation implemented into the page so that as scroll down the phones rise up.

3 – “THINNER” is the keyword to be taken from section two. This section describes the thickness of the devices and has a pitch to sell it to the customer.

4 – These are visuals of the device, again showing the size, thin design and quality of the build.

5 – “RETINA HD DISPLAY” is the keyword to be taken from section five. Again given precise details of the device in the terms of screen resolution. Aside from the details of this section, this is only the third image to contain a block of text, this is how Apple takes full advantage the negative space, making the content much more readable.

6 – “HARDWARE” is the keyword to be taken from section six, while describing the camera being better also giving you a visual of the product.

7 – “HARDWARE” is the keyword to be from section seven, describing how this model of the iPhone is the fastest yet and has the most LTE bands compared to the other smartphones.

8 – “SOFTWARE” is the keyword to be taken from section eight. This section causes further intrigue into the features of the iPhone, allowing the customer experience to transition flawlessly.

9 – Finally the last section is simply to inform and encourage the user to buy the iPhone. Giving them multiple options on how to do so.