CSS Box Model

BOX MODEL

The CSS box model consists of 4 elements:

  1. Content
  2. Padding
  3. Borders
  4. Margins

It allows you to add a border around HTML elements and to define spaces between them.

Content – Inside this is where text and images appear

Padding – Padding is transparent, but clears an area around the content

Border – The border goes around the padding and content

Margin – This clears an area outside the border which is also transparent just like padding is

 

Advertisements

Meet the team

The first task that Elliot and I were set was to make a “Meet The Team” page for Yumi. From the wireframes I produced El took it a step further by developing the final design with colour, images and graphics. You can find the desktop and mobile version below:

Desktop:

Screen Shot 2015-04-19 at 20.13.25

Mobile:

Screen Shot 2015-04-19 at 20.14.01


 

As this project has proceeded we agreed that it will be a good plan of action if we commented on the code so that we don’t get confused by each other’s line of coding. By stamping each comment with the first initial of either Mine or El’s fist name we suggested this will be a good idea to distinguish who wrote what. For example:

  • <!– S: Seb’s HTML comment –>
  • /* S: Seb’s comment */
  • // S: Seb’s PHP comment
  • // S: Seb’s Javascript comment

The final result of the Meet The Team Page is this. As you can see it’s responsive:

Yumi Yumi

Finished & Produced Wireframes

Below are the final wireframes I have now produced, for both desktop and mobile devices, in Adobe Fireworks:

MOBILE:

Mobile Screen Shot about creators
About the creators | Mobile Wireframe
Mobile Screen Shot about us
About us | Mobile Wireframe
Mobile Screen Shot logged in
Logged in | Mobile Wireframe
Mobile Screen Shot logged out
Logged out | Mobile Wireframe
Mobile Screen Shot on click
On click | Mobile Wireframe
Mobile Screen Shot register
Register | Mobile Wireframe

DEKSTOP:

Desktop Screen Shot About Creators
About creators | Desktop Wireframe
Desktop Screen Shot About us
About us | Desktop Wireframe
Desktop Screen Shot logged in
Logged in | Desktop Wireframe
Desktop Screen Shot logged out
Logged out | Desktop Wireframe
Desktop Screen Shot on click
On click | Desktop Wireframe
Desktop Screen Shot register
Register | Desktop Wireframe

 

Group Wiki

Dokuwiki
El & Seb’s Group Wiki | http://dakar.bournemouth.ac.uk/~elangley/wiki/dokuwiki/doku.php

El and I have set up a Dokuwiki page on El’s server to showcase our working progress together. We agreed that everything should be hosted on his space including the web application Yumi itself. Any information that we think is necessary towards our development of Yumi will go on there. This will include:

  • Links to our individual blog URLs (wordpress)
  • Links individual blogs (PDF format)
  • Link to our source code
  • Link to our web application
  • A posting system
  • Weekly meetings

We have already started using this and it really makes an impact on our development as we are able to recap over our planning, have a good work flow and an up to date record of our meetings and such. If you are on Bournemouth University’s campus you can view our progress just by clicking this link here. If you are not I’m afraid you won’t be able to access the servers as they are restricted to the university’s network.

Database Development

Developing a system where users are able to register, log in and submit their recipe’s a database is needed. Relevant rows need to be in a table and there can be more than one. In some cases tables may pull data from others depending on the data that is being stored.

Using software called ‘phpMyAdmin’ you are able to install the SQL database to a server. If you are interested in setting one up click this link and follow the instructions.

This only works for Mac’s but you can download an app called ‘Sequel Pro’ that allows you to interact with the GUI (graphic user interface) of the SQL databases. You are able to do everything phpMyAdmin does, but in a much richer UI (user interface) experience. If you are interested in that as well you can download it here.

 

database user
Design structure for user’s info in the table ‘users’

Each row has been designed with the correct data types:

  • INT – Used for the id for each user (Primary Key)
  • VARCHAR – Each row with this data type can carry any character (numbers, letters and symbols)

 

database user content
The ‘users’ table in content form

There are six columns of information:

  • id
  • username
  • password
  • first name
  • last name
  • email

This table will be able to be linked up to using PHP forms and coding communications. The only fields that will be required to sign-in are the username and password.

 

database posts
Design structure for post info in ‘posts’ table

The ‘post’ table is going to need to be refine-able in the search options of Yumi. Again, each row has been designed with the correct data types:

  • INT – Used for the id for each user (Primary Key)
  • VARCHAR – Each row with this data type can carry any character (numbers, letters and symbols)
  • Length – Certain fields have limited characters so the web app is more controlled when displaying relevant data

 

database posts content
The ‘posts’ table in content form

There are eight rows of information:

  • id
  • name
  • description
  • direction
  • ingredient
  • time
  • level
  • course

Wireframe Sketches

Wireframe_Sketch_DesignNo1_screenshot
Design No.1

This is a rough copy of a wireframe, a sketch that I did. As you can see I have incorporated a “sorting” option which I found in my research to be fairly standard practise. Here the sorting options will be by:

  • Country
  • New/Old
  • Popularity
Wireframe_Sketch_DesignNo2_screenshot
Design No.2

This is another I did, this time the navigation bar is on the left. I noticed that a lot of navigation bars are on the top. Why can’t they be off to the side? So I decided to sketch it and to discuss it with Elliot to see his views on it. I feel if we go ahead with this it will make our web app different from the others and stand out. The sign up/register button is also in the left of the header where the logo was in the first one and the logo in this one will be more central and prominent. There will only be three recipes that non-members will be able to view and they will be Yumi’s official recipes. Non-members will not be able to share, like or comment on them either, just view. This will give them a taste for what Yumi is like and encourage them to sign up for FREE!

Wireframe_Sketch_Design_Onclick_screenshot
Design On_Click

This is a wireframe I sketched for clicking on a recipe card. The recipe’s images will take up most of the screen as this design will be mostly visual. The recipe cards all will have a series of images (the number will depend on how many images the user uploads) where you can scroll left or right like a slideshow. The images will show a step-by-step series of images as we’d want the user to follow the guidelines easily with no struggle.

 

Mock up of database

Database_Note2

This is a rough mock up that Elliot and I drew during one of our meetings. We agreed our database having two tables.

  1. Posts:
    “Id”, “name”, “description”, “direction”, “ingredient”, “time”, “level” and “course” – We want our database to store information from recipe cards that users upload.
  2. Users: 
    “Id”, “username”, “password”, “firstname”, “lastname” and “email” – We also need a database to store information about our users.