This is the progression of the “About the team” page that will be displayed on our website.  I used Bootstrap to help with the CSS. I have added a short paragraph about myself, and will add information about my group members shortly. We also will have a group picture that will be displayed on the page. 

Here is the code so far for this page:

<!doctype html>

<html>

   <head>
       <title> Meet the Team </title>
       <link rel=“stylesheet” href=“css/bootstrap.css”>
       <link rel=“stylesheet” href= “styles.css”>
   </head>

       <body>
           <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=“#”>SOBU</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>
           <div class=“jumbotron text-center”>
           <h1>Meet the team. </h1>
              </div>
       <div class=“container”>
           <div class=“row”>
               <div class=“col-lg-4”>
       <h2> Adam Hale</h2>
           <img src= “https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10985274_10203779385430290_7669110639618425300_n.jpg?oh=aebec59d2ccadb5924b879633f4fd709&oe=555402A1&__gda__=1435135940_e164b5a28f90e31f7b6a47d562877705&rdquo;  class=“img-responsive”/>
       <p>Hi, my name is Adam Hale. I’m 18 and from Oxford. I am passionate about Social media, music and film. </p>  
               </div>
       <div class=“col-lg-4”>
           <h2> Hallam Ager</h2>
           <img src=“https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10574274_10203109790842816_6906926752620006251_n.jpg?oh=f35ff3c69409fd1f2a0ff37397f7e3a6&oe=5585F929 ”  class=“img-responsive”/>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
               </div>
               <div class=“col-lg-4”>
           <h2> Robin Osolinski</h2>
           <img src=“https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10615444_1067959073217975_1984160959799188718_n.jpg?oh=83b0d9a477cf7f9e7ee1446e9e1d4f33&oe=5595956D&__gda__=1431088722_f62546ca2f85f08ce57ccb7f8ff316ba&rdquo; class=“img-responsive”/>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
               </div>
       </div>
   <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js”></script&gt;
   </body>

</html>

A system for my weblog

I have been asked to develop a system for weblog. Having a system in place for my weblog will benefit both myself and other visitors for my site as finding the desired content would be easier and will look visually more professional because it will be less cluttered. 

Tagging

Tagging has been and will continute to be a big way that I organise my blog. Tumblr lets me add tags to each post and I have been tagging each post according to it’s unit title. So, for example, I have been tagging posts in this particular unit with “#Design for Digtal Media Design”. What I then do is add a new page on my nav bar, with each new page named after each unit. Then, when a visior clicks on a unit title in the nav bar, it takes them to a page with all posts with that tag, with the newest at the top of the page.

Moving forward I think I shall need to organise my posts in more detail. For example, tagging posts depending on what stage of the project I am at, such as research or the final product.I would then create a new page that shows all my research

I am also considering moving my blog over from Tumblr to WordPress. This is because what I have been told by peers and my lectures, it is easier to organise posts through WordPress as not only does it offer tagging, but also offers a category system. This would make it easier, as I wouldn’t have to manually create a page to see all the posts under a certain project as I have to do now with Tumblr.

Using HTML

I have been advised to start write my future in html, rather then the rich text editor included within Tumblr. I have started doing that with this post. This allows me more freedom with the content, rather than the stardard Tumblr formatting.This will also help me develop my HTML skills as I will be using it on a more regular basis.

Page and post Layout

In the seminar, it was explained that it was best to have the content of the page centred on the webpage to make it easier to follow for the visitors to my weblog. The benefit of Tumblr is that the layout will automatically setup for me so that it always centres the content on the page.

Posting Regularly

Its been advised that we post to the blog on a regular basis and document things such as initial thoughts, sketches, brainstorms and anything relevant to the project. What I plan on doing is posting short updates but lots of them regularly. This way it will be easy to track what is happening with each project as they will be easy to read.

Images

With images, I need to ensure they are of good quality, especially with hand drawn images such as brainstorms and sketches. In the future I will use university scanners to scan in hand drawn images, as previously I have used my smarphone camera to capture the drawings, which hasn’t been the best quality

Branding Discussions

We have been brainstorming about what to name the website. We came up with the name “SOBU” – standing for Student Offers for Bournemouth University, similar to that of SUBU, the students union of the university. We thought we could tie in it with the union. We looked at their existing logo and our current thought is that we could design a logo similar to it. 

As part of our brainstorming session, I was given the role of transforming our hand drawn ideas about the layout into digital images. I used Inkscape to do this, which is a free vector graphics package. We will decide on a final layout for the page in a meeting in the near future. 

We brainstormed in our group meeting about branding and the gerenal aesthetic of the website. 

We came up with the idea of branding it similarly to an exising website that students in the local area use regularly, the Student Union of Bournemouth University. We want to have the design similar so that students will instantly recogniseable because it would provide continuity between the sites, as they are both aimed at Bournemouth University students. 

In our group meeting, we decided to brainstorm about what the “About the team” page will look like. To do this we drew a few page layouts which can be seen above.  We decided to keep it relatively simple. At the moment, we currently havent selected one particular layout to go with, that will be decided in the near future. I plan digitally draw out these layouts using Inkscape. 

Group Meeting – our concept.

I have met up with my group and discussed about the project. After brainstorming, we came up with an idea based around student living whilst at university.

The website will be the go to place to find student offers and reviews about local businesses around Bournemouth. These includes food places, clubs and leisure facilities.

Users wil be able to login to the site and post about a business, catagorise it and then write a review about it.

For example, a student notices a local take-away running a student deal, they can then login to the site and add the business to the site for other students to see. This benefits both the student as they can get good value, but also benfits the business too, as they would essentially get free advertising.

I think personally this would be a great tool, and one that I would use, as I know first hand, as a student its difficult to find all the cheap deals in one place. I think it would help particualry first year students who are not familiar with the area.

I think that as a concept, it is a really good one, because if successfull, it could be expanded and locasised to other areas of the country and other universities.