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

Advertisement

FOURTH POLYMER PROJECT TEST

This test was a really important stage because it stopped me from doing what I planned to do. I wanted to use the grid system for the homepage which looked really nice and had fluid animations between the different screens. You can see a working model of the example I was working on here.

It looked really good, inital testing showed that should be a reasonably simple example to work with. The only issue I had encountered so far was the mobile version would need to be completely different as it looks so compacted when in the mobile version as can be seen here;

Then I tried to work with the code itself. While I had read an entire book ( JAVASCRIPT & JQUERY written by Jon Duckett) on reading and writing javascript code, it still managed to beat me. I believe that though using online forums etc to double check my code it was in fact correct but unfortunately the javascript I wanted to use clashed with the Polymer project and returned the user a blank screen.

I tried to create a div with a set id of #test2, then I created a string connected to the div using ;

 document.getElementById("test2");

This would pull the information from the div through the javascript. Therefore, it appears  through trail and error and online feedback that this just wouldnt work in this scenario.

References;

https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages&view=demo:demo/index.html

Researching motion

Javascript is the basis for motion on the web it is able to create stunning websites that caption an audience. I plan to look at the different frameworks and use them on a site to create something that I am really proud of. First I started my search on reddit, getting an idea from the web developer community what was the best way to to use motion in the web. 29 developers on the forum all give me their opinions on what to research and become skilled in, I plan to take all the advice they have all given me…

Adaptive, Fluid, Responsive or Static?

Responsive or Adaptive?

Responsive web design allows you to create a website that will adjust itself to fit the size of the browser regardless of the size of the screen. It means you code it once and it will flow more like a grid with images that will rescale themselves to fit the screen.

Adaptive web design is where you make lots of different versions of the same website so that it fits the different screen resolutions perfectly, while effectively gaining more control of the specific user experiences, it is time consuming. Adaptive design uses breakpoints that mean once you reach a predefined point, the layout will change to fit the screen again.

Something to take note of when making adaptive or responsive sites, is that they all use the same information but use styling to change the information. For example, an image is required at a large size, then the browser will resize it depending on the screen size. Therefore, when possible, it is important to use vectors. It is equally important to remember that you should always design for the desktop and then work smaller down to mobile rather than starting at mobile size.

So overall, fixed websites, the ones I am currently learning how to build have set widths and no media queries (allows the size to understand the size of the device it’s being used on). Fluid websites are a little different, they rely on percentages for relative widths to the browser itself, therefore they don’t need to you use media queries either. Adaptive are built to certain resolutions, then require media queries to determine the device or resolution, these usually rely on set or relative widths. Responsive seems to be a lot more focused on the actual resizing of the display as it is actually designed at multiple levels using again media queries and relative widths.

I found the utility http://www.liquidapsive.com/ which has the same design but allows you to change the way it is coded so you can see for yourself fluid, static, adaptive etc. This allowed me to find the negatives of using every type design. My first finding, one that I was already experiencing when designing my site was when you try to reduce the size of a static site;

Adaptive is time consuming and works well for smaller devices but as you can see there are white borders on each side of the design once you reach a certain size.

Liquid, because it uses percentages of the width works really well at larger sizes but starts to become illegible when you start to minimise it to a smaller level;

Finally, responsive seems to be the go to style as it works when the browser is both really large and really small.

Having understood the different types I thought it would be important to have a look at current responsive sites, as it was the best option from the four above.

Meti Design is a really nice responsive site complete with animation, smooth transitions and a nice 3D animation using frame loads like I noted previously in Sony’s Be Moved Campaign (https://akbrodie.wordpress.com/2014/10/15/website-analysis-4-dangersoffracking-com/). This makes the website look very professional and I found myself wanting one of the products they produce, whether that’s because of the website or not, I am unsure.Below you can see the different screen sizes effecting the page, and how similar the experience looks.

Skinny ties also have created very good responsive site that promotes the ties they sell. It works just like a responsive site should but has thew addition of a feature that I haven’t seen anywhere else. This feature being the fact that the rollover still works regardless of the screen size, I am unsure if this is pointless or not as when the screen sizes are smaller they generally are touch screen but it turns out that when used on a mobile, the rollover menus come up when the menu items are clicked on. Below you can see the images of the screen sizes and then the different sizes with the rollover menus.

 

Mry is probably my favourite out of the lot though, doing what my research said about starting with desktop and working your way down removing parts bit by bit. The desktop version is complete with zooming circles with flat colours and images in the background while the mobile version has none of this and turns into a box style, therefore creating to completely different experiences for the user depending on how they view the site. You can see this here;

 

References;

http://mry.com/

http://skinnyties.com/
http://www.metidesign.com/#