Finally!!!

I really enjoyed doing DECO1800 this semester, as I've learned and improved many things especially my designing, HTML, CSS skills. 


Link to our application: deco1800-43.uqcloud.net

Link to my portfolio: http://folio.uqcloud.net/s4301963/

Reflective Journal Entry - Week 13: TRADE SHOW

This week was our final week before exams, where we had the DECO1800 Trade Show. We met with group members on Wednesday and discussed how we are going to present in the trade show and come up with some ideas, which all embers agreed on. It was very nice to experience a real trade show. I really enjoyed the trade show and working hard with my group members to deliver this project.

Pictures of the Trade Show:

Example of HTML + CSS code written

Shows the HTML code after commenting and adding references to the 3rd party Jquery plugin used.

Shows the CSS code after for the body and header section of the site.

I've validated the code. Thus, the code written is valid HTML5 and CSS3.

Final Trade Show Poster

Working ...

Currently, I am working on modifying the powerpoint presentation design after receiving  the updated content form Inam Alvi (team member). It will be presented in our Trade Show on the plasma TV (if available).

Designing Our Trade Show Brochure using Pages

Designing the instructions page used for our site

I have made two pages one is horizontal instructions page and the other one is vertical instructions page. The horizontal instructions page will be used for the site. As the vertical instructions page will be used for the A3 banner for our Trade Show.

Reflective Journal Entry - Week 11:

In this week's contact session we had digital prototype our website and test the functionality of the site. We had almost everything working except the hotspots, since we wanted to ask users if they prefer the hotspots (markers on map) or maps (heat maps). Most of the users choose heat maps since it is more presentable and shows which suburb of Brisbane the user selected using colours.

Also I've noticed some users did not notice the select suburb box and the search bar inside the select box, since the colours were too light. I had to fix it and change the colours, as I also changed the height of the select box as shown below:

NSW Crime Tool (Our Inspiration) - MAPS

After the feedback we received from the digital prototype done in the past contact class, we have decided to change the hotspots into maps/heat maps. As users who tested our web app. preferred the maps instead of the hotspots. One other problem with the hotspots was that we didn't have an accurate address to drop the marker on hotspots. We can only drop markers according to suburb lat. and long., but if the suburb has more than one result then all markers will be dropped on the same spot.

Reference: http://crimetool.bocsar.nsw.gov.au/bocsar/

Reflective Journal Entry - Week 10:

This week, both contact and workshop sessions were for asking the tutors questions and receiving feedback, as well as, finish our individual tasks remaining.

Here I am editing icons color in gimp inorder to match our site colour scheme:

Final Website Wireframes (sketches)

We met today with the group a discussed how our final website should look like in terms of functionality. I started sketching the wireframes, since I am responsible from the HTML & CSS, JAVASCRIPT Implementation, as we all agreed on the wireframes below:

Reflective Journal Entry - Week 9:

This week was our presentation week. In the contact session we had to present our work-in-progress to the class for 5 minutes. We needed to show the functionality of the website, but we still did not call trove api (connected trove with the application). We received some useful feedback from the lecturer and tutors that will help improve the functionality of the application. One feedbacks was to move the search box to a different place, so it it obvious for users.


Here are some screenshots of the web application in-progress:

Modifying the design of the powerpoint presentation for Major Project: Part B

Modifying JQuery Plugin Css

This png image used as a skin (background colour) for the year range slider. I modified the colours using GIMP so it matches our website colour scheme.

Reflective Journal Entry - Week 8:

During this week's contact and workshop session, we were given the time to work on our web application, as well as, the document that are due next week. 

I was responsible for coding the HTML, CSS, JAVASCRIPT of our web application. At the beginning, I faced few problems when implementing the javascript part of the site. Since, I didn't find any relevant year slider that can be used to select year range from 1 year to 100 years, depending on the user. However, after 5 days I found a relevant year range slider that can be used for our web application. 

Until now we don't have any idea how to connect the selection check boxes and year slider with the data coming from trove. We are working in a group to solve this problem as soon as possible.

Website Wireframes (sketches)

After our usual group meeting this afternoon, we discussed how we want the website to look like after the feedback we got from the paper prototype we did last week. I stared sketching the wireframes for Hotspots page, Articles page, Images page before starting implementing the website.

Reflective Journal Entry - Week 7:

This week was quite busy. We had a meeting on to tuesday afternoon in order to complete the paper prototype. In the contact session we had to bring our completed prototype to test and get feedback in order to improve the application. We split our team in two groups for the first round where Kenny and Kartik went to test other team prototypes, while Inam and I stayed in the group. Then we swapped groups for the second round. 

Some of the limitations of our and other groups prototype was that it was not showing most of the functionality of the website. For example in our application, it was not obvious that you can select multiple types of natural disasters to display the data related to them.

In terms of feedback, the most useful feedback was as following:

• Size of Hotspots should signifies something.
• A new tab to view the complete article.
• Auto-correct if searched for an invalid location.
• Allow multi-selection of different types of natural disasters.

The less useful feedback was as following:

• Increase the year range from 10 years to 20 years.
• Show hovering functionality when in hotspots.
• A new tab that will take users to trove.

Also, I visited another group to test their application paper prototype. It was about artists, you have to use the timeline to select artists and songs. I gave some feedback on the relocation of buttons and tabs. Since, it was very hard to navigate through the application.


Here are the images of our paper prototype presented in the contact session this week:

This page shows the hotspots of the bushfire incidents happend in 1950.

This page shows the hotspots of the flood incidents happened in 1950. As the user clicked on one of the hotspots a box will pop-up showing some text and a picture, if applicable, related to that incident.

This page shows the articles of the cyclone incidents happened in 1950.

This page shows the articles of the droughts incidents happened in 1950. As the user scrolled down the page, more articles will be shown, if applicable.

This page shows the images in an image gallery of the flood incidents happened in 1960.

This page shows the images in an image gallery of the droughts incidents happened in 1960. As the user clicked on one of the images to enlarge the image.

Reflective Journal Entry - Week 6:

During the contact session this week, we were told to find the soul/essence of our web application, along with identifying the most challenging part when implementing the application. As, the workshop covered how to access PHPMyAdmin, which we will use to store the data later, e.g. location of incidents happened in Brisbane. 

This weeks lecture covered prototyping, which we will be doing in next week's contact session. We were told to bring a paper prototype of the web application and allow other students to test and give us feedback, which will help us improve the application in the coming weeks.

The most challenging part when implementing the application was how we are going to get the data from trove and use it in our website, as well as, how we will connect the year slider and selections with the data coming from trove. Since, we had no problems with implementing the html and css required for the application.




Here is a screenshot of the website progress: 

Week 5: Poster

Updated Poster Mock-ups - Homestigation:

HOMESTIGATION Logo Design

Poster Mock-ups - Homestigation:

Working on Poster 1st Draft