Monday, 3 November 2014

Week 11 get PHP and database running


  • Our site has 3 tables in our main database, ‘test_database’:
    • rough_cuts
    • table_login
    • users_roughCuts

rough_cuts - this table deals with information about Rough Cuts that are submitted via the Rough Cut selector tool. When a person creates a Rough Cut, values for ‘name’, ‘submitted_by’, ‘filename’, ‘hashtag’ and ‘description’ are entered. The columns ‘name’ and ‘description’ are based on user input, while ‘hashtag’ is generated through javascript and added to the database using Math.random(). ‘submitted_by’ is taken from a session variable used during login to determine which user is submitting the Rough Cut. ‘rc_id’ is generated automatically based on a time stamp, this is so that Rough Cuts can be displayed in chronological order when they are displayed on a user’s main dashboard (i.e. the most recently created Rough Cuts will be displayed first). The ‘votes’ column is based on data that is inserted and updated on the main Rough Cuts page. When someone clicks on the heart icon, an AJAX call is made to this column to get the current number of votes a RC has, and then updates this number by 1.



Screen Shot 2014-11-03 at 2.05.14 PM.png
Figure 1. Screenshot of rough_cuts table


table_login - a simple two-column table that stores username and passwords. Data is inputted after a user signs up to the site on index.php. ‘id’ column is set to auto increment.



Screen Shot 2014-11-03 at 2.20.02 PM.png
Figure 2. Screenshot of  table_login table



users_roughCuts - unlike in the main rough_cuts table which only stores the user a Rough Cut has been submitted by, this table is used to map which Rough Cuts have been pinned by other members of the site. The table contains 4 columns, ‘hashtag’, ‘username’, ‘pinned’, and ‘voted’.
Screen Shot 2014-11-03 at 2.22.16 PM.png
Figure 3. Screenshot of users_roughCuts table



This information is intended to be used to display different Rough Cuts on member dashboards like the one below. Initially we intended to also allow users to keep track of Rough Cuts they had voted on (thus the need for a ‘votes’ column), but this feature was cut out of our implementation in the interest of time.

Screen Shot 2014-11-03 at 2.31.20 PM.png
Figure 4. Screenshot of a member dashboard. ‘Pinned’ Rough Cuts currently being shown. Other option is to see created Rough Cuts.




When a user ‘pins’ a Rough Cut on the main Rough Cuts page by clicking the pin icon (see Figure 5 below), their username, the hashtag value of the clicked element as well as the value pinned=1 gets inserted into the database.

Screen Shot 2014-11-03 at 2.32.30 PM.png
Figure 5. Screenshot of a Rough Cut on the main Rough Cuts page. Pinned icon appears only to logged in DIY Trove members.



Having this information stored in a separate table enabled us to make subqueries like the one below to easily display which Rough Cuts had been pinned or created by different members.

  • SELECT name, hashtag, filename, submitted_by FROM rough_cuts WHERE hashtag IN (SELECT hashtag FROM users_roughCuts WHERE pinned='1' AND username='$username')

Thursday, 30 October 2014

Week13 Trade show & Final delivery




Week12 Debugging meeting



Week12 Implementing every section of our website


Week 10 More mockups made


Week10 Facebook login implementation

After went through tough time working on Facebook SDK , I implemented the login system which allows users log in DIY TROVE with their Facebook account. Also, I was responsible for making the landing page of our website with Facebook  Like & Share button. By using Facebook Javascript SDK, I coded the landing page with Facebook login, like and share button. Users can login our website with their Facebook account name and profile picture, like our website and share it on their Facebook page. 



Week9 Work-in-process Demo

In the contact today, we demonstrated our work-in-process website by presenting a walk through of the website under a virtual context. The website is a basic frame work of our website which provides the basic functionality of DIY Trove. It was consisted of three main webpage which contains our major content: about page, rough cuts, and dashboard.



Week8 UI design

We were preparing the images for UI design this week. 

Buttons:






Website mockups:





User's profile picture:






Logo design : 



















Week8 Mockup


This week we did original mockups for our website as a guide for coding the real page. 

The mockup contained the main structure of our main page, including tags for About, RoughCuts and Dashboard. Also there are user's profile picture and the location of DIY TROVE logo. 







Week 8 Style Guide

Style Guide

A brief visual style guide review was conducted to assess the similarities between different craft and design websites. The main commonalities identified were:

·      Light/bright themes with fresh colours.
·      Cool/organic colouring for sites that catered to the female demographic i.e. Modcloth, Etsy and Craft Gawker.
·      Stark colour contrasts for sites that catered to unisex and male demographics i.e. Pinterest and DIY Network.
           

Text Treatment:
Two easy-to-read, clean, sans-serif type fonts, Lato and Arvo have been chosen. The foundation for this decision was influenced by the website Modcloth and its design.

All text on the site will be set in this typeface and are available from <http://www.google.com/fonts>. The fonts can be implemented via the CSS using the following code:

<link href=’http://fonts.googleapis.com/css?family=Lato|Arvo’rel=’stylesheet’ type=’text/css’>

Font size and style

<h1> Lato Bold 700 {font-size: 2em} 428A8C
<h2> Lato Normal 400 {font-size: 1.5em} 428A8C
<h3> Lato Normal 400 {font-size: 1.308em} 7AC6CE
<p> Lato Book 300 {font-size: 1.17em} 00000
<a> Lato Book 300 {font-size: 1.17em} A0A0A0
<a visited> Lato Book 300 {font-size: 1.17em} 7AC6CE




Week7 Key Changes to original concept based on feedback

Changes we are going to make according to feedback on paper prototypes :

1. We now just focus doing the pages for community users.

2. The first page will be user's dashboard 

3. There will be two tags for dashboard :


  • User's saved rough cuts
  • my profile 


4. There will no comment section on the  "rough cuts" page 


5. users click on one rough cut , then get to "rough cut "page, where there will be image and some brief information for that rough cut, and comment section . For further information, users can click the "external link " and redirected onto external website for full information of that rough cut . 



Saturday, 13 September 2014

Week7 Feedback from paper prototypes


On the contact session of this week, we presented paper prototypes for classmates to test , which illustrated the site map based on two scenarios. We collect valuable feedback, such as :

Trove folk scenario :

how to delete rough cuts
how to return to the profile


first  time here scenario :

can I comment?
how to register while browsing
how to go back to homepage :go back button
don’t have a logout?

and so on, we are trying to sum up the feedback and redesign the site map .











 FEEDBACK notes 



Friday, 5 September 2014

Week 6 User Research - interviews

User Interviews


A) Rick - Young cook who uses recipes off the web

Q. Which websites do you usually use for your recipes?
I usually use SBS, other than that I use any website that Google recommends for the particular recipe I want to make.

Q. Have you ever tried to improve a recipe by giving it your own spin?
Yeah of course.

Q. Would you consider uploading your effort onto the web (maybe in the form of a picture or a video for other people to use?
I would but I would have to make the dish twice for that. Once to get it right and the second time I’d try and look professional while filming it.

Q. Would you see videos/attempts of other people who have made the same dish with the same recipe?
Yes, I would see the videos to make sure I’m getting the ingredients in the right order. I also feel that it would be a good way to get the right idea about cooking, especially if I don’t understand it. It makes sense to watch something before trying it out yourself.

Further comments:
Whilst taking the interview, Rick also mentioned that he hardly ever follows the recipe completely off the web since he almost never has all the ingredients. On suggesting whether it would be useful if the recipe had the names and locations of the nearest food stores around him with the ingredients he needed, he said it wouldn’t really matter to him because he usually makes a dish with the ingredients he has around the house.






B) Laura Grogan – Teacher in her first year of teaching

Q. What kind of DIY do you usually do? Why do you enjoy doing it?
Because of school I am creating on a regular basis. We have art class once a week and I always like to make it exciting for the kids.
I enjoy doing it to make the classroom more exciting! However, I also like doing it for my home and myself. I am constantly creating something (this includes baking).
I guess you could say that I am a crafter/baker/creator?

Q. What websites do you use to find projects and inspiration?
I use Pinterest, a lot! Pinterest might not have the content that I need but it will direct me to the website or blog that does. I also use a collection of teaching blogs that I know will have a project that they have recently tried. However, the things I find on those blogs I collect onto a Pinterest board anyway.

Q. What elements of Pinterest do you enjoy?
I love that I have somewhere to store everything I see and it is very simple for me to use. I enjoy friends and co-workers being able to see my pins in case they are stuck for inspiration as well.

Q. Do you share your completed projects online?
I actually do! I regularly blog about my experiences and I am part of a teaching community online. There is a small group of us out there who are looking for new and engaging ways to teach without becoming too left centre.
I must admit that if something fails I am more reluctant to share (if I do at all haha).

Q. What blogging platform do you use? What do you include in an average post?
I use blogger, it is simple and easy to use. One of the other teachers actually set it up for me.
In every post I use a whole lot of pictures. I am at school from 7.30am until 5pm some days and as such I am time poor. I have no patience for writing long paragraphs of text (I do enough marking and report writing). I think pictures in most cases are self-explanatory. I do accompany my posts with a short set of instructions/materials list.

Q. Do you share your work publicly?
If you mean facebook, then no. I think I would lose a lot of friends if I clogged their feed with my posts. I share my posts on pinterest and that is about as far as I go. Oh, I might share a post if I think it is really relevant to a wide range of people. I rely on hash-tagging and other things for people to find my posts.




C) Sissi Zhou(China) – UQ MIDes students

Q. What kind of DIY stuff do you usually do? Why you enjoy doing it?
I like to cook dessert myself, because sweetness bring good mood to my friends and myself.

Q. Do you go to any website to find tips about how to do the stuff you want to DIY?
Yes.  I usually browse a Chinese website called “Taste the World”, it provides you a lot of recipes and classified nicely with different ingredients and cuisines. Different users can upload their recipe about same dish, so you have your choice to use whichever recipe you like. It also allows you to comment and rate the recipes, and there is a top chart for the recipes.

Q. Have you ever shared your DIY experience and works in an online community?
Not really, because I don’t cook very well and I don’t feel like spending the time to do it.

Q. Do you think it is easier to share your work in your own blog and link it to the community?
Not really, because I am so used to upload to a community and link it to our own blog, like what we do on Youtube.



D) Annie Wang(China) – UQ Business school student

Q. What kind of DIY stuff do you usually do? Why you enjoy doing it?
I enjoy doing some simple stuff I can use in my daily life, like paper boxes to collect food waste while dining. By doing this, I can reuse newspapers; it is economic and environmental friendly.

Q. Do you go to any website to find tips about how to do the stuff you want to DIY?
Not really, because I don’t make very complicated stuff, how I usually DIY are taught by my mom and friends.

Q. Would you like to spend sometime on it if there is a website which show you how to DIY those little stuff.
Yes, for sure. I‘d love to learn how to make some interesting stuff

Q. Would you like to share your DIY experience and works in an online community?
If I can make something looks great then I will.

Q. Do you think it is easier to share your work in your own blog and link it to the community?

Yes, if it support all my social networks, so I can always open my Facebook or blog, upload something and share to the community.

Conclusion

The two interview above indicates that people would love to find some ideas about DIY on the Internet. Both of the interviewee seemed not very keen in share their own work, it may because they are not that interested in DIY and their cultural background. I believe whether or not to get them upload their work to their own blog or other social network and link it to the community depends on if we can make it very easy to do and support a lot of social networks.