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

Pre-project records

Week 3

5 ideas were brought to the workshop and discussed with the course colleagues.
(*5 ideas drafts are written on the notebook, would be uploaded a scanned version lately)

After sharing my ideas in two different groups, 2 of my 5 ideas were proved to be potentially interested to become an actual project. 2 ideas are "Find those birds" and "Fashion trend". 

I also found other member's interesting ideas, including detective games, recipe finder, a Jurassic Park related database, etc. Apart from focusing on the interesting elements,  everyone was also concerned about the feasibility of the idea, which is also the most-concerned question during the sharing of ideas. 

I determined my presented project to be "Find those birds", which was similar to the app done by previous groups "Natural disasters". The idea is to show the bird distribution on map within Australia and provide detailed information about each species, including images and videos. The information is expected to require from Trove and another ongoing nationwide bird observation project called "Atlas Birdata". Presented poster is shown as followed: 

Week 4

The idea showcase was held on the workshop this week. 

Every one was given three notes to vote for other projects as their preferred project. I really like the web validator idea on the aged website and also glad to see the idea with same direction as mine "Wrecked ship". 

I was distributed to the group doing idea "Restoring the web" based on my vote of preference. The team members are Lilly, Lyndon and Rena. After the efficient first meeting, we have set up team blogs, team Github and team Facebook group. I was in charge of the front end build-up and everyone was given a week to research regards of their role in the team. The plan is to find some existing website with html/css editor with the instant and live preview effects.