LO3 - Making The Hive IT Website

I created my website locally using Dreamweaver CC and AMPPS. This allowed me to get the website working without the need on online hosting.

Link to the website (hosting by c9.io) : https://unit34-hiveit-matthewmilanunit34.c9users.io

Here is a video i made showing all the features of the website:




Please do note the audio is quite low for this so i would advise watching with headphones in a quiet location.

Editing the Site.

Firstly i set up my workspace to work with my layout of documents, i created the main files including 'index.php' (the initial home page) and a variety of others. Folders branching off from the root of the workspace included 'css' [which holds the styling for the website], 'assets' [which holds the includes for the pages], 'img' [which holds the images for the website] and 'js' which holds the javascript. An organised layout helps reference items later on which makes it easier to manage the website.

Following the structure i created my index.php document (which for the most part is translated across to all other pages). I started off by defining the doctype as html and then created my head section. The head section handles everything the user doesn't see, e.g the page title, and links to stylesheets and fonts which are included later on. 

Next i create my includes for the document, the navbar include is positioned at the top of the document and the footer include is positioned at the bottom. Creating an include document means the footer or navigation bar don't have to be written each time for each page, making the overall coding more efficient. 

In-between the includes comes the main html for the page. This includes the demo hive and the store. Using ul (unordered lists) I made the shop modular, meaning unlimited addons can be created by copying only one li. 

On the hive-info.php page. Before declaring the doctype begin my php tags to contain variables which are used later on. This is due to websites reading code from top to bottom (unless otherwise declared) meaning that by declaring variables at the top they are available for use later on. You can see that if a cookie (a small packet of information containing data for a site) isn't set for temp min or max then it switches to using preset amounts, otherwise it uses the temperature preset by the user.

The other important PHP section for hive-info.php was getting the data for the user. As we only know the standard ID for testing, i resorted to a static url, however the full project would have a variable after the account section to show the user their hive info. The URL is defined by the URL variable, and i then get the result of the url by passing it through the 'file_get_contents()' function which copies all the data in that page and stores it to the result variable. The false indicates i don't want to use post methods. i then decode the data which is in JSON by using the 'json_decode()' function and pass true to turn in into an associative array. Now the data is easily selectable which i use for the graphs and data.

House style

For a website to be consistent and clean, the house style for the site must stay the same as this means users can easily recognise pages as part of the website, to keep a consistent house style i did the following: 

• Same two major divs in the code, wrapper_blue and wrapper_green. This is the green and blue sections of the website.
• Same two fonts throughout the site, Rounded-MB and Open-Sans, which are both open source fonts.
• Same navigation bar is consistent throughout the site, the cloud and burger bar.
• The same footer is present throughout all the site.
• The same yellow for text is used throughout all the site.

User feedback

I received feedback from five people who tested my site (can be seen in "LO4: user testing"). This showcases how well the site works and what needs to be changed. Initial feedback indicates the items put in that i knew about worked as expected. However people noticed that the store and other pages navigated the user to the 404 Page not found page. This is due to there being no available store for Hive IT as i don't know what kit's they use, but what it does mean is if they wanted to add the store it would be quick and simple to do. Another bonus about this is that it proves the error checking works. Due to the page not existing it redirected them to the 404.php page which is nicer than a non-styled page. In conclusion i got the impression people thought my site fit my target audience and works as expected for the most part.

Relation to target audience
The website i created had two target audiences; those looking to buy a data kit for their own hives and children who wanted to understand more about why looking after bees is so important. Due to this i decided to create the site more child friendly, as this way it would work for both audiences whereas if it had been the other way it would have been too formal for children to understand. The simplistic design makes it easy for even the most non tech-savvy viewers to navigate the site. Simple and relevant information helps keep the users where they want to be and easy notification (e.g the hive colours) make it extremely simple to view the hive condition in a glance.

Rich Media
Rich media is an element of a website which allows a user to feel more included into the site. It is different as in comparison a normal text and image website would be boring to look at, hence button and interactive / dynamic content help keep the audience on your website meaning a higher chance for accomplishing the websites purpose. On my website the dynamic hive and graph makes it fun for children to see a hives condition and what is potentially dangerous for bees. As well as this the burger navigation slide out menu keeps the site interactive with modern transitions and buttons to other pages. A really good example of Rich Media on my website is the clouds in the navigation bar. When hovered over they glow a blue stroke which is better than a standard anchor tag which does nothing.