UpDate on posting page

screenshot-285

Just to add a better quality photo look on what the design looked like to the design now. You can see how much improvement has come from the original resign.

screenshot-289

___________________________________________________________________________

References:

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

Büttner, D., Hughes, R., Sabine, C., Negasi, I., 2015. Turtletalks. Available from:http://dakar.bournemouth.ac.uk/~dbuttner/project/public/index.php [Accessed: 30th March 2015]

The Posting page….

11095685_822030087833734_1301241360_n  11040068_822030007833742_1470207599_n

Currently Darlene is doing an amazing job with the PHP side to the page. In the process of improving the page to make it the best we could by adding new features to the page. Currently the on the page you can post your thought and/or ideas anonymously, So nobody signed into a different account can tell that you have posted that post there. also the posts display how long ago it was posted and also where it was posted! and lastly you are now able to delate your posts and only your posts.

After the tweeking in the posts we had to face the issue of Design! currently the boxes where green and blue with a grey background, Then Darlene added a photo that we took at the start and added it as the background and turned the nav bar blue. But this dose look like too much on the page and take your eye from the purpose of the posts. Then Darlene thought About making it a simple block colour website. At first I didnt think it would look too good and maybe childish but darlene soon throw her ideas together and after looking at the results it looked amazing!

The Design is now set we have the blue page as the main posting page where you can post your anonymous posts for everybody to see, then a red page which is the about page where you can see who we are and what the page is all about and then lastly a green page for a search bar so you can  search for things within the website

11022980_822464074457002_1526960013_n11078006_822467321123344_1885880995_n

___________________________________________________________________________

References:

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

LOGO!

scan0021 Screen Shot 2015-03-18 at 09.31.05

So Logos! Before we all went off and made logos this was so we can have a wide range of different ideas from different points of views. We also decided before to have the logo of a turtle for the logo as he is our little mascot and he looks so cute. Also the possibilities are endless with what we can do with a turtle design. The 1st image above is Beckey’s! she designed a few basic turtles in pencil for an ideas of where we could go next with our Logo. These ideas are so cute and some really are amazing! Its nice to see it on paper! Shows that our logo is going in a direction. Next photo is Darlenes! She used the skills she learnt in illustrator and then used again to make our logo! you can see that Darlene has used shading and diffrent colour tones to give the turtle a 3D look to it 🙂 Darlene also placed it on the homepage! now this dont mean its our logo, Just means this is where the logo is going and also for reference where to change the code! lastly it shows what the page looks like with a logo!

11047076_841860199220660_1606029893_n Screen Shot 2015-03-18 at 09.46.08

Next we move onto my designs! Here I have my sketch and also my quick illustrator design I shown before on my blog! but I didnt like the logo I had made! so this time I sat down and took more time and effort with the logo so it would portray the page by looking nicer! What I did was just draw out the image of the turtle on the beach. then I coloured it in using the colour selector from the photograph. Then I tarted added shadow and light to the turtles shell and body! this makes it less flat and looks better than it was before! All we need to do now is look at the last designs and see which we will use for the page and which will fit the page best.

turtle01

___________________________________________________________________________

References:

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

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

Progress….ish

Screen Shot 2015-03-25 at 16.12.41  Screen Shot 2015-03-25 at 16.53.11

So! still on the About page here trying to fix it up so it can look more impressive. So I have this idea where you can hover over the names and a information box pops up and you can read some information about us as you hover from each person. As I looked into this I saw you will need to use jQuery and I havent yet learnt too much of that. So using online help I looked into how to do it. For some reason I thought the boxes had to be buttons?! and I linked the names so when clicked it would toggle down… But this never worked so I just placed it to one size and continued working on the page. Next the Nav Bar button wasnt right with the css, I wanted the colours to invert when hovered over! I couldnt change the white text till I saw in the index page i had a style colour white next to it and it was over powering the CSS!! but all works now!

Screen Shot 2015-04-17 at 11.25.18Screen Shot 2015-03-26 at 16.47.03

Next I messed around with the Nav bar! added a little turtle to the home button as the turtles shell is its home! just wanted to make it cute also… But this made the button jump all over the place! after a bit of changing the Css and margins I got them all inline and it was working again. After this we changed the colour scheme again. This was because we thought out design lacked in strength and we just needed to change some things around. But as I added the new nav bar it seems to not like my code and messed it up a little. And the css ran away!!

Screen Shot 2015-03-26 at 15.51.20 Screen Shot 2015-03-26 at 23.09.58

When looking at the code we ended up missed the css to the box tag I had and the nav bar worked fine as did the banner! but no css was being applied to the box tag! I thought I missed some } or ; from the css or even <div> tags from the Html! but it was all there and didnt make sense! But when posted the css in the html it worked? Next I took out the nav bar and set it too how it was before… But now I am missing the nav bar from the page but the boxes have appeared!

I need to fix this and will look over it tomorrow! in the mean while I have the photos we taken when I 1st jioned but they are a bit dull so I increased the contrast! just a quick edit to make it look a bit better and see if it will look good on the page. But now I think we are just going to use block colour. But it is best to have our options so we can explore them and have the choice to be able to go back to the photos if we need them.

Screen Shot 2015-03-26 at 01.38.10Screen Shot 2015-03-26 at 01.38.18

___________________________________________________________________________

References:

Unknown., 2015. w3schools Available from: http://www.w3schools.com/tags/tag_button.asp [Accessed on the 26th March 2015]

Unknown., 2015. Javascript kit Available from: http://www.javascriptkit.com/howto/button.shtml %5BAccessed on the 26th March 2015]

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

Collab Group Meeting

Yesterday evening I meet up with my new Group for the collaborative project. We all meet up to discuss some ideas for the comedy sketch we are going to create. As one idea came to life they seem to be bouncing back and forth between TV and Script writers. This maybe because they have more of a creative mindset with filming and thinking of creative ideas.

We all were coming up with some most random ideas. We all thought we would go along to comedy route and also include maybe tragedy… Something along the lines of something normal and ordinary mixed with something unreal and a bit out there and lastly something that is funny although it has a bit of a grim dark story behind it.

Ideas came around thick and fast from ideas of parades like come dine with me… but cludo style and people die, as in ‘come die with me’ or taken but instead of somebody’s wife been taken she just left them and the running joke of where has my milk gone? I will find you and i will kill you. But in the end we all thought parades are over done and more likely been done before.

Next we thought of disney films and how they are all lovey dovey. we should portray the truth behind them. Have the girls be moody demanding people or maybe in reality the girl dont fall in love with the price as he happened to be gay. something that dont mean life is a fairy tale and more of a hit in the face.

After that the topic was on a sketch where people aren’t that clever such as a guy doing magic tricks in the street and.. well he isnt as good as he thinks and then cutting a person in half dont go as well as he thought… Then a person that dates a girl of tinder but this girl is really stupid like a block of cheese, but he dont see it? he takes her to town and all and thinks she is amazing where in reality he just holding cheese and so on the ideas or endless.

Even thought we had tons of ideas more so than I could write about we still havent a final idea as off yet. we all agree on having it have a demonic, sinister and death threatening feel to the story line. Maybe depending on the isolation of a human and how they deal with this and question their life… we can do anything like a news report to how too videos. At the end of the day it will hopefully be something we all like.

Over the easter brake we are all going to try and come up with lots of different ideas. We now have a facebook group where we will post all our ideas onto as they come to our mind! this is a way to just write it down and then not forget them. Also this means we can all talk about it, say if it is good or bad and also make little edits to there idea! or even more add onto the ideas!. After easter we will hopefully have the final idea that we want to do ready for scripting when we are back at uni! in the meanwhile I will be catching up on jQuery and having fun with that! yay!… ha 🙂

Group #4

11079787_848783808528299_443684091_n Screen Shot 2015-03-24 at 13.31.52

After looking into all the about pages we could do I though that I could use the HTML I started in phils class back in Feb instead of starting from the beginning and then change things to how they are displayed in the mock up I made Yesterday. All I did with the HTML was change a few colour around that I taken from the PHP css file and just related the page more to turtle talks. I didnt change much but already the page has transformed into something more impressive! Now I have the basics down I can work more on the look of the page and make it nice to look at using lots of css.

Unforecantly I forgot to take screen shots of my work till I worked more on it today. Yesterday I did manage to change the navigation bar from being vertical to horizontally across the page. Then I also added each on off our photos to a box also named after each member of our group. Next I changed the image  from the nav bar to the banner, Just a nice little welcome to the page. Althought the changes I made had make the page mess up a little and had toomany content boxes which I dont need anymore but did in the last project. After getting rid of them all I then started to make it match more with the post page.

Screen Shot 2015-03-24 at 13.56.41Screen Shot 2015-03-24 at 22.32.26

I then worked on the Navigation bar which I turned Blue and also made join together. After this I then looked at the css for the PHP css as I wanted the Nav bar to look like all of the buttons that Darlene had made, This had made the nav bar bigger, better and also the text was the correct font and size. Then I thought there is no point linking the nav bar to what is on the page but kept the tags in So I could link them to the Login page and posting page later. So currently I just added out 3 main buttons ‘Home’ ‘About’ and ‘Search’. We will later work on the search bar and changing the home button to a icon/symbol to make it more interesting.

After this I worked on the boxes! I made it so the floated in a line and line up neatly! I did have some issue trying to get them inline and all on one line but a mess about with the css soon fixed this. After I fixed this I worked on how to improve the boxes! I them also got the PHP css so I could have the correct font and size for the whole page. I wanted to add text about us and thats why I used the Lorum Ipsum on the page but this wasn’t needed so I took it out! What Im planning to do is add some jQuery so it will display that information differently with either a toggle or hover over? Then I saw the Green I used was different from the post boxes, This was because the posts had a gradient on them. I soon added this gradient to my name boxes. This make them look less flat and more appealing.

I added onto Github some things I need to fix before the next Group meeting. The nav bar need to link to each page and also improve the design, The banner! The navigation bar needs to go at the very top but the banner hide behind the boxes, This is because the boxes are in a float and I will need to place the image in a div tag to stop this from happening. Need to make a functional search bar so we can find different posts? Add the jQuery to the about page so out information is hidden but can appear when clicked? And lastly need to decide on the logo and make some symobls for the page but this isnt the most inportant thing and is quite easy so it can wait till the Easter holidays. Also I want to work on making the photos more styled into the css somehow just so it looks nice and pretty.

Screen Shot 2015-03-25 at 00.00.51

References:

Sabine, C., 2015. Tina’s Blog. Available from: https://christinasabine.wordpress.com/ [Accessed on the 25th March 2015]

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

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

Planning New About Page!

Today it has just hit us that we have one week left till the easter holidays!!! This means we really need to get a wriggle on with the page so we can get the hard bits down and work on the easy bits over the holidays. Yesterday In the workshop we realised that Rafiel accidentally Written over Becky’s code for the about page. So after this we thought we really should add more to the page to make it match the posing page. Me and becky both thought it would be a good idea to make the page have a cool little Toggle/Hover Over to make the page more exciting. To do this it would be difficult as we had previously used bootstrap… So We thought we need to start over again.

11165862_864765020263511_425986763_n11127211_864765023596844_42030045_n11169106_864765006930179_508644712_n11156849_864765010263512_1599771126_n

As you can see above I have made a few sketches of potential ideas we can use for the about page. My ideas have came from many about pages i have seen over the years and also a few webpages I saw when looking for the best about pages on the internet. Most of the pages I looked at followed very simply layouts that mainly consisted of box formations. The following designs where based on this fact…

  1. The 1st photo is my design that was based on becky’s first design for the about page that she made using bootstrap. This is a simple design with the navigation bar at the top of the page so the user can navigate though the site. Next is a few boxes that include an image, name and text on each one of the boxes.  This so we can show who was included in the project and we can then talk a bit about ourself so the user knows us a bit better.
  2. The 2nd photo is a different design as i’m trying to get away from the original idea. I wanted to use some jQeary in my design to make the about page a more exciting and interesting. For this design I was was wanting 4 circles with a rectangle in the centre of the page. Then as you hover over a circle with one of our faces in then the information will them then when you take the mouse away it disappears or this could be a click function.
  3.  The 3rd design is displayed around 4 simple squares on the page then have a function of then the user clicks or hovers over a box then all the others drop to the bottom or top as the middle box then expands and displays any information needed. Then then un clicked or the mouse is moved the boxes will go back to normal.
  4. The 4th design I would have 4 simple boxes that you can click onto and then the box expands as the others lay below and shrink. Then if you click again the image moves to the side and a information box about the person will pop out. Then you can click again to hind this.

After looking over my 4 final ideas I took some time and finally I went with Number 3! this was because I fell that this is the best for the page. the layout is nice and simple and also is really user friendly. It don’t make things too complex on the page and includes everything I was planning to include. After this I then coloured it in to see if it looked any better. After this I then thought to make the design on photoshop to see how I want it to look when I go to design it in HTML and CSS. So blow you can see the finished PSD design of how the page will look. I also followed the same colour scheme as the posting page as you can see below, by sticking to the grey blue and green theme. The next steps from here would be to create this design now in HTML and CSS and make all the functions work as I have intended.

11125488_864764996930180_1513847805_n Screen Shot 2015-03-18 at 09.29.13Untitled-1

___________________________________________________________________________

References:

Unknown, 12 of the Best About Us Pages on the Internet Available from: http://www.blogtyrant.com/best-about-us-pages/ [Accessed on the 24th March 2015]

Unknown, 20 Creative & Useful “About” Pages Available from: https://creativemarket.com/blog/2013/08/21/20-creative-useful-about-pages %5BAccessed on the 25h March 2015]

So What is this Net neutrality and how will it effect me and you?

net_neutrality

What is this Net neutrality?
Net Neutrality is the equal treatment of all the data so users like you and me can decide what devices and software and websites we can use the net usage openly without and 3rd party people telling us what we can or cant do while we are online by saying to us that it wont work for us.
Neutral networks shows no discrimination from the sender, receiver or the content being sent though data packets. This still don’t change depending on the rate one of these are paying or what kid of application is sending or receiving the information. Data packets move freely across the internet at a constant speed as it gets routed to the correct destination. When the data is traveling around Net Neutrality don’t care where the data packets are going, how they look, Where they are from, where they want to go and what they contain.

This way you can connect with your friends even if they are the other side of the country and paying a different price and also with a different provider. You can access the internet to look at any webpage, play and game, read any Blogs or watch any videos no matter who offers them to me and on whatever device I wish too. And this is how the internet should be! this nice loving environment and we want to keep it this way!!!

Why should you Care?
You should care as Net Neutrality is becoming endangered! And all because people are to greedy and want more money. The ISP claim that the pack packets that we keep sending out will then cause jams in the system and crash the internet. This is so they can get rid of Net Neutrality and lying to us in order to do this. As we know there is plenty untapped space in the network and also that data traffic is extremely cheap.

But why are they lying to us? Over the years ISP have been getting jelouse of the internets biggest service providers such as YouTube, Facebook and so on and are not happy they are making more money then they are! So they want to stop that from happening. So rather than just transporting the data they want more power and control over what we all do online.

They are taking power by splitting the data into groups, So at the bottom of the groups lays the normal internet which will be only available for a limited amount of data and also not run as well when higher groups are running though the data network. You will also have the highest of all the groups that get the better network connection and has priority over the whole network and not limited to anything but there is a high fee to pay for this service.

Basically what this is, is making people pay a price in order to remain with the same speed as they currently have. and if you don’t pay at all then your service will then slow down for service for no reason other than that you haven’t gave them any money, So again they just want lots of money from us and become rich and famous again

With this new system in action what will happen is that the network will split the data into different groups  depending on its priority. If it was a higher group it will be able to run fast as normal. But the standard data packets will have to wait on a slow network and take longer to get to the destination as it would have to wait till the space is free in order to travel. web providers and also pay a fee to make it so more data packets are able to come though but the user may need to pay aswell. This means webpages that have non profit like wiki may become extinct as they cant pay to get the data traffic coming in.

When ISP are able to do this they can be able to do anything they like such as block, destroy or filter any upcoming apps so they do get used by the public so you wont be able to get your voice your opinos.

What If You Let It Happen?
if Net Neutrality was to die out then we would lose lots of content, free compaction and free access to the internet will be gone and will no longer be available.  Then companies by ISP will be able to only post there things online and rule the whole network. this then will lead into different types of the internet or even different internets, where we will only be able to assess certain data depending what internet we are on then.

net-neutrality

___________________________________________________________________________

References:

TotalBiscuit, The Cynical Brit, 2014, What is Net Neutrality? Available from: https://www.youtube.com/watch?v=rz4Ej3IVefo [Accessed on the 24th March 2015]

liekmudkip, 2013, What is Net Neutrality and why is it important?Available from: https://www.youtube.com/watch?v=HCUg5A-ZAw0 [Accessed on the 24th March 2015]

CollegeHumor, 2014, Why Net Neutrality Matters (And What You Can Do To Help) Available from: https://www.youtube.com/watch?v=xjOxNiHUsZw [Accessed on the 24th March 2015]

GitHub Via the Terminal

Screen Shot 2015-03-20 at 15.08.50

Today I asked Rob today to walk me though Github due to the fact I had no idea what I was doing and thought it would be better to learn from the best! So this afternoon I sat with Rob as he walked me though a few things. He shown me how to upload my work to github from my computer.

First on the Terminal Rob shown me how to change the colour so it was move inviting to look at then the boring white one. Next he shown me that I could see what I have on my profile and also the whole computer. Then we made some nice little folders to make storing all my work nice and easy in many folders so its all neat. After this we downloaded the file from GitHub though the terminal and save it in my new folders. After this If I made any any changes to my code I could just simply check via the terminal and it would notice that I have changed things. Then I simply have to type git push and this will upload the latest copy of the code to git hub.

Then Rob suggested some programs I should download starting with Homebrew and then ImageMagick, With image magick you can play around with all then images on your desktop. You can find everything thats more then a GB or less than a MB. You can change .img to .png, you can change the size of an image from small to big and the other way round, Change images to negative and so on. This program can change so many things with your images and rearrange them all on a document. This is for quick edits so you dont need to open up photoshop and change everything then save and so on… its just a simple statement and it changes just like that.

Lastly Rob mentioned FFmpeg which is for videos. Just like image magick you can change video on your machine. I havent downloaded this program yet but I will and then I can work out its wonderful ways and see what It can really do.

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]