The Reflection

Since the time to work on this project is almost over, I can now reflect on the outcome, the group work, the planning and the other important things that were a part of it. We have basically been working on the page for two months now and I think time wise, we have done really well. We agreed to have the page finished before Easter so we could spend the time during the holiday to make smaller changes, comment the code, and look for errors or way to improve things that we did not like that much. Luckily most of our group worked really hard to reach this goal and when we went home, all the big parts, except for making it responsive where taken care of. During this development, we used GitHub as Rob suggested and we got to understand it pretty well. It was a very useful way of sharing code and keeping track of issues and things missing. Me and Tina created a lot of Issue files that could easily be closed once something was fixed. I have been uploading onto GitHub from the very start of the working process and every time I ran into an issue with the code, I could easily go back to an older version or track all the additions I had made. This was the first time ever, I worked on the development of a webpage but I can imagine that managing the code without GitHub would turn out very chaotic. I am happy that I now know how to use it and can keep using it for projects in the future.

Another thing I did along with the coding was blogging. It was a good way to reflect on things I had learned as well as a possibility for us to understand the thought process of our fellow group members. In case I forget something I might need for upcoming projects, I can now always go back and look at how I did it before.

Reflecting on our project now, I am very satisfied with the outcome. Our page does not only meet the basic needs but because we were finished with the coding early, we had time to add extras such as a logo, more PHP functions and a nice design. Of course, we focused on the PHP first, since it is the main part of this project bur once I had it done, we wanted to explore all the other ways we could improve our page.

Looking back at the beginning of the project, I am very happy with the way the planning went on. Tina joined our group a bit later but she helped from the very beginning and was enthusiastic about work and ended up redesigning and improving the welcome page Becky made with Bootstrap, after we decided not to use Bootstrap, from the very scratch. We all contributed logo ideas and Tina did a lot of research on the name. We also all looked into other projects similar to ours to make sure we understood what we were dealing with. We all showed up for our group meetings, except for Rafiel who disappeared after the second one and we stayed in a lot after workshops to work on the project and we all developed a clear idea on what the page was supposed to look and be like. Since my group members said that they were not very secure with coding, I ended up writing most of the PHP for the page though while my group members contributed in other important ways. I did not mind the extra work, but because I came from basically no web design and PHP background, I had to do a lot of research on it but now, I feel pretty secure with it. Of course I know I have only scratched the surface of it and there is way more to learn but I enjoyed the coding. Since the project is about us all understanding the code and working on it though, I also spent a lot of time explaining my group mates how to do things and going through the code with them. Becky then managed to write PHP for the search page as well as code for making the page responsive (she also worked on a report button that we sadly could not integrate) and Tina did the about-us page, did research on anonymity online, wrote a text for the page telling the users what it was supposed to be used for (and what not) and helped me with the design and CSS part. She also stayed in late with me a lot to make sure that she understood how everything worked and we could get it done in time. I also commented all the code so my group members could go through and ask questions about it in case they had not understood anything. Rafiel wanted to contribute doing a ‘like on Facebook’ button but he never replied to our messages again. In general, I think we all improved our knowledge in a lot of different ways but now we should be at a point where we know what is going on with the backend as well as the frontend of our page as well as having a pretty decent understanding of the area our page is in.

Advertisements

Making the page responsive

Eventually we still had to make our page responsive, so it could be used on different devices without any problems. Making a page responsive is an important part of its development since nowadays, a lot of users do not longer stick to only laptops or PC’s to use the internet. According to the Office for national Statistics for example “access to the Internet using a mobile phone more than doubled between 2010 and 2014, from 24% to 58%.” Looking at numbers like this, it can easily be seen how important it is that the user is enables to access the page from other devices.

Originally, Becky wanted to take care of making our page responsive. Since we decided not to use Bootstrap, we had to do more work ourselves but we made the decision so we could not just improve our PHP but also our CSS skills working on the project. Becky started off looking at different resources and gaining knowledge about how to turn an already existing page responsive. But she could not quite figure out how to do it, so she asked for help and I also send her some links and explained what I knew about responsiveness. Since I previously looked into it for a bit as well as talked to the other students, I knew about media queries and how to use them to change the way the page looks like depending on screen size. Becky then did some more research and wrote some code, but she could not quite get it working, so she asked me if I could give her an example of how to use the media query and to help her, I used one of them to make the page responsive to an iPad mini (1024px max width). We thought that once Becky saw and understood the query, she could add more of them. To make the page look nice and usable on a smaller screen, I had to work with spaces and sizes. The layout would change if the screen size was changed, and slip into the new line. Because the header is fixed though, it ended up being really big and cover up the posts. To make the header thinner, I changed the size of two of the buttons. After this was done, the rest would fit into one line and not be in front of the posts. You can see the two versions here:

Before:

Screenshot (315)

After:

Screenshot (299)

I then uploaded the following code onto Github, so Becky could look at the query.


/*Media Queries for making to responsive to smaller screen sizes.*/

@media screen and (max-width: 1400px) {

.box_post_gender {
 min-height: 70px;
 color: white;
 margin: auto;
 font-family:sans-serif;
 font-size: 20px;
 background-color: #4F4F4F;;
 width: 100%;
 z-index: 100;
 top: 50px;
 position: fixed;
}

.box_hello {
 color: white;
 font-family: sans-serif;
 font-size: 20px;
 text-align: center;
 margin-left: 20px;
 float: left;
 line-height: 70px;
}

.box_hello2 {
 display: none;
}

.box_post_gender_content {
 text-align: right;
 margin-right: 35px;
 display: inline-block;
 float: right;
 margin-top: 5px;
}
 
.delete_toggle {
 width: 150px;
 height: 48px;
 cursor: pointer;
 text-align: center;
 line-height: 10px;
 background: #d1404b;
 border: 1px solid #be3b45;
 border-radius: 2px;
 color: #fff;
 font-family: 'Exo', sans-serif;
 font-size: 20px;
 font-weight: 500;
 display: inline-block;
 position: relative;
 left: 0px;
 top: 3px;
}
 
.delete {
 width: 150px;
 height: 48px;
 line-height: 50px;
 text-align: center;
 background: #d1404b;
 border: 1px solid #be3b45;
 cursor: pointer;
 border-radius: 2px;
 color: #fff;
 font-family: 'Exo', sans-serif;
 font-size: 20px;
 font-weight: 500;
 margin-left: 82px;
 text-decoration: none;
}

.delete a {
 text-decoration: none;
 color: white;
}
 
input[type="submit"] {
 width: 60px;
 height: 48px;
 background: #fff;
 border: 1px solid #fff;
 cursor: pointer;
 border-radius: 2px;
 color: #85c14a;
 font-family: 'Exo', sans-serif;
 font-size: 15px;
 font-weight: 500;
 padding: 6px;
 margin-top: 10px;
}

input[type="submit"]:active{
 opacity: 0.6;
}

input[type="submit"]:hover{
 opacity: 0.8;
}
}


Becky worked for a day on the responsiveness for smaller screen sizes. Then she messaged me again, saying that she still  struggled with doing it and that she had only partly made it responsive to one smaller size and that she might not be able to finish it on her own, so she put her code onto Github, so me and Tina could have a look and finish it. I worked on it then using more media queries and in the following, you can see some pictures that show how it turned out. I then updated Github again, so Becky could look at and go through the code.

Screenshot (311)

Screenshot (312)

Screenshot (313)

Screenshot (314)

References:

Part of Internet Access, Households and Individuals, 2014. Available from: http://www.ons.gov.uk/ons/rel/rdit2/internet-access—households-and-individuals/2014/stb-ia-2014.html [Accessed 19th April, 2014].

Unknown, Unknown. Am I Responsive? Available from: http://ami.responsivedesign.is/ [Accessed 19th April, 2014].