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.

Advertisements

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