15: Execution

Constantly uploading to the server is needed to check if the code is working. 

However, I encountered a problem twice after uploading the website. The html codes are working but the css code does not work. I tried cleaning up the server folders the first time and upload it again, it worked and the css codes shows again. But for the second time, It doesn't work even after i clean up the files. Luckily I have backed up the folder. I uploaded the backed up folder and it was working again. 

I tried searching for the problem and its explaining more towards the back end scripting, and I dont really know how to solve it. But for my case, I think it should be because I uploaded the files into the wrong file, or i uploaded it too many times. 

14: Execution

I started to work on the website by doing the index. 

The star in the index took quite a lot of time as it is coded using css- clip path. to make calculating the points easier, a guide was made in illustrator. Although it does not get the point i want exactly, but it is close enough for me to adjust it to the point i want. Initially, I started out calculating the points by using pixels, however, i realised that it might not be a great idea, as i can make the process faster by using percentage. 

After that, I worked on the php . I had a tough time figuring out the php codes as I did not really understand how it works and the structure of writing the codes. This is led me to spent quite a lot of time dealing with the php codes as It was case sensitive. The form below was created using php codes. I have searched for many ways to beautify the form as I have planned in the reference, however it was not working for my website. 

As I tried to insert some information into the form to see if it was working, it gave me an error which I couldn't figure out. Though i searched and searched, I still couldnt solve the problem. However, When I get back the the main page to see if the information had been inserted into the online database successfully, It did. 

As for the main page, there was a lot of problems for me because I had to code everything together. For an example : click the star and show data  seems easy but it was hard because the star was made from css clip path and as it was pure css code, it was tough to make it a button and code it with php together also. 

Another issue that i face with the main page is the overlapping of elements ( php data, background and images). As seen from the other page, the overlapping elements seems fine as I used z-index to adjust it. However, the z-index does not seem to be working for the main page, and i think that it might be because of the php data. As the php data might get more and more, it is hard to adjust the 'top' for it too as it requires a fixed number. (top is a css code that adjust the overlapping area for the elements). Initially the php information was planend to be shown one row, after the button was clicked, but in the end, i couldnt make the button work, so i improvised it to show the information all together in the main page. 

I would say that I need to study and learn more about php as it is quite important for web designing. For now, I guess i would have to settle with this as time is running out. 

13: Beta test

After producing the website. Next comes beta testing. The beta test was conducted face to face so that I can observe them navigating the site.

Some questions i have jot down for the beta test was:
- Try Uploading your own pet story.
- Look for other's pet story.
- Would you visit this page often ?

Some of my friends who are pet owners,  involved were, Janice, Yen Shan, Xie Yi, Hanna and Ann.

Janice's feedback:
- The visuals are pretty.
- I wish to look at my story after i uploaded it.
- Some issues on navigating the main page as they do not know to click the stars to look at other people's pet story.
- Yes, I would visit the page often.

Yen Shan's feedback:
- Her response to the website is fine.
- Uploading pet story can be done without guidance, quite a bit of time was spent on the main page as she has difficulty finding out how to read other people's story.
- Visiting the page again depending on her mood, for an example, when she misses her dog, who had passed away for quite some time.

Xie Yi's feedback:
- His response to the website is fine.
- Uploading pet story can be done without guidance, quite a bit of time was spent on the main page as she has difficulty finding out how to read other people's story.
- High possibility of not visiting the page again as he is not interested to know what other people are doing with their pets.

Hanna's feedback:
- Shows interest in the webpage even though she doesn't know what it is.
- Uploading the story by herself without guidance.
- Quite some time spent on finding out how to see other people's pet story.
- Yes, she would likely be visiting the page again as she is interested to know what other silly stories other pet owners have experienced with their pets.
- i cant reply and like other people's story ?

Ann's feedback:
- Shows some interest in the webpage.
- uploading the story without much difficulty, some time spent on how to read other people's story.
- Glad that such a page exist to serve as a sharing and supporting platform for pet owners. As her dog is quite old, she is expecting death to come to her dog soon and she understands that it is hard and sometimes we need to get it out to people who will understand.

Some common issues that I find with the beta test result is that, users are taking more time to look at the main page as they do not know that they should click on the stars to be able to read other people's pet story. Probably I would be making some hovering codes so that the star gives some feedback to indicate that it is clickable to the users.

12: Execution

After gathering the alpha feebacks , I have made some changes with the visuals and have consider more on the user flow.

Below would be the refined visuals.

index page

Upload your story page

Confirmation page after uploading

Main page, where users discover other people's pet story

Pet story pop up page. 

So now, what's left to do is to produce the website using html and css.

11: Alpha test

The alpha test was conducted verbally with peers, after the mockup of the visuals are produced. 

Some questions I have jot down to ask on the alpha test was: 

- Does the visuals look like what I want it to be ? (bottom: Cloud, Middle: girl and dog sitting on cloud) 

- is the bottom cloud position too high or too low ? 

- icon placement 

- comment page layout

- upload story layout / design

mockup visuals used for alpha testing.

mockup visuals used for alpha testing.

mockup visuals used for alpha testing.

mockup visuals used for alpha testing.

mockup visuals used for alpha testing.

mockup visuals used for alpha testing.

Peers involved in the alpha testing was Brenda, Sebastian and Xinwei. 

Brenda's feedback: 

- The bottom cloud look like water. 

- Other than that, it looks fine to her. 

- The middle visuals look like a girl and a dog to her. 

Brenda's feedback

Brenda's feedback

Xinwei's Feedback: 

- The middle visuals look like couple or a bear. 

- The bottom cloud look like ice. 

Sebastian's feedback: 

- The bottom cloud look like ice. 

- The middle cloud is ok.

- The middle girl and dog visual looks like teddy bear. Probably make the flower color more vibrant or make the dog ear stand or add a collar to the dog. 

- bottom cloud position was suggested to be animated to enhance the user experience. Cloud rise frm below. 

- Icon placement: think of the user flow, and was suggested to make a few pages instead of putting everything all in one page. 

-Comment page layout: Experiment with different title font 

- think about the user flow. 

10: Execution

After the learning process, next comes the execution.

I started to make a mockup of the visuals that I had in mind using photoshop.

mockup produced using photoshop

After that, I started to reproduce the mockup in illustrator using a low poly art style. Low poly art was used because the visuals are going to be reproduced using css clip path. ( if the visuals are curvy, it is troublesome to code the x and y position one by one. )

mockup produced using illustrator

Then, I was struggling on some pages as there was an issue with the aesthetics of the webpage and also the usability of the webpage. Some examples were saved as I thought that it would be good to have someone's opinion on it.

experimenting on the layout of the webpage

experimenting on the layout of the webpage

experimenting on the layout of the webpage

experimenting on the layout of the webpage

experimenting on the layout of the webpage

experimenting on the layout of the webpage

experimenting on the layout of the webpage

experimenting on the icon placement on the webpage

experimenting on the icon placement on the webpage

experimenting on the icon placement on the webpage

9: Learning

Still, on Php, MySQL and online database.

I started from connecting to the database again, and this time, after watching another tutorial, I decided to give their way a try.

Codes in file index.php

Codes in file connection.php

It didn't work and gave me this error.

screenshot of the error page.

So, I tried uploading to the public_html file and tried it again and it still doesn't work. Then, I went on and asked Joanne (taught our class php and database related stuff) and she helped me checked on the codes and suggests that the problem might be in the link.
 

Conversation I had with Ms Joanne.

So, after changing the link, It finally worked.

The 3 names are echoed from the online database.

Information being retrieved successfully from the online database.

The information can be uploaded into the online database through form created in Dreamweaver.

References: 

Melvin Walls (2009) Php and MySQL - Connecting to a database and adding data. Available at: https://www.youtube.com/watch?v=tqfl51HVodI [Accessed: 1 January 2016]

• I followed this tutorial exactly and it was very much helpful.