Design for Digital Media Environments – Database Progress

Today Adam created the table in our database for the form where users will be able to post on the site. This table is slightly different from our register and login table as the user will be entering more information. In this form users will be able to post about the name of business, category, rating and description. The next step is to link this table with the form in our website, I will do this Monday. Screen Shot 2015-03-14 at 23.27.31

Design for Digital Media Environments – Coding Progress

As I stated yesterday our next step is to combine our php with our html. One thing I did before this was to create a title page, the page you first see when visiting the site. We did this to give us a chance to explain what the website is about and stands for.
Screen Shot 2015-03-13 at 20.01.10Users now on our real website can register, login and logout. There were a few extra bits of we had to produce to make the site more user-friendly. For example when a user is logged in the login and register button won’t appear as they won’t need it.

Screen Shot 2015-03-13 at 19.57.09To make sure our register form had defiantly connected with our database I got some of my friends from DMD to register to our site. As you can see in the image their username and password have come through, meaning they can now login to our site. Our next step is to enable users to post on the site, to do this we will have to create a new table in our database.

Screen Shot 2015-03-13 at 19.58.12

Design for Digital Media Environments – PHP Progress

Today my group set out to enable users to register and login to our site. To do this we started with a project file that we had been using with Kyle. This project already enabled users to login to a database but that was all. As you can see in the image below people will now be able to register to the site. We have also added a logout feature once they successfully logged in. 11028407_10204699170056303_1647635328_o

The image below shows the php for the register form. In this block of code we had to perform certain ‘if’ statements when situations would arise. For example if a user was to use a username that was already taken then they wouldn’t be able to register and would be told why. Furthermore when users re-write their password and don’t get it correct they will notified with a message saying ‘passwords don’t match’.
11064565_10204699170256308_32716649_oIn the image below you can see the index.php, this is where the forms can be edited. While building our php our forms will look very basic as it is more about getting them to work. Once The forms work then I will be able to link them to the website that I have shown in previous posts.

11065072_10204699170216307_1816616605_o

Design for Digital Media Environments – Website / Coding Progress

After creating the basic design of the website I was now able to make the nav bar and category sections work. As a result of creating these pages users will be able click on categories such as food and night clubs and will be direct to a separate page where a live feed will focus on just that certain genre. I was able to do this through using code such as ‘<a href=”food.html”>Food</a>’. The href is basically a link to another html page.

Screen Shot 2015-03-10 at 21.27.51

I’ve also made some changes to the homepage, as before it included a form where users will be able to post their thoughts. The reason I changed this was because users shouldn’t be able to post on the website before they login.

Screen Shot 2015-03-10 at 21.38.38Now when users press the login button they will be direct to the original homepage where they can post their finds to their heart’s content. At the moment this only works as the login button is essentially separate from the form. When we connect the form to the database and enable users to register they will be able to login and post for real.

Screen Shot 2015-03-10 at 21.29.07The image below shows the Social Media drop down menu. It is now fully functional and users will be taken to the actual site.

Screen Shot 2015-03-10 at 21.29.16I have also created the register page. From hear users will be able to create accounts and eventually post on the website. My idea of having a live feed on pages such as these will have to wait, as getting the PHP correct is essential. Enabling users to resister, sign in and out and post on the website is the next step and the one that will take the longest.

Screen Shot 2015-03-10 at 21.28.24

Design for Digital Media Environments – Web 2.0

When speaking to Rob he pointed out that I need to look further into the critical analysis of the broader issues related to user-generated content. He pointed me the direction of web 2.0 or to put in another way RW web (read-write) opposed to the older RO (read only) web. Web 2.0 is the next-gen of the world-wide web. Being a step up Web 2.0 is giving users the ability to collaborate and share information online.

web20The image above is good example of the difference between web 1.0 (read-only web) and web 2.0 (read- write web). In a way the two are what they say on tin. Read-only only enables user to read published content with only a very small amount of user-generated content. When it comes to read-write web there is far more of a connection between the producer of the website and the consumer. With sites like Facebook and Twitter being a great example, without the user the is simply no content on the website.

One of the well-known names in this field is Lawrence Lessig. Lessig is best known for being the founder of Creative Commons, something I have touched upon in earlier posts. In the YouTube video above Lessig talks about user-generated content. One of the points that stuck out to me was, “Culture where creativity was consumed but the consumer is not a creator”. This quote is a great way portraying the advances from web 1.0 to web 2.0. Its suggests how the older web 1.0 only enable users to only view the content but never be the creator of new content. 

Web 2.0 Pros and Cons

Pros

– Everyone has the chance to post opinions not matter who you are.

– You have the ability to connect to more people, make more friends and contacts.

– Advertisement can be taken to another medium. Businesses, products and services can be seen by more people all over the world.

Cons

– Increased number of frauds and hackers.

– Such a high level of information means the quality of content will possibly drop.

References:

Pw12010.wikispaces.com,. ‘Pw12010 – Wiki- Web 1.0 Vs Web 2.0’. Web. Accessed from: http://pw12010.wikispaces.com/Wiki-+Web+1.0+vs+Web+2.0 9 Mar. 2015.

 YouTube,. ‘Larry Lessig: Laws That Choke Creativity’. N.p., 2007. Accessed from: https://www.youtube.com/watch?v=7Q25-S7jzgs Web. 9 Mar. 2015.

Design for Digital Media Environments – Homepage Draft 1

As I’ve created some sketches of possible webpage designs, I thought it would be best to get straight into coding the real designs. As I’ve put most thought into the homepage I started this first. Just as Adam did with the ‘Meet The Team’ page I also used Bootstrap. Bootstrap is a far easier and more time efficient way of coding as it provides you with all the css. For instance to get the nav bar all I had to write was “<nav class=”navbar navbar-inverse navbar-static-top”>”. This short code gave me a default nav bar, it may not look amazing, but it works and that’s what counts.  Screen Shot 2015-03-05 at 20.36.06I did however have to make a few amendments to the original sketches. The nav bar for example is now place at the top and for two reasons. The first being its the default positioning in Bootstrap and the second being the fact its more widely used design technique. This design I’ve created is far more completion but gives us a solid starting point to work from. In the next few days I will attempt to create pages for the categories and other aspects of website.

Design for Digital Media Environments – Website Page Designs

As I stated in a previous post I was going to produce sketches of some potential webpages that our website will have. To start with I created some very simple designs. Designs on the left hand side are inspired from websites such as Apple.

IMG_0036

Keeping all boxes centralised and in block form helps created an organised, easy to read and professional style. The only problem being that it’s not the most user-friendly design. For instance, if you wish to access the categories you have to scroll to the bottom of the page.

Designs on the left hand side come from more generic and user-friendly styled websites. Everything the user needs to see is directly in front of them, meaning finding their way around the website becomes far easier. An aspect such as the nav bar will include drop down boxes to further enhance the user’s experience.

IMG_0035One idea that I became fond of during the sketches was the idea of having a live feed in the contacts page. A normally boring page will become far more interesting and also create a continuity throughout the website as other pages will also have live feeds. It is also useful for the user as they will always be in touch with what the website is meant to offer them.

IMG_0034In my final sketch I decided to go a little more in detail. I’ve add certain aspect such as a form in the banner and also adding access to social media. This sketch is also trying to merge the two designs I’ve done earlier. As you can see it keeps its block form but also has the categories in an easy to access position, meaning you keep the style and functionality.

IMG_0037

 

Design for Digital Media Environments – Meet the Team Page

As you can see from the image below Adam has very nearly completed the ‘Meet the Team’ page. Adam used Bootstrap to create the webpage, this being a far easier coding method than writing all our code from scratch. The ‘Meet the Team’ page also shows how our research led to the final design as we did indeed use one of the sketches. 11025405_10203905932713893_1414707226_oWhen it comes to the design of the page we will try to stick with this theme throughout the whole website as it will create a more professional look. The final step in completing the page will be adding the team image and possibly some team roles. Next up is creating the website, I will post some sketches of possible webpages that we will need.

11028433_10203931629476296_2058552503_o