Web Applications

Web Applications 2018

Master of Science: Human-Computer Interaction Design

Module: Web Applications

Project: Build a website of your choice using HTML5, CSS and JavaScript. 

*the website was hosted by City University, but sadly the website does not exist anymore 

 

Screencapture of the website when it was finished in 2018. 

Structure and architecture

For this website, I planned to do a one-page-scroll with different sections differentiating them using colours. I wanted to build the structure of the site using HTML and CSS and not use a template. I have used bootstrap before, but I wanted to challenge myself and really understand the structure of a website, so I decided to not use a template for my structure. I made the navigation-bar at the top using a class and then I would define the style in the CSS. All the menu items had a # in front of the names, so it would link down to the different sections. I defined all the sections with separate div-tags and then I would edit them in the CSS. Every other section was pink and white, so they could be easily differentiated. To make the website responsive I used a code called “viewport” in the head section of my HTML (https://www.w3schools.com/css/css_rwd_viewport.asp).

I made my header in the CSS and made it a no-repeat background element with a 100% width. This was so I could have a header image that would cover the whole page. I also used vw instead of px for my padding and margins of the articles so that they would follow the viewport responsive functionality. For the text (p) elements I used “overflow: scroll” to make sure that when resizing the page, you would be able to scroll the content and it wouldn’t disappear. For the “Filmography” section I used a thumbnail list as a template to structure the filmography in the HTML and the CSS (https://codepen.io/bradfrost/full/evwgx).

Wireframes
Functionality

For the navigation- bar I really wanted to have a smooth- scroll effect when clicking the different menu- items. To implement this I found an example on W3 (https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll) that would help me create the smooth- scroll that I wanted. I copied the code and edited it to make it fit my website. I was also able to implement a “back-to-top” button using W3 for this function as well (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top). I was very happy with the result, and I made sure to study the jQuery to make sure I understood the functionality of it as well.

When trying to decide what to do for the “News” section I really wanted some dynamic content that would update automatically. I went to Google’s news section: https://news.google.com/. I typed in “Wes Anderson” and got the recent results gathered from different sources. I went to the bottom of the page where it has an RSS link. I clicked the link and got the XML- file. I did some research into how I could implement an RSS- feed to my site. All the sources said I had to have an XML- reader. Eventually, I found a site that could help me with this: https://feed.mikle.com/my/widget/create/. This site lets you create an RSS widget for your site. I copied the URL of the XML- file and created my widget using this site. They provided both a JavaScript code and an iframe code, so I chose the JavaScript code and copied it into my HTML.

I’m very pleased with how this turned out, and I’m very happy that I was able to generate some dynamic content for my site.

For the “Bio” section I decided to have a button with the link to the source of the text instead of just having link as text. I coded the JavaScript code myself using the onclick function.

In retrospect I wish that I had implemented more JavaScript functions like this to be able to practice using it regularly. It’s quite challenging to comprehend all of the terminology and using it regularly would have made me understand it better. I think with some more practive I will be able to understand more of the JavaScript language. For now I’m most comfortable with HTML and CSS.

For my data visualization I used a bubble chart template from Git Hub (https://github.com/gka/datawrapper-d3-bubble-chart/blob/master/readme.md). I downloaded the files and implemented them into my code using a CSV- file. I had gathered the data myself and edited the CSV- file according to my data. The bubbles were in a separate JS- file. The data was gathered from different articles and I transcribed this into an excel document. But I didn’t implement my excel-sheet, I simply used it as an external source.

I was quite happy with how it turned out. I managed to understand some of the basics regarding the D3- files in the end. This particular template was quite easy to use, and I managed to edit the CSV- file to fit my data. I simply changed the names and the values to fit my data. The sizes of the bubbles were anything from 1200 to 15000. So, for example I changed one bubble to be called “Bill Murray” and changed the size to 8000, since he has appeared in 8 Wes Anderson films. For Owen Wilson I changed the size to 6000, since he has appeared in 6 films and so on.

Visual Design, Look and Feel, User Experience

For the design I wanted it to be minimalistic and to match the style of the Wes Anderson films itself. I used the colour scheme from The Grand Budapest Hotel image that I used as my header. I wanted to implement simple and easy navigation. Since my website wasn’t very content- heavy I decided to have a scroll-page so that the users can easily navigate up and down. The sections are concise and not cluttered with information.

Overall, I’m quite happy with the way my site turned out, especially in terms of the visuals. But it could have been improved with some more functionalities in general.