Design for Digital Media Environments – Website Complete

Below are some screenshots of the final website. The brief outlines that we must create a web app that targets a specific audiences need. It should also be able to connect to a database which as a result would enable users to register, login and post on the site.

From these requirements me, Adam and Robin created Student Offers for Bournemouth University (SOBU). A site where students from BU could posts the best deals and offers all over Bournemouth. I feel this idea is very strong as it meets this audiences need directly.

In my group was Adam and Robin, I feel that together we worked very well. As a team our communication was professional, being there for one another at all times for instance. We also had very good attendance and work ethic which meant we could consistently do work as team and never fall behind schedule.

Being the first time we have all created a website I think what we have produced is of very high standard. I also think there are a few things we could have done differently. The main point being how we could of all done more on the PHP side of the project. We may have met the brief in the way of users being able to register, login and post but there is far more we could have done, for example a time on the post showing when the user posted the item. This sort of code is what I feel we are missing as sites like Twitter and Facebook have this aspect.

Overall I am very satisfied with how the website and the unit has turn out. I feel we have met the brief successfully and created a website that both works front end and back-end.

Advertisements

Design for Digital Media Environments – Web Browser History

WorldWideWeb – 1991

“Now comparatively slow and sluggish two decades after its launch, ARPANET was dead by 1990. In its place stood newer, fresher networking technologies and concepts, including something out of Switzerland that would not only stand the test of time but forever alter our culture. It was called the World Wide Web, and it was “invented” in 1989 by Tim Berners-Lee, a British scientist at the Swiss-based physics research facility CERN.” (PCWorld)

Mosaic – 1993

“To many, it was the first sign that something worthwhile was out there beyond their own computer. Developed by the University of Illinois’ National Center for Supercomputing Applications, Mosaic was both widely available and refreshingly free of techno mumbo-jumbo. It was the first browser to display text and images together, the first to adopt the layout still favored by today’s browsers, and the first to run comparatively easily on Microsoft computers.” (PCWorld)

Netscape – 1994

“Netscape’s Navigator was for all intents and purposes the successor to Mosaic, and built by much of the same team. Steered by Marc Andreessen, Mosaic’s leading hand, Netscape Navigator improved greatly on the Mosaic formula and made the Internet a colorful, vibrant place. It supported on-the-fly page loading and catered not to hoity-toity university-level connectivity but to the 14.4-kbps dial-up modem of Joe Average. And it was available everywhere, pushed by just about every entity that had a stake in widespread Internet adoption.” (PCWorld)

Internet Explorer – 1996

“Internet Explorer 3 was Microsoft’s first serious salvo in what are now known as the “browser wars.” So serious, in fact, that Netscape would never, ever recover. That Navigator had been the superior product to that point in time was indisputable. Microsoft seemingly needed a little time to fully discover the Internet, and Explorer versions 1 and 2 were less than spectacular. Nevertheless, its tight integration with Windows had gained Microsoft a solid user base. When the third iteration appeared—again at no cost and sporting cool new features such as support for multimedia, Java applets, ActiveX controls, and add-ons like Internet Mail—the worm had turned. Navigator was all but forgotten before the turn of the century.” (PCWorld)

web historyFirefox – 2004

“Firefox 1.0, with its roots in the remnants of Navigator and built by Netscape spin-off Mozilla Foundation, was far from perfect, but time has established it as a key turning point. Going forward, Firefox would stick and the browser biz has been a far more competitive place ever since.” (PCWorld)

Safari – 2007

“Jobs introduced the world to Apple’s very own Web browser. Problem is that in the decade since, Safari hasn’t made inroads in the desktop environment. The mobile environment, however, is a completely different story. Here, in a place where iPhones and iPads and iEverythings are so dominant, Mobile Safari—introduced three years after the original Safari in 2007—rules the roost. And in a world that’s become increasingly untethered, that’s a very big deal indeed.” (PCWorld)

Google Chrome – 2008

“Chrome only recently barged its way to the top of the heap, dethroning Internet Explorer and Firefox on the way to becoming the most widely used browser on the planet. But of the 30-some-odd iterations in its five-year history, none have been more impactful than the first.” (PCWorld)

Reference:

Google, Vizzuality. ‘The Evolution Of The Web’. Evolutionoftheweb.com. N.p., 2015. Web. 15 Apr. 2015.

PCWorld,. ‘The 10 Most Important Milestones In Web Browser History’. N.p., 2015. Web. 15 Apr. 2015.

Design for Digital Media Environments – Sort By Rating

With the project coming to a close I thought it would be best to make a few last additions. At the moment users can only sort posts by the category, which limits their experience of the website. To give the user more, I thought it would be best to enable them to sort by the rating of a post. This means that if they wish to find just the very best offers then they can do so easily and quickly. I’ve also made this feature just accessible for registered users. In a way this is almost like a perk we give back to users when they register to our site. Users will also be able to sort just their own posts by the rating, this can be found on the ‘My Posts’ page.
Screen Shot 2015-04-12 at 22.35.33

Screen Shot 2015-04-14 at 18.05.45

Design for Digital Media Environments – Net Neutrality

In one our lectures this week we looked into Net Neutrality. As this tackles more of the theory side to this unit we have been set the task to produce a post involving the in and outs on Net Neutrality. In this post I will look at the meaning of Net Neutrality, What would our digital media environment would look like without Net Neutrality and who is for Net Neutrality and why and who is against it and why?

What is Net Neutrality ?

As best put by savetheinternet.com, “Net Neutrality means an Internet that enables and protects free speech. It means that Internet service providers should provide us with open networks — and should not block or discriminate against any applications or content that ride over those networks. Just as your phone company shouldn’t decide who you can call and what you say on that call, your ISP shouldn’t be concerned with the content you view or post online”.

Net Neutrality

The image above portrays a good example of what our digital media environment would look like with and without Net Neutrality. On the left hand side we have the internet as it is today, an open internet if you will. This enables users to access and download everything and at any time they like. On the right is the view of how the ISP’s would like the internet to be. This would be an internet of restrictions, with blocked content and even extra charges being put on certain content. As savetheinternet.com puts it, “cable and phone companies could carve the Internet into fast and slow lanes. An ISP could slow down its competitors’ content or block political opinions it disagreed with. ISPs could charge extra fees to the few content companies that could afford to pay for preferential treatment — relegating everyone else to a slower tier of service”.

A very interesting website to look at is http://www.theopeninter.net. This parallax scrolling website gives a great demonstration between the Internet to-day and what ISP wants.

As I’ve shown through this post there are two sides to Net Neutrality and different people and organisations that are fighting for and against it. The big names trying to save Net Neutrality are website giants such as Amazon, eBay, Intel, Microsoft, Facebook and Yahoo. If they were to lose this battle the  service to their websites will be far slower to all users or maybe even having to pay to access their content. The group pushing against Net Neutrality are the big powerful businesses such as AT&T, Comcast, Time Warner Cable and Verizon. These money sucking companies wish to tax content providers to ensure the fastest delivery of their own content. If given this power they will then be able to slow down contenders services, meaning the Internet’s futures is very uncertain. The reason these companies wish to gut Net Neutrality is simply power and money. The world is connected by the Internet and phone service meaning their power would be endless. Imagine if users had to pay for Facebook and Twitter, the revenue would be mind-boggling.

Only a couple of months ago new rules on how the internet will be governed have been put in place when Three commissioners voted in favour and two against.

The main changes for broadband providers are as follows:

  • Broadband access is being reclassified as a telecommunications service, meaning it will be subject to much heavier regulation
  • Broadband providers cannot block or speed up connections for a fee
  • Internet providers cannot strike deals with content firms, known as paid prioritisation, for smoother delivery of traffic to consumers
  • Interconnection deals, where content companies pay broadband providers to connect to their networks, will also be regulated
  • Firms which feel that unjust fees have been levied can complain to the FCC. Each one will be dealt with on a case by case basis
  • All of the rules will also apply to mobile providers as well as fixed line providers
  • The FCC won’t apply some sections of the new rules, including price controls

References

Press, Free. ‘Net Neutrality: What You Need To Know Now’. Free Press. N.p., 2015. Web.  Available from: http://www.savetheinternet.com/net-neutrality-what-you-need-know-now. 27 Mar. 2015.

Press, Free. ‘Frequently Asked Questions’. Free Press. N.p., 2015. Web. Available from: http://www.savetheinternet.com/frequently-asked-questions. 27 Mar. 2015.

Safe Internet,. ‘Safe Internet’. N.p., 2015. Web. Available from: http://www.safeinternet.org/internet-equality/net-neutrality/. 27 Mar. 2015.

Wakefield, Jane. ‘Net Neutrality Rules Passed By US Regulator’. BBC News. N.p., 2015. Web. Available from: http://www.bbc.co.uk/news/technology-31638528 27 Mar. 2015.

Design for Digital Media Environments – Deleting Posts

As I discussed my previous post our next goal was to enable users to delete post. Users are now able to do such and the images below show a demonstration of this being performed. As you can see, I wanted to delete the post about Amazon, once it was deleted it was then not viewable in the other category, meaning it had deleted successfully. Being able to delete post is vital in create a professional web application, users may make mistakes and now have the ability to delete these mistakes. For instance my Amazon post wasn’t specific to the Bournemouth location, therefore I didn’t feel it was necessary to show this deal.   Screen Shot 2015-03-26 at 12.38.50

Screen Shot 2015-03-26 at 12.39.32

Design for Digital Media Environments – Account Page

Today we have ticked of another task in the way of creating a functioning account page. As you can see from the image below only posts from that users account will show up in their account page. Furthermore the account button in the nav bar is now only visible once a user is logged in. Our next bridge to cross is to complete the CRUD process of making a website. CRUD stands for create, read, update and delete. All these process are vital in creating a fully functional social web application. We are now only left with the delete stage, users will be able to do this from their account. We also wish to create a way in which users will be able to edit posts.

Screen Shot 2015-03-23 at 14.46.47

Screen Shot 2015-04-14 at 18.08.07

Design for Digital Media Environments – Responsive Web Design

With the multiple number of devices that people have these days its extremely important to make websites responsive. A responsive website design is one that adapts to difference sizes, from desktop, tablet and smart phone. An example of how a website adjusts to different screen sizes can be seen below. This type of browser that adapts to changing width came about in 2004 by Cameron Adams. Six years later responsive websites were becoming all the rage, at one point being list number two in Top Web Design Trends.RWDWhen it came to making our website responsive we decided to use bootstrap. By downloading bootstrap our website would become responsive as it is already integrated into bootstraps css file. As you can see from the images below our website is viewable on desktop, tablet and smart phone.

– Desktop

Screen Shot 2015-03-20 at 09.17.04

– Tablet

Screen Shot 2015-03-20 at 09.16.51

Smart Phone

Screen Shot 2015-03-20 at 09.16.33

References:

Caver, Stephen. ‘Responsive Web Design: 50 Examples And Best Practices – Designmodo’. Designmodo. N.p., 2014. Available from: http://designmodo.com/responsive-design-examples. Web. 20 Mar. 2015.

Design for Digital Media Environments – Coding Progress

Today I have been making adjustments to the overall look and navigation of the website. As I stated in my previous post I was going to organised each category, so for example only food posts will appear in the food category. This makes the website more organised and user-friendly as they can find what they’re looking for far quicker. Screen Shot 2015-03-18 at 13.17.39Furthermore we added a ‘Other’ and ‘All’ category. This means that users can now post any items and won’t be restricted to our categories. I also made a few changes to the look of the website, for example the register page and login drop down button have a far similar and professional style. I also made an adjustment to nav bar, in the way of making it fixed. Making it fixed means that when scrolling down the  page the nav bar will follow the scroll and not stay hidden at the top. This makes for a far more user-friendly experience as they can navigate through our site wherever they might be on the page.

Screen Shot 2015-03-18 at 13.18.33Our next step is to redesign the posting form and creating an account page the stores all of users individual posts.

Design for Digital Media Environments – Database / PHP progress

As Adam created the table for the posting form I could now go ahead and link the two together. Using similar code to the register form I was able to adjust certain aspects such as the names of rows in my code. Now as you can see in the two images below, when a user enters information into the form it will get sent to the database.
Screen Shot 2015-03-17 at 13.11.24

Screen Shot 2015-03-17 at 13.17.26Another aspect to the website we had to include was enabling all users posts to display on the website. Even though it was a small amount of code it was still difficult to perform. Our next step is now more on the style of our website. At this point in time I not quite satisfied with how the forms look also we will properly need to create an account page where people can see all their posts. We also need to make the posts more organised for example adding a sort button.

Screen Shot 2015-03-17 at 13.18.23

Design for Digital Media Environments – Creating Our Form

To create our form where users will post we wanted something that would look simple but yet still professional, we were able to find this through Bootsnipp. Bootsnipp lets people create all kinds of forms, with just simply picking different types of components. This enabled us to quickly and also stylishly create a form. When it came to inserting the code it was just a case of changing the names of the inputs and finally linking inputs with the table in my database.

Screen Shot 2015-03-21 at 14.11.47

 

Referencing :

http://bootsnipp.com/forms