Summery

Unit Title: Design for Digital Environments 

For this Project We was asked to work in groups to create a social web based application that addresses a problem for our choice of target audience. The application is browser based and to be designed using HTML5 and CSS for the visual look of that page. Also need to include a database and server-side with the language required.

For this Project I worked in a group of 4 which included me, Darlene, Becky and Refiel. After some research and mind mapping the group decided to do an anonymous posting web application aided at students in Bournemouth university. The page Is called Turtle Talks. Based on other applications that follow this trend are also animal based we thought we should too.

The app allows you to sign up and log into the webpage. After this you will be placed on the posting screen where you will see posts from other people on the page. however you cant see there name as it is anonymous. After this you may post a comment if you wish to and also select where you currently are, then it will add to the feed of posts. If you made a mistake with the post you can then delete it and start over again there.  You also can see how long ago the post was posted and if it was posted by a male or female.

After this you can navigate thought he pages to the About Us page where you can see what we look like and an over light on what the page doses. The next page you have is search where you can type in a word such as ‘uni’ then all the posts saying uni shows up. Lastly the last page in filter where you can just selcst to reall all the posts from a particular location such as halls? then also below the nav bar like on every page is a logout button to sign yourself out when you want to leave you also can delete you account next to it and this will erase your account forever.

For the web application I helped in many areas to place this page together, At first due to joining late I had to catch up on all the work the girls has placed together but as soon as I did that I was happy to get stuck in and do some work for my team.

1. My first task was to think of a name for the website, At first it was called anonymous but that name isn’t the most interesting. We wanted something that would stand out and appal to students. But truthfully I stubbled on the name by mistake. What happened was that I went to the beach with the girls and I brought a toy turtle with me as I received it as a gift for my birthday. Then when when we went to the beach beach I mentioned jokingly that we should name the page after the Turtle, But the girls loved it and thought why not. We then wanted to link it to the page about communicating with one another. We took a moment to think what sound turtles made and  impressions were very amusing but in the end went with Talks as you have the alliteration with the T and is catchy. I then went home and thought as many names as i could for the page and sent it to the whole group. I asked them to pick their top 3 Names and Turtle Talks came out top. So finally the name is TURTLE TALKS!!!
2. My next task was to create the Logo, for the logo we all knew it would be something along the line of the turtle. I asked darlene and becky to also help with some ideas so I had a full range or different ideas to explore. This is good as it means the logo is coming from a lot of different mind sets and adds to the creative side. I then drawn up my ideas of the turtle and after that took them to draw online. I drawn one on illustrator but this design didnt look too nice and was quite dark and I just wasnt happy with the whole idea. I then went to photoshop as I am more confutable using this program. I then was able to make the logo I wanted and also added shadows and all I wanted to. It made it look so much nicer and I was really happy with the outcome. I lastly saved it as a PNG so iI didnt have a white background saved to the image.
3.  Next task Was the About Page, Seeing as I havent done any code yet I wanted to add some jQuery to the about page to make it look exciting. However this caused issues as the current about page used bootstrap and I was unable to change anything. I then had to make a whole new about page as soon as I could and also add some cool jQuery. I started off with what I knew and then expanded it as time went by. I had to adapt to darlene aswell, Darlene was busy on the Posting page and forever improving it so I made the page match her colour scheme But half way though Darlene improved it witch meant the colour scheme had changed. The page did look a lot better now but this meant I had to change the colours of my about page a few times. But this was not a problem at all. In the end I made a functional about page that displayed all the group members faces and also some text about the web application.
4. On with the next task! Seeing as we couldn’t use becky’s code as it was on bootstrap this means that the Navigation bar was gone too. I then needed to create one that we could use an all of the pages. I then quickly set this up and set up all the links for darlene so she could then add it to her Page aswell. I then worked on the CSS to make it match the colour scheme and made it functional before passing it to darlene. When Darlene Got the Nav bar from me she then had to change the CSS so it matched her new colour scheme in her new design.
5. Next task I went onto was making buttons for the page I did want to do this using jQuery and making It exciting but after many trys of doing this I saw the final outcome and worked out that the page didnt really need this. So I went back on my steps and made it have no buttons. But then I thought Why dont I make a button that links to our blogs so people can see what work we put into the page. I then linked up a button under our photos with a link straignt to our blogs. This looks amazing and I glad I added them into the page.
6. Last thing I did was the Banner. Now this wasnt really a task I was asked to do. On the Last night of uni before the easter holiday me and darlene stayed in the labs after class to finish our page before we all went home. We where in the Labs till 4AM!!! And at this time I Just thought something was missing of the page! and that was the NAME! we needed the name on the page or how else will you know your are on our page? I then went into photoshop and used the same font as darlene had on the welcome page. This looked rather boring. I then got my logo and placed it at the side but still didnt look the best. I randomly started playing around with things and makes lots of little copies of my logo and pasting them all over the text as if the text has been invaded by Turtles. I then shown Darlene and she thought I was amazing. I then thought why not Ill add it to the about page it look cute and entertaining. I then posted it at the top of the page. Lastly I also added a little banner of a photo I took on the beach that included the turtle just to look nice and pretty on the page.

Darlene Worked on the posting page and the login page which looks really good and I am amazed in how well she got it to work. And after all that she never stopped she then went onto making the Search CSS and the whole filter page. Even after all of this Darlene was helping Becky with making the page responsive too a range of different sizes. This girl never stops and I don’t think our page would be nearly as good without her.
Becky had made Search bar fiction that worked really well and im pleased we have this on our page. She also made the first about page but due to bootstrap we couldn’t use the page. She also did the report button but in the end we were unable to use it as we didnt have a mail sever. Lastly Becky made the page responsive to kindles with a little help from Darlene.

What was good about our web application was the posting page. I love how smoothly you can post and look up other posts from other students in the Uni. This makes you feel more connected with the uni and feel like you can post all your thoughts without felling judged personally. I love the little function Darlene had added such as the Time ago so you can see how long ago the post was placed on the webpage. I am also happy that Darlene added the Location Filter because some people may not care about posts from Landsdown when they go to the Talbot Campus. Lastly I like how you can also search page is impressive as you may just want to see posts on one thing such as if an event is happening or you want information on something. I am really happy with the outcome of our page.

What was bad our Web Application was the lack of time we had to fix errors. I wouldn’t say I dislike anything on our page But I think If we placed more time into it or had more time we could have fixed some errors that we have found such as making it more responsive. If this was started at the start of easter or if we knew becky was having trouble with it sooner then we could of helped more and then we could have made it more responsive to more than what we have done already. We also wanted to add a report button to our page but unfortunately was were not able to do this as we needed the mailing sever. If we were able to do this it would be great and we could have this so people fell safer on out page.

What could we improve on would be the Design, even though it is a good design it could always look better. In some ways I dont like how colourful it is and feel a nice sleek colour scheme. I dont think our current design is Bad I just think it can be improved. Lastly I would improve the page by adding more features to make the page more interactive with the user so they can do more then write a post so others to see. If we had more time this would have been a possibly for our page.

Overall i am really happy with the outcome of the page and even myself have been having fun posting comments to the page. Also I have seen that working in a group we have had out issues with one another but still seem to over come the problems and knew it was just stress of the code making us like that. Coding really Tests a Friendship. I loved working in a Team and getting help from my team mates knowing they will be there for me if I get stuck and no matter what the issue we would be there for one another and I loved that about my group and made new friends in the process.

Last Min Problem Solving!

As the Project is coming to an end we have been playing around and testing a few different things on our wed app to make sure everything is working up to our standard. As we started to look about a few problems soon where raised…

1. Is the Site Responsive? Before easter Becky was assigned to make the site responsive to different sized computers as-well-as tablets and phones. However becky seemed to have started this later than planned and seemed to have some trouble trying to place the CSS together and came to me and Darlene for help, At first we gave becky some useful links and advice how to make it responsive. But becky seem to still be having trouble. Becky soon reached out to ask darlene for help. Darlene even thought she had she own code to fix, sat down and looked into make it responsive. As you can see above our some images of Darlene making the page responsive and also how the page should look when responsive. She then pasted this to GitHub so becky could fine it. From here becky is able to make the site responsive to tablet size.
2. The other day I raised a Query to Darlene about logging into the page. I asked what if two people had the same name? would they make 2 accounts and all will be okay? do you sign into the others account but have 2 passwords for it? or will you be declined to sign up as name is taken? Darlene soon worked out what I was trying to get at then went off to work on how to fix this issue. Darlene soon came back and pointed out that if we change it so they have to sign in with their Student ID then you shouldn’t have this problem. Darlene soon changed the code and I could see this had resolved the issue.
3. Report Button? Becky was working on a report button before easter. We wanted this button so if any abuse on the page means we can find out what was said and by who. Becky came back to inform us that unfortunately we cant do a report button as we will need a mail sever for the page which we don’t have so we cant include the button.
4. Last Problem That I only saw today was on the posting page. When testing the page for the last time I could see that when posting long posts it cut of where the location starts leaving that side black for some reason. After I informed Darlene about this error she soon got to it and within mins she came back and had fixed it all. I then went back to the page and tried it all again and it works fine. And so happy we noticed this before we sent it in tomorrow,

 

___________________________________________________________________________

References:

Büttner, D., 2015. Darlene Büttners’s Blog. Available from: https://darlenebuttner.wordpress.com/[Accessed on the 19th April 2015]

Buttner, D., Hughes, R., Sabine, C., Negasi, I., 2015. Turtletalks. Available from:http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php [Accessed: 19th April 2015]

Hughes, R., 2015. beckyhughes94 Available from: https://beckyhughes94.wordpress.com/ [Accessed on the 19th March 2015]

Errors

When going through the code last night Becky kindly pointed out that when she loads the code on her browser the names appear like this for some reason. Me and Darlene have never seen this issue when we loaded up the code before and a number of computers we have been on at home and at uni so we wondered why it only shown up on Becky’s computer and why has she only seen it today and not before while working on the project? We are all using chrome and Darlene also uses windows so its not a mac thing. But in-order for this not to happen again I looked into changing the code so this don’t happen on other computers again. When looking over it, It only seems that the accents on foreign names where the only ones having the issue. To stop this I could simply change ü to a u and é to a e but I didn’t want to do that incase it offended my group members in anyway. So what i did was use ü for the u and é for the e. This is a HTML encoding for foreign letters that may be used in the text. This should sort out any issues along these lines within our code

 

___________________________________________________________________________

References:

Unknown, HTML Encoding of Foreign Language characters Available from: http://www.thesauruslex.com/typo/eng/enghtml.htm [Accessed on the 16th April 2015]

Hughes, R., 2015. beckyhughes94 Available from: https://beckyhughes94.wordpress.com/ [Accessed on the 16th March 2015]

Pages Placed Together

Over the last few months I have had an assessment for Digital Media Design.
For this Project we were placed into groups to create a “social” Web based application that addresses a specific “problem” of a target audience of out choice.
The previous Group I was in didn’t go to plan so I joined a second Group. This Group consisted of myself, Darlene, Becky and Israfiél. When I joined the group they had a strong idea at heart to place together a web application that allows Bournemouth Uni students to post whatever they wished to a page anonymously so nobody could know they had posted that post. We saw this as a problem students may have on a day to day basis on the fact that we all need to vent there emotions out to the public.

University can get very stressful for students, and as much as we may deny it and say we are all okay that maybe far from the truth. So this Webpage is for the fellow students to post anything from how their day has been, What they have had for dinner, What team they support and are so going to win but end up losing… To dramatic posts on how they think they are going to fail their course, how they are struggling with the student load, or a whine on their house mates and so on. So with this website they can express them-self and let all of the frustration out on the internet to other fellow uni students.

We have now placed all of the pages together and this is how the whole website looks now…

Here is they first page you will come across on our webpage. the background is a simple image of bournemouth beach, We thought this was a good idea as the image of the beach makes users relate to where they are studying and make it a nice and friendly experience for the user. Also displayed on the page is the Logo and name. The name of our page is called Turtle Talks and likewise the logo is a cute little turtle. Lastly on the page is a login and no account button. The login button is where you can sign in with your name and password.

However if you don’t have an account you can click ‘No Account’ This is so you can make an account to sign in. Their is a few fields you need to fill in to make your new account. First you select if you are Male or Female, Then you can type in your name in for your account name followed by a password. For the password you need to place this in twice just incase you spell it wrong the first time you need to match both of the passwords otherwise your password will become invalid. Also other ways your password can be invalid is by not having one number or one letter in your password. If you do happen to miss something from your password then a message will pop up to informed them to change the details before saving. Lastly you will need to add When all the information is filled in correctly the information will then be saved to the database.

Soon after the user will get notify that their details have been saved and they have been registered and now able to sign in. So just like before the user now has an account and can click on Login. Then the user can type in their name and password to login from there. This then sends a query that searches the database for any matches, If found then its grants access to the site by starting up a session.

*ALERT!!! I have just thought about an issue with the login, When signing up and you have a common name such as Jack! you will make an account and sign in and all will be okay. Until another Jack comes to make an account… Now what would happen will it be taken and need to make a different name? Will you be able to sign into the others account and post on their behalf? or is it all okay that in the database it is signed up with your name and password it will find a match which will be a different account number to the other one and all will be okay?
On regards I will need to talk to my team mates and see what we can do to fix this issue and get back at a later date*

 

Next you will be taken to the main page of the site also known as the posting page. When you first see this page you take notice of the nice blue calming background where all of the posts are displayed. Here you can scroll though a number of different posts on the page, each saying something different as well as a different user who has posted it. You can also see on the posts how long ago the posts where made followed by the gender of the person who posted the post and lastly you can see where the post was sent from such as halls? or campus? and so on. Then below there you will see the post somebody would have made for you to read.

You then can post a post if and when you wish, at the top Right corner you will see a posting filed saying What’s up? In here you may type anything you wish to on regards its not offence in any way although you need to type more then 4 characters and less than 1000, however is you under or over exceed you will get a little message pop up explaining this fact then you can go back and place in the correct amount of characters. After this you will select your location of where you are from the drop down menu like halls and so on you can post your post to the site where it will add it to the database along with the users ID, timestamp which makes a unique ID for the individual post.

 

Then when you have filled out all the posting fields you can click on submit, Where then your post will be displayed on the feed of posts and also you well get a message saying your post has been posted. After your post onto the feed you can then view your post. But there is something different from the users post from all the other posts, The posts you have posted have a red Delete Post? This is so you can delete any post you have made for whatever reason you have like anything from typos or something you have had second thoughts about. You just need to simply click on delete post? and then it will be gone. But behind everything your post your trying to delete will be removed from the database and erasing it Unique ID which will de deleted as well and not be able to be used again.

Just like the Delete Post? button there is also a Delete Account Button. At first it was just one simple delete button but right next that button is the Logout button which when testing the page sometimes we would accidentally press the delete button and this got kinda annoying having to make lots of new accounts all the time. Due to this Darlene made it for another button to toggle down saying Sure? to make sure you really want to delete your account. After clicking this button your account will be deleted from the database.

Lastly is the Logout button which is simply a button you can click when on a public computer or friends. After the button is clicked on the pages will log you out of the database and end your session and redirect you back to the login page.

Next you have the navigation bar with four headings, the first one being the home button which is blue with the turtle logo on showing the user that this is the home page or also known as the posting page which is the same page as I explained above. Next we have the red heading which is the about page.

 

This About page as you can see the function to post has disappeared as you are only allowed to post on the posting page. Next on the page it clearly displays the websites name ‘Turtle Talks’ along with the logo of the turtle walking all over the letters. Just below is a little banner of the pages mascot! TOBY the Turtle that gave us inspiration to make the page turtle based. Then below the banner are 4 boxes of all the group members with a photo of each one of our names and out names displayed below. Just blow our names is then another box saying ‘View Blog’ When clicked this will the take you to the link where our blogs are displayed. Lastly on the page is just a box with some text in describing what the website is all about and also a little disclaimer explaining what will happen if you abuse the service that we are providing. Also on the page it has a nice red background which is the same as the navigation bar.

 

The last 2 pages are quite simple, Starting with the search page… Again the posting feature isnt there again as you cant post on this page. This page is Green just like the navigation bar which matches the other pages theme. Next on the search page you can type in either a work or number and then the page will filter though all of the posts on the feed and find the ones containing the same word/number you had searched for.

The last page is the filter page, the posting feature isnt their on this page too but what is here is the location filter. Here you can select the location. If you then went a chosen Talbot campus then all of the posts will pop up from the feed that are posted from that same location. this is so you can view all of the posts from that area. Lastly the background is yellow, Again following the theme the background is yellow yet again like the navigation bar.

We now have all of the pages together but some issue still occur and we need to sort out these soon before the hand in but will keep you updated. I will bring up the issues I have found with my group mates on the next meeting.

___________________________________________________________________________

References:

Büttner, D., 2015. Darlene Büttners’s Blog. Available from: https://darlenebuttner.wordpress.com/ [Accessed on the 14th April 2015]

Buttner, D., Hughes, R., Sabine, C., Negasi, I., 2015. Turtletalks. Available from:http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php [Accessed: 13th April 2015]

Finishing up

Adding the last touches to my about page now. As you can see from last time I have fixed the buttons and now when you click on one of the buttons under a photo it will take you to their blog. So if I click on the View Blog >> button under Israflél It then will take me to his blog and I can see all of his blog posts about this project and others before hand.

Next I thought the page needed a title, All I really did was spend a few minutes putting this together, It didnt need to be fancy it just needed to say hay! this is who we are and what we are. I was sat by Darlene at the time and asked what text font she used on the login logo for the page. To which she replied Ariel. I then get that font and typed in TURTLE TALK! Now yes this was too plain, I then just brought out my logo idea and Copied and pasted a load of small ones onto the page. I then moved them all around and rotated a few so it looks like they are climbing over the logo. I was only doing this for fun at the time but Darlene turn round and thought it was so cute, So I thought why not! and added it to the about page.

Lastly The text was annoying as it was so spaced out. I looked in the CSS and changed text size and everything. But silly me I was looking in the wrong place and needed to change the letter spacing. After changing this the text then looked normal and I was happy with it. To finish off I made sure all the padding and so on was right and noting was incorrect. More so When we link them to the other pages as something may go wrong.

Finally Its all done! all now I need to do is upload it to github and link the pages to the rest of the others pages to make this final website working. Although it is the easter holidays now and every body is busy being home. But on the last week of easter I and darlene have agreed to come back early so we can make sure this will work well for Monday 20th. Also when its altogether we can see if any errors we can fix before hand. I dont want to leave this all last minute as if there is a problem we may cant fix it in time but hopefully that dont happen.

Blog Button

 

The other day I had the issue of the giant grey box in the middle of the page to which I thought? Do i need to hid it at all? All i wanted to do was have an excuse to use jQuery and add cool buttons to my page just to show that I can do this and more when I get my head to it. But it really wasn’t needed on the page. So in the end I just took it out.

After this I thought I could still add a button in my about page! Seeing as its about us and what we are doing, Instead of a few lines of text only highlighting good things about us we could link it to our blogs so everybody looking on the page can also see the progress of making the page as well.

After I made the link I then but a box around it to look like a button as well as a hover over so it changes to red and fades back to the original colour again to make it look pretty. Below I have added the CSS for the button there, Adding the buttons was fine but making it line up nicely and look good on the page was the more tricky part due to changing one simple thing or missing one thing out it could be placed in the wrong place. But in the end I got there and it looks nice and matches the rest of the page nicely. When looking what I could improve on I thought about writing our names into the link as well. But this looks cramped and also a bit repetitive as our names are just above so I just made them all say View Blog in the end again.

 

___________________________________________________________________________

References:

Unknown., 2010. How to create an HTML button that acts like a link? Available from: http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link [Accessed on the 5th April 2015]

Button Update

  

So yesterday I was having an issue with my buttons using Jquery. As I was trying to get all 4 buttons to work I wondered why do we need a caption saying something about each one of us? and who cares? What this pages needs is just a piece of text explaining what the website is and what they can do. So thats what I did! I wrote out a short message explaining  the website and what you can and cant do on whiles on the page. Then still using my Jquery I added a button so you can show and hid the text on the page. But this left a giant gery box in the page that dont look to nice on the page.

Update on homepage

Since Darlene has updated the posting page design I have to step up my game and get on track! over the last week I have really knuckled down on this code. My about page had to link in with the navigation bar colour code the about page needed to be this pinky red colour. Not knowing what colour this was I went to Github and looked over Darlene’s CSS code and found the colour she had used. I then applied it to my CSS so i had the same shade as Darlene And also I used the same Grey as she used for the post boxes for my headshot boxes and also I then added a shadow on my boxes to make them stand out a little more. After I had changed all the colours around so they fit with the design I thought about what text to add to the boxes. My idea right now is having our faces and names along with some text about us below. The text only says hey right now as the others will type something up later.

I then looked back at my work… It was a bit too boring for my liking. I had an idea that we could just click on our name and then the text should appear and then when you click on a new person it just displays the one you have currently ticked. I wanted a box to grow at the bottom and expand as the button is clicked or even hovered over. Right now i have worked out the jQeruy to make the text display on command of a click but currently it shows then hinds in a cycle of 4 times and also when clicked on the button for Becky all of them will then appear. This is because I had just called it button. If I want it to just display one I need to male four different buttons for each name.

When I went back to the code I changed it so all the buttons were under different names and 4 different types of buttons but then the code had broke and i didn’t understand why for now but when I click on a button nothing happens. Next time I will need to sort this issue out ASAP!

 

___________________________________________________________________________

References:

Unkown., 2014. How to add a button dynamically using jquery. Available from: http://stackoverflow.com/questions/18226598/how-to-add-a-button-dynamically-using-jquery [Accessed on the 2nd April 2015]

Goslan, K., 2015. Workshop. Available from: Bournemouth University [Accessed on the 2nd April 2015]