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.
Sunday 17 January 2016
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.
So now, what's left to do is to produce the website using html and css.
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.
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. )
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.
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 |
Sunday 10 January 2016
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.
It didn't work and gave me this error.
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.
So, after changing the link, It finally worked.
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 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.
8: Learning
Again, still on Php, MySQL and online database.
Next, connecting the online database from Dreamweaver, but before that I need to connect to the server.. This is the part that I was stuck for quite a while as it keeps failing to connect.
Well after many days of trying, and asking around, I finally get to connect successfully to the server. and I found a few problems I made that keeps failing the connection.
- server name is incorrect: It should be localhost instead of leo (another term I found in my website host Cpanel)
-username and password should be the username and password for the ftp, not the database.
Then, its time to connect to the database. I started by following the tutorial from the tutorial from Webassist and Bluehost. But it didn't go well. So, this ends in frustration and a severe headache.
References:
Webassist (n.d.) Web development tutorial. Create a Php database connection. Available at: http://www.webassist.com/tutorials/Create-a-PHP-database-connection [Accessed: 1 January 2016]
Next, connecting the online database from Dreamweaver, but before that I need to connect to the server.. This is the part that I was stuck for quite a while as it keeps failing to connect.
 |
| Connection failed. |
 |
| Connection failed again. |
 |
| Connection failed.Again. |
Well after many days of trying, and asking around, I finally get to connect successfully to the server. and I found a few problems I made that keeps failing the connection.
- server name is incorrect: It should be localhost instead of leo (another term I found in my website host Cpanel)
-username and password should be the username and password for the ftp, not the database.
 |
| Finally, it gets connected successfully. After many many many many many many times. |
Then, its time to connect to the database. I started by following the tutorial from the tutorial from Webassist and Bluehost. But it didn't go well. So, this ends in frustration and a severe headache.
 |
| Connecting to the MySQL database. Notice the selection on the bottom right. |
 |
| Filling up the pop up window. |
 |
| Failing to connect to the database. |
References:
Webassist (n.d.) Web development tutorial. Create a Php database connection. Available at: http://www.webassist.com/tutorials/Create-a-PHP-database-connection [Accessed: 1 January 2016]
- This website gives a very clear explaination and step by step visuals to teach the users on connecting to MySQL database through Dreamweaver.
- From this site, I get to know what to write in the MySQL server field.
7: Learning
Still, on Php, MySQL and online database.
Next, I watched a few videos on MySQL and this particular series of videos was very much helpful in getting a MySQL database and creating and inserting data into the online database.
(I only watched until the third video in the list because the rest was entirely working on the online database, but what I wanted was to connect and access the database from Dreamweaver.)
Then I got to know that MySQL database is usually provided by your website host, so I called mine to confirm before I renewed my website host domain name. Then I learned to create an online database on MySQL and creating and adding a user and password to manage the particular database.
Then I continued to follow the tutorial and learned how to insert data into the database in MySQL itself.
Learned:
MySQL database is usually provided by your website host.
Creating the database in MySQL and also creating and adding user and password to manage the particular database.
Inserting data into the database in MySQL itself.
References:
Thenewboston (2014) MySQL database tutorial. Available at: https://www.youtube.com/playlist?list=PL32BC9C878BA72085 [Accessed: 1 January 2016]
Next, I watched a few videos on MySQL and this particular series of videos was very much helpful in getting a MySQL database and creating and inserting data into the online database.
(I only watched until the third video in the list because the rest was entirely working on the online database, but what I wanted was to connect and access the database from Dreamweaver.)
Then I got to know that MySQL database is usually provided by your website host, so I called mine to confirm before I renewed my website host domain name. Then I learned to create an online database on MySQL and creating and adding a user and password to manage the particular database.
Then I continued to follow the tutorial and learned how to insert data into the database in MySQL itself.
 |
| Creating database |
 |
| Database created. |
Learned:
MySQL database is usually provided by your website host.
Creating the database in MySQL and also creating and adding user and password to manage the particular database.
Inserting data into the database in MySQL itself.
References:
Thenewboston (2014) MySQL database tutorial. Available at: https://www.youtube.com/playlist?list=PL32BC9C878BA72085 [Accessed: 1 January 2016]
- A tutorial series on MySQL database with very clear and step by step explanation. It was very helpful, but I only watched up until the third video, as the rest was working in MySQL itself. But I wanted to accessed the database through Dreamweaver.
6: Learning
Php, Database and MySQL is next on my learning plan.
I have no idea what MySQL is and I don't know why but I didn't start with getting know it. At first, I only know that I need php to connect and grab information from the online database. So, I just googled php and online database around and didn't really find what I wanted.
Then, after a long time of searching around, I finally got to know what MySQL is and I started to progress more since then.
Learned: MySQL is an online database
References:
w3schools (n.d.) Php MySQL Database. Available at: http://www.w3schools.com/php/php_mysql_intro.asp [Accessed: 1 January 2016]
I have no idea what MySQL is and I don't know why but I didn't start with getting know it. At first, I only know that I need php to connect and grab information from the online database. So, I just googled php and online database around and didn't really find what I wanted.
Then, after a long time of searching around, I finally got to know what MySQL is and I started to progress more since then.
 |
| A very clear explanation on what MySQL is. |
Learned: MySQL is an online database
References:
w3schools (n.d.) Php MySQL Database. Available at: http://www.w3schools.com/php/php_mysql_intro.asp [Accessed: 1 January 2016]
- Website on coding tutorials where I get to know what exactly MySQL is. The information listed there was very clear.
5: Learning.
Next, Css animation.
The link that I have jot down on my Learning plan was very useful as the information was very clear and complete. It also have references for the codes in which is very necessary for me as coding has a very specific way of working.
There are more Css animation code in the webpage that I referred to, however I have decided to stop the exploration here as I have already grasp how css animation works. The whole process of exploring Css animation took around 1 hour 15 min. Shorter than Css clip path.
Reference:
W3schools.com, (2015). CSS3 Animations. [online] Available at: http://www.w3schools.com/css/css3_animations.asp [Accessed 24 Nov. 2015].
The link that I have jot down on my Learning plan was very useful as the information was very clear and complete. It also have references for the codes in which is very necessary for me as coding has a very specific way of working.
 |
| Tried the background color animation first. |
 |
| A gif of the background color change animation working. |
 |
| Clipped the Css animation using Css clip path to see if it works. It does. |
 |
| A gif of a user triggered animation. The animation (circle become bigger) is only triggered when the cursor touches the initial circle (the smaller, untriggered one). |
 |
| Added another code (animation-delay) in it. It works as the color change only starts after 10 sec delay. |
There are more Css animation code in the webpage that I referred to, however I have decided to stop the exploration here as I have already grasp how css animation works. The whole process of exploring Css animation took around 1 hour 15 min. Shorter than Css clip path.
Reference:
W3schools.com, (2015). CSS3 Animations. [online] Available at: http://www.w3schools.com/css/css3_animations.asp [Accessed 24 Nov. 2015].
- The webpage in which I refered to while learning Css animation. The clear and complete information has been very helpful to me thus this is the only website that I referred to for Css Animation.
4: Learning.
Css clip path will be the first thing for me to start learning as according to my gantt chart. I did encounter some confusion initially however it took me a little time to solve it and learn the way Css clip path works.
I start off with the links that I have kept and recorded in the learning plan, which is the explanation to the making of the website species in pieces (B.James, 2015) . The website then leads me to a page that explains what css masking is and how to do it (D.Schulze, 2013).
With the help of the tutorial from WebTunings (2013), I was able to successfully clip an image into a rectangle by clearing the confusion on how to calculate the size on the rectangle from the top and the left side.
 |
| Calculating the pixels to clip the image into a smaller rectangle. |
 |
| The original image and the clipped image placed side by side for comparison and the codes at the side. |
 |
| The img was changed into the Div name (try1) to see if the codes still work. It does. |
Next, I proceeded to the next clipping shape, inset. I had a lot of problem with this particular shape as I don't understand whether the clipping format was the same as the rectangle clipping format and also I was unsure on how to write the border-radius statement in the code. As we all know that codes work in a very specific way. I went on and did some reading and research that the webpage provided on border-radius but it wasn't very helpful in a sense that I still don't know how to write it in Css code.
Then, I went on and google search Css Clipping mask and found a few websites whereby one of which was very helpful- Making sense of clip path by Drew Minns. The following are the ones that i tried out based on the website.
 | |
| Copy and paste the circle clipping code onto my file and it works. |
 |
| Notice the -webkit- (refer to image below) |
 |
| The need to add -webkit- is explained |
 |
| How the arrangement of the numbers affect the outcome. |
 |
| playing around with the size of the circle. |
 | ||
| Clipping the image into a triangle based on the reference. |
 |
| Trying to invert the triangle. |
 |
| Playing with the numbers on the code. |
 |
| The ellipse clip is not working. (because of the space in between). |
 |
| The ellipse clip is working. |
 |
| I get how the inset clip work after referring to the website (Making sense of clipping mask) |
 |
| Playing around with the inset clip. |
 |
| Trying to clip the background out. Took up quite some time as I need to adjust the percentage, however it was quite easy. |
 |
| Clipping a star out of the image. |
The whole progress of learning Css clip path took me around 2.5 hours, in which I think is quite fast.
References:
James, B. (2015). The Making Of "In Pieces". [online] Smashing Magazine. Available at: http://www.smashingmagazine.com/2015/06/the-making-of-in-pieces/ [Accessed 24 Nov. 2015].
- Website explaining the making of species in pieces. Helpful resources regarding css clip path were provided.
- A very helpful website with clear explanation and references for all types of clip path shape.
- An article explaining what border radius was, but it did not help much as there were no references/examples for me to write the codes.
- A webpage explaining what and how to do clip path, it wasn't that much helpful for me as it explains a lot but there is no clear reference for me to study.
- Webpage on Css Masking in which was only a little helpful as the other codes than the rectangle clip code, was not clear for me
- A video on how to calculate the percentage of mask that you want to clip, very helpful to me as I did have a wrong perception on how to clip the image.
Subscribe to:
Posts (Atom)