USING THE WIKI

As a group we’ve been using the wiki that we set up to show the development of our work, and to explain the roles of each group member. It’s basically a joint blog that we can edit and add to.

Here is a screenshot of the first wiki we created together explaining the structure of the wiki:
Screen Shot 2015-04-17 at 15.45.48

And here is the screenshot of the preview of the wiki:

Screen Shot 2015-04-17 at 15.45.42

Advertisements

Using Bootstrap for the ‘About Us’ php page

We have been set the task to create a ‘Meet the team’ or ‘About Us’ page that includes an description of each group member and myself. Along with an explanation of the website we have agreed as a group to make. In a workshop with our workshop teacher Kyle, he suggested to use a website called Bootstrap.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap essentially provides you with a template to build a functioning website, by downloading the source code (Source Less, JavaScript, and font files, along with our docs), download bootstrap (Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included).

Screen Shot 2015-03-23 at 01.41.15 Screen Shot 2015-03-23 at 02.19.28

For the ‘About Us’ webpage, we decided to use the ‘jumbotron’ template as it has a clear navigation and a user friendly approach. As seen below:

Screen Shot 2015-03-23 at 02.24.24

From here, I┬áplaced all the downloaded bootstrap files into the local host/public/includes/css folder then opened it in brackets ( A modern, open source text editor). I then experimented and edited the code to suit the requirements of our webpage. I haven’t targeted my focus directly to the CSS and design of the webpage, as my other group members are more keen to design the website.

For the ‘About Us’ webpage I included 3 images using an id as they all include the same design requirements and made a few adjustments to the css of the page so it wasn’t an exact replica of the bootstrap template. Below is the result:

Screen Shot 2015-04-14 at 18.17.05

References:

Getbootsrap.com, 2015. Getting started. Available from: http://getbootstrap.com/getting-started/#examples [Accessed:27/02/2015]

Getbootsrap.com, 2015. Bootstrap. Available from: http://getbootstrap.com/ [Accessed:27/02/2015]

WIREFRAME OF ABOUT US PAGE & SITEMAP

We were asked to do sketches of the about us page that I will be creating. Therefore, Callum and I sketched out the following wireframes of the about us page. Each sketch of the page included:

  • TITLE/LOGO
  • NAV BAR
  • IMAGES OF GROUP MEMBERS
  • BIOGRAPHY OF GROUP MEMBERS
  • LOG IN BUTTON
  • SIGN UP BUTTON
  • LOG OUT BUTTON
  • LINKS TO SOCIAL MEDIA SITES
  • FOOTER
  • HEADER

The sketches our below:

FullSizeRender-2

FullSizeRender-3

FullSizeRender-1We also sketched the sitemap of how the website would navigate for a logged in user and logged out user, the sketch is below:

FullSizeRender-4