Final Progress Post
Title of Primary Project Output: VISHISTORY: A web-based editor and presentation tool for students to create an interactive visual portfolio-piece based on their history (or other) project work. A picture says a thousand words and creating a visual display that will hold a large amount of content (a mini-website) is a difficult task for many students. The object of this project is to provide a means for students (or staff) to create a presentation based on a single uploaded image with superimposed markers that offer pop-up windows to give more detailed information on certain topics. The resultant display is downloadable as a .zip file and can be viewed off-line in a browser, or incorporated into a web-page.
Screenshots of prototype:
Before clicking marker
The first screenshot shows a demo before any of the markers are clicked. The user has uploaded a background image and clicked on it to add markers then dragged the markers into position (try it on the demo editor, step 4).
If the markers are not wanted they can be dragged off to the left and will be deleted when marker positions are saved.
In the editor (step 5) markers are clicked on and a pop-up window allows the user to enter text and other HTML (using CKEditor).
The editor then has a preview mode (step 6) so that the finished design can be seen. In this view the markers when clicked display the contents of the pop-up windows.
Pop-up window display
Clicking on the more>> tab on the pop-up window allows the user to be guided to another more detailed page in a new browser window. Information for this demo was taken from Wikipedia as a ready source of information.
Finally after the preview is accepted, a .zip archive containing all of the files needed for the presentation can be downloaded.
One feature that is being built in to the VISHISTORY project is the ability to play video or audio recordings from the pop-up or further information windows. This will be useful when recordings of oral history have been made and is one of the most wanted items for future development.
Screenshot of Friargate project
The final demo screenshot is of a Google maps application using similar technology but relying on the google api. Less work has been done on this demo as it is specific to map-based projects and works on similar principles to the MIT simile widgets project (although a fair degree of technical competence is required to create displays using Exhibit - the simile display tool. Click and add google maps can also be made using Click2map which is an excellent tool (but displays advertising on the maps) we came across during this project. It is our aim to extend the VISHISTORY editor to allow a googlemaps background to be used instead of an uploaded image.
Description of Prototype: The editor software enables a user to upload an “background” image, add markers of their choice (dragged into position) and edit pop-up windows attached to the markers creating an interactive display. The editor will produce a zip archive of all the files needed to create the interactive display which can be downloaded by the user. The interactive display uses JSON and javascript technology and will work offline as well as online providing a long-lived and readily accessible display of the students’ work.
iPhone App – as part of the project we looked at the development of iPhone Apps with Google Map capabilities. The JISCRI project allowed us to create 2 Apps – one in collaboration with Preston City Council which is a trail of historic buildings in Preston (Blue Plaques) and includes an audio tour.
The second called History Trails is an app that loads projects and marker locations from an xml file and links to an html file with photos and detailed text on the trail. The benefit of this App to the JISC community is that any number of projects with their own Google Map location points can be added by editing and creating new .xml files.
Links to working prototypes:
Demonstration 1 – Mount Rushmore Presidents, http://79.170.43.15/visualhistory.org.uk/googlemaps/jqedit/rushmoreDemo.html
Demonstration 2 – Museum floorplan, http://79.170.43.15/visualhistory.org.uk/googlemaps/jqedit/museumDemo.html
Demonstration 3 – GoogleMaps example, http://79.170.43.15/visualhistory.org.uk/googlemaps/geomap20/geomap20.htm
Demonstration 4 – The Editor, http://79.170.43.15/visualhistory.org.uk/googlemaps/jqedit/ed01.php
Demonstration 5 – Updated Editor, http://79.170.43.15/visualhistory.org.uk/googlemaps/test/ed00.php This version allows you to register, and create up to 5 new projects as students would be able to in a multi-user system.
Demonstration 6 – Blue Plaques iPhone App, http://itunes.apple.com/gb/app/blueplaques/id351336702?mt=8
Demonstration 7 – History Trail iPhone App, http://itunes.apple.com/gb/app/history-trails/id354985482?mt=8
Link to end user documentation: http://code.google.com/p/vishistory/
Link to code repository or API: http://code.google.com/p/vishistory/
Link to technical documentation: http://code.google.com/p/vishistory/
Date prototype was launched: 30/11/2009
Project Team Names, Emails and Organisations: Phil Holifield, pholifield@uclan.ac.uk – project manager; Steve Caunce, sacaunce@uclan.ac.uk – Historian; Barbara McManus, bmcmanus@uclan.ac.uk – HCI expert; Mike Cottam, macottam@uclan.ac.uk – Senior Developer; Dongjie Xu, dxu@uclan.ac.uk – Developer. All from University of Central Lancashire, Preston, UK – www.uclan.ac.uk
Project Website: http://www.uclan.ac.uk/ahss/visual_history.php all demos can be seen at http://79.170.43.15/visualhistory.org.uk/googlemaps/demos/index.html
PIMS entry: https://pims.jisc.ac.uk/projects/view/1356
Table of Content for Project Posts
User evaluation: Users trialling content managed system , Developing the User Case
Project evaluation: SWOT analysis
Technical Standards Googlemaps API and JQuery , First Demo site
Issues in day-to-day work: Day to Day
Value Added: First Demo site , Final Post
