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 .