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!