Design for Digital Media Environments – Website Development 2

Ever since our work on the “About“/”Meet the Team” page, my team and I have been working together in coding and designing the other main pages for our website. The other important pages that we’ve been working on include the following: the “Welcome“, “Home” and “Register” pages.

Our website now has a page that welcomes users to SOBU. The main purpose of this page is to quickly introduce the users to our website and what it does. Our users can then navigate to the main homepage with the button labelled “Enter SOBU”.

On our homepage, we have basic fields with blue headers to display available student deals and discounts. As we carry on with the project, the fields will be modified so that students can log in, create and post offers of their own. This section of our homepage will act as a live feed which will be populated with student offers and deals for the following categories:

  • Food
  • Night Clubs
  • Clothes
  • Gyms
  • Electronics

Our project also currently has a registration page in which users can create accounts and log into our website. We’re also thinking of having a login page that will have a similar appearance to the register page. We’re currently unsure of our design for the register page and so we’ll all be providing ideas and code to make the design less blocky and more visually appealing for our users.

From here on, we’re going to upload all our source code to the dakar server so that we’ll be able to access our webpages online. We will also be working on key elements such as the responsiveness, functionality and presentation of our group project.

Screen Shot 2015-03-16 at 10.10.48

Welcome page

Screen Shot 2015-03-16 at 10.11.01

Our homepage with the category “Gyms” selected on the right.

Screen Shot 2015-03-16 at 10.11.02

If you look at the file URL at the top of the screenshot, you can see that the “Gyms” page has been loaded.

Screen Shot 2015-03-16 at 10.11.07

Our current register page.




Advertisements

jQuery Workshop – Interactive functions

Today we were introduced to jQuery, a multi-platform code library built in JavaScript. jQuery is used primarily to make the scripting of clients in HTML less complex. The first thing we were taught to do was how to make interactive buttons that changed colour on interaction from the user. The way in which I did this way felt somewhat similar to HTML, but I felt that the addition of jQuery helped produce some more visually appealing results during this test.

Screen Shot 2015-03-18 at 09.45.30

Only two folders are required: css and script

As seen below, we had to go to code.jquery.com and obtain the code ourselves and then put it all into a separate file called “jquery.js”. This JavaScript file is used to enable jQuery to work on our HTML and CSS files. The following screenshots show the step-by-step development of my test webpage. Screen Shot 2015-03-18 at 09.48.57 Screen Shot 2015-03-18 at 09.49.10 Screen Shot 2015-03-18 at 09.53.32 Screen Shot 2015-03-18 at 09.53.51 Screen Shot 2015-03-18 at 09.54.42 Screen Shot 2015-03-18 at 10.07.29 Screen Shot 2015-03-18 at 10.24.15 Screen Shot 2015-03-18 at 10.24.19 Screen Shot 2015-03-18 at 10.24.20 Screen Shot 2015-03-18 at 10.27.41 Screen Shot 2015-03-18 at 10.29.59 Screen Shot 2015-03-18 at 10.31.43 Screen Shot 2015-03-18 at 10.32.23 Screen Shot 2015-03-18 at 10.33.49 Screen Shot 2015-03-18 at 10.34.33 Screen Shot 2015-03-18 at 10.36.41 Screen Shot 2015-03-18 at 10.36.51 Screen Shot 2015-03-18 at 10.36.55

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 – phpMyAdmin 1

One of my teammates, Adam, used phpMyAdmin (a free, open-source tool written in PHP) to make a table linked to our database, which will keep a record of the users’ posts on our website. The database will be very helpful to the development of our website as it will enable to effectively store input from our users in a more efficient, orderly way. This form of user-generated content will also be able to present more detail and information (e.g. offer type and star rating). We will now need to link and integrate our database with the website, making sure it works properly before doing anything else.

11065322_10203985405700668_1604484711_o

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 – Logo Development 3

After reviewing the visual style and elements we will be using for the website, my team decided that the logo we are going for will be closer to my original sketch (see Logo Development 1). This was because we wanted a design that was simpler and consistent with the aesthetics of the rest of our website.

As shown below, I scanned an image of one of my sketches, and then used Inkscape to digitally enhance the shape in finer detail. Next, I experimented with different colour schemes that could fit in with the rest of the website. All of my current trials with the logo can be seen within all of these images in this post.

a b c d e f g h i j k l

Workshop Coding Notes – Creating a Login Form

During one of our recent workshop sessions, Kyle helped our group revise the PHP code required to make a functional login form for our website. Naturally, a system for creating user accounts and signing in is of huge importance to our group project, as the website will depend on registered users to post and provide their own content. My team will also need to make admin accounts in order to sign in and manage the website.

Pictured below are examples of a blank login form (top), as well as a login form that has just been interacted with by a user. Displayed underneath this image are screenshots of the code needed to create these forms.

ab

c dAs the above screenshots show, the following three PHP files needed modifying before the login and account registry systems on our website could be properly organised:

  • register.php
  • index.php
  • logout.php

Two of the new functions that I needed to work on were “session_destroy” and “require_once”. Learning this PHP code and how to properly use it in any online group project will prove to be very useful for not only our project but also future career prospects.

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:

Design for Digital Media Environments – Logo Development 2

During the course of the week, I have been working on and developing some of the main visual elements of our group website. As shown below, I have been using Inkscape to digitally enhance the logo sketch that my group and I found most suitable for the project. This creative design process of designing our first logo draft involved using vector graphics and the visual design tools available in Inkscape.

I used the circle/ellipse/arc tool to draw a circle in which our logo text will be displayed. I then used the pen tool to draw a single triangle to go around the circular shape of our logo. I duplicated the triangle and slightly rotated it several times, in order to create a jagged, ribbon-like border around our logo. The simple handwritten style of “SOBU” has been taken directly from a scanned page of my sketchbook, as illustrated in the screenshots below.

Screen Shot 2015-03-01 at 21.22.34 Screen Shot 2015-03-01 at 21.22.35 Screen Shot 2015-03-01 at 21.22.38 Screen Shot 2015-03-01 at 21.49.40 Screen Shot 2015-03-01 at 21.51.56 Screen Shot 2015-03-06 at 10.02.58 Screen Shot 2015-03-06 at 10.05.50 Screen Shot 2015-03-06 at 10.12.30 Screen Shot 2015-03-06 at 10.14.34 Screen Shot 2015-03-06 at 10.16.19 Screen Shot 2015-03-06 at 10.19.56 Screen Shot 2015-03-08 at 20.56.41 Screen Shot 2015-03-08 at 21.05.28 Screen Shot 2015-03-08 at 21.05.36 Screen Shot 2015-03-08 at 21.05.54 Screen Shot 2015-03-08 at 21.06.05 Screen Shot 2015-03-08 at 21.06.49 Screen Shot 2015-03-08 at 21.07.58 Screen Shot 2015-03-08 at 21.10.42 Screen Shot 2015-03-08 at 21.12.50 Screen Shot 2015-03-08 at 21.12.55 Screen Shot 2015-03-08 at 21.15.21