Final Product and Reflection

Final Product Video:

This project was very challenging and fun and now that it’s all drawing to a close I can take the time to sit down and reflect on the things that I learned. It’s been a very quick two – three months and I believe that if we hadn’t rushed things we could’ve made something even more amazing, we could’ve had more time to comment all the code and fix any errors. I now understand the important of Git Hub and how useful it could have been to us if we kept on using it all the way, all the time wasted trying to figure out which version was the most up to date one.

In general a lot of things could have gone better but out of all the things that went bad there were also some great things, accidents happened that led to new discoveries and in turn new solutions, I now know the difference between back-end and front-end work and why they’re different. I’d would say we all came out of this with a solid understanding of what all of this terms mean as well as what they do.

Github

For this project every group was meant to use GitHub as part of their workflow, this obviously meant having to learn git which I did on this site:

trygithub.io

I did however struggle to completely incorporate git into my workflow, and finally into GitHub. I personally used the git bash client for windows and managed to make a repository and upload the early stages of our project folder and ultimately code:

https://github.com/SoulAbe/Team-GASC

git-hub

Unfortunately this is all I could do, when trying to log in from uni or anyplace with internet. The Git client wouldn’t let me login at all not me or my team-mates.

Net Neutrality

Net neutrality is the principle that protects people’s rights to communicate online openly and freely, Net neutrality = open internet for everyone, it means free speech and no censorship by ISPs. cable and Phone companies could easily monopolise the system by making specific networks faster and slower thereby forcing people to change to their services.

It all started on 2010 when the FCC designed a treaty that ensured that the internet would remain a level playing field for all. This rule and the people that stood up for it got a bit shaken by a recent (may 2014) release of a hidden plan that would have allowed some cable and ISPs in america to discriminate and pay-to-play fast lanes. It all however got refused by people that fought back hard and on Feb 2015, Tom Wheeler (FCC Chairman) announced a new Net Neutrality treaty based on the communications act that would give users the best protection up to date. This proposal got approved on the 26th of Feb 2015.

Explaining Interconnectivity

Before this project started I didn’t have much experience with html 5 or php so things as simple as linking webpages together or linking the JS files and CSS files with the Jquery libraries was a mystery to me, however this all changed and I feel pretty confident about doing it myself now.

Here’s the code we are currently using to link our webpages together:

<!DOCTYPE html>
<html lang="en">   
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/css/style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
    <script src="../public/js/bootstrap.js"></script>
    <title>About</title>    
</head>

And this is what we are using to connect the nav links, forms and other toggling content:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li ><a href="index.php">Discover </a></li>
            <li class="active"><a href="about.php">About Us<span class="sr-only">(current)</span></a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
             <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Account <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="../public/settings.php">Settings</a></li>
            <li><a href="../public/upload.php">Upload</a></li>
            <li><a href="../public/profile.php">Profile</a></li>
            <li class="divider"></li>
            <li><a href="../includes/logout.php">Log Out</a></li>
          </ul>
        </li>
            </div>

Sketches and Wireframes – Using Bootstrap

Here’s some pictures of the planning of the wire-frames and using bootstrap to accomplish this Ideas:

unnamed

We wanted to have a search bar inside the fixed top navbar. We also wanted an auto updated cascade of pictures coming into the index page every 30 seconds like show on example 1 and we also wanted a carousel for the main page.

Wireframe

I went on to illustrator to further perfect this design.

bootstrap-navbar-default

This is the navbar template we used for our app, we tweaked it slightly and added a few things here and there but most of it was already pre-done. Here’s the code:


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

This is our version of the bar already tweaked and perfected to fit our site:

baffled-navbar-set

Addressing Needs

After deciding on which target audience to explore we then had to look at the problems and needs we’d be facing, things like having a website that would work under different screen sizes as well as different browsers was a challenge but then we later found out that all of this could be achieved using the bootstrap CSS classes that work like columns that adjust to the browsers size as well as the screen size:

columns-preview-bootstrap

Click on this image for full ‘Scaffolding’ documentation.

Everything readjusts and falls into the right place no matter how big or small the browser/device is. This includes everything, from the body elements to the navigation elements, everything:

scaffolding-preview-max-width scaffolding-preview-min-width scaffolding-preview-min-width-with-nav

Thank the heavens for bootstrap and the people that made it!. With this issues out of the way we then moved on to other things.

We were aiming our product at students also so the styling of the website had to be fresh and modern, luckily bootstrap has some nice buttons, search bars, drop-down menus and colour palettes (colours on premade nav-bars) so to an extent that was covered too.

Target Audience and Similar Applications

The target audience for our web app will be students and more specifically graduates or any person starting out in the field of Digital Media Design. As a group we thought about which applications are used the most for project sharing as well as image sharing and we determined that we’d follow a few of their design principles and some traits of their aesthetics, we looked at different front-end development frameworks and decided that we’d use Bootstrap as it was the most documented and popular which meant wider access to tutorials and learning resources online :

Bootstrap-Preview

We however also looked at Kickstart, It’s libraries are smaller than bootstrap’s and page loading times are faster due to the absence of any Jquery. It’s also open source and Resposive:

Kickstart-Preview

After deciding on which Front-end framework to use we then had to look for inspiration by looking at similar sites and deciding what makes people click when they browse them, so we did that we looked at Behance and Pinterest and determined that it was a combination of things, amongst these were the choice to choose what to look at by selecting specific categories and boxes, they also had the big canvas of images live-feeding into the site every thirty seconds and a bunch of fancy animation hover effects as well as fade away effects. Branding also played a big role and so did the colours and the icons.

Behance-Preview

Behance is very complex and in-depth with a lot of detail and fulfils their criteria for their target audience.

pinterest-preview

Pinterest is very intuitive and simple and works much like a post it note on a fridge door. Serves as a reminder whilst also managing to fulfil a second purpose as inspiration for those people that are involved in crafts such as graphic design and interior design.

Identifying and Conceptualising social needs

After much thinking and research our group finally came up with some possible concepts for our much needed app, we discussed things like equality on social apps and hierarchy as well as different audiences and what made these people like the sites they browsed everyday.

We agreed that we needed something, not necessarily new or breathtaking but rather something that could really help a specific group of people achieve a specific goal, that’s when we came up with the Idea of Baffled. It’s not only meant to be a site where everyone can share their projects but rather a site where students and only students can upload and share with the world their most precious projects. This gives graduates and mature students a fair chance to compete with other like-minded peers of a similar skill level for a chance to get a much needed job and a kickstart for their careers. Employers would pay us (Baffled) for advertisements and students wouldn’t ever have to spend a penny on monthly subscriptions or annoying startup costs.

Sites like behance are already very popular as they execute this concept very well and they tick most of the boxes, however there is just too much competition and all the expert’s work gets all the spotlight which means that new people entering the field or graphic design graudates etc never get noticed because they’re either new or not as good which then in turn means that they will very unlikely get the job over the expert/veteran/senior.

With all this in mind there were still other things that needed to be discussed, things like how the site would look like and what features it would have as well as how long this would all take to make. All these things were important, next week our group is meeting up again to decide for sure which target audience we’ll follow and why.