#d&cp1

[fergusjimminson]

180 the strand

At the end of November, as a class we went to an exhibition in London. It was titled Strange days Memories of the future and displayed various video project installations. Being totally honest I usually don't enjoy exhibitions as I don't generally grasp the abstract ideas, and although most projects within this exhibition were largely of that nature, I thoroughly enjoyed it, particularly the presentation with large screens in dark rooms and loud speakers. My favourite presentation was titled ‘4th floor to Mildness’ and consisted of a room full of beds and videos from underwater were being projected onto the ceiling. The artist, ‘Pipilotti Rist’s’ work ‘fuses the natural world with the technoligical sublime.’ I also thoroughly enjoyed another installation titled, ‘Fly Paper’ by the artist Kahlil Joseph which intertwined footage of people dancing to some good music and clips from American football. Needless to say as a sports fan this grabbed my attention more than any others.

References

www.strangedays-memoriesofthefuture.com/artists.html (accessed on 20/12/2018)

180thestrand.com (accessed on 20/12/2018)

[fergusjimminson]

Installing wordpress

I have to say that, so far, my least favourite part of this whole process was dealing with Wordpress. Other than installing Wordpress in fact. During the second hackathon and Mar’s triumphant return we were taught how to install a CMS backend for our website. We downloaded FileZilla as the FTP we would use, Wordpress as our CMS backend and we had to trawl through our emails to find our SQL information to login once installed.Once all this was installed we were able to upload our websites to the Hertfordshire server, the final step in creating our website!

This process was fairly manageable and well taught by Mar so that we all followed.

However later on, I encountered many problems with Wordpress, the echo function to retrieve pages on our website simply refused to work and when it came to creating a theme, I tried both the one we created in class and creating one from scratch, which took the better part of a day to work out. Neither worked and caused some real grief as they caused all my pages on the server to be blank white! I had to delete the theme through Filezilla causing it to revert back to the original them enabling me to actually access the pages.

I finally found a way to edit a pre existing theme with a plugin:

This allows you to change the CSS of the them currently being used on my website so I changed as much as I could to make my Wordpress portfolio pages fit in with the rest of my site.

[fergusjimminson]

Ideation and sketching: creating materials for final images

In order to create my 3 final images, now I had a decent idea of what those images would include, I wanted to create the resources I would need so that I could then put them all together. Firstly, in illustrator I created the basic shapes that I knew were part of the design and decided on the colour scheme for these as I wanted the final images to be a full set, or at least adhere to the same style.

the bottom of these two was to be the background for my images as I liked the look of the digital terrain mapping and based on the Narcissus chapter which explains humans were made to map the world but we don’t, it represents the surroundings which we notice are there but we not take in the detail and the true sight of it. This therefore is a blank landscape which I created in illustrator rather than use on for google. I did this by drawing a line and then repeating it many times. Then using ‘envelope distort’ I created a grid of selection points that I could then manipulate to create the shapes above.

For the third image I wanted the same look however I was using a specific landscape and so I manually traced it out as a grid with white lines: 

I then needed to create the characters for my images with the idea being that from the cartographers point of view(they designed us) they did not care what we looked like and so I made the characters blank which then also showed how arbitrary we are and we focus so much on how we look when we are designed to be looking at what is around us. 

I created these figures again by using the pen tool to trace other images and selected a colour somewhere between bronze, grey, and flesh. I also created an image trace of the of a world map to be put on a computer to represent the data collection and then changed the colour of this to green to make it uniform with the images as a set. 

[fergusjimminson]

Website: improving responsiveness

As I created my website I tried my best to keep up to date with every section being responsive so it could be seen on smaller screens. I did this by constantly scaling down the page to see how it resized itself as I added code. However when I got to a almost finished point, I uploaded it to the server and loaded the page on my phone and it was completely different. The links changed colour, the content didn't fit in divs. This meant I revised each section of code to make it more responsive. 

I added the scroll function to each div as shown in the top picture. This means as soon as content overflows along the y axis it is able to scroll to see content now hidden below.

Also using media tags, as shown in the second image, allowed me to set my pages so that at certain screen sizes font size decreases, enabling me to fit more writing on one screen, or also non-essential elements, such as the portrait in my about section, disappear when a certain size so there is more space for the text to fill. 

The main challenge I encountered was the homepage because, when I added the scroll to this it showed that the background is made to the size of the screen and so any extra when scrolling did not continue the background. To counter this, I enclosed the whole page in a div with the class “scroll” which enables the pages overflow to scroll without moving the background/entire page.

[fergusjimminson]

Website: Uploading all my images to imgur

This was a preemptive measure recommended by a second year student as he had all his photos on his website on a hard drive which stopped working and he lost everything so if anything happened to his website and it couldn't find the image it could not be recovered. I created an imgur account to store all my images online and so that I could define the ‘src=“”’ in my HTML code as that address. This is just a far more reliable way of adding photos to a webpage as the website will always be able to follow the path to the file.

above is the addressed use when specifying the path to the file in my <img> element

[fergusjimminson]

Website: creating the about section

Above is the about section for my website and the code to make it, I found it quite challenging to organise this all as I wanted as certain attributes didn’t seem to make a difference often, I referred to w3 schools for this to find the appropriate attributes to position the elements whether it was the div, text or the image.

Below is the updated version with updated code to make it more responsive as it stops the text overlapping and the font reduces in size to make it easier to read on a phone screen. Also I added script so that the image disappears when the screen is reduced to a certain point, this means that on a phone there is only one simple column of text improving readability:

[fergusjimminson]

Website: portfolio section

Above is the portfolio section and the associated code, as I started to build it, I knew I wanted a layout, that could display the most possible at once so made a grid, this way it was also easy to make it responsive for different screen sizes.

Once I had made all the code I decided to give each thumbnail a hover script so it would change colour as you rolled over it a feature common with most modern websites and gives it a very clean finished look. See below for the final code and look of this section:

[fergusjimminson]

Website: creating contact section

Above is the contact section which as I came to make it, I realised in my initial designs and ideas, i had imagined various social media’s and contact form that were simply unnecessary. Therefore I made my contact section simple and prioritised, responsiveness as the font gets smaller as the screen size shrinks and it has a overflow-y attribute so that it scrolls as the content of the div goes beyond its limits on the y axis.