Trade show

The last presentation commenced at 1pm 29 October. Each group has brought their final product to the session and every one had a chance to experience all the products in this course.














After weeks of designing and building, our project "Web Historian" was finally fully functioned and ready to be tried out by our tutors and colleagues. As the project information was covered in previous posts and the portfolio, this post would focus on briefly going through each other group's project.

Atlantis

Atlantis is an online application which showed the ship wrecks information around Australia. With the data retrieving from Trove, Atlantis had a rich content of the wrecked ship record stored in their database. They also used the Google Map widget, which had all the ship wrecks shown on the map. Atlantis's graphic design was really impressive. From the colour theme to the animation, everything has been put together very well and the app is pleasant to use or look at.

Pinboard

Pinboard is an online sharing app with the ability to pin the interesting contents from Trove to a personal "board". The customisable level of the content on the board is really high, users were allowed to find contents on the Trove from an embedded search engine, and place the contents on an opening space as a sticker on a board. I like the way they have made sure everything is functioned and the board is really useful to the users.

True Detective

This is an online game containing rich historic content. The main gameplay is to escape from a locked room. While finding where the key was required users to read information at different objects in the room to collect clues. All the objects and clues had actual historic background story, which were retrieved from Trove. The game is informative and fun.

Findamals

This is my favourite project among other group's works. Findamals is a game that aims to teach childrens the knowledge of animals in Australia. The gameplay feels really like Pokemon, where the main character would walk on the map, encounter different animals. The "battle system" is to answer a certain question regarding the animal that character met. If the answer was right, a badge would be added into user's inventory. With the combination of adventure game, battling system and achievement system, Findamals is very stand out. I really like this game and I think it has a potential to develop further.

Make the Css editor works

After examining the javascript codes of current version of editor, I found out that the functionality of the editor was referred from an online open-source editor called "Ace Editor". Ace editor is a standalone code editor written in JavaScript. The goal is to create a web-based code editor that matches and extends the features, usability, and performance of existing native editors.

Only the HTML code would be recognised by the current function, and there was a updatePreview function to transfer the content on the editor to the preview window. Specifically, the function would input the code on the HTML box as the "Body" part of the preview box. See codes below:

  function updatePreview () {  
   var editorContent = aceEditor.getSession().getValue();  
   $preview.contents().find('body').html(editorContent);  
  }  

Below is the function of setting up the html editor:

 (function (){  
  var $editorContainer = $('.news-item-container'),  
    $html_editor = $('#editor'),  
    //added a new variable as the css editor  
    $css_editor = $('#csseditor'),  
    $preview = $('#preview'),  
    aceEditor,  
       aceEditorCss,  
    resizable = true,  
    testMarkupCss="";  
 function setupEditor () {  
   aceEditor = ace.edit("editor");  
   aceEditor.setShowPrintMargin(false);  
   aceEditor.getSession().setUseWorker(false);  
   aceEditor.getSession().setMode("ace/mode/html");  
   aceEditor.getSession().on('change', updatePreview);  
   aceEditor.setValue(testMarkup);  
  }  

To make the css editor works, I recreate another editor using the same formatted function of existing HTML editor. However, CSS languages were set up for letting the ACE editor recognise and generate the suitable editor for the editing. Codes below:

 function setupCssEditor () {  
       aceEditorCss = ace.edit("csseditor");  
   aceEditorCss.setShowPrintMargin(false);  
   aceEditorCss.getSession().setUseWorker(false);  
   aceEditorCss.getSession().setMode("ace/mode/css");  
   aceEditorCss.getSession().on('change', updateCssPreview);  
   aceEditorCss.setValue(testMarkupCss);  
   aceEditorCss.getSession().setUseWrapMode(true);  
  }  

To make the css function to work for the preview box. As the previous html editor has been occupied the "body" part of the preview section, the css content would then be put into the "head" part of the preview section, codes below:

 function updateCssPreview () {  
       var editorContent = aceEditorCss.getSession().getValue();  
       $preview.contents().find('head').html(editorContent);  
  }  

Because of the characteristic of css content, putting them into the head part of page would still make the styling functioned for the page. After adding an opening and closing tag in the css window, the styling works for the preview page instantly!

Project in progress (working panel)

Working panel

Based on the style guide of wireframe, the main parts of the working panel page includes HTML editor, CSS editor, Validator (error box) and a preview page. The source code of the HTML editor is referenced from the online work by rio206 on CodePen (http://codepen.io/rlo206/pen/ClEti). The reference was added inside the html files of the page.

Screenshot of the Pen made by rio206

As the editor only contains the HTML editor along with the preview. An extra CSS editor is still required. However, the inline css would still work for current version of the editor, so although the css editor might still need more time to make, at least in the next week's demonstration, we could use the website with inline style to be shown in the preview page.


To amend the editor to be consistent with the style of whole web site. Changes are required mainly in the CSS file. The "Editor Control" section was completely removed, as the options of "bold", "italic" and "underline" for the text are not that necessary for a code editor.


A CSS dummy editor was made beneath the functional HTML box.

Based on the feedback on paper prototyping, the Save and Public buttons are moved to the button (more sensible to the work flow). Also, a Help button was added into the page for allowing users find out useful instructions.

The finished page screenshot (without title bar) :

To do next:
- Make the CSS editor functional
- Adding the title bar using Bootstrap (to be consistent with other page)

Paper prototype feedback (also posted in the team blog)

Landing Page
1. Too much text to read for the construction.  -Could consider using flow chart or combination of pictures
2. The "Sign in" and "Login" button should be more distinguishable (separated?) and more informative to users what the difference is.


Home page
1. More instructions to tell the user what they should do (e.g. What's the difference of Hand and Easy;)
2. Emphasise the category tags, letting users choose among different topics
3. Whether to show the current works if users have already signed up and made some edit
4. More pages for different topics?

Editing page
1. More objective-orientated that users should know what to achieve (e.g. the total number of errors,  etc)
2. Layout of the page should be changed to follow the sequence of the work (e.g. errors 1st, editor 2nd, "Save" and "Publish" 3rd)
3. Change "Publish" to "Save & Publish" or a popped up windows with confirmation
4. Consistent navigation bar, allow users to navigate to different page.
5. Layout of the editor (customisable? switchable tags?)
6. Users are allowed to add name to their works
7. Any hint to users if they have solved all the errors
8. Users are only required to edit on page (no hyperlink include)
9. Inline CSS or separated stylesheet

My Restoring
1. The way of presenting: follow the format of "Gallery" or "Homepage"
2. Process recording presents as number counter instead of percentage bar.
3. Name of the works: customised name instead of numbers


Gallery
1. The work shown in Gallery would list its author
2. Develop presenting style as light box


Others
1. Do we need to make a profile setting page and a separated instruction page ("Help")
2. Logo position, Logo consistency.
3. To import the website (index) with only one stylesheet, by restricting the year range.



By Felix
Thanks

Research of users behaviour

The research of Sansone, etc. (2011) indicated that the learning the potential use of learning material in real life could turn “unmotivated” students into “motivated” ones. The further study of the very researchers found out that the pre-existing interest in computers would influence the activeness of students, especially when what they were learning would be explicitly related to the real life usage. Based on the above research findings, our application would present those real world websites that “aged well” and make our target audience act as a real website developer to improve or amend these aged websites. Because these websites were once (or still) being running on the internet, learners would be motivated by these real world events and be interested during the problem-solving process.

As to the concern of the learning effectiveness and potential challenge of our application, more researches were taken towards this direction. Liang and Chen (2012) pointed out the challenge faced by online learning, which could be summarised as the quality, commitment and copyright. It is important to define how much our target audience would be expected to learn from our application and whether the form of learning would indeed enhance their skills in the HTML/CSS learning. Also, the website we are using as the learning material for the students should be stick to those archived websites with public API calls offered.

The study by AlHamad, etc. found out the online programming learning, specifically “web programming” could act as a strong enhancement for the traditional face-to-face tutoring method. Related research study also proved the hybrid method of leaning programming (online and traditional) is more effective than the traditional learning for offering students use their cognitive strategies and relevant conceptual knowledge in the programming language context (Cakiroglu, 2013). Our application is aimed to act as a support of traditional HTML/CSS language learning by providing real-world based issue and motivated tasks.

Reference: 

AlHamad, A. Q.,& Al Qawasmi, K. I., 2014, Key factors in determining students’ satisfaction in

online learning based on ‘web programming’ course within Zarqa University, International

Journal of Global Business, 7(1), 7-14, url

http://search.proquest.com.ezproxy.library.uq.edu.au/docview/1562782393?accountid=

14723

Cakiroglu, U., 2013, Using a hybrid approach to facilitate learning introductory programming, The

Journal of Educational Technology, 12(1), 161-177

Liang, R., & Chen, D, V., 2012, Online Learning: Trends, Potential and Challenges, Creative

Education, 3(8), 1332-1335, DOI:10.4236/ce.2012.38195

Sansone, C., Fraughton, T., Zachary, J. L., Butner, J., & Heiner, C., 2011, Self-Regulation of

motivation when learning online: the importance of who, why and how, Educational

Technology Research and Development, 59(2), 199-212, DOI:

10.1007/s11423-011-9193-6

6 Thinking Hats

Six Thinking Hats system is introduced by Dr Edward de Bono which shows six different thinking styles. This system could be useful within a group work, as members with different thinking hats could maximum the efficiency and effectiveness of the group. Definition for each thinking hat is shown below (retrieved from http://www.debonothinkingsystems.com/tools/6hats.htm)

When the system is brought into group work. The Blue Hat thinking should be firstly conducted as the group could identify the problem and set the goal of the project. The next step should be the Red Hat gathering opinions and feelings of the group member toward the problem. The Yellow and Green Hat are for the brainstorming and generating possible solution for the problem. The last step is involving both White Hat and Black Hat that White Hat would collect and develop the information gathered and Black Hat could do critical thinking toward the gathered information for optimising the result of the solution . 

Teamwork module

This team module was very thorough and insightful. By the first glance I found it excessive on a seemingly simple topic, but after looking up the whole content, it actually provided many useful information and even feedbacks on the problems regards of the teaming issue.

I have been through many teamwork projects during my study in university. While some of the experiences are pleasant, some are inevitably not much effective. By looking back at both these pleasant and unpleasant teamwork experiences, I could find some patterns on these opposite situations, which I would be identified later.

Personally, I found myself develop my skills during these process. On the first semester’s team project, I rarely interacted with other team members and just did what I was told without giving any opinion or suggestions. I think because of the communication barriers (language, culture, major expertise, etc.), I was diffident of the situation and did not think I was capable of giving any useful information. After the accumulation of my major knowledge and the improvement of my English speaking, I gradually gained confidence and eventually was able to lead the team project once. Therefore, I think it is important for a balanced team member contribution that every member had the same ability or different expertise. In other words, everyone could find a way to contribute or give opinions towards the ongoing project. Another situation I found myself in is that while the other team members are not that active and participating, some would be forced to take the leading role because of regarding the results of the project. I normally did not voluntarily choose to become a leader, but while the team formation made the final result be at risk, I would take the leading role to make sure the result did not become unacceptable. My most desired teamwork is that everyone could be actively participated into the process of project and there would not be a leader urging and supervising every detail during the process.

Last but not least, I would like to share my understanding of both effective teamwork and not-so-effective teamwork patterns.

Effective teamwork

• Everyone has same effort or different expertise to contribute to the project
• Everyone is actively involved in the process and constantly communicated with each other
• There is a clear record of the project process and an organised role before the implementing of the project

What I could do:

• Contributing my skills and giving opinions on the result of our combining efforts
• Follow the team schedule, attend the meeting, meet the deadline.
• Objectives are done progressively which permits adjustments and feedback from each member

Not-so-effective teamwork

• Most members are passively participated ad lack of required skills
• No team schedule and everything was dumped to the document a few days before the deadline
• Some members would be absent to the meetings and only showed up a few days before the deadline
• Lack of communication between the members

What I could do:

• Take the leading role if necessary
• Organising the steps of implementing the project and let others to pick their role and choose what to contribute