weijunzhao-blog

[weijunzhao-blog]

DECO7180 Week 15 Journal

Learning outcomes in this course

My original expectations of this course were designing excellent and innovative websites, learning how to build websites with programming languages and experiencing teamwork.

During this semester, I took the responsibility of designing the interfaces of the web and some posters for our project presentations, so I had many chances to put my design skills into practice. After finishing each major project, our team could get lots of valuable suggestions about the user experience of using our website. So I could improve the design of our web according to testers’ feedback. This course provided lots of opportunities for me to consider users’ needs and encouraged me to design a better version of our product.

I also learned how to use HTML & CSS and Javascript to build websites during the process of our major projects and building my portfolio. I have mastered the knowledge of the front-end programming languages. I had never learned programming languages before this semester. This course taught me how to better utilise the online learning resources after class and improved my self-learning ability significantly. 

Another excellent experience in this course I got was working with other team members to complete our project together. I had never worked with others before. So I thought it was a good chance for me to enhance the teamwork ability. When I worked with other team members, I realised the significance of cooperation, and teamwork could produce a better outcome with the efforts of all the members. Additionally, I learned a lot from other three members of our team, such as how to write a formal report and how to make mockups of a product.  

When I progressed in this course, I attempted to help other members to finish their tasks. For example, I tried to learn more about Google Map API. Because of the inexperience of using API, all the members of our team felt difficult to master it. In the final product, I completed the code of navigation page.

In the group meetings during this semester, we had to do some brainstormings to generate some excellent ideas for our project. When I listened to other members' opinions, I could get some new inspirations to polish my thoughts. Besides, after presenting my ideas, I could also get some suggestions from my group members. Brainstorming was a good way to exercise my critical thinking ability. And group discussions could enable us to exchange our ideas and learn from each other.

We had many presentations in the contact sessions during this semester. On one hand, when I presented our project in front of the tutors and classmates, it was a good chance for me to exercise the courage and the ability to present concisely. These presentations have significantly increased my confidence of showing my ideas in front of other people. On the other hand, when I watched other groups' presentations, I could learn a lot from them, such as how they generated good ideas and the way they presented their concepts.

Before I learned this course, I had never known what paper prototyping was and what the importance of it was. But after the practice of making a paper prototype, I knew that it was a kind of low-fidelity prototyping. However, building a paper prototype was also an efficient way to get sufficient feedback from testers at the beginning of the project. During the paper prototyping session, our team got lots of valuable suggestions and feedback. It was also the first time that I knew the significance of making a paper prototype.

Suggestions about this course

I found many students thought they were not familiar with the PHP language and how to use API from different websites. Although we have finished the final project in this course, most of us still cannot master the knowledge of using back-end programming languages. So I think there should be more opportunities for students to learning these skills in the workshop sessions. It will be better if we can learn the knowledge from basic level instead of searching the specific learning resources online when we encountered some problems in coding. Additionally, I think the data we can use is limited, which may restrict our imagination. In my view, other aspects of this course are appropriate for students' learning.

Portfolio Process

This week I have to finish the design of the left pages in my portfolio. They are major project A, major project B, major project C and course reflection page.

Here are some sketches of the major project.

I also drew the wireframes of all the pages in my portfolio. They can help me to design each page in the phototshop.

In the three major project pages, I want to use a progress bar to show the progress of the major project, like the images below.

In the major project A, I want to introduce other members in our team, because I think working as a group is an important and great experience of me during this semester.

And I also want to introduce my role in the group.

In a group, I took the responsibility of designing all the interfaces of the website and some frnot end codes. And I needed to changed the design after taking all the feedback into consideration after every presentation.

Here are the final design of three major projects.

Here is the final design of the portfolio process page.

The portfolio web: http://folio.uqcloud.net/s4481459/

[weijunzhao-blog]

DECO7180 Week 14 Journal

Portfolio Process

This week, I wanted to determine the style of the portfolio, so I did a brainstorm about the main features of building my personal portfolio. I want it to be a cool website. Finally, I chose black and yellow as the colours of the portfolio.

Task 1 Design Homepage

I wanted to make a welcome image shown on the homepage’s banner. And some images of this course will be combined together in it with some big titles to welcome browsers.

The finalised welcome image will look like the image below.

I also designed the homepage according to the wireframe I made last week. It was the 1st version of the homepage. I made the layout for design exploration and the major project. I have not added the brief introduction of portfolio process, and I will add it after I finish all the design of it.

And I finish building the homepage with HTML&CSS. Something that is a little bit difficult is adding a drop-down menu to the “Major project” on the navigation bar. I want to separate the A,B and C parts into three pages, so a drop-down menu is necessary here.

The finalised menu bar and drop-down menu look like the image below.

Task 2 Design Self-introduction Page

Self-introduction page is also needed in the portfolio, so I plan to design a business card and put my name, contact number, education experience and skills on it. It may look like the image below.

Task 3 Design Design Exploration Page

I list the main contents that are needed to be included in the design exploration page and corresponding layout of each part.

The finalised design of the design exploration page will look like the images below. They are only some parts of it. The page will be shown on the portfolio website. : )

[weijunzhao-blog]

DECO7180 Week 13 Journal

This week, we had a trade show to introduce our project to tutors and peers. One of our group members had a business trip to another city on Tuesday, so we changed the trade show to Thursday with undergraduates.

Before the trade show, we tried to make our web better. Due to the inexperience of using Google Map API, one of our team members could not finish her tasks of building the route suggestion page. So I tried to make up for this. I searched lots of learning resources about Google Map API. Finally, the route suggestion page looked like the image below. The originally planned function was storing library’s location automatically. However, users had to enter a starting point and destination manually in the final product. It could still provide three methods of getting to the destination for users, including walking, taking public transport and driving.

Trade show

I designed a poster to better introduce our main concept. It included our logo, main purpose, all the interfaces of our web, main functions, and targeted audience.

Sketch

Wireframe

Final poster

In the trade show, I fond many other groups’ themes were similar to ours using Google API to find an ideal library for users. And their final products were even better than ours. To be honest, our final product was not successful to some extent. We intended to use API from Google Map, Flickr and Wikipedia in the original concept, however, all of us had little experience of programming with PHP, so it was quite hard for us to use so many different kinds API to build our website. Many other groups made a game by using the data in data.gov.au and used javascript to make the web looked active. But our website was a functional one and all the information we needed was API from other webs. So the functions of our web that could be realised were limited.

Good experience in the trade show: Users could search the library with the keywords and whether it had a WIFI access. The data we used from Queensland Public Libraries in data.gov.au worked. Users could see the opening hours, WIFI access, contact number and the address of each library. Although we didn’t realise the function of navigation to the library, we still provided a route searching page with Google Map API. Users could enter the starting location and destination manually. There were three kinds of method of getting to the destination on the web. One of the tutors said residents who lived in the urban areas would be very interested in this website.

Bad experience in the trade show: There was a “Favourites” on the navigation bar. The original function of it was saving users frequently visited libraries in the local cache. However, it was also a function that we did not realise. We cannot match user’s modification with the local cache. It was just some Javascript showing how it looked like if the user removed and saved libraries in the favourites.

Because we changed the date of our trade show, so I didn’t have the chance to see the final products of my postgraduate classmates.I viewed some webs of theirs on my own time and wanted to record my feeling here.

1. Music Box This was one of my favourite webs. My first concept of using the data was creating a music game, but I thought it was quite difficult because it only had the music scores in the database. I gave up this idea, but they did it very well. So I was interested in this web.

My favourite part of this web was creating songs by dragging the note or click on some positions of the music score by myself. It was very magic! When I clicked the "Pull me" button, it would show the correct music score of this songs.

The whole theme of this web was also very close to the data. All the music scores in the database were from last century. So both of the font and theme colour gave users a feeling of ancient. They also created a gallery for all the music scores. Users could enter some keywords to search the topic they were interested in.

2.Brisbane Time Explorers

This is another project that I was really interested in.My favourite part of it was that users can choose the clothes they like for their role. The role was very cute. Their targeted audience was young children, so I thought these drawings could be very attractive to them.

And users can choose the difficulty from level 1 to level 4.

Users’ setting would be stored in the menu.

Users needed to log in at first or they could not play the game. This was the function that we didn’t realise in our project.So maybe we could learn how to realise this from them.

[weijunzhao-blog]

DECO7180 Week12 Journal

This week, I started to write the final report for our project. My tasks for the final report included: 1.Draw the architecture diagram of our project 2.Conclude the feedback from paper prototype 3.Describe the process of Paper prototype, including the survey result, evidence, changes made 4.Combine the whole design evidence together 5. Think about the successful and unsuccessful parts of the favourites page and why they were successful/unsuccessful. 6. What improvements I would make to the final product and why. 7. What you were unable to implement, describing why and how would these value-add to the final product.

I planed to finish the first three tasks this week, and do some design exploration for my portfolio.

task 1: Draw the architecture diagram of our project

Sketch

Finalized diagram

task 2: Conclude the feedback from paper prototype again

I transformed the word description about the feedback to form to make it easier to compare them.

task 3: Describe the process of Paper prototype, including the survey result, evidence, changes made

All of these have been documented in the previous journals. I just combine them together to the final report.

Portfolio Process

List some key points of Portfolio’s requirements to make sure what I need to prepare in the following weeks before the deadline of portfolio assessment.

Basic Content －Design Exploration (DECO7180 only).  －Parts A, B & C of the Major Project. －Online Reflective Journal.  －The process of designing and building your portfolio 

Design Considerations －Collect artefacts (sketches, diagrams & individual analysis of the assessment) －QUALITY >QUANTITY －Display learning & growth over time －Brief but thoughtful writing －Discuss and present the process undertaken, reflect the success of the project

Required Content －Basic information: name, the program I an studying, contact details －Documentation & reflection on each assessment －Course reflection （1）Meeting expectations （2）Learning across the course （3）Changes to improve your experience of the course(both internal & external, personal & institutional)

This week, I made a mind mapping of the portfolio’s content of each page.  And I planned to design the homepage at first, and build it with HTML and CSS.

And I drew wireframes of homepage and contact information page. In the homepage,I planned to introduce design exploration, major project and portfolio process briefly. In the “About Me” page, there would be more detailed introduction about me, including contact number, email, education experience, what skills I have and a brief introduction of myself. I want to design it as a business card, which may make it looks cute. : )

There are three parts in the major project, including A,B and C. I wanted to separate these parts into different pages to describe the process of them detailedly. So when the mouse move to the “Major Project” on the navigation bar, a drop-down menu will show up to show the  main three parts of it.

[weijunzhao-blog]

DECO7180 Week 11 Journal

This week, I need to add a function that users can remove libraries from favorites page, which is the main function of this page and the special function of our project.

Tasks for this week:

1. When users click the edit button, the delete button of each library and the save button will show up. 2. Locate the delete buttons in the suitable position. 3. Click the delete button, the corresponding library will be removed. 4. Click the save button, all the delete buttons will disappear. 5. Try to use php to load the images of libraries.

How I finish these tasks:

1. In order to locate the delete buttons in the suitable position of the webpage, I need to use absolute/relative position method with CSS.Here are some knowledge about position property I learnt on the W3school:

Definition and Usage The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).

So I put the delete button in the top right corner of each library image. 

I  give a class name “delete_button” to the delete buttons and here are the style of the buttons.I set their positions are relative and at first they are hidden when users have not click the edit button.

2.Before users click the edit button, the favorites page looks like the image below. There are three parts, including the edit button, libraries info and the page navigation bar.

When users click the edit button, the delete buttons will be shown on the top right corner of the library images. So I add a function to the edit button when user click it.

I write a function called show_delete_btn(). In this function, I need to get all the elements with the class name called “delete_button”, because all the libraries can be edited when users click the edit button, and then use a loop to make all of the buttons visible.At the same time, the save button should also be shown on the page.

3. When users click the delete button, the corresponding library will be removed.  In order to make it happen, I searched the method of remove() using jQuery.

To remove elements and content, there are mainly two jQuery methods:

remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element

Filter the Elements to be Removed

The jQuery remove() method also accepts one parameter, which allows you to filter the elements to be removed.The parameter can be any of the jQuery selector syntaxes.

If I click the first delete button, the webpage will look like this. There are 4 libraries left.

If  I continue to delete a library, it will be like the image below.

4. After editing, users can click the save button to save the favorites. When they click it , both of the save button and the delete buttons will disappear.

I write a function called hide_delete_btn() to hide left delete buttons on the library images and the save button.

5. Using API in the data.gov.au

In the workshop, tutor have taught how to use php to see what information can be used in the data.gov.au. So I find the data API of Queensland Public Libraries.

Then I copy the link and concatenate an API URL including all parameters inline.

Output the data array in a readable format.

Here are some notes about jQuery I made after class.

I also started to make some plans for my portfolio website.It should be done before 10.11.2017. So I still have 4 weeks to build it.

Plans for portfolio:

Week 11  Inspiration collection － Collect some webpages I like and observer their layouts

Week 12 Think about portfolio’s content －What can be displayed in it and start to create the homepage by Photoshop

Week 13 Build website by HTML and CSS and design other pages by Photoshop

Week 14 Build the left pages 

Week 15 Make the portfolio interactive with Javascript

This week, I browsed lots of websites and collected  some well-designed webpages.

[weijunzhao-blog]

Week 10 Journal

Process of web building During the holiday, I made the favorites page responsive,so it has different layouts in different screen sizes.  If the screen is small, fewer libraries will be shown in a row. Images below are the website in different screen size.

I named the each <div> of library class “library” and used CSS to set the style of each library. I put all the library examples in a <div> and each library is a <div>.

There are two buttons on the top of the page under the nav bar,including edit and ok button.The edit button is used to remove the library from favorites and the ok button is used to save the favorites after editing.I wrote some JavaScript to the style of the two buttons.

When the mouse moves over the edit button, the background color of it will turn to dark grey and the font color will turn to white.

When the mouse moves onto the ok button, the background color will turn to white and the font color will turn to green.When the mouse leave the button, they will turn to original style.

The code of Javascript:

[weijunzhao-blog]

DECO7180 Week9 Journal

This week we presented the process of our website,including what we had done, what changes in our website, the remaining tasks of our project and showing the interactive prototype of the whole website. (The online demo:https://deco1800-p1d.uqcloud.net/ Digital prototype and interactive plan: https://xd.adobe.com/view/65ff1834-a09d-4559-874b-1b222700894e/)

We had finished the tasks we planed before.Group forming proposal preparation(week5), proposal presentation,paper prototype presentation(week6), visual design and partial HTML and CSS coding(week7&8) had been done so far. Homepage and favorites page had been built by HTML and CSS. The data from google API had been called in the homepage. And click the “favorites” button on the menu bar in homepage, it can jump to the favorites detailed page. Tasks left for Major Project Part C:Left pages’ building(brief & detailed info page, route suggestion page)Demonstration Debugging(week9)API & Data implementation(week10)Back-end coding & Semi launch(week11)Preparation for the final delivery & report(week12) After the presentation of our project, we asked two questions about the interface of the search menu and route suggestion page.

1st question: Which one of the two search page do you think is better?

We received 6 responses towards this question, and all responses said the 2nd drop down menu is better.

2nd question:

Which design is better?

We received 3 responses towards this question, 2 of 3 voted the right side one, and 1 of 3 voted the left side one.

We also received some other feedbacks and responded to them. Response to audience feedback 1.What’s the target audience? -In this week’s contact, we didn’t change our audience,so we didn’t talk about it. So some people were confused about the audience of our website. As we explained in proposal, our audience will be the following four groups of people: travelers, students, scholars and local residents. 2. What’s the difference to Google Maps? — Smart Library is different to Google Maps in the following 2 aspects: Data usageGoogle Maps provide all libraries around the location, but many private libraries are not accessible to the public. Smart Library will only provide the public library data, so that every library provided is accessible.FunctionalityThe web application will be focused on libraries searching. There will be four main functionalities in the application: Find Libraries, Route Suggestion, Favourites and Search Libraries. When a user searches for a library, the web application will display only the publicly accessible libraries. Additionally, information about Wi-Fi availability will be included, which is not provided by other applications. The applications searching function will allow the user to filter the results by conditions such as ‘Currently Open’ and ‘Has Wi-Fi’, as these are two pieces of information that are essential to visitors.

3. Not creative. The interface is similar to another group. —The idea of this project is about helping people to find libraries. Therefore, the purpose of the website is more practical than creative. However, we will try to add more functionalities to make the website more creative while still maintaining the practical aspect.

4. Users can’t save favourites libraries if there’s no login system. —We are trying to find a way to store the favourite libraries in the local storage.

5. Use more APIs to make the website more functional. —We will add more APIs to enrich the content of our website.

6. Consider the display for  mobile, the design might not be the best. —As we want the application to be used on a variety of devices, the website will be responsive on devices of different screen sizes. We will keep this in mind when coding the site and will try our best to find a good design to suit different sizes devices.

Improvement within the team regarding communication:It would be better to have a weekly group meeting to communicate about the project. Now we only communicate via Messenger and design or build website on our own. I think we should meet more frequently to talk about the details of the project.Improvement within the improvement of the project:We can add more API content to make the website more creative.Add a local log in system to save favorites.We might add the information of cafe and restaurants around the libraries and show how long it takes from users’ locations to the library.

[weijunzhao-blog]

DECO7180 Week8 Journal

Postgraduates:

Reflect on your scoping session.

• What’s the MVP of your project? How did you reach a consensus with your team?

• Detail which parts of the scope have you been delegated. Are they feasible in the timeframe?

• Include a copy of your team’s planning document.

1. Functionality Necessary for MVP（Group’s Summary）:

Set city location：

User needs to be able to choose the city

Searching Libraries:

Incorporate library dataset

Use and display data for an individual library

Access and use the address of an individual library

Google Maps API

Use library dataset to search and display libraries

Use city location in searching

Use address of library to find route suggestion

Use dataset and Maps API to allow user to refine search

Favorites:

User needs to be able to add and remove libraries

User needs to be able to see all libraries favorites

User needs to be able to move from favorites to a specific library

Desired Features:

Twitter API:

Use Twitter API to display Tweets from people around libraries

Cafe and Restaurant Suggestion:

Use Maps API to suggest and display cafes and restaurants close to library

Travel Times:

Use Google Map API to calculate and display travel times from user’s position to the selected library

In order to reach a consensus, we would discuss together at first. All of us would show our opinions and in most cases, we can reach a consensus quickly. When we hold different views and cannot decide which one is better, the leader of the group would analyze all the possible plans and we can vote for the one we like to get the mostly liked option.

2. In our group, I take the responsibility for the visual designs of all the websites and build the ‘Favorites’ page with HTML, CSS and JavaScript. In this week, most parts of the visual designs have been done but I still need to improve the layout of some pages. For example, I need to redesign the drop-down menu instead of pop-out window. In addition, I have known some knowledge of HTML and CSS, so I can build a static web in this weekend and start to learn some knowledge about JavaScript. They are feasible in the timeframe.

3.Team’s planning document

[weijunzhao-blog]

DECO7180 Week7 Journal

1. In the paper prototyping exercise, we got a lot of feedback, including the functionality, interface and the interaction. Functionality: We can add the information about the café or restaurant around the library for users. Try to think about how to utilize the comments on the Twitter or Google Map. Add the google reviews about the library into the library information Interface: Reduce the windows of pop up. Twitter API: Twitter comments on the map is confusing and distracting.

2. We ask testers to do a survey for us and we also have an interview with them to ask some detailed suggestions or their preference.

3. We have both web and phone size prototypes for users to test. So we need to get different feedback according to different sizes. In general, our prototype was well prepared but still had some problems need to be improved. e.g Twitter on the map is confusing and distracting a) Looks like the libraries, so people get mistaken b) Hides the map and information behind it Almost all the testers do not understand the function of the Twitter comments, so they may not give a suggestive feedback.

4. After testing other people’s prototypes, I got inspirations of how to improve the interface and interaction of our website. Some group intend to build a game website, but it can be a little difficult for me to understand the rules and the concept of the game. Some other interesting prototypes are very attractive, which makes me to think about how to make our website to be more attractive to users.

After testing the paper prototype, I made some changes of the interface of our website.

1.I changed the pop-out of the searching window to a drop down menu. And we also added a searching choice called ’opening now’ to choose whether the library is open when users are searching.

2. The detailed info page of the library was also changed from pop-out to a full page. And comments from Twitter and Google Map were also added to this page.

3.We added the ‘Favorites’ to the menu bar and changed the pop-out window to a full page.All the libraries could be added or removed from the favorites page. 

I also learned some knowledge about HTML and CSS. The images below are some notes I made. The knowledge about HTML I learned this week included HTML Elements, HTML Attributes,Headings, Paragraphs,Tables, Lists and HTML Styles.

The knowledge I learned in this week’s workshop

PHP Templating

1.Use the include() function to bring call each slice back into index.php.

a. <?php include(‘header.php’); ?>

b. <?php include(‘sidebar.php’); ?>

c. <?php include(‘footer.php’); ?>

d. <?php include(‘contact.php’); ?>

2.Add an active class to the current page list item in the menu.

$activePage = basename($_SERVER['SCRIPT_FILENAME'], '.php');

And I searched the usage of basename() function(https://www.w3schools.com/php/func_filesystem_basename.asp)

Definition and Usage: The basename() function returns the filename from a path.

Syntax: basename(path,suffix)

3.$_SERVER(https://www.w3schools.com/PhP/php_superglobals.asp)

$_SERVER is a PHP super global variable which holds information about headers, paths, and script locations. 

$_SERVER['SCRIPT_FILENAME'] --Returns the absolute pathname of the currently executing script

4.In the nav element , there are inline conditional statements that check if $activePage is the same as the current menu item. If it is, add the class attribute with a value of active to add visible context to the menu. 

APIs and PHP

1.Compile an API URL.Inside, use the file_get_contents() PHP function to get data from your API call.

$data = file_get_contents($api_url);

2.$data will be a string of JSON, so we need to convert it to an array to work with it by decoding the JSON:a. $data = json_decode($data, true);

The array is like the image below.

3.Setup variables for key data:

Then print the data like this:

This method is very useful for me to build the favorites page in our website, because the name and the images of libraries that users added are necessary to be shown in the favorites page.The images of the library may be called from Flickr API.

[weijunzhao-blog]

DECO7180 Week6 Journal

Process of group website:

After the presentation in the contact, we got two feedbacks from tutors.

1.Consider location based visualization of Twitter posts near libraries. 2.Consider local events near local libraries.

(Group’s Summary)

These points were taken into consideration and the responses are recorded below:

Twitter Visualization Our initial idea for incorporating the Twitter API was to simply include a Twitter feed for specific libraries. While this does add additional content for the user to view, it is rather static and uninteresting. During the presentation it was suggested to us that the Twitter API could be incorporated in a much more interesting and efficient way. For example, it would be more interactive to display the moments from Twitter dynamically on the map instead of on a fixed page. This concept is much more interesting and we have already begun incorporating it into the application design:

Some preliminary research has been done on how we can incorporate the Twitter API (such as thinking about accounts, hashtags and location) but much more research is needed before we can fully implement the concept.

Local Events The reason we initially included the idea of using Twitter was primarily so that tweets would keep people up to date on what’s happening at the library. However, this is very limited. It would be much better to incorporate information about local events that are happening at and around libraries into the application. This would add an extra dimension to the application and would make it much more dynamic. Unfortunately, due to time constraints, we have not been able to explore this concept yet. It should be achievable but will potentially require an additional API or dataset to be used. At this stage, the displaying on local events will be a desirable that we will look at incorporating if we get the time.

It’s lucky to work with my group members because every one of us has different skills to build a website. And I found it is totally different from working as an individual. During the group meeting, we discussed our thoughts about the project. We got a lot of inspirations from other members because different people think things in different ways. The brainstorm helped us to generate creative ideas. We communicate with each other by using Messager and holding the group meetings. It was very productive because we solved the problems according to the outlines and everyone in the group cooperated with others actively. We finalized our concept and functions of the website in one hour. We also use Google Drive to cooperate together in writing the report of the project or PowerPoint of the group presentation. It is very convenient for us to see the process of our project.

In the workshop, tutor started to teach us how to use PHP .

1. How to write functions in PHP

I searched the functionality of it.

PHP User Defined Functions(https://www.w3schools.com/php/php_functions.asp)

Besides the built-in PHP functions, we can create our own functions.

A function is a block of statements that can be used repeatedly in a program.

A function will not execute immediately when a page loads.

A function will be executed by a call to the function.

2.How to use built-in function-date()

Definition and Usage

The date() function formats a local date and time, and returns the formatted date string.

Required. Specifies the format of the outputted date string. The following characters can be used(https://www.w3schools.com/php/func_date_date.asp):

d - The day of the month (from 01 to 31)

D - A textual representation of a day (three letters)

j - The day of the month without leading zeros (1 to 31)

l (lowercase 'L') - A full textual representation of a day

N - The ISO-8601 numeric representation of a day (1 for Monday, 7 for Sunday)

S - The English ordinal suffix for the day of the month (2 characters st, nd, rd or th. Works well with j)

w - A numeric representation of the day (0 for Sunday, 6 for Saturday)

z - The day of the year (from 0 through 365)

W - The ISO-8601 week number of year (weeks starting on Monday)

F - A full textual representation of a month (January through December)

m - A numeric representation of a month (from 01 to 12)

M - A short textual representation of a month (three letters)

n - A numeric representation of a month, without leading zeros (1 to 12)

t - The number of days in the given month

L - Whether it's a leap year (1 if it is a leap year, 0 otherwise)

o - The ISO-8601 year number

Y - A four digit representation of a year

y - A two digit representation of a year

a - Lowercase am or pm

A - Uppercase AM or PM

B - Swatch Internet time (000 to 999)

g - 12-hour format of an hour (1 to 12)

G - 24-hour format of an hour (0 to 23)

h - 12-hour format of an hour (01 to 12)

H - 24-hour format of an hour (00 to 23)

i - Minutes with leading zeros (00 to 59)

s - Seconds, with leading zeros (00 to 59)

u - Microseconds (added in PHP 5.2.2)

e - The timezone identifier (Examples: UTC, GMT, Atlantic/Azores)

I (capital i) - Whether the date is in daylights savings time (1 if Daylight Savings Time, 0 otherwise)

O - Difference to Greenwich time (GMT) in hours (Example: +0100)

P - Difference to Greenwich time (GMT) in hours:minutes (added in PHP 5.1.3)

T - Timezone abbreviations (Examples: EST, MDT)

Z - Timezone offset in seconds. The offset for timezones west of UTC is negative (-43200 to 50400)

c - The ISO-8601 date (e.g. 2013-05-05T16:34:42+00:00)

r - The RFC 2822 formatted date (e.g. Fri, 12 Apr 2013 12:01:05 +0200)

U - The seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)

[weijunzhao-blog]

DECO7180 Week5

This week, our group held group meeting for twice to discuss the allocation of the tasks. One of our group members were absent at contact class on Tuesday,so we had to hold another meeting after class to confirm details about our concept of the website.

We finalized the concept by combining our ideas together and discussed the feasibility of the final concept. We intend to build a website that can help users to find the ideal library in Queensland by selecting opening hours, Wi-Fi access and distance. 

At first, we were confused that google map can also show the detailed information of the libraries, why we try to design the similar application. After refining the function of the library website, we suppose that the searching system of this website is the most useful part which is not included in the google map. 

And we also add the function called ‘ Favorites’ for users to add the regularly visited libraries. We also did some researches to find some application that could give us inspiration. 

Apart from the audience, we also confirmed where people can use this website, how to use it, the skills required, anticipated age and educational level of users and user expectations.

Where As the application contains data about libraries within Queensland, the targeted audience are people either living in or traveling through Queensland.

How Users can set their city to see the available libraries around them in the homepage and search their requirements in the searching system. The website will show the detailed information about these libraries and users can see the moments from Twitter on the map. They can also use the route suggest to navigate to a chosen library.

Skills The application requires some basic skills and web knowledge: users need to know how to surf the internet, browse the website and use a mobile application.

Age and Educational Level As the subject matter of the application is libraries, the application is targeting people who are currently studying (this is can be high-school teenagers, undergraduates, postgraduates) or other adults who are well educated.

User Expectations The application will be made so that it satisfies the user's’ expectations. The users will expect to know the address, opening hours and services in the library. Some of them may be interested in the comments about the library from other visitors. Additionally, they might want to know how to get to a library. Other users may expect that they can edit the library in the favorites, such as adding or removing the regularly visited libraries.

Background Research

Functionality:  1.Find Bikes 2. Route Suggestions

This application’s concept is very similar to ours. It helps people to find bikes around them and provides route suggestions.Our website is aimed at searching the ideal libraries for people and guide them to the libraries.

Google Map

We can use the API from Google Map to realize the function of route suggestions and comments about the libraries in it can also be showed on our website to make users know more about the library.

Difference from existing work

Dataset : Accessible libraries only. Design : Better UI and better UX. Functionality : Special libraries searching and other functions.

Our group’s plan and task allocation

[weijunzhao-blog]

DECO7180 Week4

My presentation of the poster goes on smoothly. I spent 3 minutes to introduce my concept to others. I intend to do a ‘Library Guide’ to help people to find an ideal library for those who love reading, want to study in the quiet places, want to do some researches or just want to enjoy their leisure time. Some other students’ concepts are similar to me. Many of us want to utilize the API of google map to realize our concept. So I believe many of the audience might think my concept is valuable and practical. Compared to other concepts，I find that I can make some improvements. Maybe I can make the function more interesting or create more interactions with users.For example, I can add some functions like providing cafes or restaurants which are around libraries. Because many people would stay at the library for a long time. Some of them may want to have a cup of coffee or have meals for a break. But in general, I think my concept is feasible and valuable.

One concept from others I want to talk about is called ‘History Cycling’. It is a website designed to introduce the culture background of a city to those who may have interests in it, such as fitness enthusiasts, teenagers and tourists. I think it is an interesting idea that can help people to find a new way to know the history of the city. However, in my view this concept is nor very relative to the data from SLQ,. The data provided in SLQ cannot help it to be realized.   Another concept I want to discuss is named ‘Easy Life’ which uses data from ‘Digitized Maps’ in SLQ. It allows people to get information of different categories they are searching for, such as restaurants, hotels, etc. Users can get recommendations from this website and set the routes to there. I think it is an excellent website that can provide lots of help to users. However, I think the design of the interface need to be improved and I think more services can be added to its function.

This week, I started to learn some basic knowledge about jQuery. Here are some notes I made on my own time.

I learned jQuery syntax, selector and event methods.

I also learned some commonly used DOM events.

[weijunzhao-blog]

DECO7180 Week 3 Journal

The changes of my website’s concept:

My previous ideas about the data was to make a music match game website by using the data from Music Queensland. However, I find that the resources in the data website are only some text introduction and music score of songs about QLS.They are not audios of songs. They are totally different from what I imagined. So I changed my idea to make something practical. I find the data in Queensland public libraries includes addresses and geotags. It also provides information about main libraries and branch libraries, opening hours, contact details and additional services provided, such as wi-fi access. So I think I can use these information to build a website for people to find an ideal library.

The target audience of this library is people who are unfamiliar with the neighborhood but want to find a library around them to use Wi-Fi or other library services. 1. Students: People looking for a quiet place or learning atmosphere to study in that also provides access to Wi-Fi and books. 2. Travellers: People looking for a free, quiet place that provides Wi-Fi and other services which is also a landmark of the city. 3. Scholars: People interested in libraries and library resources who want to consult some literature resources or do researches. 4. Locals: People looking to spend their leisure time in the library and keep up to date on what’s happening at their local library.

It is necessary to browse a lot of resources as an individual researcher, which is really helpful to generate an excellent idea. This week I learnt how to utilize the data in the data.gov.au. For example, I learnt how to use json to see what detailed information of different topics the website provides. Although we do our projects individually, we still need to talk to others to exchange our thoughts. The poster is the first program which is related to data that I do individually. Without the cooperation of others, it is a little difficult for me to do the design by using the data merely, but it is also a good chance for me to think critically and improve the ability of researching resources. In the past, I used to refer to some successful cases by browsing some websites such as pinterest and dribbble. And I would search some excellent designs that are related to my projects.

 In addition, I would also read news or documents to evaluate whether the project I wanted to design was valuable or did someone do this project before. From this, I can know the feasibility of my ideas. What’s more, I used to search some users’ comments about the project, which could show me what aspect users wanted to improve desperately, so that I could set this as a starting point of my program. In my view, I believe the last method worked best because it was relative to user need directly. When you know more about users’ thoughts and direction of what you want to do, you will succeed more easily.

This week, I learned some knowledge about CSS ID and Class in my own time after class . The image is the notes I made.

Tutor taught us how to add a loading page to the website in the workshop. So I can also add a loading page to my website.(The resources of loading gif: https://loading.io/)

1.I learned how to set the style of loading page and use a gif image to be the loading elements.

2. I was confused about the attribute of “display”,so I searched the property values of it.(https://www.w3schools.com/cssref/pr_class_display.asp)

3. I searched the functionality of CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.Example: Mouse over the element below to see a CSS3 transition effect.(https://www.w3schools.com/css/css3_transitions.asp)

4. Set the style of loading page.

Hide the loading gif when it is loaded.

[weijunzhao-blog]

DECO7180 Week2  Opportunities and challenges

In the next 2 weeks, there may be many challenges for me. At first, I need to identify the feasibility of each idea in different aspects and then choose the best of them to generate some deep thoughts of the project. I need to look for more detailed information about the data in data.gov.au to see if these data can be used in the website I imagine.What’s more, I have never learnt programming languages before, so how to use code would be a little difficult for me. It is the skill that I want to get.  I need to learn PHP,HTML and CSS. There are also many opportunities for me to keep my project going smoothly. For example, the resource in the ‘data.gov.au’ is abundant, so it can meet my needs to provide some key data for my web page.In addition, I have three-year experience of design, so it would be easy for me to make the web interface that I want.

The knowledge I learned in the workshop this week

This week, I started to learn the basic knowledge about PHP by myself. Images below are some notes I made.This week,I learned about PHP Syntax,Variables,Echo/Print,Data types and PHP Strings.

In this week’s workshop,I learned some knowledge about filtering.

1.I searched the function of "console.log();" and found that it is a kind of  JavaScript output.

JavaScript Display Possibilities(Reference: https://www.w3schools.com/js/js_output.asp)

JavaScript can "display" data in different ways:

Writing into an HTML element, using innerHTML.

Writing into the HTML output using document.write().

Writing into an alert box, using window.alert().

Writing into the browser console, using console.log().

2. In the simple.html file, it taught us how to write function in <script> and I searched the syntax of  JS function.(https://www.w3schools.com/js/js_functions.asp)

3. I searched the function of .each() in JQuery.(https://api.jquery.com/each/)

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

4. I learned how to use ”if..else if ...else “ statement in the function.(https://www.w3schools.com/js/js_if_else.asp)

5. Learned the logical operators in JavaScript.(https://www.w3schools.com/js/js_comparisons.asp)

6. In this part,many knowledge about JQuery can be learnt.

(1)Definition and usage of ready()

The ready event occurs when the DOM (document object model) has been loaded.

Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above.

The ready() method specifies what happens when a ready event occurs.

Tip: The ready() method should not be used together with <body onload="">.

(2) JSON.parse(data);

A common use of JSON is to exchange data to/from a web server.When receiving data from a web server, the data is always a string.Parse the data with JSON.parse(), and the data becomes a JavaScript object.(https://www.w3schools.com/js/js_json_parse.asp)

(3)Definition and usage of ajax();

Definition and UsageThe ajax() method is used to perform an AJAX (asynchronous HTTP) request.All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.(https://www.w3schools.com/jquery/ajax_ajax.asp)

(4)What is JSONP?

JSONP stands for JSON with Padding.

Requesting a file from another domain can cause problems, due to cross-domain policy.Requesting an external script from another domain does not have this problem.JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.(https://www.w3schools.com/js/js_json_jsonp.asp)

7. Add a filtering function and set the style of filter

JQuery keyup() Method

Definition and Usage

The order of events related to the keyup event: 

keydown - The key is on its way down

keypress - The key is pressed down

keyup - The key is released

The keyup event occurs when a keyboard key is released.

The keyup() method triggers the keyup event, or attaches a function to run when a keyup event occurs.

Tip: Use the event.which property to return which key was pressed.(https://www.w3schools.com/jquery/event_keyup.asp)

[weijunzhao-blog]

DECO7180 Week 2 Advantages of group discussion for brainstorming

When I studied at the university in my country, we did not have many group discussions in the classes. Most students just learned knowledge and did homework on their own.So I think group discussions will be fresh experience for me.

I think group discussions can help me to come up with new ideas more easily. In this week’s contact, everyone in the group considered their own thoughts and then wrote them down to be classified.  When I listened to the explanation of their thoughts, I would get new inspirations to polish my thoughts. In addition, after showing my ideas, I could also get some suggestions from my group members. On one hand, I believe group discussion is a good way to conduct brainstorming which enables me to exercise individual thinking. On the other hand, it can also be quite helpful for group members to learn from each other and constantly improve their own ideas. Different people think in different ways, so the brainstorming will encourage group members to generate different ideas covering different fields.

[weijunzhao-blog]

DECO7180 Week 2 ideals

[weijunzhao-blog]

DECO7180 Week1 Journal

• Based on what I know of this course, I expect to be designing excellent and innovative websites or mobile applications with my group members this semester. I  • I want to learn how to design good user interface with creative thoughts to achieve users’ goals, and experience the teamwork to solve different kinds problems during the process of designing. • I’m worried about using code to build a website, because I have never learnt any programming language before and I think it would be a little difficult for me.Maybe I need to make a detailed schedule of learning PHP, HTML and CSS. • I hope that I can learn some programming languages and get more chances to learn professional knowledge about how to build a well-designed website or mobile application this semester. I want to know how to make a paper prototype or digital prototype in this semester. • What are your expectations for this course? I hope that after learning this course, I can complete a excellent project which is related to web design or mobile application design before the end of this semester and I would like to get more chances to cooperate with other students in this course because I believe teamwork sometimes can stimulate people’s potential and working with others is also a essential social skill.