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;

Advertisement

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

Wireframes

Wireframes are an integral part of the design stage, these are all of the wirefreames that I created for the php based site. Take into consideration that because the designs were created for a php based site, the functionality came before design, therefore the design is nice and simple to allow me to spend the majority of my time spent coding on the technical php.

Learning PHP

The main part of this assignment was learning what the different code did. Understanding the different methods of bringing data from a table and presenting it properly on thew website was the main thing that I learnt.

My first attempt at a thematic php website was the following website.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish01/retrievetropicalfish01.php
This was a template of a table that contained the content

My next attempt was to use the previous method but lay the content out slightly differently.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish02/retrievetropicalfish02.php
You can see that I have removed the content from the table and gave it an improved structure using css.

My final attempt at the php Gallery feature was this one.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/disney/disney.php
I was able to set up a database by myself and include the content entirely myself meaning I have at this point a much better understanding how the php works.

The next stage was to code and understand how a search function works, this was an easier concept for me to grasp.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/animal/logo-search-01.php
You can see here a very basic example of a search function that I built.

ACORN ROOFING – Final Evaluation

When starting this project I thought it was crucial to avoid diving in with designs and code so I did some research into the users of the site, and with a focus group of the competitors website I found an interesting correlation. The more the company was worth the better their website was, this could mean two things, a good website can give the  indication of a company being bigger and better than it is, or it could simply mean that the bigger the company the more money they have to spend on their website. Regardless it was an interesting correlation that proved a good website can go a long way. Next I brainstormed my ideas on paper which allowed me to start selecting important ideas for design, this included deciding the content of the pages and how they were going to be designed. I thought due to time constraints and knowledge that it would be a too bigger task to try and make the site responsive or adaptive so I simply focused on make the site accessible by every browser, this meant I created a website that was 960 pixels wide to fit on the standard monitor and tablets. I then created three wireframes which focused on the placement of the content to allow me to visualise the site. Next was to turn these wireframes into physical designs, and once that was done I was able to choose one and start building it. I realised (when I had almost completed building the site) that the pageless design was flawed and was bad for search engine optimisation. I started researching the flaws of SEO and realised that this design was going to fail in the seo area so I decided to restart from the wire frame stage. I took the best of all my wireframes and built them into one overall design, next I created the final design and built this from the ground up. The final stage I took was to test the site on all browser and devices to make sure it worked and luckily everything worked as I wanted. The only issue being is that on mobile the text and buttons were quite small but this was expected as I hadn’t planned to make a mobile version of the site.

Something I learnt was how to use file transfer protocol (FTP) to make sure I was editing my site live on the server rather than locally, as I am aware it is important to do so because it means that should any problems arise I can fix them right then rather than waiting until I FTP my finished site only to realise it has issues once it is on the internet. I was also aware of the fact that I should you the put and get tool on the local & server sites area of Adobe dreamweaver, this is important as if you drag and drop you can corrupt the files beyond repair meaning the site doesn’t work at all.

I learnt that hierarchy within the file structure of the site is extremely important because it means that should another developer need to work on your site, it easily understandable what and where everything is. I learnt it was important to separate images which were an integral part of the design, and the the pictures which featured on the site. I also understand that because images take a lot of bandwidth to load on a site, I found it was crucial to make sure the image was the smallest possible file size it could be. I did this by making sure that every image featured on the site was set to the exact size the actual image was.

One issue I have discovered with my website is when you hover over images within the site, I have created divs that use css to implement the background, the reason for this is to allow the text to be easier manipulated on top. I have used the :hover element in css to select a slightly darker version of the image when you hover, the problem with this however is that when you initially rollover the image, the area turns to white for about a second then shows the darker image. with a bit of research I believe it is because there in no code specify what the onMouseover image is, but there is no way of doing this within the css. I would simply have to code the images through html and use  onMouseOver and onMouseOut, this would me to get the desired effect without the white spaces, although this would mean I would have to create a z-index for all of the content within the div.

Another issue I was unable to resolve was that of the underline to the bottom left of the twitter logo in the footer. I removed both Twitter and Facebook logo html and both time the underline disappeared, this is confusing because you can select it on the page as if it was physical content but there is no sign of it within the code, after researching it and trying to understand what the issue is I am still unsure and this is something I will continue to try and figure out.

Lessons Learnt

Coming onto the course with a little bit of prior knowledge I found it relatively easy to code the website. While I found it somewhat easy, that does not mean it didn’t come without challenges and I learnt quite a few valuable lessons whilst coding the site. I knew already that html was the base of the website which contained the content while the css was simply the styling of the site. I was aware that everything was put into containers called divs, these could be linked with css file to give each container its own style, it is through these basic principles that a website is created. Animation and transitions are not required for this module I thought it would be best to simply refine my current skills to iron out any flaws and complete a website the best of my ability. One of the biggest lessons Learn’t from this experience was the difference between padding and margin elements within a css file. I was using them as if they were the same type of thing, and then realising there were issues on the page where there would be areas of white space that I didn’t understand. This is something I researched and then began to understand that the padding was space within the div around the elements, whereas the margin in the space outside of the div. Another lesson I learnt during this project is that you can actually create layers within the page, and while I still haven’t mastered this yet I know understand that when there is a z-index present in the css file, then it means that something is layered on the webpage.