Design for Digital Media Environments – Final Evaluation

As the Design for Digital Media Environments unit is coming to an end, I feel that my team and I have appropriately and successfully met the unit-brief requirements set for our project. These were to create a Web-browser based application that satisfied the specific needs of our target audience, and to use database scripting language to link our application to an online database that would be affected by user input.

With these requirements in mind, my team and I designed and coded a website called Student Offers for Bournemouth University (SOBU), using a variety of PHP and CSS code. The website we created allows the user to see available offers and deals on a live feed. It also allows the user to sign in and post offers and discounts located in Bournemouth. I think our final website has a very clear target audience, with obvious needs that our website properly addresses.

The members of my team were myself, Adam and Hallam. I think we worked very well as a team since we all took an active part in creating the website and our attendance was great: none of us missed any of the important group meetings. We also went about working on the elements of our website in what I believe was the right way, as none of us spent too much time on just one task. This allowed us to focus on making sure that important aspects, such as functionality, were properly organised before we worked on the visual elements, like the appearance and design of the website.

The images below show our final version of the updated website for SOBU.

Screen Shot 2015-04-13 at 21.24.16

Welcome Page

1

Main Home Page

2

The Offer Posting System

3

My Posts

4

Social Media Dropdown Menu

5

About Page

6

Register Page

updated nav bar

Full Navigation Bar

Our team combined our strengths in coding and design to create a website linked to a database. This allowed us to keep track of all of the users’ posts online. I find this one of the most effective and interesting aspects of our website, as it shows instant results that we can monitor.

When I started working on this project, I found coding in PHP somewhat challenging. However, in the course of the unit I developed a better understanding on how it works, as well as other websites and coding languages we used. These included phpMyAdmin, GitHub and Bootstrap.

If I had chosen to do things differently, I might have added some more visual elements on the sides or at the top of the page (e.g. more stylised logo or banner), as in the other student deals websites explored in my website research. However, this would have overcomplicated the overall website design. We decided that streamlined simplicity makes the presentation more user-friendly, clearer and aesthetically pleasing.

Overall, I am satisfied that our website has properly met all the requirements in the brief and pleased with how the final result turned out, in terms of its responsiveness, content and design.

Advertisements

Design for Digital Media Environments – Offer Posting System

One of the latest features that my team has made sure to focus and improve on most is the offer posting system. The purpose of this system is to freely allow logged-in users to post student offers and deals to the live feed on our homepage. The details of the users’ posts (business, category, location and description of the offer) are then immediately recorded and stored on the database we set up using phpMyAdmin.

With an account I created using our “Register” page, I posted a made up offer to the live feed featured on the homepage, to test the system’s functionality. As shown below, when users post offers to our website, they can choose which business the deal comes from, as well as the location, category, rating and description of the offer. The posts can then be sorted into the various existing categories that we have on the right-hand sidebar. As seen in the second screenshot below, we also have a “Delete Post” button, in case the user wants to get rid of the post they’ve made. This is particularly useful if the user has made a mistake or the offer isn’t available anymore.

Everything works properly and we have nearly finished the project.

OPa

The process of posting a new offer to the live feed.

OPb

The offer as it shows up in “My Posts”

OPc

My offer presented in the “All” category

Design for Digital Media Environments – Website Development 4

As our unit is coming to an end, we have uploaded our final designs and code for our group website to the dakar server. Since the last Website Development post, the general design and house style of our website have been modified. The images below show our final updated designs for our “Home” and “Register” page. Our “About” page generally has the same appearance as before with very few changes.

A different background colour for our live feed posts has been chosen to make the various offers stand out more. A drop shadow has also been added to the text boxes to give more depth to the design of the page, as well as make it look more professional and visually appealing. Features such as the navigation bar and drop down menus have also been improved. These elements are more responsive and they make website navigation easier and more user-friendly.

Screen Shot 2015-04-15 at 19.34.14Screen Shot 2015-04-15 at 19.34.17Screen Shot 2015-04-15 at 19.34.34In the end, we decided not to use a to use a fancy, detailed logo on our website, as the most important objective of the unit is to maximise functionality and responsiveness. Each team member’s copy of the website and the source code required to make it has been uploaded and is almost ready to be marked.

Design for Digital Media Environments – GitHub 2

Our final code for the group project has now been uploaded to GitHub by Adam, and we will soon be ready to hand in all of our finished source code on the 20th of April. As shown below, both our “public” and “includes” folders have been uploaded to our group repository on GitHub.

Each of us will now need to upload our code onto the dakar server, so that our copies of the group website can be accessed by our lecturers and markers.

GHub 2

Design for Digital Media Environments – Current PHP and CSS Code

Pictured below are the PHP and CSS codes that were required to make most of our main pages on the website. As stated before, Bootstrap was also frequently used to help with the coding and designing of the project. Our current code contains a combination of PHP, CSS and bootstrap. The connect.php file isn’t included in the following screenshots since it contains login details that directly access the database in which we store our source codes and user posts. Screen Shot 2015-04-15 at 14.17.47 Screen Shot 2015-04-15 at 14.17.50 Screen Shot 2015-04-15 at 14.17.56 Screen Shot 2015-04-15 at 14.17.57 Screen Shot 2015-04-15 at 14.17.59 Screen Shot 2015-04-15 at 14.18.03 Screen Shot 2015-04-15 at 14.18.14 Screen Shot 2015-04-15 at 14.18.15 Screen Shot 2015-04-15 at 14.18.18 Screen Shot 2015-04-15 at 14.18.23 Screen Shot 2015-04-15 at 14.18.27 Screen Shot 2015-04-15 at 14.18.37 Screen Shot 2015-04-15 at 14.18.51 Screen Shot 2015-04-15 at 14.18.58 Screen Shot 2015-04-15 at 14.19.01

Design for Digital Media Environments – Website Development 3

Our master version of the code and elements of our website has been uploaded to the dakar server, so that we will all be able to access it online. There have also been numerous different changes made to the code and design of the site since the previous Website Development post.

Text is now displayed in the different boxes containing student deals and offers. We also have two new categories to display student offers with: “All” and “Other”. This will make categorising the student deals easier when there’s an offer that’s difficult to classify. All the student deals and offers posted will now be stored in an online database that Hallam has set up for the website.

Much like the previous version of our website, we’re keeping a curved design with rounded corners for the text boxes and buttons. We’re also keeping with the same colour scheme of white, pink and blue for all the pages.

Displayed below are our current webpage designs as well as some of the source code that the “Welcome to SOBU” page is made up of.

Screen Shot 2015-04-13 at 21.24.16 Screen Shot 2015-04-13 at 21.24.36 Screen Shot 2015-04-13 at 21.25.06 Screen Shot 2015-04-13 at 21.25.11 Screen Shot 2015-04-13 at 21.25.16

Design for Digital Media Environments – Net Neutrality

Throughout the lectures in this unit, we have learned how common and important Net Neutrality is not only to us and our course, but also to the digital media environment we live in. Net Neutrality is a system which is used in network design by an Internet Service Provider (ISP). This system was set up with the aim of giving equal priority to all forms of data accessed by web browser users. The original term of Net Neutrality (also known as “Network Neutrality”) was created in 2003 by Tim Wu, a professor at Columbia University.

Net Neutrality ensures that all online applications, websites and services that users visit take an equal amount of time to access and load. This is how this system prioritises information on the internet so that the public can experience browsing it in a consistent and fast way, without any lagging, freezing or irregular browsing speed. Net Neutrality affects not only all forms of online content but also the ISPs that provide the services for net users.

Because of Net Neutrality, ISPs (e.g. BT and Virgin Media) currently have no right to forbid users from accessing any particular online content. While ISPs can monitor what users access, they cannot limit or restrict this access to online content without facing legal issues. If Net Neutrality wasn’t established, ISPs would have full control of what users can see and access on the internet; they would also have the ability to block any websites of their choice. Buffering and loading speeds on websites from competing ISPs could also be slowed down on purpose so that users are forced to go onto websites from other service providers.

Net Neutrality also legally states that all ISPs should spend an equal amount of money to manage and provide internet services for their users. However, a recent scandal in the media occurred when Comcast (the world’s largest mass-media, broadcasting and cable company) carried out a paid deal with Netflix, in order to give Comcast users quicker and better access to Netflix’s services.

Netflix reached a deal with Comcast to pay a fee which would allow its Comcast’s customers quicker and more efficient access to Netflix. This gave Comcast users faster network and downloading speeds for the streaming media that Netflix offered. The reaction to this unfair prioritising of Comcast users (compared to everyone else), was of public outrage. This breach of Net Neutrality caused protestors and companies (e.g. Google) to take action and campaign for free, open internet services for all of its users.

Since then, Net Neutrality has been a major point of discussion from organisations such as the US Telecommunications Industry Association and the Federal Communications Commission (FCC). In February 2015, a list of new rules has been established, affecting Broadband providers and ISPs.

Additional Sources:

Design for Digital Media Environments – Website Development 1

We have finished putting together the resources for our “About” page. This included deciding on the final images, code and colour scheme that we needed to build this page. Now that we know what our basic layout will be for the time being, we know how to code, structure and present the remaining pages of our website. As well as creating these new pages for our website, we will also need to add and improve some additional details on our “About” page. For instance, instead of the word “SOBU” at the top of the page, Hallam will replace it with our final design for the official logo. Our final layout for the “About” page was based on our sixth sketch that we came up with as a group, near the start of this unit. The sketch is pictured below. 6 After Adam, Hallam and I contributed our own elements to this page (while working as closely as possible to the design in our sketch), this is what our “About” page currently looks like: Screen Shot 2015-04-13 at 20.45.59 Screen Shot 2015-04-13 at 20.46.11 The following code alone was used to create the infoboxes with the blue headers, next to our group image at the bottom of our page:

<div class=”col-md-6″>

<div class=”list-group”>

<a href=”#” class=”list-group-item active”> Adam’s Role </a>

<a href=”#” class=”list-group-item”>Adam helped with the code of the about page, our Wiki and our GitHub.</a>

</div>

<div class=”list-group”>

<a href=”#” class=”list-group-item active”> Hallam’s Role </a>

<a href=”#” class=”list-group-item”>Hallam coded the main page of the site, where each item can be seen.</a>

</div>

<div class=”list-group”>

<a href=”#” class=”list-group-item active”> Robin’s Role </a>

<a href=”#” class=”list-group-item”>Robin helped with the visual elements, coming up with concepts for branding.</a>

</div>

</div>

</div>

</div>

Design for Digital Media Environments – GitHub 1

Throughout the start of this unit, we have been advised to use GitHub to share our source code for the website between our group, as well as store it all as an online backup system. GitHub is a Web-based, free repository hosting service, which enables users to store files and folders of data, as well as update it and share them with other people online. Since Adam has uploaded our current source code onto GitHub, it will be much easier for us as a team to share and document the changes we’ll be making to the code as we go along. As the unit progresses, the code will be updated not only on GitHub, but also on each of our computers. Ghub 00Ghub 01

Ghub 1

Our uploaded Group-Project folder in our repository.

Website source:

https://github.com

Design for Digital Media Environments – Web 2.0

One of our lecturers, Rob, recently informed us about the more theoretical and critical side of our unit by telling us more about Web 2.0 and its history.

Web 2.0 is the current form of the online, Web-based technology that users around the world can interact with. The full term “Web 2.0” was coined and popularised by Tim O’Reilly in 2004. Although the term “2.0” suggests that we’re using an upgraded version of the Web, the term refers to the new features and changes that were gradually added to the technology over time. These important new features include faster network speeds, social media, user-generated content, uploading and sharing information and data. The following are only a few examples of the concepts and websites that Web 2.0 has contributed to the World Wide Web.

  • User-generated content in the form of text (blogging), images (Instagram and Pinterest), video and audio (YouTube).
  • Wikis, which are solely dependent on user-generated content and require users to collaborate by contributing and editing information (Wikipedia).
  • Social networking websites (Facebook, Twitter and LinkedIn) that encourage users to make as many social connections to other users/organisations as possible.
  • Crowdfunding websites (e.g. Kickstarter) in which all the main projects posted to them are dependent on user participation and collaboration in the form of donations. This is done to reach specific money goals and potentially make projects a reality.

These features of Web 2.0 indicate that the web has gradually evolved into a worldwide tool for online communication, collaboration and interactivity.

Pictured above is a word cloud, featuring a wide range of words and concepts currently associated with Web 2.0. While many of these examples (e.g. “Focus on Simplicity” and “Joy of Use”) are generally considered advantages, there are disadvantages associated with this current state of Web 2.0. For example, as new forms of online communication and data storage emerged, so have new ways of phishing and hacking into online accounts. Other acts such as cyber-bullying have become more common due to the introduction and expansion of the social software of Web 2.0. Services such as Google and YouTube frequently issue new security methods (e.g. security keys) to prevent these online offences from being committed.

Additional Sources: