Creating Biteable Application

Screen Shot 2017-09-21 at 16.31.12

This is an application that is designed for users of particular dietary needs in their everyday life. This application will have the user know if the food they are looking to eat contains any ingredients they shouldn’t be eating. This application will be handy and convenient for the user when they are shopping. The user would just simply open the application and click the camera icon and then they are able to scan the barcode of the product. This will then say if the product is Vegetarian, Vegan, Contains Nuts, Contains Dairy, Contains Seafood, or even contains Gluten. This will help the user see if they are able to have the product and not have to stress about reading all the fine print of ingredients. This also can be useful for users that need to buy food for other people of these dietary needs and don’t know where to look or what to look for. There will also be an advisory notice while loading the application to explain that some products may contain traces because they are made in a factory that contains the products they are trying to avoid.

 

Screen Shot 2017-09-21 at 16.31.28

Development in my application soon started and errors were turning up everywhere. I started with my homepage, first just creating a simple look while I worked on the functionality of the application. My first step was to get the functionality of the camera working. I started with making a button to click so that the user is able to access a barcode reader. I feel the barcode scanning part of my application is the main part and needs to be functioning for my application to work. Upon tapping the camera button, this will take you to the scanning page of the application. When on this page you are able to scan ant barcode you wish and the application then retrieves that number back to you on the homepage.

 

Screen Shot 2017-09-21 at 16.40.16

I then Created my Database and added in different items of food and drink along with all the data needed for the application. I inputted this data manually by researching what each item meet different dietary requirements by using 1 if it’s true and 0 if it is false. Then for each Item, I had to create my own vectors so that they would look nice within the application. Now when a user scans an Item they will receive an item of the item as well as the data they wanted

Screen Shot 2017-09-21 at 16.32.43

I then had to link the application up with the database so that number you receive after scanning a barcode does something. Now the application looks to see if that number is in the database and feeds it back to the user. I then worked on making the application more applying for the user to look at when they are using it. I started to match the designs on how I originally intended the application to look. I added the darker grey boxes and the images but still had minor errors with how the application was displaying the data.

Screen Shot 2017-09-21 at 16.32.27

Finally, after working everything out I finally came to an application I was happy with. You are greeted by the Biteable homepage with a Camera button to use the scanner. Upon scanning your item you receive back the barcode number, If this is a mistake you can go and rescan or if it’s correct you are able to search for your results. When this button is tapped you can see the vector of the product along with the name and dietary requirements of the product to see if the user is able to eat the scanned item. Overall this was a fantastic project to work on and I am happy with the results.

Screen Shot 2017-09-21 at 16.33.04

Advertisements

My Portfolio Website

So do you remember not so long ago I was making a personal Webpage too show who I am to employers and what I can do? Well, I basically scrapped the idea… Lots of times! I finally Finished a design and now have it online @ christinasabine.com

Screen Shot 2016-04-13 at 21.23.34

Just above you can see the final homepage of my website. This is a parallax website so you are able to view the site by scrolling downwards. So on the homepage, I set a nice photo of mine at first and typed my name on top with a shadow to stand out. I went through a few different photos and finally ended with this one and the horizon with the sea nicely lines up with my name and it looks cute and also has me included in the image so it makes the page look more personal.

As you scroll down you come across a number of pages such as Welcome, About me and What I do. This is to give the user all the information they may need to know about myself and also gives the user an idea of who I am, More so than what a CV could ever do. This website is covered in photos I have taken from my recent trip to Japan and other countries I have been to over the years. Also, I have added in some cute photos of myself alongside the text boxes describing me.

Right at the end I added ‘The End’ page with cute feet to leave you with. But I came to hate the idea as the web page isn’t a book and it don’t have to have an ending but more importantly I wanted potential employers to end on seeing my contact details after seeing what an amazing person I am. Using the same image didn’t fit so I used one with Beach huts as it symbolizes homes and contacts are homely. I only had written information on the page but soon changed this by adding in links to take me to my blog, Github, and Linkedin. After getting these to work I then got them to lick to a CV of mine in case they need it. However, I ended up going further and making a download button for my CVs so employers we have it loaded on their desktops straight away.

Screen Shot 2016-04-13 at 19.54.23

I then took out the useless View CV buttons and added Download CVs. I then made the page go live for the world to see and look pretty. After getting it online being so happy I told my mates and they ended up finding spelling mistakes and links not working as well as photos. I then fixed the little bugs and boom it’s all amazing again. However, I do hope to improve the page as time goes on and It will always be better then the old one before that.

 

Finally getting my page online has made me happy and im glad i have achived this

Redesigning my E-Portflio

After some thought, I scrapped my other website Idea for something that will look a lot nicer than the previous web page. I then scrapped the whole idea and started again. I stuck to the parallax idea but this time, it scrolls downwards.

Here is my homepage. I have a nice photo of me overlooking the sea into the distance at Bournemouth Beach. This makes a good welcome page as I like the way my name floats over the horizon. Also, I am included in the photo so you the page have more of a personal touch. However, this means its the only photo I have used on my site that isn’t my own photo.

Screen Shot 2016-04-10 at 21.01.16

As you scroll down the page you will come across lots information about myself and who I am and what I like doing along with images I have taken myself from around the world from places I have traveled too.

Screen Shot 2016-04-11 at 11.57.03

Then finally you have the last page. This page don’t have a lot going for it and I’m unsure if I will keep it but I like the fact that it ends with a nice image of shoes as I sat on the beach. But after I do some more work on the page and add more information into it then I’ll see if there is any point in keeping this page. I could add the contact page here instead but I will see what works best by Trail and Error.

Screen Shot 2016-04-11 at 11.57.25

Swift #7

Yesterdays session we carried on with more Swift due to many of us handing in projects and not many people included cocopods. For this session we looked into more ways how to use cocopods and how it can be useful. we started by adding cocopods on the desktop thought the terminal. We then set up the project and made the code for making an app with a grid of names of people who has made posts. these posts were read from a page holding all the information where it was collected by using cocopods. this was quite interesting and made me wish i added this into my app design of the last project.

Collab Workshop

Screen Shot 2015-03-20 at 17.13.46  Screen Shot 2015-03-20 at 17.33.25

Today in class I learnt some basics on jQuery. jQuery is what makes the website look nice and shiny! Basically all of the funky layouts and functions on the page from how a button look to an image, jQuery can be used on anything to snazzy it up and look better. We started of the lesson by making some simple boxes. first they where all black then made one turn purple. What we had now was a fuction that when the box is clicked it would turn a different colour. I then Added lots more boxes to my page this then made it so I could click on the box and it would turn black and if I clicked it again it woule turn back to purple. This then can be used like a 8-bit paint pallet! you also could change the colours and go on. Even added a 100 more boxes would mean you have more canvas and could draw whatever you pleased to draw. This concluded my 1st jQuery workshop! This was a fun workshop and I cant wait to use more jQuery as the next project begins. Also It comes in handy with the work Im doing on the webpage currently.

Screen Shot 2015-03-20 at 17.36.54 Screen Shot 2015-03-20 at 17.24.02

___________________________________________________________________________

References:

Goslan, K., 2015. Workshop. Available from: Bournemouth University [Accessed on the 25th March 2015]

Brackets #11

Screen Shot 2015-02-24 at 14.28.34 Screen Shot 2015-02-24 at 14.28.52

Today we was just fixing things on the PHP so it links up with the database nicely and will move smoothly. To do this I added in a few more if statements such as what will really happen when you sign into the database. Such as when you sign in it will you be asked for the username and password. then the database will try and find a match coming up with one result which will be your login. If this is incorrect then an error message will appear if it is successful then a welcome message is displayed. I also made it so when the welcome message come up it will also display your name. I did this by referring to the users username.

___________________________________________________________________________

References:

Goslan, K., 2015. Workshop. Available from: Bournemouth University [Accessed on the 24th February 2015]

HTML #3

Screen Shot 2015-02-19 at 12.16.54Screen Shot 2015-02-19 at 12.07.50 Screen Shot 2015-02-20 at 09.53.16

Todays lesson I worked on from last week! So I started by adding a text called Lorum Ipsum, Which is a text that is really random and is used to show where text would go on the page. This is useful as this means I dont need to put as much effort in when it come to text and thinking of paragraphs that I dont know what they will say yet! then at a later time i can change it to what I want to say. Then I moved on to adding borders to my content box and also the navigation bar. After this I started changing the layout of the boxes. I wanted the boxes to have a a space between them both so they stand out more. After this I had to change my whole colour scheme as it didnt go and needed to change. I went with purple as that is my fav colour. after this I worked on text. I had to change it to white so it was visible on the purple box. and I did this for both the content and nav. after this I saw My content box was bigger than it should be by a few pixels. Then I looked into why and I could see I have my border at 3px so it makes it bigger by 6px. To fix this I have to take the 6px from the content box so instead of 800px it is not 794px. After all of this I started changing random things for the sake of it. I started buy making the boxes change colour when they are hovered over, and also placing the text in the middle of the box it is contained in. Also added a header to each box so It links up to the nav bar. This was important so I can link them up. I wanted it so when you click on the name in the nav bar it links up to the text in the content I did this by adding links and <a> tags to the code. I also added an overflow in the content! this is so I can make the content box as big as I like and it adds a scrolling bar so it dont look out of place on my page. lastly I just needed to work out why I had the links and also the names repeated on the page in my nav bar but this was only due to repeated code that was unneeded, So i just deleted it. Then that concludes me today! I think I really have inproved from last week and am really enjoying HTML.

Screen Shot 2015-02-19 at 12.04.28 Screen Shot 2015-02-20 at 09.56.06

___________________________________________________________________________

References:

Wilkinson, P., 2015. Workshop. Available from: Bournemouth University [Accessed on the 20th March 2015]

HTML #2

Screen Shot 2015-02-12 at 12.24.40Screen Shot 2015-02-12 at 12.17.50

For todays lesson we was set a task to make a webpage with a container containing a header, navigation bar, body and footer, After adding these to the page I had to make them fit in the container correctly and sit nicely. When I fixed all the boxes I then made it so they would stay in the middle of the page no matter how much you change the size of the browser. After this I added in some text and an image. This then made my boxes go out of place. But after finding out the padding on the page is set to 16px, I then changed it to 0px so it would be normal again. So in the end I touched everything up to make it look okay and i completed the task.

Screen Shot 2015-02-12 at 12.33.17Screen Shot 2015-02-12 at 12.55.27

___________________________________________________________________________

References:

Wilkinson, P., 2015. Workshop. Available from: Bournemouth University [Accessed on the 12th March 2015]

Brackets #10

Screen Shot 2015-02-10 at 14.56.41

Today In the workshop I was mainly getting used to the database in which I will need to use later in the project. This database was ensuring me that when people log into it they will have to have a correct username, password which match up to their ID and also the date they joined. Todays lesson was more about how to get around the page and inputting the correct the information.

Screen Shot 2015-02-10 at 13.36.42

___________________________________________________________________________

References:

Goslan, K., 2015. Workshop. Available from: Bournemouth University [Accessed on the 10th February 2015]

HTML #1

Screen Shot 2015-02-05 at 12.30.21

Back to HTML today, Just refreshing the mind and just testing a few Ideas. So got an image of a dog where I then had to make a size of 400 px by 400px, Then add text below and change its colour. After this a added anouther image also changing it size and making it go inline with the other photo. Then I had to make the images and text stay in the center of the page and so make it change depending on the size of the browser, Lastly I added the footer where I changed the colour and also made it stick to the bottom of the page. This concludes my work for the day till next week.

Screen Shot 2015-02-05 at 12.58.08

___________________________________________________________________________

References:

Wilkinson, P., 2015. Workshop. Available from: Bournemouth University [Accessed on the 5th February 2015]