CLIO Developer Guide

From CLIO

Overview

Developers code the CLIO activities, create or modify activity types, and provide insights into technology integration.

Preparation

Creating a Local Development Environment


CLIO is a web-based application, which means that it needs to be developed on your local machine using a Local Web Development Environment (LWDE).  There are many free and open-source Local Web Development Environments available, which quickly create a local web server with all of the required tools. These software packages can also be used to quickly create kiosks.

Installation

Label important.png


CLIO needs to be installed on a web server.  There is no setup process for databases, meaning that the CLIO web application files can be dragged directly to the applicable web server folder and accessed without installation. 

Accessing CLIO

Once CLIO has been installed on your web server, you can access it through your web browser. For local web development, you can navigate to http://localhost/ or http://127.0.0.1/.

Coding an Activity

Label important.png

Activities are created through easily customizable activity templates, called Activity Types. You can make your own, or utilize the ones that are provided. The CLIO web application suite comes pre-installed with seventeen Activity Types that are designed specifically for use in an informal education or exhibit context. We provide word processor templates to assist with collaboration during the development and drafting process, but they need to be coded and stored as JSON files for use within CLIO. Each activity type contains it's own guide for coding activity content, along with the appropriate template.

Activity Types

Creating an Activity Type

Imbox style.png

Using Integrated Libraries

Imbox style.png

Using CLIO Functions

Label important.png
Imbox style.png

Integrating a JavaScript Library

Imbox style.png


Framework

Understanding the URL Scheme

Imbox style.png

Understanding the 'content' Folder

Imbox style.png

Understanding an Activity Configuration File

Imbox style.png

Understanding the Look Closer Content System

Imbox style.png

Understanding the Rich Text Markup System

Imbox style.png

Controlling Hardware

Imbox style.png