DXB301 Project

Here are some progress photos of the website. The top list of photos are the current version and the light blue (lower photos) are the old version of the website.

Reflection:

I did initially try going with a grey and light blue colour scheme to sort of represent the grey-ness of sharks and the blue of the ocean. However, it became dull to look at and the colours did not work for me. 

So I went for a darker background with the top section of the page(which represents the surface of the water) to break the page’s dark and light contrast. Furthermore, I put some bubbles into the background to add depth to the website. I think this looks more effective however, still presenting the seriousness to the page. 

I initially wanted to have the maps zoom in on each state and plot where approximately the shark attacks were taking place, however, including those details seemed unnecessary as shark attacks could essentially happen in any location. In the prevention page, I do mention something like this; the sharks are generally hard to plan against, there are mostly just things people can do to prevent this. 

In one of the pages I included a ‘Stop the Killing’ page which is to outline the fact that I am not making this page to spite sharks. Sharks are an important part of Australia’s marine ecosystem and the point of this website is to also promote the protection of sharks as well as the protection of people’s lives. 

In the end, I made tables to display the shark attack statistics. I initially wanted to include a database to hold all of the data as it would be a lot neater within code. In fact, I would hold most of the information within SQL databases and just pull them from the databases. However, due to time restrictions I was not able to do this as I would have had to relearn implementing SQL databases into a website.

I have created this background header to go at the top of my screen on load to resemble water and then the sudden lighter colour to represent going under water. I have changed the colour scheme for the website to have a darker background so the lighter header is intended to break apart this issue. 

Finishing touches on ensuring that the interactive map works now. The data has been inputted into the HTML code however. 

Ideally, I would be uploading the data into a SQL database and pulling the data from the tables. This would essentially save time with not only the coding but simplify the code tenfold. However, due to time constraints I had to just input it directly into the code and create javascript buttons to select the data with the correct states. 

Added a pop-up window for the Interactive Australian map. An issue that I came across while trying to map the Australian map was scaling issues. So to fix this issue, I have added a pop-up window so that the user can just open it as another window.  I will also be providing a text/table based version of the data to be displayed as an alternative.

This is a video of the current animation that occurs when scrolling through the website. 

I used a free plugin called skrollr to make the fading/scaling effects on each of the 3 pages. I am hoping to make them as smooth as possible however, because of the fact that it scales, trying to image map the picture of Australia has proven to be a little more tedious. 

WEBSITE WORK STARTS HERE 

www.youtube.com/tv

(Click below to load the GIF)

http://i.imgur.com/HPT1T65.gif

Analysis: 

This is a website that caught my eye while just generally surfing the web. Someone linked a different version of YouTube that was much more UI based. It doesn’t have all the commenting functionalities that the regular website does but it does have a fairly eye-catching interface that can be operated using a mouse or Keyboard. 

As displayed in the GIF provided, the transitions between topics are quite smooth. This is the kind of smooth movements that I would like to replicate for Shark Attacks Australia. 

This is how the videos open up, automatically into full screen with many screen options to toggle. 

Analysis:

There is a website called Shark Attack Data that stores all of the incidents. The website has been up-to-date with the attacks and also include details of the location, victim and details on the species of the shark.

The website does not have any visuals however, so it is exclusively a data-driven website. Furthermore, the website does list the non-fatal incidents as well as well as the details for this and the website lists the incidents all the way to the beginning of the 1900′s.

Very simple format with options for filtering the incidents.

The most recent incidents.

http://taronga.org.au/conservation/conservation-science-research/australian-shark-attack-file

Taronga Zoo has a Shark Attack section that lists a large number of figures in relation to shark attacks. This includes general information on the victims, state and possible identification of the shark.

I liked the website’s format in terms of listing that various pieces of information but it is not interactive. The only interaction between website and user are the change of pages between yearly reports (as displayed in the screenshot). However the information on the attacks are quite simply displayed; as a table. This is a good method, however I would like a more interactive page that allows the user to engage with the information on a visual level as well as being able to see photos of the species of shark and an approximate location along the coast line of Australia. 

One website that displays the Shark Attacks in Australia is Australian Geographic website. It displays a timeline of the fatal attacks in Australian waters along with a brief description. 

The website also has several infographics that display relevant information.

The aim for my website is not only to display this information but also link the deaths with relevant news articles (articles that are found) as well as more information on the sharks themselves (if known). 

The website is a more page-by-page style that has related stories and links for users to be able to view more information. Shark Attacks Australia will display the relevant information along the main page and most information will be found without having to direct to a new page entirely. 

The Website: http://thenextweb.com/ 

Please click the gif below. 

Analysis: 

This website is not overly glamorous in terms of visuals but it has a simple user interface that incorporates the separated window. One section has articles that can be sorted between popular and latest whilst the other shows the main content.