Week13 Final back-end check & Tradeshow

In this week, we start prepare our Tradeshow, there are some unimportant issues that may influence user experience during the tradeshow, so I need to fix them before tradeshow.

The first issue is that sometimes when we search trove images during the “add dream image” stage, the image didn’t display somehow, but there is an error returned, I’m sure that there nothing wrong with the image URL, so one explanation is we can’t get the Trove image, because the image does not exist in the source anymore, but trove still reference that URL.

 

Error message

We can get the image, but there are some solutions that allow us to avoid this issue, so I add few codes into the “updateURL” function, when the image URL(image_path) is undefined, then add an image name(XXX.jpg) to the database as the image path, then when view the orb, it will display a picture (use same name with XXX.jpg) that reminds us the image not exist anymore.   

check if it's undefined

Another issue is that there are some basic mete data for each images, such as author, date, etc. but not all of images have these data, in order to make sure there are no extra information hide within Trove data, so I add “&Include= all” to the trove API, and the result show us there is no extra data within the Trove data.  

Finally, there is a problem for the show orb function, because another team member doing the front end, and he didn’t fully understand our back end structures, so when he tries to display images, some error occurred, the issue is that we can’t display the orb image normally, so I help him to check the code, and I found out that he was using wrong ordered array to get the image data from database, then I fix it by simply adjust the array value position.

wrong array order

Tradeshow

In this week, we present our final product during the contact sessions. It’s very successful and I’m very enjoy present our works. We set up two laptops, one for user test and another one for play the introduction video, there also four posters to provide visitors with a clear understanding of our application.

Tradeshow setup

In the “dream” team, we were being responsible and all team members were working really hard for this project, I also learned a lot form them and lecture. 

Week12 Finishing back end

In this week, I start finishing last part of back end which is get some additional information from Trove and add them into data base. The additional information is about some mete data of art work images, include contributor, issued date, title and Trove URL (link to the Trove website, rather than source of the image). All these data are come from Trove though Trove API.

In order to transfer additional data to the database, I create four columns for each image, called contributor, issued, title and troveUrl, I also crate eight new variables to store these values which from the Trove data. Then I added same code to the refresh functions, because after each refresh, the image should change by follow the image ID.

Additional information

new variables for each additional data 

However, there is a problem that I can’t get additional information after click refresh button to change images, the problem occur is because the Trove data haven’t defined within refresh function, because it’s out of the getJSON function. So the solution is move two refresh functions into getJSON function, then the value can be defined and changed after click refresh button.

Move refresh functions into getJSON function

I noticed that not all of images have these mete data, for example some images don’t have contributor, this is one of the limitation of using Trove API, because we can only use the data that provided by Trove, otherwise we can’t do anything with it. So I change the database that allow contributor, issued, and title to be Null value. 

Week11 Digital Prototype test & bug fix

In this week contact session, we were testing our digital prototype. In order to test create dream, view dream and explore dreams function, we designed three tasks.

Task 1

Explore dreams. View at least 3 user-created dreams and 2 special dreams.

Task 2

Create a dream.

Task 3

Find the dream you most recently created within the dream library.

Result

There were seven users tested our digital prototype, and they provide some valuable feedback to our prototype. According my observation, there is a problem for all different part of application which is no enough instruction when users explore and create dream.  

Instructions we should add to interface:

Orb

Hover: click and drag orb to the chute

Chute

Hover: over chute – drag orb to this to view dream - Glow

Add button

Hover: Click to add dream

Text input:

Hover: glow

Placeholder text: Insert dream text here

Emotion input:

Hover: select emotional impact of dream

Search bar

Placeholder text: Type images associated with dream

Hover: search images to illustrate dream

Refresh:

Hover: click to refresh image

Instruction: Drag orb to chute to add dream

New dream

Hover: Your last dream <- text on hover

Bugs to fix:

There are some bugs that need to fix.

Firstly, in the select images page, after click search button, and then click any refresh button will cause a bug which is can’t display another image anymore. The console.log show us that it’s seems like can’t get the image number from above.

when click first refresh button

when click second refresh button

The image number missing

In order to fix this problem, I move the variable definitions to the top as a global variable, because my team try to separate front end code from back end part, then they did some changes in the JavaScript, they didn’t notice about the code structure.   

Variables

Another problem is that when we first open the website, we can see all orbs (120 orbs) in one moment, because we hide all orbs when website do the initialization, but it’s take some time to hide all orbs, so that why we can see all these orbs.

In order to fix this problem, I’m thinking we can hide all orbs when initialize front end, such as adding a script into front end which can change the opacity of orbs. Then display orbs which from database by using JS in the back end, then the initialization in the front end will faster than back end.

Add script into the front end to hide orbs

Display orbs in the back end rather than hide orbs in the back end

However, I found another efficient way to do this, because if we add script in the front end, it still slower to read and it’s not appropriate, so we can just hide orbs by using CSS, change opacity directly in CSS is faster than any other solutions. 

Directly hide orbs in CSS

Week10 Dreamtime orbs

In this week, we decide to add one new feature which is “Easter Egg”, the purpose is to display some special dream orbs that tell some stories of history or historical person, so users can explore and be inspired by the dreams of historical content. Also we have some target users who appreciate artwork may use Dreamer as a portal to explore artwork in an atypical context. This group of users will likely want to see more information about the artwork. It is expected that the content provided within the application will have artistic value to this group of users.

We found some art work from Trove which is called “dreamtime”. In Australian Aboriginal art, a Dreaming is a totemistic design or artwork, which can be owned by a tribal group or individual.

A Dreaming is a story owned by different tribes and their members that explains the creation of life, people and animals. A Dreaming story (e.g. Kangaroo Dreaming, or Shark Dreaming, or Honey Ant Dreaming) is passed on protectively as it is owned and is a form of intellectual property. In the modern context, an Aborigine cannot relate, or paint someone else's dreaming or creation story without prior permission of the Dreaming's owner. Someone's dreaming story must be respected, as the individual holds the knowledge to that Dreaming story. Certain behavioural constraints are associated with dreaming ownership; for instance, if a Dreaming is painted without authorisation, such action can meet with accusations of "stealing" someone else's Dreaming. Dreaming represents many Aboriginal concepts of "time out of time,” or "everywhen,” when the land was inhabited by ancestral figures, often of heroic proportions or with supernatural abilities.  The term "Dreaming" is based on the root of the term altjira (alcheringa) used by the Aranda people, although it has since been pointed out that the rendition is based on a mistranslation. Anthropologist William Edward Hanley Stanner introduced the derived term of "Dreamtime" in the 1970s.

Dreamtime is commonly used as a term for the animist creation narrative of indigenous Australians for a personal, or group, creation and for what may be understood as the "timeless time" of formative creation and perpetual creating. In addition, the term applies to places and localities on indigenous Australian traditional land (and throughout nontraditional Australia) where the uncreated creation spirits and totemic ancestors, or genii loci, reside. In Dreamtime an individual's entire ancestry exists as one, culminating in the idea that all worldly knowledge is accumulated through one's ancestors. Dreamtime laid down the patterns of life for the Aboriginal people. [1][2]

In order to add more extra orbs for exploration, we decide to add some dreamtime story with images to the database and generate seven static orbs to the front end. Because seven orbs are not very large extend in database, so we just download the images and stories [3] , then add the data into database , also give them ID from 1 to 7, then in the back end, we know the first seven orbs are the “dreamtime” orbs, then we can change the front end to make these orbs different from other orbs which created by users.   

Seven "dreamtime" orbs

1. https://en.wikipedia.org/wiki/Dreamtime

2. https://en.wikipedia.org/wiki/Dreaming_(Australian_Aboriginal_art)

3. https://www.didjshop.com/stories/index.php

Week9 display orb functions

In this week，we start working on the display aspect. The original idea is display orbs on the home page by using different color based on the emotion, also when user point to the orb, then will display preview image on the orb.

For display orbs function, there are two steps. Firstly, we have to use PHP to get the data from database, the function includes connect database and get the data by using SQL.

 

database connection & SQL

Secondly, we use JavaScript to display these orbs on the homepage, and we want place orbs into shelves randomly. So we designed a process method for this function. We create a random number generator, then store each orb into an array (taken_orbs[ ]) with a unique random number ID. Because we initially display every orb within each shelve, then we want to display the same number of orbs with database, so we create another array include all orbs ID（orbs_to_hide[ ]）, match random number ID and orbs ID, hide the orb which not include in the first array (taken_orbs[ ]). In order to hide the orbs, we using jQuery to manipulate orb CSS opacity to 0.          

store orb data into array & assign unique random number to each orb

Create orbs_to_hide array & compare two arrays

hide the orbs

The next step is display orbs with different emotion by using different color, so we get each orb emotion (stored in database when create a new orb), then we use JavaScript function to compare the emotion, If the stored emotion is same with the function emotion, then use jQuery to change the CSS color.  

compare emotions

In order to display preview image when user point to the orb, we use jQuery to detect user action and then add image URL to the orb.   

 

display image when "hover"

Moreover, we discussed about the search function and login function, the result is that we don’t need these functions, because we can create a “my orb” page to display several recent created orbs, and make the latest created orb to be a special orb, then user can know which one is his orb.

  

we also want to make the latest created orb display in different way, so we use another PHP to access database and use SQL language to get the maximum orb id (which is the latest orb ID), then use JavaScript and jQuery to display that orb in special way. 

display latest orb in different way

Week8 Flow & Back-end functions

In this week, I start build the back end functions, include “add a dream” function and “View a dream” function. For “add a dream” interactions, there are six steps, 1. User clicks icon and go to the “add a dream” page (build into the front end) 2. User types out dream story and selects the emotion. 3. User click “next” button go to the next page 4. User types keyword associated with dream for images. 5. Trove adds two images related to the keyword 6. Users can change images by clicking the refresh button 7. User drags the orb to the chute to save dream to the database.

For the front end aspect, all icons and buttons were created by using HTML and CSS. For the back end aspect, there actually are three steps, 1. connect to Trove and get images from Trove 2. Manipulate (refresh function) Trove images and other data (story, orb ID, emotion), 3. store data to the database.

Firstly, I follow the Trove API Technical Guide to build Trove connection by using JavaScript. I create several variables to get user input values (keyword) and API key, then create a search query same with the Trove API Technical Guide: http://api.trove.nla.gov.au/result?key=<INSERT KEY>&zone=<ZONE NAME>&q=<YOUR SEARCH TERMS> [1]. Then I use “getJSON”method to get the JSON information we need to display the images.

Search from Trove

 

getJSON method & Random number generator

When I extend the JASON data, I found that each image contains two different URLs, one URL link type is “fulltext” and another one is “thumbnail”. The different of these two URL is that we can directly use “thumbnail”URL to display image content, but the image quality is very low, but we can’t directly use “fulltext” URL without get permission from other website, such as Flickr. In order to get the high quality images, I was inspired by one Trove example which is “Images & Trove” [2], it’s show us how to reformat and access high quality images from each website ("flickr.com", "nla.gov.au", "artsearch.nga.gov.au", "recordsearch.naa.gov.au", "images.slsa.sa.gov.au").  

 

Reformat URL

Access Flickr by using Flickr key

Secondly, the original idea is that display two images and user can refresh each image. I create two variables that contain random number, because image URL stored in an array, so using these random numbers, then we can display two random images after user search from Trove, and two images URL will store into two variables, they will become the image path and stored into database. Then if user click refresh button, then generate a new random number and display the correspond image from array, also update two image path variables.  But there is a potential problem which is generate two same random numbers, but we don’t want to show users two same images at same time. So I added one function to prevent this issue, the function triggered if two random number is same, then it will change one random number to avoid duplication.

After user click refresh button & prevent duplicate function

Display two images

Update URL after user click refresh

Thirdly, in order to store orb information, we were using PHP to connect to the database, then use SQL to manipulate the orb data, such as update and insert. There are two steps for store dream content, 1. Generate a orbID, the first orbID is 0, the second orbID will be the above orbID plus one, and so on, the function is that getting the max orbID in the database, and adding one in order to create the next orb ID for this new orb, then we can make sure there is no duplication (primary key). 2. Insert orbID, Story, Emotion, image1URL and image2URL to the database, but the imageURL is NULL value, because the story and emotion come from different web page, so we want to add orb first, then update the image URL after user finish the selection. 3. Update two orb image path. 

connect to the database

Generate unique orb ID

Insert a new orb into database

Update two image path URL

For this week back end coding， we have considered the flow in web. We keep the maximize efficiency for every functions, because back end has logic complexity, if the function too complex and take more times to finish the job, the performance issues can negatively impact the user's experience. We improve many times for each function, so that they can get the result efficiently.  

We also set clear goals for each function, because every function has a significant purpose, if the goals not clear, it’s may cost overwrite or errors. For example, when we built the random number generator, we only considered matches two numbers with loaded image array, so we create two generators for each image, then we got duplication issue, so actually the goal of this generator is to generate two different numbers, which need a function to avoid the duplication.

References :

[1] Trove API Technical Guide

Source: http://help.nla.gov.au/trove/building-with-trove/api-technical-guide

[2]Getting High Quality Images

Source: http://deco1800.uqcloud.net/examples/troveImage.php

Week7 MVC & Database design

In this week lecture, we were discussed about various of patterns, these patterns are useful when generate repeatable solutions to commonly occurring problems in software design. There is a very important pattern which is model-view-controller is highly related for our concept back end design.

Models represent knowledge, a model could be a single object, or it could be some structure of objects, so the model for our concept is the database structure, which include adding and retrieving items from DB, processing data from/to the DB and only connect to the controller. The view is a representation of the model, in our case, it’s the client side or front end, which include HTML and CSS, also the browser. The view also speaks only with the controller. A controller is the link between a user and the system, it can processes GET/POST/PUT/DESTROY requests (by using PHP) and handle all other server-side logic. The processes steps are 1. takes information from user 2. processes information and talks to the database if needed 3. Receives information from database 4. Speaks to view to explain presentation to the viewer (how display data to the screen).

Our concept back end is similar with model-view-controller pattern. When user want to view a dream, after he click the dream icon, then a request sends to the controller, PHP will access the database, then process the request and get the data, controller then send the data to the font end, the dream detail shows on the screen with an appropriate format and layout.

 

MVC

For our concept database design, firstly, I create a relational schema to define each table and their relationships. According to our original concept, there are three tables, the first table is “orb”, it includes two attributes which are orb ID and dream description, another table is “image”, also include two attributes which are image ID and image URL, the third table is “emotion”, it consists of emotions and emotion ID. There are two relationships, the first relation is: an orb must have two images, an image may be used by many orbs. The second relation is: each orb must have one emotion, and each emotion may belong to many orb.  

Relational Schema

Tables in phpmyadmin 

For the data type, I set all IDs as INT type, because they are numbers, so integer is a better choice.  I also set other attributes as VARCHAR type, because VARCHAR represent character string.

Primary keys: orb ID, image ID, motion ID

Foreign key: Table “Orb” (image ID) --à Table “image” (image ID)  , this may change after relational Mapping, because it’s M:N relationship

           Table  “Orb”(Eid) --à Table “emotion” (Eid)

Emotion table structure

Image table structure

Orb table structure

Relationships

Week 6 Task flow & Interaction map & Prototyping

Task flow

In this week, my team finalized first stage of concept design and defined our implementation scope and project plan.  But when I try to create an interaction map for explain our concept functions and interactivity, I found that there were some unclear areas between user interaction and interface, so I discussed with another team member who is also the original concept creator. We create a high level task flow to help my team to understand more clearly about the concept by shows the main form of interaction and functions.

high-level task flow

In conclusion, the main form of interactivity includes creating, publishing dreams and viewing, exploring dreams. For creating and publishing dreams, user can select from dynamic images viewing and exploring dreams. The user action includes click buttons, 

drag the orb.

Interaction map & Prototyping 

According to the lecture, I think the next important step is prototyping, prototype can help us evaluate designs, because we still not sure how to implement several functions. I also think solve some design problems before getting deep into coding is an efficient way for saving effort and time. Before start prototyping, we need visualizing the concept interactions, so I create two interaction maps combine with storyboard (two scenarios) and user interactions.

In the interaction map, I insert some storyboard scenes before show the application interfaces, because they can provide scenarios that users might encounter when using the application that can help people understand the purpose of our concept and potential target users. Then I create all interface that required by concept, some gestures added on the interface to help people to understand user interactions of each operation. The interact flow is the same as high-level task flow.

Interaction map & Storyboard & Tasks

Interaction map & Storyboard & Tasks

Week5 concept idea & web application technologies

In this week, we divided into different groups in this week，and I join a group which focus on the concept “Dream”.  This concept is a web application which provides a virtual space for exploring and sharing dreams. In the team discussion, we found one problem which is how to create more interactivity between user and the data which come from Trove， because we were not sure what kind of interaction is suitable for our concept. After that, I came up an idea which is user can create a dream by search key word and get a list of data (image) from Trove, then user select data and add it into the new dream, and different image combine to a unique dream. Finally, each related dream will automatically connect together.

 

Main interaction

According to the lecture, we have thinking about which kind of web application technologies will used for implement the concept. For the client side, we going to use HTML, CSS and JavaScript to build the front end, include the interface for dream “map” and main function for create new dream, we may using API to get the data, after user selection, the dream data will stored into database, then we need to use PHP and MySQL to make this happen.

web application technologies

Week 4 Final design exploration and improvment

In this week, I did more research about my concept, and found some problems, so I decide to make some changes for my concept detail.

Firstly, I found that my audience was anyone and it’s inappropriate, because a product can be used by anyone, but the audience is who are we designing this concept for, so my audience should match the concept’s purpose. Furthermore, I found some potential audience which conclude from research.

First one is someone who love travel, such as tourists, because they have more opportunities to know what happened to the place or what the place look like, so they can post more related image to the website.  Second one is young people or teenage, because they more likely to share things based on where they live, and also they can learn more knowledge about different things from different place, rather than only focus on their friend circles [1].

Secondly, I asked myself, why I use images as basic source of my concept. According to my research, Internet users more interested in something that have visual appeal, because it can attract attention, creates a first impression, Build relationships and affects emotions. And image is one of the visual appeal element [2].

Today, there are lots of image-based social media web site or applications, such as Instagram. They have some common features. For example, they provide a platform to allow people sharing things and try to connect people together, no matter where they are [3]. But what if someone want to make connection to specific place, or find some interesting things from a specific location. So, I came up with an idea, which is “the window of the world”, it’s basically a geolocation-based image sharing website

The purpose of my concept is extend people’s visual field, the site lets you get a better idea of any area in the world by viewing images that shared by others. Also to let them find interesting things rather than waiting someone share to them.

For the functions part, I add more details and make the concept easy to understand.

Here is how the concept works, my website provides a world map, the map can be Google map or just photo map, and the map divide into equal squares, user can click each square, then the related images will show on right side of the screen, user can click these images and check or post comments. If user want adds more related image to that place and share with others, they can use search bar to search images and the result will directly come from Trove by using Trove Web API. So user can drag image into specific place which present by squares.

User can zoom in and out on the map to find information about more precise location. User also allowed to search the location by input its name, it’s may be a city or park, even a building. Also they can use computer or mobile devices to access this website.

Reference:

[1] Justin, L. (2015). STUDY: Young People More Likely To Use Social Media in Developing Countries. Retrieved from

http://www.adweek.com/socialtimes/study-young-people-more-likely-to-use-social-media-in-developing-countries/617242

[2] Sabina, I. (2014). Visual Appeal vs. Functionality in Web Design. Retrieved from

http://blog.usabilla.com/visual-appeal-vs-functionality-web-design/

[3] Top 10 Image-Based Social Media Sites. (n.d.). Retrieved from

https://www.webmaster.net/social-media/top-10-image-based-social-media-sites-0.html

Here is my final version of poster 

I decided divide the poster into three different part, first is inspiration, mainly talk about what is the issue and the purpose of my concept. Second part is about the audience, for the pitch, I will explain two different audiences and give the reason why I targeting them. Third part is about the interactivity and functions, for the pitch I will explain who the concept works and the poster is for shows some visual component, such as interface. 

Week3 concept detail & poster

In this week, I decided to make a poster for one of my ideas. This concept called “window of the world”, it’s means people can understand more about our world through this website. Before I make the poster, I did more research about this concept, because I want make this concept meaningful rather than just a fancy idea.

Key inspiration & research:

My concept is more like an image-based social media, there are lots of similar website or App, they have some common features. For example, they all tend to create positive emotions in people, make their product easy to use, sharing things around the world, and connect people together. But they are using different ways to achieved these goals. For example, Instagram lets user add more elements to their photos before sharing them, so user can enhance the emotion after they sharing these photos.

Top-10 image-based social media 

My concept also provides a platform and tends to connect people by sharing images which provided by Trove. So, I’m using different way which is lets user find related images by his knowledge to connect with others.

Here is the detail of “window of the world”.   

Target group: 

anyone

The purpose: 

people sharing images which provided by Trove, and make connection for each people

The interactivity:

 the website provides map from different countries, the map divided into grid, and user can click each grid cell and see more information about this place (show more related images), user can search images and drag related one into the grid cell, and make comment, other user can add more comment for this image or add more images into this place (grid cell)

Use of data-sets: 

this website search function can request related images from Trove. Maps also come from Trove.